:root{
  --bone:#F4EFE4;
  --bone-2:#EFE9DB;
  --ink:#1B1713;
  --ink-soft:rgba(27,23,19,.66);
  --accent:#C0211F;
  --grain:0.14;       /* film grain opacity */
  --vintage:0.85;     /* vintage strength 0..1 */
  --stagger:90ms;     /* finale per-letter delay */
  --serif:"Bodoni Moda",serif;
  --sans:"Archivo",system-ui,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
html{
  -webkit-font-smoothing:antialiased;
}
body{
  background:var(--bone);
  color:var(--ink);
  font-family:var(--sans);
  /* body itself does NOT scroll — .deck is the snap scroller. (overflow-x:hidden
     on body used to make body the de-facto scroller, which broke the snap-type
     declared on html and left partial-slide gaps on iOS.) */
  overflow:hidden;
  font-feature-settings:"liga" 1,"calt" 1,"kern" 1;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--accent);color:var(--bone);}

/* paper grain over everything */
body::after{
  content:"";
  position:fixed;inset:0;
  z-index:60;
  pointer-events:none;
  opacity:calc(var(--grain) * 0.9);
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px;
  animation:grainshift 1.2s steps(3) infinite;
}
@keyframes grainshift{
  0%{background-position:0 0;}
  33%{background-position:-90px 40px;}
  66%{background-position:60px -70px;}
  100%{background-position:0 0;}
}

/* ---------- snap sections ---------- */
.deck{
  height:var(--vh,100svh);          /* real visible viewport (px, set by JS) */
  overflow-y:auto;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
}
section{
  height:var(--vh,100svh);          /* exact visible viewport — one slide = one screen, every device */
  scroll-snap-align:start;
  scroll-snap-stop:always;
  position:relative;
  overflow:hidden;
  padding:clamp(28px,5vh,64px) clamp(28px,6vw,120px);
}

/* hairline rules / labels */
.eyebrow{
  font-family:var(--sans);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.rule{height:1px;background:var(--ink);opacity:.85;}
.rule--accent{background:var(--accent);opacity:1;}

/* ---------- COVER ---------- */
.cover{
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:clamp(18px,3vh,40px);
}
.cover__top{
  display:flex;justify-content:space-between;align-items:baseline;
  border-bottom:1px solid var(--ink);
  padding-bottom:14px;
}
.cover__top .mid{letter-spacing:.3em;}
.cover__body{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:clamp(24px,4vw,72px);
  min-height:0;
}
.masthead{
  font-family:var(--serif);
  font-weight:800;
  line-height:.82;
  letter-spacing:-.02em;
  font-size:clamp(5rem,19vw,17rem);
  margin:0;
}
.masthead em{font-style:italic;font-weight:500;}
.cover__lines{
  margin-top:clamp(14px,2.4vh,28px);
  max-width:46ch;
}
.cover__lines p{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.1rem,1.7vw,1.5rem);
  line-height:1.3;
  margin:.55em 0;
  color:var(--ink);
}
.cover__lines .kick{
  font-family:var(--sans);font-style:normal;font-weight:600;
  font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.1em;
}
.cover__photo{
  justify-self:center;
  width:min(34vw,360px);
}
.cover__bottom{
  display:flex;justify-content:space-between;align-items:center;
  border-top:1px solid var(--ink);padding-top:14px;
}
.scrollcue{display:flex;align-items:center;gap:12px;}
.scrollcue .dot{
  width:9px;height:9px;border-radius:50%;background:var(--accent);
  animation:bob 1.6s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ---------- PIZZA SECTION ---------- */
.slice{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(24px,5vw,90px);
}
.slice.rev{direction:rtl;}
.slice.rev > *{direction:ltr;}

.ghost{
  position:absolute;
  font-family:var(--serif);
  font-weight:900;
  line-height:.7;
  font-size:min(118vh,82vw);
  color:var(--ink);
  opacity:.05;
  z-index:0;
  top:50%;left:50%;
  transform:translate(-50%,-46%);
  pointer-events:none;
  user-select:none;
}

.slice__text{position:relative;z-index:2;}
.slice__meta{
  display:flex;align-items:center;gap:16px;margin-bottom:18px;
}
.slice__no{
  font-family:var(--serif);font-style:italic;font-weight:600;
  font-size:1.15rem;color:var(--accent);
  font-feature-settings:"onum" 1;
}
.slice__meta .rule{flex:1;}
.slice__name{
  font-family:var(--serif);
  font-weight:800;
  line-height:.92;
  letter-spacing:-.015em;
  font-size:clamp(2.6rem,6.2vw,5.4rem);
  margin:.06em 0 .28em;
  text-wrap:balance;
}
.slice__sub{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(1.15rem,2.1vw,1.85rem);
  line-height:1.28;color:var(--ink);
  max-width:24ch;margin:0 0 1.4em;
}
.slice__ing{
  font-family:var(--sans);font-weight:600;
  font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ink-soft);
}

