/* Landing animations (demo branch): pinned stages, staged entrances, sticky header. Loaded only by index.html. */
.landing-anim .site-header{position:sticky;top:0;z-index:20;transition:padding .25s cubic-bezier(.2,.8,.2,1)}
.landing-anim .site-header::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:rgba(251,250,248,0);backdrop-filter:blur(0);z-index:-1;transition:background .25s,box-shadow .25s,backdrop-filter .25s}
.landing-anim .site-header.is-stuck{padding-block:12px}
.landing-anim .site-header.is-stuck::before{background:rgba(251,250,248,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}

/* pinned stage: the three steps light up one after the other while the photo changes */
.stage .steps li{transition:opacity .35s cubic-bezier(.2,.8,.2,1)}
.stage .steps li:not(.is-active){opacity:.38}
.stage .steps .n{transition:color .35s,transform .35s cubic-bezier(.2,.8,.2,1);display:inline-block;transform-origin:left center}
.stage .steps li.is-active .n{transform:scale(1.12)}
.photo-stack{position:relative;margin:0;width:100%;max-width:380px;justify-self:center}
.stack-frame{position:relative;width:100%;aspect-ratio:9/16;border-radius:24px;overflow:hidden;box-shadow:0 32px 64px -40px rgba(17,17,17,.4);background:#111}
/* phones: the visual sticks under the header, on a full-width band of page colour, while the steps scroll beneath */
@media (max-width:820px){
  .landing-anim .photo-stack{position:sticky;top:var(--header-h,72px);z-index:3;max-width:none;width:100vw;margin-inline:calc(50% - 50vw);padding:10px 20px 14px;background:var(--bg);display:flex;justify-content:center}
  .landing-anim .stack-frame{height:min(44vh,400px);width:auto;box-shadow:0 24px 48px -28px rgba(17,17,17,.5)}
  .landing-anim .principe-text{padding-top:8px}
  /* each step gets a real stretch of scrolling, so the visual has time to be seen */
  .landing-anim .stage .steps li{padding-block:16px;min-height:48vh;align-content:center}
  .landing-anim .stage .steps li:last-child{min-height:30vh}
}
.photo-stack .slide{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(1.08)}
.photo-stack .slide:first-child{opacity:1;transform:none}
.photo-stack img.slide{object-fit:cover}
/* the mocks are drawn for a 380 px frame and scale with it (1cqw = 3.8 px there), so a small phone gets the same
   picture, smaller, instead of text that wraps or overflows; the px values are the fallback without container units */
.photo-stack .slide,.pitch .story-mock{container-type:inline-size}
/* step 1: the guest's story, 9:16, with the mention sticker */
.story-mock img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story-mock::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),transparent 28%,transparent 70%,rgba(0,0,0,.35))}
.st-top{position:absolute;left:14px;right:14px;top:12px;left:3.7cqw;right:3.7cqw;top:3.2cqw;z-index:2;display:flex;flex-direction:column;gap:10px;gap:2.6cqw;color:#fff;font-family:var(--hf)}
.st-bar{display:block;height:3px;height:.8cqw;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden}
.st-bar b{display:block;width:62%;height:100%;background:#fff}
.st-user{display:flex;align-items:center;gap:8px;gap:2.1cqw;font-size:13px;font-size:max(9px,3.4cqw);font-weight:700;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.st-user small{font-weight:500;opacity:.8}
.st-avatar{width:26px;height:26px;width:6.8cqw;height:6.8cqw;border-radius:50%;background:linear-gradient(135deg,#F5B7C9,var(--p));box-shadow:0 0 0 2px #fff}
.st-tag{position:absolute;left:50%;bottom:22%;z-index:2;transform:translateX(-50%) rotate(-6deg);background:#fff;color:var(--p);font-family:var(--hf);font-weight:800;font-size:17px;font-size:max(12px,4.5cqw);letter-spacing:-.01em;padding:8px 16px;padding:2.1cqw 4.2cqw;border-radius:10px;border-radius:2.6cqw;box-shadow:0 12px 24px -12px rgba(0,0,0,.6)}
/* step 2: the booth screen with three photos to pick from */
.screen-mock{display:flex;align-items:stretch;justify-content:center;background:#111}
.sm-screen{width:100%;height:100%;background:#111;border-radius:24px;border-radius:6.3cqw;border:8px solid #1b1b1b;border-width:2.1cqw;color:#FBFAF8;display:flex;flex-direction:column;gap:14px;gap:3.7cqw;padding:22px 18px 18px;padding:5.8cqw 4.7cqw 4.7cqw;font-family:var(--hf)}
.sm-top{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-size:3.4cqw;color:#A6A6A6;white-space:nowrap}.sm-top img{height:22px;height:5.8cqw;width:auto}.sm-top b{color:#FBFAF8}
.sm-title{font-size:22px;font-size:max(11px,5.8cqw);font-weight:800;letter-spacing:-.02em;margin:4px 0 0;margin-top:1cqw;color:#FBFAF8}
.sm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;gap:2.1cqw;flex:1;align-items:center}
.sm-grid figure{margin:0;display:flex;flex-direction:column;gap:4px;gap:1cqw;align-items:center}
.sm-grid img{width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:6px;border-radius:1.6cqw;border:2px solid transparent;border-width:.5cqw;display:block}
.sm-grid figure.on{transform:scale(1.08)}
.sm-grid figure.on img{border-color:var(--p);box-shadow:0 0 0 2px rgba(220,6,75,.35)}
.sm-grid figcaption{font-size:12px;font-size:max(7px,3.2cqw);color:#A6A6A6}.sm-grid figure.on figcaption{color:#FBFAF8;font-weight:700}
.sm-keys{display:flex;justify-content:center;gap:22px;gap:5.8cqw}
.sm-keys span{width:40px;height:40px;width:10.5cqw;height:10.5cqw;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#d9d9d9 45%,#9a9a9a 75%,#7c7c7c);display:flex;align-items:center;justify-content:center;font-size:13px;font-size:3.4cqw;color:#111;box-shadow:0 8px 16px -8px rgba(0,0,0,.6)}
.sm-keys .go{background:var(--p);color:#fff;font-size:16px;font-size:4.2cqw}
.sm-hint{font-size:11px;font-size:2.9cqw;color:#A6A6A6;text-align:center;letter-spacing:.1em;text-transform:uppercase;margin:0}
/* step 3: the real print, rendered by the server */
.print-slide{display:flex;align-items:center;justify-content:center;background:var(--p-tint)}
.print-slide img{height:86%;width:auto;border-radius:4px;box-shadow:0 30px 60px -30px rgba(17,17,17,.5);transform:rotate(-4deg)}
.st-annot{position:absolute;right:18px;bottom:16px;right:4.7cqw;bottom:4.2cqw;z-index:2;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.photo-stack .slide .st-annot,.pitch .story-mock .st-annot{font-size:6.8cqw}
.print-slide .st-annot{color:var(--p);text-shadow:none}
.stage-progress{height:2px;background:var(--line);border-radius:2px;overflow:hidden;margin-top:8px}
.stage-progress i{display:block;height:100%;width:100%;background:var(--p);transform:scaleX(0);transform-origin:left}

/* timeline: the line draws itself, the numbers pop in */
.timeline .tl-line{position:absolute;left:18px;right:18px;top:18px;height:2px;background:var(--p);transform:scaleX(0);transform-origin:left;z-index:0}
.landing-anim .timeline::before{display:none}
.timeline .n{position:relative;z-index:1}

/* the booth: a full-bleed stage */
.borne-stage .booth-figure{overflow:hidden;border-radius:var(--r)}
.borne-stage .booth-figure img{transform:scale(1.14);transform-origin:center}
.annot-draw{clip-path:inset(0 100% 0 0)}

/* the CSS reveal-on-scroll is replaced by GSAP: no transition, so tweens read final values, not a value mid-fade */
.landing-anim .reveal{transition:none}
.landing-anim.js .reveal:not(.in){opacity:1;transform:none}

/* hero: elements start hidden only when the script runs; the page is complete without it */
.landing-anim.js .hero-text > *,.landing-anim.js .hero-3d{opacity:0}
.landing-anim.js .hero-text > *.in,.landing-anim.js .hero-3d.in{opacity:1}

/* reduced motion (a phone setting many people keep on): nothing moves, but the page keeps its states, changed
   instantly. On phones the active step and its photo still follow the scroll, because that pairing is content. */
@media (prefers-reduced-motion:reduce){
  .landing-anim .site-header,.landing-anim .site-header::before,.stage .steps li,.stage .steps .n{transition:none}
  .stage .steps li.is-active .n{transform:none}
  .photo-stack .slide{transform:none}
  .timeline .tl-line{transform:none}.borne-stage .booth-figure img{transform:none}.annot-draw{clip-path:none}
  .landing-anim.js .hero-text > *,.landing-anim.js .hero-3d{opacity:1}
}
@media (prefers-reduced-motion:reduce) and (min-width:821px){
  /* wide screens: no pinned stage, so the three steps and the story are simply all there */
  .stage .steps li:not(.is-active){opacity:1}
}