:root{
  --espresso:#1b120d;
  --cream:#faf3e7;
  --tomato:#e2694a;
  --basil:#8fb37a;
}
*{box-sizing:border-box}
html,body{ margin:0; background:var(--espresso); color:var(--cream); font-family:'Assistant',system-ui,sans-serif; }
.tour{ position:relative; }
@media (prefers-reduced-motion: no-preference){
  html{ scroll-behavior:smooth; }
}

.progress{
  position:fixed; inset-inline-end:14px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:8px; z-index:30;
}
.progress i{ width:7px;height:7px;border-radius:50%; background:rgba(250,243,231,.28); display:block; transition:background .3s,transform .3s; }
.progress i.on{ background:var(--tomato); transform:scale(1.5); }

/* small persistent brand mark, physical top-right (not logical) — deliberately the
   opposite corner from the progress dots regardless of RTL. Decorative only: the real
   BOOST ME credit is spelled out at the end of the tour, so this stays aria-hidden. */
.brand-mark{
  position:fixed; top:16px; right:16px; z-index:35;
  height:30px; width:auto;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.6));
  pointer-events:none;
  transition:opacity .4s ease;
}
/* finale scene already says "BOOST ME" three times over (tag, credit line, the logo
   baked into the espresso crema itself) — the persistent corner mark on top of that
   is one mention too many, so it fades out for just that scene. Graceful no-op in
   browsers without :has() support (icon just stays visible there too). */
.tour:has(.layer[data-i="9"].on) .brand-mark{ opacity:0; }
@media (max-width:640px){
  .brand-mark{ height:24px; top:12px; right:12px; }
}

/* the pinned stage: stays fixed while the track underneath scrolls.
   overflow:hidden used to live here, but sticky + overflow:hidden on the SAME element
   is a known WebKit/mobile-Safari bug that silently turns sticky into plain static
   positioning — the whole stage just scrolls with the page instead of pinning. The
   clipping (needed so each layer's -3% ken-burns bleed doesn't peek past the edges)
   moved down to .layer instead, which is a descendant of the sticky element, not the
   sticky element itself, so it can't interfere with .stage's own stickiness. */
.stage{ position:sticky; top:0; height:100svh; z-index:1; }
.layer{
  position:absolute; inset:0;
  overflow:hidden;
  opacity:0;
  transition:opacity 1.1s ease;
  will-change:opacity,transform;
}
.layer.on{ opacity:1; }
.layer .bg{ position:absolute; inset:-3%; background-size:cover; background-position:center; }
.layer::after{
  content:""; position:absolute; inset:0;
  /* measured against the actual source photos (canvas-sampled, not guessed) so caption
     text clears WCAG AA (4.5:1) with margin in the worst-case scene/viewport/caption length */
  background:linear-gradient(180deg, rgba(15,9,6,0) 30%, rgba(15,9,6,.55) 62%, rgba(15,9,6,.90) 85%, rgba(15,9,6,.95) 100%);
}

.caption{
  position:absolute; inset-inline-start:0; inset-inline-end:0; bottom:0;
  padding:0 22px 9vh; z-index:2;
  max-width:600px;
}
.caption .tag{
  display:inline-block; font-family:monospace; font-weight:700; font-size:15px; letter-spacing:.08em;
  color:var(--espresso); background:var(--tomato); padding:5px 14px; border-radius:2px;
  margin-bottom:16px; transform:rotate(-1deg);
  box-shadow:0 3px 10px rgba(0,0,0,.45);
}
.caption h2{ font-family:'Suez One',serif; font-size:clamp(26px,4.8vw,38px); margin:0 0 10px; text-wrap:balance; }
.caption p{ font-size:clamp(18px,2.6vw,22px); line-height:1.6; margin:0; max-width:60ch; }

/* final scene: same overlay treatment (tag/heading/paragraph, no special floating card)
   as every other scene — but this is the one photo where the subject that matters (the
   espresso cup + logo) sits at the BOTTOM of the frame, so darkening the bottom like
   every other scene either hides the cup under a scrim or forces the caption up into a
   tall, cramped, over-wrapped block fighting the couple's faces for space. Flipped instead:
   this scene darkens from the TOP down (mirror of the base gradient) and the caption sits
   up there over plain ambient background, leaving the cup fully lit and uncovered below. */