/* reveal choreography */
.slice__text > *{opacity:0;transform:translateY(26px);}
section.is-active .slice__text > *{
  opacity:1;transform:none;
  transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
section.is-active .slice__text > *:nth-child(1){transition-delay:.10s;}
section.is-active .slice__text > *:nth-child(2){transition-delay:.20s;}
section.is-active .slice__text > *:nth-child(3){transition-delay:.30s;}
section.is-active .slice__text > *:nth-child(4){transition-delay:.40s;}

/* ---------- vintage print ---------- */
.print{
  position:relative;z-index:2;
  justify-self:center;
  width:min(40vw,440px);
  margin:0;
  --rot:-2.4deg;
  transform:rotate(0) scale(.92);
  opacity:0;
  filter:drop-shadow(0 22px 34px rgba(20,12,4,.28));
}
section.is-active .print{
  transform:rotate(var(--rot)) scale(1);
  opacity:1;
  transition:transform .9s cubic-bezier(.16,.84,.3,1) .15s, opacity .8s ease .15s;
}
.print__mat{
  background:linear-gradient(160deg,#fbf7ee,#efe6d4);
  padding:14px 14px 52px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
.print__crop{
  position:relative;
  overflow:hidden;
  aspect-ratio:4/5;
  background:#2a2622;
}
.print__crop .slot{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  filter:sepia(calc(.4*var(--vintage))) saturate(calc(1 - .28*var(--vintage))) contrast(calc(1 - .06*var(--vintage))) brightness(calc(1 + .03*var(--vintage)));
}
.vint{position:absolute;inset:0;pointer-events:none;}
.vint--tint{
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255,228,170,.0), rgba(120,70,20,calc(.22*var(--vintage))) 120%);
  mix-blend-mode:multiply;
}
.vint--cyan{
  background:linear-gradient(200deg, rgba(40,80,110,calc(.16*var(--vintage))), rgba(255,255,255,0) 60%);
  mix-blend-mode:screen;
}
.vint--vignette{
  box-shadow:inset 0 0 70px rgba(25,12,2,calc(.55*var(--vintage))), inset 0 0 16px rgba(25,12,2,calc(.4*var(--vintage)));
}
.print__cap{
  position:absolute;left:16px;right:16px;bottom:16px;
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--sans);font-weight:600;
  font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(249,246,239,.94);
  text-shadow:0 1px 5px rgba(0,0,0,.6), 0 0 1px rgba(0,0,0,.5);
}
.print__cap .hand{
  font-family:var(--serif);font-style:italic;text-transform:none;
  letter-spacing:0;font-size:.95rem;color:#fff;
  text-shadow:0 1px 5px rgba(0,0,0,.6), 0 0 1px rgba(0,0,0,.5);
}

