@font-face { font-family: "Lilita One"; src: url("fonts/lilita-one.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Nunito Afterglow"; src: url("fonts/body.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Nunito Afterglow"; src: url("fonts/display.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  color-scheme: dark;
  --night: #121845;
  --dusk: #2a1b52;
  --plum: #5a1848;
  --ember: #e9786e;
  --glow: #ffb98a;
  --paper: #f7ecdc;
  --ink: #2a1f33;
  --text: #f4ecf6;
  --muted: #cbbfdc;
  --her: #ff7aa2;
  --her-deep: #c23a6c;
  --display: "Lilita One", "Nunito Afterglow", sans-serif;
  --hand: "Caveat", "Nunito Afterglow", cursive;
  --body: "Nunito Afterglow", "Nunito", "Segoe UI", system-ui, sans-serif;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --ease: cubic-bezier(.16, 1, .3, 1);
}
:root[data-her="aoi"] { --her: #56b8ff; --her-deep: #1f6fc4; }
:root[data-her="sumire"] { --her: #b79bff; --her-deep: #6a4cc9; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(120% 60% at 70% 100%, rgba(233, 120, 110, .35), transparent 60%),
    linear-gradient(180deg, var(--night) 0%, var(--dusk) 55%, #3b1d4f 100%);
  background-color: var(--night);
  color: var(--text);
  font: 600 1.0625rem/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--her); color: var(--night); }
a { color: inherit; text-decoration-color: var(--her); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--her); outline-offset: 3px; border-radius: 6px; }
img, video { display: block; max-width: 100%; }
html { scrollbar-color: var(--her-deep) var(--night); }

/* Hero: she is on stage first, the UI second. */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.stage { position: absolute; inset: 0; z-index: -1; }
.stage video, .stage img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 20%;
}
.stage .next { clip-path: circle(0px at var(--sx, 50%) var(--sy, 80%)); }
.stage .next.reveal { clip-path: circle(var(--sr, 150%) at var(--sx, 50%) var(--sy, 80%)); transition: clip-path 1.1s var(--ease); }
.stage::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(18, 24, 69, 0) 22%, rgba(18, 24, 69, .55) 42%, rgba(18, 24, 69, .88) 62%, var(--night) 100%);
}
/* Her light spilling past the stage: a blurred still of the same clip behind everything (desktop). */
.spill { display: none; }
.hero-copy {
  padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) clamp(1.5rem, 5vh, 3rem) max(var(--gutter), env(safe-area-inset-left, 0px));
  max-width: 34rem;
}
.title {
  margin: 0;
  font: 400 clamp(3.4rem, 15vw, 6rem)/.9 var(--display);
  letter-spacing: .01em;
  color: #ffeedb;
  -webkit-text-stroke: .09em var(--plum);
  paint-order: stroke fill;
  text-shadow: 0 .08em .25em rgba(30, 8, 40, .55);
}
.subtitle {
  margin: .1em 0 0 .15em;
  font: 700 clamp(2rem, 8vw, 2.9rem)/1 var(--hand);
  color: var(--her);
  transition: color .6s var(--ease);
  text-shadow: 0 2px 12px rgba(18, 24, 69, .8);
}
.hook { margin: .9rem 0 1.25rem; font-size: 1.12rem; color: var(--text); max-width: 26ch; text-wrap: balance; }

.ticket-cta {
  position: relative; display: inline-grid; place-items: center;
  grid-template-columns: 34% 1fr;
  width: min(100%, 18rem); aspect-ratio: 704 / 330;
  background: url("media/ticket-momo.webp") center / 100% 100% no-repeat;
  border: 0; padding: 0 1.1em 0 0;
  color: var(--her-deep);
  font: 400 1.25rem/1.1 var(--display);
  text-align: center; cursor: default;
  filter: drop-shadow(0 10px 18px rgba(10, 6, 30, .45));
  transform: rotate(-2deg);
}
.ticket-cta > span { grid-column: 2; }
.ticket-cta small { display: block; font: 700 1.15rem/1 var(--hand); color: var(--ink); opacity: .8; margin-bottom: .2rem; }

