/* Hero em scroll: o vídeo roda uma vez, a tela real do app assume e fica fixa à direita enquanto o texto rola à esquerda. */
.story { position: relative; height: calc(190svh + var(--n, 3) * 150svh); background: var(--paper); }
.story__stage { position: sticky; top: 68px; height: calc(100svh - 68px); overflow: hidden; }
.story__video { position: absolute; inset: 0; background: var(--ink); will-change: opacity; }
.story__video img, .story__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.story__video video { opacity: 0; transition: opacity .2s linear; }
.story__video.is-ready video { opacity: 1; }
.story__scrim { position: absolute; inset: 0; pointer-events: none; -webkit-mask-image: linear-gradient(#000 0 66%, transparent 90%); mask-image: linear-gradient(#000 0 66%, transparent 90%); background: linear-gradient(90deg, rgb(245 243 238 / .94) 0%, rgb(245 243 238 / .82) 32%, rgb(245 243 238 / 0) 62%); }
.story__scene { position: absolute; inset: 0; transform-origin: 0 0; opacity: 0; pointer-events: none; will-change: transform; }
.story__scene.is-on { opacity: 1; }
.story__room { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; will-change: opacity; }
.story__screen { position: absolute; left: 0; top: 0; width: 960px; height: 619px; transform-origin: 0 0; pointer-events: none; will-change: transform; border-radius: 2px; overflow: hidden; background: #16201c; }
.story__screen img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; filter: blur(0); transition: opacity .32s ease, filter .32s ease; }
.story__screen img.is-on { opacity: 1; }
.story__screen img.is-out { filter: blur(6px); }
.story__spot { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .32s ease; overflow: visible; }
.story__spot rect { fill: rgb(30 122 85 / .10); stroke: #1E7A55; stroke-width: 3; vector-effect: non-scaling-stroke; transition: x .32s ease, y .32s ease, width .32s ease, height .32s ease; }
.story__spot.is-on { opacity: 1; }
.story__panel { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; opacity: var(--o, 0); transform: translate3d(0, var(--y, 24px), 0); pointer-events: none; will-change: opacity, transform; }
.story__panel.is-on { pointer-events: auto; }
.story__copy { max-width: min(34rem, var(--copymax, 44vw)); }
.story__panel .h-section { max-width: 18ch; }
.story__panel p.lead { max-width: 46ch; }
.story__inline { display: none; }
.story__hint { position: absolute; left: 50%; bottom: 20px; width: 22px; height: 36px; margin-left: -11px; border: 2px solid rgb(22 32 28 / .35); border-radius: 12px; opacity: var(--hint, 1); }
.story__hint::after { content: ""; position: absolute; left: 50%; top: 7px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: rgb(22 32 28 / .55); }

@media (max-width: 1023px) {
  .story { height: calc(150svh + var(--n, 3) * 150svh); --strip: min(52svh, max(34svh, 58vw)); }
  .story__video { inset: 0 0 auto 0; height: var(--strip); -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
  .story__scrim { display: none; }
  .story__room { height: var(--strip); -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent); }
  .story__copy { max-width: none; }
  .story__panel { top: calc(var(--strip) + 2svh); align-items: flex-start; padding-top: 0; }
  .story__copy .eyebrow { margin-bottom: 8px; font-size: 11px; }
  .story__copy .hero__actions { flex-wrap: nowrap; gap: 8px; }
  .story__copy .hero__actions .btn { padding: 10px 14px; font-size: 14px; flex: 1 1 auto; }
  .story__panel .h-section { font-size: clamp(26px, 7vw, 34px); max-width: 20ch; }
  .story__copy h1 { font-size: clamp(28px, 8vw, 40px); }
  .story__copy .lead { font-size: 15px; line-height: 1.45; margin-top: 10px; }
  .story__copy .hero__actions { margin-top: 14px; }
  .story__copy .hero__note { margin-top: 12px; }
  .story__hint { display: none; }
  .story__screen img.is-out { filter: none; }
}
@media (min-width: 1024px) {
  .story__panel--hero { align-items: flex-start; padding-top: clamp(12px, 6svh, 64px); }
}
@media (max-height: 640px) and (min-width: 1024px) {
  .story__copy .lead { font-size: 16px; margin-top: 14px; }
  .story__copy h1 { font-size: clamp(34px, 5vw, 48px); }
}
/* sem movimento: estado final, seções empilhadas, cada uma com a sua tela */
.story--static { height: auto; }
.story--static .story__stage { position: relative; top: 0; height: auto; overflow: visible; }
.story--static .story__video { position: relative; inset: auto; height: 56svh; mask-image: none; -webkit-mask-image: none; }
.story--static .story__video video { opacity: 1; }
.story--static .story__scrim, .story--static .story__hint, .story--static .story__scene { display: none; }
.story--static .story__panel { position: relative; top: auto; bottom: auto; opacity: 1; transform: none; pointer-events: auto; padding: 40px 0; align-items: flex-start; }
.story--static .story__inline { display: block; width: 100%; max-width: 560px; height: auto; margin-top: 24px; border-radius: 6px; border: 1px solid var(--line); aspect-ratio: 1920 / 1238; }