/* ---------- side index ---------- */
.index{
  position:fixed;top:50%;right:clamp(12px,2.2vw,30px);
  transform:translateY(-50%);
  z-index:40;
  display:flex;flex-direction:column;gap:10px;align-items:center;
  mix-blend-mode:multiply;
}
.index button{
  all:unset;cursor:pointer;
  font-family:var(--serif);font-weight:700;
  font-size:.95rem;line-height:1;
  min-width:44px;min-height:36px;
  display:grid;place-items:center;
  color:var(--ink-soft);
  transition:color .3s, transform .3s;
}
.index button[aria-current="true"]{color:var(--accent);transform:scale(1.5);}
.index .tick{width:1px;height:14px;background:var(--ink);opacity:.25;}

/* progress hint top-left */
/* (brandmark removed — it spoiled the reveal) */

/* ---------- FINALE (fast montage → wordmark) ---------- */
.finale{
  padding:0;
  background:#100C09;
  color:var(--bone);
  overflow:hidden;
}
.finale .montage{position:absolute;inset:0;z-index:1;}
.finale .frame{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transform:scale(1.08);
  filter:saturate(.92) contrast(1.04);
}
.finale .frame.on{opacity:1;transform:scale(1.12);}
.finale .frame.dim{
  opacity:.16;transform:scale(1.06);
  filter:saturate(.5) contrast(1) brightness(.7) blur(3px);
  transition:opacity .7s ease, filter .7s ease, transform 2.4s ease;
}
.finale .flashLetter{
  position:absolute;inset:0;z-index:3;
  display:grid;place-items:center;
  font-family:var(--serif);font-weight:900;line-height:.8;
  font-size:58vmin;color:transparent;
  -webkit-text-stroke:3px rgba(244,239,228,.9);
  text-shadow:0 18px 60px rgba(0,0,0,.55);
  opacity:0;pointer-events:none;mix-blend-mode:screen;
}
.finale .flashLetter.on{opacity:1;}

.finale .reveal{
  position:absolute;inset:0;z-index:5;
  display:grid;grid-template-rows:auto 1fr auto;
  padding:clamp(28px,5vh,74px) clamp(20px,5.5vw,110px) clamp(26px,4.5vh,64px);
  opacity:0;pointer-events:none;
}
.finale .reveal.show{opacity:1;}
.reveal__eyebrow{
  justify-self:center;text-align:center;text-wrap:balance;
  font-family:var(--sans);font-weight:600;
  font-size:clamp(10px,1.15vw,18px);
  letter-spacing:clamp(.16em,.4vw,.42em);text-transform:uppercase;
  color:rgba(244,239,228,.6);
  opacity:0;transform:translateY(8px);
  transition:opacity .7s ease, transform .7s ease;
}
.finale.kick .reveal__eyebrow{opacity:1;transform:none;}
.finale .word{
  align-self:center;
  display:grid;grid-template-columns:repeat(7,1fr);
  align-items:end;column-gap:clamp(3px,1vw,14px);
  width:100%;
}
.col{display:flex;flex-direction:column;align-items:center;min-width:0;}
.ltr{
  font-family:var(--serif);font-weight:900;line-height:.86;
  font-size:min(12.6vw,21vh);
  background-size:cover;background-position:center;
  -webkit-background-clip:text;background-clip:text;
  color:var(--bone);   /* visible fallback if background-clip:text is unsupported */
  -webkit-text-stroke:1px rgba(244,239,228,.16);
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.5));
  opacity:0;transform:translateY(-44px) scale(.92);
}
/* Only knock the glyph transparent (letting the pizza photo show through) where
   background-clip:text actually paints — otherwise the letters would vanish. */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .ltr{color:transparent;}
}
.col.in .ltr{
  opacity:1;transform:none;
  transition:opacity .5s cubic-bezier(.2,.74,.24,1), transform .62s cubic-bezier(.2,.74,.24,1);
}
.nm{
  margin-top:clamp(9px,1.7vh,22px);
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(11px,1.85vw,30px);line-height:1.1;letter-spacing:.015em;
  color:var(--bone);text-align:center;text-wrap:balance;
  font-feature-settings:"liga" 1,"calt" 1,"swsh" 1;
  max-width:min(15ch,16vw);min-height:2.4em;
  opacity:0;transform:translateY(10px);
}
.col.in .nm{
  opacity:.92;transform:none;
  transition:opacity .55s ease .12s, transform .55s ease .12s;
}
.nm .ini{color:var(--accent);font-style:normal;font-weight:700;}
.reveal__foot{
  position:relative;
  justify-self:center;text-align:center;text-wrap:balance;
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(26px,5vw,64px);line-height:1.04;letter-spacing:.004em;
  color:var(--bone);
  opacity:0;transform:translateY(14px);
  transition:opacity .9s ease, transform .9s cubic-bezier(.16,.84,.3,1);
}
/* a fine accent rule draws above the line as it settles — an editorial flourish */
.reveal__foot::before{
  content:"";position:absolute;left:50%;top:-.66em;
  width:0;height:1.5px;background:var(--accent);
  transform:translateX(-50%);
  transition:width .85s cubic-bezier(.2,.7,.2,1) .25s;
}
.reveal__foot u{
  text-decoration:none;font-style:italic;font-weight:600;color:var(--accent);
  background:linear-gradient(transparent 62%, rgba(192,33,31,.28) 0);padding:0 .06em;
}
/* wry self-aware colophon — small sans footnote under the big serif line */
.reveal__colophon{
  display:block;margin:clamp(12px,2vh,24px) auto 0;
  font-family:var(--sans);font-style:normal;font-weight:500;
  font-size:clamp(11px,1.15vw,15px);line-height:1.5;letter-spacing:.02em;
  color:rgba(244,239,228,.5);
  max-width:44ch;text-wrap:balance;
}
.finale.settled .reveal__foot{opacity:1;transform:none;transition-delay:.16s;}
.finale.settled .reveal__foot::before{width:clamp(120px,22vw,260px);}

