/* Abertura em duas casas, numa tela só. A rolagem conduz: logo, palavra gigante, título, fila de sabores e a troca (íris) da pastelaria para a açaiteria.
   O JS escreve por cena: --u (0 a 1), --a (logo e foto), --b (título e fila), --c (botão); e --i (íris) na segunda cena. */
.btn--sm { height: 44px; padding: 0 20px; font-size: 15px; }
.story { position: relative; height: 760svh; background: var(--ink); }
.stage { position: sticky; top: 0; height: 100svh; min-height: 560px; overflow: hidden; isolation: isolate; background: #100506; }

.scene { isolation: isolate; --u: 0; --a: 0; --b: 0; --c: 0; --mx: 0; --my: 0; --lw: min(62vw, 560px, 66svh); --lh: calc(var(--lw) * .66); --fs: .58; position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.scene.is-live { pointer-events: auto; }
.scene--pastel { background: radial-gradient(90% 80% at 62% 78%, #a3111b 0%, #5a0a11 48%, #1f0306 100%); }
.scene--acai { background: radial-gradient(90% 80% at 38% 78%, #6f2278 0%, #35113d 48%, #12041a 100%); --i: 0; clip-path: circle(calc(var(--i) * 150vmax) at 50% 80%); }

/* foto: entra de longe e mergulha para dentro do recheio */
.scene__bg { position: absolute; inset: -6%; z-index: 0; transform: translate3d(calc(var(--mx) * -14px), calc(var(--my) * -10px), 0) scale(calc(1.04 + var(--u) * var(--z, .5))); transform-origin: 62% 62%; will-change: transform; }
.scene--acai .scene__bg { transform-origin: 40% 58%; --z: .08; }
.scene__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 62%; max-width: none; opacity: calc(.42 + var(--a) * .26); filter: saturate(1.1) contrast(1.06); -webkit-mask-image: radial-gradient(88% 78% at 55% 56%, #000 38%, transparent 100%); mask-image: radial-gradient(88% 78% at 55% 56%, #000 38%, transparent 100%); }
.scene--acai .scene__bg img { object-position: 40% 62%; filter: blur(3px) saturate(1.15); opacity: calc(.3 + var(--a) * .2); }
.scene__grade { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(70% 60% at 50% 48%, transparent 30%, rgba(6, 1, 2, .6) 100%), linear-gradient(0deg, rgba(6, 1, 2, .72) 0%, transparent 44%), linear-gradient(180deg, rgba(6, 1, 2, .5) 0%, transparent 24%); }

/* palavra gigante: letras douradas que sobem uma a uma e se afastam com a rolagem */
.scene__word { --wsz: min(37vw, 80svh); position: absolute; z-index: 1; left: 50%; top: 53%; display: flex; white-space: nowrap; font: 800 var(--wsz)/.8 var(--ff-d); font-stretch: 75%; letter-spacing: -.02em; transform: translate3d(calc(-50% + var(--mx) * 26px - var(--u) * 11vw), -53%, 0); opacity: calc(1 - var(--a) * .5); pointer-events: none; filter: drop-shadow(0 0 2px rgba(255, 226, 150, .55)) drop-shadow(0 0 50px rgba(230, 177, 75, .3)); }
.scene--acai .scene__word { --wsz: min(50vw, 88svh); filter: drop-shadow(0 0 2px rgba(232, 200, 255, .55)) drop-shadow(0 0 50px rgba(190, 120, 255, .36)); transform: translate3d(calc(-50% + var(--mx) * 26px + var(--u) * 11vw), -53%, 0); }
.scene__word i { font-style: normal; display: inline-block; color: transparent; background-image: linear-gradient(180deg, rgba(255, 233, 170, .92) 0%, rgba(240, 190, 90, .6) 40%, rgba(179, 20, 28, .08) 100%); -webkit-background-clip: text; background-clip: text; transform: translate3d(0, calc(var(--s) * var(--u) * 10svh), 0) rotate(calc(var(--s) * var(--u) * 2.4deg)); animation: wl 1.2s var(--ease) calc(.2s + var(--i) * .09s) both; }
.scene--acai .scene__word i { background-image: linear-gradient(180deg, rgba(238, 214, 255, .92) 0%, rgba(184, 112, 228, .6) 40%, rgba(90, 22, 96, .08) 100%); animation: none; opacity: 0; }
.scene--acai.is-live .scene__word i { animation: wl 1.2s var(--ease) calc(.1s + var(--i) * .09s) both; opacity: 1; }
@keyframes wl { from { opacity: 0; translate: 0 22%; filter: blur(16px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }

/* logo: começa grande no centro, depois vira a assinatura do topo, sempre abaixo da barra */
.logo { position: absolute; z-index: 5; left: 50%; top: calc(var(--a) * (var(--nav) + 18px + var(--lh) * var(--fs) * .5) + (1 - var(--a)) * 50svh); width: var(--lw); display: block; transform: translate3d(-50%, -50%, 0) scale(calc(1 - var(--a) * (1 - var(--fs)))); transform-origin: 50% 50%; filter: drop-shadow(0 0 1px rgba(255, 230, 160, .55)) drop-shadow(0 30px 40px rgba(0, 0, 0, .6)); will-change: transform; }
.logo > img { width: 100%; }
.logo::before { content: ''; position: absolute; inset: -14% -10%; z-index: -1; background: radial-gradient(closest-side, rgba(230, 177, 75, .34), transparent 72%); opacity: calc(1 - var(--a) * .35); pointer-events: none; }
.scene--acai .logo::before { background: radial-gradient(closest-side, rgba(190, 120, 255, .36), transparent 72%); }
.logo__shine { position: absolute; inset: 0; pointer-events: none; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .75) 50%, transparent 58%) 160% 0 / 260% 100% no-repeat; animation: shine 5.5s var(--ease) 1.8s infinite; }
@keyframes shine { 0% { background-position: 160% 0; } 40%, 100% { background-position: -60% 0; } }
.scene--pastel .logo { animation: logoLoad 1.4s var(--ease) .1s both; }
@keyframes logoLoad { from { opacity: 0; translate: 0 6svh; filter: blur(10px); } }

/* assinatura embaixo da logo, só na abertura */
.slogan { position: absolute; z-index: 5; left: 0; right: 0; top: calc(50svh + var(--lh) * .5 + 26px); margin: 0; display: grid; justify-items: center; gap: 10px; text-align: center; font: italic 500 clamp(22px, 2.5vw, 36px)/1.1 var(--ff-s); color: #f3d98f; text-shadow: 0 2px 22px rgba(0, 0, 0, .7); opacity: calc(1 - var(--a) * 3.4); transform: translate3d(0, calc(var(--a) * 18px), 0); pointer-events: none; }
.slogan span { font: 600 13px/1 var(--ff-c); letter-spacing: .5em; color: var(--gold); text-indent: .5em; }

/* título por linhas, com máscara, abaixo da logo */
.copy { position: absolute; z-index: 6; left: clamp(22px, 6vw, 110px); top: calc(var(--nav) + 18px + var(--lh) * var(--fs) + 24px); width: min(62vw, 860px); display: flex; flex-direction: column; align-items: flex-start; }
.copy__t { margin: 0; font: 700 clamp(46px, min(8vw, 11.6svh), 128px)/.95 var(--ff-d); font-stretch: 78%; letter-spacing: -.03em; text-shadow: 0 6px 44px rgba(0, 0, 0, .55); }
.ln { display: block; overflow: hidden; padding-bottom: .08em; }
.ln b { display: block; font-weight: inherit; transform: translate3d(0, calc((1 - var(--l)) * 108%), 0); opacity: var(--l); }
.ln:nth-child(1) b { --l: clamp(0, calc(var(--b) * 3 - .0), 1); }
.ln:nth-child(2) b { --l: clamp(0, calc(var(--b) * 3 - .9), 1); }
.copy__s { margin: 14px 0 22px; max-width: 34ch; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.45; color: var(--mute); opacity: var(--c); transform: translate3d(0, calc((1 - var(--c)) * 18px), 0); }
.copy__b { opacity: var(--c); transform: translate3d(0, calc((1 - var(--c)) * 18px), 0); pointer-events: none; }
.scene.is-live.is-c .copy__b { pointer-events: auto; }

/* fila de sabores: entra pela direita, passa pela tela e o do meio cresce */
.strip { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; height: 42svh; pointer-events: none; opacity: calc(var(--b) * 1.6); }
.strip__track { position: absolute; left: 0; bottom: 3svh; height: 100%; display: flex; align-items: flex-end; gap: 2vw; will-change: transform; }
.fl { --h: min(30svh, 22vw); position: relative; flex: none; width: var(--h); margin: 0; display: grid; justify-items: center; gap: 4px; transform-origin: 50% 90%; will-change: transform, opacity; }
.fl img { width: 100%; filter: drop-shadow(0 22px 22px rgba(0, 0, 0, .55)); }
.fl figcaption { display: grid; justify-items: center; gap: 4px; text-align: center; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); white-space: nowrap; }
.fl figcaption b { font: 650 clamp(14px, 1.2vw, 18px)/1.1 var(--ff-d); font-stretch: 88%; color: var(--cream); }
.fl figcaption span { font: 600 clamp(10px, .8vw, 12px)/1 var(--ff-c); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-l); }

.scene--pastel .scene--acai 
.cue { position: absolute; z-index: 6; left: 0; right: 0; bottom: 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); opacity: calc(1 - var(--a) * 5); pointer-events: none; }
.cue i { width: 1.5px; height: 40px; background: linear-gradient(var(--gold), transparent); animation: cue 1.9s var(--ease) infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

.sparks { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.grain { position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: .11; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* trilho de progresso */
.rail { position: absolute; z-index: 9; right: clamp(14px, 2vw, 30px); top: 50%; transform: translateY(-50%); display: grid; gap: 22px; }
.rail a { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); writing-mode: vertical-rl; transform: rotate(180deg); }
.rail a i { width: 2px; height: 56px; background: rgba(247, 236, 216, .22); border-radius: 2px; overflow: hidden; display: block; }
.rail a u { display: block; width: 100%; height: calc(var(--f, 0) * 100%); background: var(--gold); }
.rail a.on { color: var(--cream); }

@media (max-width: 899px) {
  .story { height: 700svh; }
  .scene { --lw: min(88vw, 470px, 60svh); }
  .copy { width: calc(100vw - 44px); }
  .copy__t { font-size: clamp(42px, 13.4vw, 76px); }
  .copy__s { margin: 12px 0 18px; font-size: 16px; max-width: 26ch; }
  .strip { height: 36svh; }
  .fl { --h: min(26svh, 52vw); }
    .scene__word { --wsz: 64vw; top: 50%; }
  .scene--acai .scene__word { --wsz: 82vw; }
  .rail { display: none; }
  .slogan { font-size: 21px; }
}

/* sem movimento: duas telas empilhadas, já abertas */
.story.is-static { height: auto; }
.story.is-static .stage { position: relative; height: auto; overflow: visible; background: none; }
.story.is-static .scene { --u: 1; --a: 1; --b: 1; --c: 1; position: relative; height: max(100svh, 700px); clip-path: none; pointer-events: auto; }
.story.is-static .scene--acai { --i: 1; }
.story.is-static .sparks, .story.is-static .rail, .story.is-static .cue, .story.is-static .slogan { display: none; }
.story.is-static .strip__track { transform: none !important; }
.story.is-static .scene__word i { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .scene--pastel .logo, .logo__shine, .cue i, .scene__word i { animation: none; } }