/* Yashvi: the film. The page is only a long track to scroll; the stage is pinned over it. Type is poster type:
   Lilita One with hard ink shadows, mono labels, and the odd handwritten line. */
:root {
  --ink: #1D1035; --cream: #FFF1D6; --cobalt: #1F4FE0; --magenta: #FF3EDB; --orange: #FF7A1A; --yellow: #FFC61A; --coral: #FF5A4E;
  --disp: "Lilita One", system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace; --text: "Geist", system-ui, sans-serif;
  --ease: cubic-bezier(.2, 1.4, .4, 1);
}
* { box-sizing: border-box; }
html { background: var(--cobalt); color: var(--ink); }
body { margin: 0; font: 400 17px/1.45 var(--text); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
p, h2 { margin: 0; }
.track { height: 5000vh; }
.stage { position: fixed; inset: 0; overflow: hidden; }
#stage { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .6s; }
body.ready #stage { opacity: 1; }
.stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); mix-blend-mode: soft-light; opacity: .5; z-index: 30; }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 5; }

/* ---------- captions: stickers slapped onto the frame ---------- */
.caps > * { position: absolute; z-index: 10; opacity: var(--v, 0); visibility: hidden; pointer-events: none; }
.caps > .on { visibility: visible; }
.cap { left: clamp(16px, 3vw, 44px); bottom: 76px; display: grid; gap: 12px; justify-items: start; max-width: min(520px, 88vw); transform: translateY(calc((1 - var(--v, 0)) * 60px)) rotate(calc(-2deg - (1 - var(--v, 0)) * 6deg)); }
.cap-r { left: auto; right: clamp(16px, 3vw, 44px); justify-items: end; text-align: right; transform: translateY(calc((1 - var(--v, 0)) * 60px)) rotate(calc(2deg + (1 - var(--v, 0)) * 6deg)); }
.cap-top { top: 78px; bottom: auto; }
.cap-c { left: 50%; bottom: 64px; justify-items: center; text-align: center; transform: translateX(-50%) translateY(calc((1 - var(--v, 0)) * 60px)); }
.cap-c .cap-l { max-width: 46ch; }
.cap-k { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border-radius: 99px; background: var(--ink); color: var(--cream); font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.cap-k b { display: inline-grid; place-items: center; min-width: 30px; height: 24px; padding: 0 8px; border-radius: 99px; background: var(--yellow); color: var(--ink); font-weight: 500; }
.cap h2 { font: 400 clamp(40px, 5.6vw, 92px)/.92 var(--disp); color: var(--cream); -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; text-shadow: 7px 8px 0 var(--ink); letter-spacing: .01em; }
.cap-l { max-width: 36ch; padding: 12px 16px; border: 4px solid var(--ink); border-radius: 14px; background: var(--cream); box-shadow: 7px 7px 0 var(--ink); font-size: clamp(15px, 1.2vw, 18px); line-height: 1.4; }

.intro { left: 50%; bottom: 7vh; display: grid; justify-items: center; gap: 12px; text-align: center; transform: translateX(-50%) translateY(calc((1 - var(--v, 0)) * 40px)); }
.intro-k { padding: 7px 14px; border-radius: 99px; background: var(--ink); color: var(--cream); font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.intro-t { padding: 10px 18px; border: 4px solid var(--ink); border-radius: 14px; background: var(--cream); box-shadow: 6px 6px 0 var(--ink); font: 400 clamp(18px, 1.6vw, 24px)/1.2 var(--disp); }
.intro-go { font: 400 22px/1 var(--disp); color: var(--cream); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.intro-go span { display: inline-block; animation: nudge 1.2s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(8px); } }

.clock { top: 78px; right: clamp(16px, 3vw, 44px); display: grid; justify-items: end; gap: 6px; transform: scale(calc(.6 + var(--v, 0) * .4)) rotate(3deg); transform-origin: top right; }
.clock b { padding: 2px 18px 6px; border: 5px solid var(--ink); border-radius: 18px; background: var(--yellow); box-shadow: 8px 8px 0 var(--ink); font: 400 clamp(46px, 6vw, 96px)/1 var(--disp); font-variant-numeric: tabular-nums; }
.clock span { padding: 6px 12px; border-radius: 99px; background: var(--ink); color: var(--cream); font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.clock-n b { background: var(--magenta); color: var(--cream); -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; }

.wish { left: 50%; top: 14vh; transform: translateX(-50%) scale(calc(.7 + var(--v, 0) * .3)); font: 400 clamp(48px, 7vw, 110px)/1 var(--disp); color: var(--yellow); -webkit-text-stroke: 8px var(--ink); paint-order: stroke fill; text-shadow: 0 0 40px rgb(255 228 92 / .6); white-space: nowrap; }

.end { left: 50%; bottom: 64px; display: grid; justify-items: center; gap: 10px; text-align: center; transform: translateX(-50%) translateY(calc((1 - var(--v, 0)) * 60px)); }
.end.on { pointer-events: auto; }
.end-t { padding: 14px 22px; border: 5px solid var(--ink); border-radius: 18px; background: var(--cream); box-shadow: 8px 8px 0 var(--ink); font: 400 clamp(20px, 1.8vw, 28px)/1.25 var(--disp); white-space: nowrap; }
.end-t em { font-size: 1.5em; }
.end-t em { font-style: normal; color: var(--magenta); }
.end-s { font: 400 clamp(24px, 2vw, 32px)/1.2 "Kalam", cursive; color: var(--cream); -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.end button { padding: 12px 20px; border: 4px solid var(--ink); border-radius: 99px; background: var(--magenta); color: var(--cream); box-shadow: 5px 5px 0 var(--ink); font: 400 19px/1 var(--disp); cursor: pointer; transition: transform .3s var(--ease); }
.end button:hover { transform: translate(-2px, -3px) rotate(-2deg); }
.end button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }

.noscript { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: var(--cobalt); color: var(--cream); font: 400 28px/1.2 var(--disp); text-align: center; }

@media (max-width: 700px) {
  .cap { left: 14px; right: 14px; bottom: 60px; gap: 8px; max-width: none; }
  .cap-r { left: clamp(16px, 3vw, 44px); right: auto; justify-items: start; text-align: left; }
  /* every caption docks at the bottom on phones: the action owns the top of the screen */
  .cap-top { top: auto; bottom: 60px; }
  .cap-c { left: 14px; right: 14px; justify-items: start; text-align: left; transform: translateY(calc((1 - var(--v, 0)) * 60px)); }
  .end { width: calc(100% - 32px); }
  .end-t { white-space: normal; }
  .cap h2 { font-size: clamp(36px, 11vw, 46px); -webkit-text-stroke: 6px var(--ink); text-shadow: 5px 6px 0 var(--ink); }
  .cap-l { font-size: 14.5px; padding: 10px 12px; }
  .clock { top: 70px; }
  .hud-ch span { display: none; }
  .wish { top: 12vh; }
}
@media (prefers-reduced-motion: reduce) {
  .cap, .cap-r, .clock { transform: none; }
  .intro, .wish, .cap-c, .end { transform: translateX(-50%); }
  .intro-go span { animation: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 700px) { .cap-c { transform: none; } }