/* The unlocked game entry — hidden until the finale's onDone fires (JS adds
   .unlocked). A small editorial pill, not a loud CTA. */
.playlink{
  justify-self:center;margin-top:clamp(16px,3vh,30px);
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--sans);font-weight:600;font-size:clamp(13px,1.4vw,16px);
  letter-spacing:.04em;text-transform:uppercase;text-decoration:none;
  color:var(--bone);background:var(--accent);
  padding:.7em 1.3em;border-radius:2em;
  touch-action:manipulation;   /* no double-tap-zoom delay on the entry link */
  opacity:0;transform:translateY(10px) scale(.96);pointer-events:none;
  transition:opacity .7s ease .2s, transform .7s cubic-bezier(.16,.84,.3,1) .2s;
}
.playlink__star{font-size:.85em;}
.playlink.unlocked{opacity:1;transform:none;pointer-events:auto;}
.playlink.unlocked:hover{filter:brightness(1.08);}
@media (prefers-reduced-motion:reduce){
  .playlink{transition:opacity .3s ease;transform:none;}
}
/* Premium climax: a warm golden bloom swells behind the wordmark and dissolves
   (replaces the small white pinhole, which read cheap). */
.finale .flash{
  position:absolute;left:50%;top:47%;
  width:64vmax;height:64vmax;
  transform:translate(-50%,-50%) scale(.18);
  border-radius:50%;z-index:4;
  background:radial-gradient(circle,
    rgba(255,241,213,.50) 0%,
    rgba(216,152,72,.24) 38%,
    rgba(192,33,31,0) 70%);
  opacity:0;pointer-events:none;
  mix-blend-mode:screen;
  filter:blur(6px);
}
.finale .flash.go{animation:finBloom 1.2s cubic-bezier(.2,.72,.2,1) forwards;}
@keyframes finBloom{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.18);}
  20%{opacity:1;}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.32);}
}
.finale .word.punch{animation:finPunch .5s cubic-bezier(.2,.74,.2,1) both;}
@keyframes finPunch{0%{transform:scale(1.045)}100%{transform:scale(1)}}
/* warm halo settles onto the letters for a richer, more premium finish */
.finale.settled .word .ltr{
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.5)) drop-shadow(0 0 22px rgba(216,152,72,.28));
  transition:filter .9s ease;
}