.layer[data-i="9"]::after{
  background:linear-gradient(180deg, rgba(15,9,6,.95) 0%, rgba(15,9,6,.90) 15%, rgba(15,9,6,.55) 38%, rgba(15,9,6,0) 70%, rgba(15,9,6,0) 100%);
}
.caption.credit{
  top:0; bottom:auto;
  inset-inline-end:auto; max-width:min(600px, 78%);
  padding:8vh 22px 0;
}
.caption.credit .credit-line{ margin-top:8px; font-weight:800; }
.caption.credit .nowrap{ white-space:nowrap; }
.wa-btn{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
  background:var(--basil); color:var(--espresso); font-weight:800;
  padding:14px 26px; border-radius:999px; text-decoration:none; font-size:19px;
}
.wa-btn:focus-visible, a:focus-visible{ outline:3px solid var(--tomato); outline-offset:2px; }
.restart-link{
  display:inline-block; margin-top:14px; margin-inline-start:14px;
  color:var(--cream); opacity:.85; font-size:15px; text-decoration:underline;
}
.restart-link:hover, .restart-link:focus-visible{ opacity:1; }

/* the track: invisible tall steps that drive which layer is "on" and how zoomed it is.
   z-index:2 puts it above the sticky stage (z-index:1) in the .tour stacking context —
   without pointer-events:none here, these full-viewport spacer divs silently swallow
   every click/tap on the page, including the WhatsApp button. */
.track{ position:relative; z-index:2; margin-top:-100svh; pointer-events:none; }
.step{ height:100svh; }

.legal-footer{
  position:fixed; inset-inline:0; bottom:0; z-index:40;
  background:rgba(15,9,6,.88);
  display:flex; justify-content:center; gap:18px; flex-wrap:wrap;
  padding:8px 16px; font-size:12px;
}
.a11y-link{
  background:none; border:none; color:rgba(250,243,231,.75);
  font-family:'Assistant',system-ui,sans-serif; font-size:12px;
  text-decoration:underline; cursor:pointer; padding:4px;
}
.a11y-link:hover, .a11y-link:focus-visible{ color:var(--cream); }
.a11y-link:focus-visible{ outline:3px solid var(--tomato); outline-offset:2px; }

.a11y-modal{
  max-width:520px; width:calc(100% - 40px); border:none; border-radius:8px;
  padding:2rem; background:var(--cream); color:var(--espresso);
  font-family:'Assistant',system-ui,sans-serif;
}
.a11y-modal::backdrop{ background:rgba(15,9,6,.7); }
.a11y-modal h2{ font-family:'Suez One',serif; font-size:22px; margin:0 0 14px; }
.a11y-modal p{ line-height:1.7; margin:0 0 12px; }
.a11y-modal a{ color:var(--tomato); }
.a11y-close{
  position:absolute; top:14px; inset-inline-end:14px;
  background:none; border:none; font-size:18px; cursor:pointer; color:var(--espresso);
  width:32px; height:32px; border-radius:50%;
}
.a11y-close:hover{ background:rgba(27,18,13,.08); }
.a11y-close:focus-visible{ outline:3px solid var(--tomato); outline-offset:2px; }

.scroll-hint{
  position:absolute; inset-inline:0; bottom:5vh; z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  color:rgba(250,243,231,.75); font-size:12px; letter-spacing:.05em;
  animation:scroll-hint-bounce 1.8s ease-in-out infinite;
}
@keyframes scroll-hint-bounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(6px); }
}

@media (prefers-reduced-motion: reduce){
  .layer{ transition:none; }
  .layer .bg{ transition:none !important; }
  .scroll-hint{ animation:none; }
}

@media (max-width:640px){
  /* legal footer wraps to two lines on narrow screens — give the caption enough
     bottom clearance that its last line and the wa-btn never sit under it */
  .caption{ padding:0 16px 15vh; }
  .caption .tag{ font-size:13px; padding:4px 10px; margin-bottom:12px; }
  .caption h2{ margin-bottom:8px; }
  .wa-btn{ padding:12px 22px; font-size:17px; }
  /* decorative scene-progress dots crowd the text column on narrow phones and
     add nothing screen-reader users don't already get from each caption */
  .progress{ display:none; }
  .legal-footer{ gap:10px 14px; padding:10px 14px; }
  .a11y-link{ padding:8px 6px; }
}