/* Who is on stage: each girl's own ticket from the game. */
.picker { display: flex; gap: .6rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.picker li { flex: 1 1 0; max-width: 6.2rem; }
.picker button {
  position: relative; width: 100%; aspect-ratio: 704 / 330; padding: 0;
  border: 0; background: center / contain no-repeat; cursor: pointer;
  filter: drop-shadow(0 6px 10px rgba(10, 6, 30, .5)) saturate(.55) brightness(.8);
  transform: translateY(0) rotate(var(--r, 0deg));
  transition: filter .4s var(--ease), transform .5s var(--ease);
}
.picker button:hover { filter: drop-shadow(0 8px 12px rgba(10, 6, 30, .5)) saturate(.9) brightness(.95); }
.picker button[aria-pressed="true"] { filter: drop-shadow(0 10px 16px rgba(10, 6, 30, .55)); transform: translateY(-.45rem) rotate(var(--r, 0deg)) scale(1.06); }
.picker span {
  position: absolute; left: 0; right: 0; bottom: -1.55rem;
  font: 700 1.25rem/1 var(--hand); color: var(--muted); text-align: center;
}
.picker button[aria-pressed="true"] span { color: #fff; }
.picker [data-her="momo"] { background-image: url("media/ticket-momo.webp"); --r: -3deg; }
.picker [data-her="aoi"] { background-image: url("media/ticket-aoi.webp"); --r: 2deg; }
.picker [data-her="sumire"] { background-image: url("media/ticket-sumire.webp"); --r: -1deg; }
.her-line { min-height: 3.4em; margin: 2.4rem 0 0; color: var(--muted); max-width: 30ch; }
.her-line b { color: #fff; font-weight: 800; }

/* Date sequence: the real screens, taped into her handbook. */
section { padding: clamp(4rem, 10vw, 7rem) var(--gutter); }
h2 {
  margin: 0 0 .6rem;
  font: 400 clamp(2.3rem, 7vw, 3.6rem)/1 var(--display);
  color: #ffeedb; -webkit-text-stroke: .06em var(--plum); paint-order: stroke fill;
  text-wrap: balance;
}
.lede { margin: 0 0 2.5rem; max-width: 36ch; color: var(--muted); font-size: 1.12rem; }
.date-strip {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(74vw, 17rem);
  gap: clamp(1.25rem, 4vw, 2.5rem);
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 1.5rem .5rem 2.5rem;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scrollbar-width: thin;
}
.shot { scroll-snap-align: center; margin: 0; position: relative; transform: rotate(var(--r, 0deg)); }
.shot:nth-child(1) { --r: -1.5deg; }
.shot:nth-child(2) { --r: 1.2deg; }
.shot:nth-child(3) { --r: -.6deg; }
.phone {
  border-radius: 1.6rem; overflow: hidden;
  border: .45rem solid #1a1430;
  box-shadow: 0 1.2rem 2.4rem rgba(8, 4, 24, .55), 0 0 0 1px rgba(255, 255, 255, .06);
  aspect-ratio: 9 / 16; background: #1a1430;
}
.phone img { width: 100%; height: 100%; object-fit: cover; }
.tape {
  position: absolute; top: -1rem; left: 50%; width: 6.5rem; height: 2.7rem;
  background: center / contain no-repeat; transform: translateX(-50%) rotate(-4deg); z-index: 1;
}
.tape.t1 { background-image: url("media/paper-tape-1.webp"); }
.tape.t2 { background-image: url("media/paper-tape-2.webp"); transform: translateX(-50%) rotate(5deg); }
.tape.t3 { background-image: url("media/paper-tape-3.webp"); }
.shot figcaption { margin-top: 1rem; font: 700 1.6rem/1.15 var(--hand); color: var(--glow); text-align: center; }

/* Memories: the win moments, playing like polaroids that remember. */
.memories { background: linear-gradient(180deg, transparent, rgba(90, 24, 72, .35) 40%, transparent); }
.polaroids { display: grid; grid-template-columns: 1fr; gap: 3rem; justify-items: center; }
.polaroid {
  margin: 0; width: min(80vw, 19rem); padding: .8rem .8rem 0;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 1rem 2.2rem rgba(8, 4, 24, .55);
  transform: rotate(var(--r, 0deg)); position: relative;
}
.polaroid:nth-child(1) { --r: -2.5deg; }
.polaroid:nth-child(2) { --r: 1.8deg; }
.polaroid:nth-child(3) { --r: -1deg; }
.polaroid video, .polaroid img { width: 100%; aspect-ratio: 9 / 13; object-fit: cover; object-position: 50% 25%; background: #2a1b52; }
.polaroid figcaption { padding: .55rem .2rem .8rem; font: 700 1.55rem/1.1 var(--hand); text-align: center; }

/* Close */
.close { text-align: center; padding-bottom: 3rem; }
.close .ticket-cta { margin: 1.5rem auto 0; }
.facts { margin: 2rem auto 0; max-width: 32ch; color: var(--muted); }
footer {
  padding: 2rem var(--gutter) calc(2rem + env(safe-area-inset-bottom, 0px));
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: center;
  color: var(--muted); font-size: .95rem; border-top: 1px solid rgba(255, 255, 255, .08);
}

/* Pause for the moving hero (WCAG 2.2.2). */
.pause {
  position: absolute; z-index: 2; top: calc(1rem + env(safe-area-inset-top, 0px)); right: max(1rem, env(safe-area-inset-right, 0px));
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(18, 24, 69, .55); color: #fff;
  box-shadow: 0 4px 12px rgba(8, 4, 24, .35);
}
.pause svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
.pause .i-play, .pause[aria-pressed="true"] .i-pause { display: none; }
.pause[aria-pressed="true"] .i-play { display: inline; }
.pause:hover { background: rgba(18, 24, 69, .8); }

@media (min-width: 900px) and (min-aspect-ratio: 1/1) {
  .hero { grid-template-columns: minmax(28rem, 1fr) minmax(0, 1fr); align-items: center; }
  .spill {
    display: block; position: absolute; inset: -8%; z-index: -2;
    background: center / cover no-repeat; filter: blur(48px) saturate(1.25) brightness(.5);
    transition: background-image .8s var(--ease);
  }
  .stage { left: auto; right: max(2vw, (50vw - 100svh * .5625) / 2); width: calc(100svh * .5625); }
  .stage video, .stage img { object-position: 50% 0; }
  .stage::after { background: linear-gradient(90deg, rgba(18, 24, 69, .55) 0%, transparent 18%, transparent 82%, rgba(18, 24, 69, .55) 100%), linear-gradient(180deg, transparent 78%, rgba(18, 24, 69, .9) 100%); }
  .hero-copy { padding-left: max(var(--gutter), 7vw); padding-bottom: 0; max-width: 40rem; }
  .title { font-size: clamp(5rem, 8vw, 6rem); }
  .subtitle { font-size: 3.3rem; }
  .hook { font-size: 1.4rem; }
  .ticket-cta { width: 24rem; font-size: 1.5rem; }
  .picker { gap: 1rem; }
  .picker li { max-width: 8.5rem; }
  .her-line { font-size: 1.15rem; }
  .date-strip { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); grid-auto-columns: auto; overflow: visible; max-width: 62rem; margin-inline: auto; }
  section > h2, section > .lede { max-width: 62rem; margin-inline: auto; }
  .lede { max-width: 62rem; }
  .polaroids { grid-template-columns: repeat(3, auto); justify-content: center; gap: 3.5rem; }
  .polaroid:nth-child(2) { margin-top: 3rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Privacy page */
.doc { max-width: 42rem; margin: 0 auto; padding: 3rem var(--gutter) 4rem; }
.doc h1 { font: 400 clamp(2.4rem, 8vw, 3.4rem)/1 var(--display); color: #ffeedb; -webkit-text-stroke: .06em var(--plum); paint-order: stroke fill; margin: 1.5rem 0 .3rem; }
.doc h2 { font-size: 1.6rem; margin-top: 2.2rem; }
.doc .meta { color: var(--muted); }
.doc li { margin-bottom: .5rem; }
.home-link { font: 700 1.5rem/1 var(--hand); color: var(--her); text-decoration: none; }