@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --panel: #f4e02e;
  --panel-text: #5a0019;
  --panel-title: #aB3a99;
  --button: #e0406a;
  --button-hover: #5a0019;
  --button-text: #fff6c9;
  --button-hover-text: #fff6c9;
  --button-shadow: #ffa900;
  
  --button-shadow-offset: 4px;
  --panel-text-weight: 450; /* Inter is variable: any value from 100 to 900 works */
  
  --character-height: 110px;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background-color: var(--panel-text);
  background-image: url("media/images/background_3840x2160.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  color: var(--panel-text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
}

/* Centers the card; leaves room above it for the characters */
.stage {
  min-height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.card {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin-top: 150px; /* space for ibb and obb */
}

/* Characters stand exactly on top of the panel */
.character {
  position: absolute;
  bottom: 100%;
  height: var(--character-height);
  aspect-ratio: 340 / 500;
  z-index: 0;
  pointer-events: none;
}

/* Shadows sit directly below each character, overlapping the top of the panel.
   Same scale as the characters (shadow.png is 340x100, characters 340x500). */
.shadow {
  position: absolute;
  top: 0;
  height: calc(var(--character-height) * 100 / 500);
  aspect-ratio: 340 / 100;
  z-index: 2;
  pointer-events: none;
}

/* The images are set here, desktop only, so mobile never downloads them */
.character,
.shadow {
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

@media (min-width: 601px) {
  .character-ibb { background-image: url("media/images/ibb.png"); }
  .character-obb { background-image: url("media/images/obb.png"); }
  .shadow        { background-image: url("media/images/shadow.png"); }
}

.character-ibb,
.shadow-ibb {
  left: 20%;
}

.character-obb,
.shadow-obb {
  right: 20%;
}

.panel {
  position: relative;
  z-index: 1;
  padding: 2.7rem 3rem 3rem;
  background: var(--panel);
  color: var(--panel-text);
  font-weight: var(--panel-text-weight);
  text-align: left;
}

h1 {
  margin: 0 0 1rem;
  font-size: 2.75rem;
  line-height: 1.1;
  color: var(--panel-title);
  
  /* Hidden for now: visually removed, still read by screen readers.
  Delete the lines below to show the title again. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

p {
  margin: 0 0 1rem;
  font-size: 1.0rem;
}

.links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin: 3rem 0 0;
  padding: 0;
  text-align: center;
  list-style: none;
}

.links a {
  display: block;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  background: var(--button);
  color: var(--button-text);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 var(--button-shadow-offset) 0 var(--button-shadow);
  transition: background-color 0.15s, color 0.15s, box-shadow 0.05s, transform 0.05s;
}

.links a:hover,
.links a:focus-visible {
  background: var(--button-hover);
  color: var(--button-hover-text);
}

/* Pressed: the button moves down by the shadow's length, so it covers the shadow */
.links a:active {
  transform: translateY(var(--button-shadow-offset));
  box-shadow: 0 0 0 var(--button-shadow);
}

.links a:focus-visible {
  outline: 3px solid var(--button-hover);
  outline-offset: 3px;
}

/* These only exist on mobile (see the media query below) */
.mobile-hero,
.peek {
  display: none;
}

/* Mobile layout. Keep this at the end of the file so it overrides the rules above.
   - no desktop background; the page is black, which only shows when overscrolling past the panel
   - no characters or shadows; a mobile image sits directly above the panel instead
   - the panel uses the full screen width and runs down to the very bottom of the page
   - ibb and obb peek up from the bottom edge */
@media (max-width: 600px) {
  :root {
    --peek-size: 130px;
    --panel-extra-bottom: 200px; /* makes the panel (and page) longer */
  }

  body {
    background-image: none;
    background-color: #000; /* only visible when overscrolling past the panel */
  }

  .stage {
    align-items: stretch; /* card fills the full page height */
  }

  .card {
    display: flex;
    flex-direction: column;
    max-width: none;
    margin-top: 0;
  }

  .panel {
    flex: 1; /* panel continues down to the bottom of the page */
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: calc(var(--peek-size) + 1rem + var(--panel-extra-bottom)); /* room for the peeking characters, plus extra length */
  }

  .peek {
    display: block;
    position: absolute;
    bottom: 0;
    z-index: 2; /* above the panel (z-index 1), otherwise the panel covers them */
    width: var(--peek-size);
    height: var(--peek-size);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
    pointer-events: none;
  }

  .peek-ibb {
    left: 15%;
    background-image: url("media/images/ibb_peek.png");
  }

  .peek-obb {
    right: 15%;
    background-image: url("media/images/obb_peek.png");
  }

  .character,
  .shadow {
    display: none;
  }

  .mobile-hero {
    display: block;
    width: 100%;
    aspect-ratio: 1430 / 1080;
    background: url("media/images/background_mobile_1430x1080.webp") center / cover no-repeat;
  }
}