/* ---------- illuminated initial (subtle PRZEMAS seed) ---------- */
.slice__name{display:inline-flex;align-items:baseline;}
.slice__name .ini{
  color:var(--accent);
  font-weight:900;
  font-size:1.34em;
  line-height:.8;
  font-style:normal;
  margin-right:.02em;
}

/* ---------- easter egg: taste a slice (hover / tap) ---------- */
/* The vintage treatment lifts so the photo blooms into full colour, and a red
   ink stamp with the slice's Italian aside presses in. Works on hover (desktop)
   and on .tasted, toggled by tap (touch). */
.print .vint{transition:opacity .5s ease;}
.print{cursor:pointer;}

.stamp{
  position:absolute;z-index:3;left:50%;top:50%;
  transform:translate(-50%,-50%) rotate(-9deg) scale(.62);
  display:flex;align-items:center;gap:.42em;white-space:nowrap;
  padding:.36em .72em;
  font-family:var(--sans);font-weight:700;
  font-size:clamp(.62rem,1.5vw,1.02rem);letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);
  border:2.5px solid var(--accent);border-radius:5px;
  box-shadow:0 0 0 1px rgba(192,33,31,.45) inset;
  background:transparent;   /* real ink stamp — no fill (the dark fill read as a grey box) */
  text-shadow:0 1px 5px rgba(0,0,0,.55), 0 0 2px rgba(0,0,0,.55);
  opacity:0;pointer-events:none;
}
.stamp .star{color:var(--bone);-webkit-text-stroke:0;font-size:.9em;}

/* Photo itself is never filtered or scaled on hover — animating filter/transform
   on a large <img> (with a <picture> webp/jpg pair) re-rasters every frame and
   flickers. The bloom is driven purely by fading the vintage overlays, which is
   a cheap, stable opacity transition. */
.print:hover .vint--tint,  .print.tasted .vint--tint,
.print:hover .vint--cyan,  .print.tasted .vint--cyan{opacity:.06;}
.print:hover .vint--vignette, .print.tasted .vint--vignette{opacity:.3;}
.print:hover .stamp,
.print.tasted .stamp{
  opacity:.97;
  transform:translate(-50%,-50%) rotate(-9deg) scale(1);
  transition:opacity .3s ease, transform .42s cubic-bezier(.2,.78,.28,1);
}

@media (prefers-reduced-motion:reduce){
  .print__crop .slot,.print .vint,.stamp{transition:none !important;}
}

/* responsive */
@media (max-width:860px){
  section{padding:24px 22px;}
  .cover__body{grid-template-columns:1fr;}
  .cover__photo{display:none;}
  .slice{grid-template-columns:1fr;gap:18px;}
  .slice.rev{direction:ltr;}
  .print{width:min(64vw,300px);order:-1;}
  .slice__sub{max-width:none;}
  .index{display:none;}
  .ghost{font-size:120vw;opacity:.045;}
}

@media (prefers-reduced-motion:reduce){
  .deck{scroll-behavior:auto;}
  body::after{animation:none;}
  .slice__text > *, .print{
    opacity:1 !important;transform:none !important;filter:none !important;transition:none !important;
  }
  .finale .frame{transition:none !important;}
}

/* ---------- scroll-progress rail (right edge) ---------- */
.progress{
  position:fixed;top:50%;right:9px;transform:translateY(-50%);
  width:5px;height:clamp(170px,48vh,400px);
  z-index:45;pointer-events:none;
  background:rgba(27,23,19,.20);border-radius:5px;overflow:hidden;
  box-shadow:0 1px 3px rgba(27,23,19,.08);
}
.progress__fill{
  display:block;width:100%;height:100%;border-radius:3px;
  background:var(--accent);
  transform:scaleY(0);transform-origin:top center;
  will-change:transform;   /* tracked per-frame in JS — no CSS transition, or it lags the scroll */
}
/* on the dark finale the faint ink track vanishes — keep the rail readable */
.finale.is-active ~ .progress,
.progress.on-dark{background:rgba(244,239,228,.24);}

/* ---------- bottom scroll cue ---------- */
.scrollnudge{
  all:unset;
  position:fixed;left:50%;bottom:clamp(14px,3vh,30px);
  transform:translateX(-50%);
  z-index:45;cursor:pointer;box-sizing:border-box;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(27,23,19,.20);
  background:rgba(244,239,228,.55);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  -webkit-tap-highlight-color:transparent;
  opacity:.85;
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1), background .4s ease, border-color .4s ease;
}
.scrollnudge:hover{opacity:1;transform:translateX(-50%) translateY(-2px);}
.scrollnudge__chev{
  width:9px;height:9px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-2px) rotate(45deg);
  animation:nudge 1.7s ease-in-out infinite;
}
@keyframes nudge{
  0%,100%{transform:translateY(-3px) rotate(45deg);}
  50%{transform:translateY(2px) rotate(45deg);}
}
.scrollnudge.hide{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(10px);}

/* ---------- game CTA (play button, shown when unlocked) ---------- */
.playlink{position:relative;}
.playlink__play{
  display:grid;place-items:center;
  width:1.85em;height:1.85em;flex:0 0 auto;border-radius:50%;
  background:rgba(244,239,228,.18);
}
.playlink__play::before{
  content:"";
  border-style:solid;border-width:.34em 0 .34em .56em;
  border-color:transparent transparent transparent var(--bone);
  transform:translateX(.06em);   /* optically centre the triangle */
}
.playlink__label{font-weight:700;letter-spacing:.05em;}
.playlink__label em{font-style:normal;}
.playlink__arrow{font-size:1.05em;transition:transform .3s cubic-bezier(.2,.7,.2,1);}
.playlink__badge{
  position:absolute;top:-.72em;right:.9em;
  font-family:var(--sans);font-weight:700;
  font-size:.6em;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);background:var(--bone);
  padding:.32em .7em;border-radius:1em;
  box-shadow:0 4px 12px rgba(0,0,0,.28);
}
.playlink.unlocked{box-shadow:0 10px 30px rgba(192,33,31,.34);}
/* hover effects only where hover exists — on touch they make the first tap a
   hover and the link needs a second tap to activate. */
@media (hover:hover){
  .playlink.unlocked:hover{filter:brightness(1.06);transform:translateY(-2px);}
  .playlink.unlocked:hover .playlink__arrow{transform:translateX(4px);}
}
.playlink.unlocked:active{transform:translateY(0) scale(.98);}
/* a soft attention pulse, only while unlocked, so the new game reads as live */
.playlink.unlocked{animation:playpulse 2.6s ease-in-out infinite;}
@keyframes playpulse{
  0%,100%{box-shadow:0 10px 28px rgba(192,33,31,.30), 0 0 0 0 rgba(192,33,31,.42);}
  55%{box-shadow:0 12px 30px rgba(192,33,31,.40), 0 0 0 12px rgba(192,33,31,0);}
}
/* one-line hint under the button */
.playlink__hint{
  justify-self:center;text-align:center;text-wrap:balance;
  margin-top:clamp(9px,1.5vh,15px);
  font-family:var(--sans);font-weight:500;
  font-size:clamp(11px,1.1vw,14px);letter-spacing:.02em;
  color:rgba(244,239,228,.5);max-width:34ch;
  opacity:0;transform:translateY(8px);
  transition:opacity .7s ease .35s, transform .7s ease .35s;
}
.playlink.unlocked ~ .playlink__hint{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  .progress__fill{transition:none;}
  .scrollnudge__chev{animation:none;}
  .playlink.unlocked{animation:none;}
  .playlink.unlocked:hover{transform:none;}
}

@media (max-width:860px){
  .progress{height:34vh;right:5px;}
  .scrollnudge{width:34px;height:34px;}
}