/* Posy Aí — the film: a sticky 3D stage told by the scroll (DOM + CSS 3D, no canvas)
   Order: stage → rig objects → phone → screens → beats → controls → static mode → portrait → reduced motion
   Inside .film__world, 1em = 100 design units (the stage is drawn for 1440 × 900 and scales with the viewport).
   Default CSS is frame 0: it is the poster of the static mode and the first frame of the live one. */

/* ---------- stage ---------- */
.film { position: relative; background: var(--m-bg); color: var(--m-ink); }
.film__stage {
  position: sticky; top: 0;
  height: 100vh;               /* reserve for browsers without svh */
  height: 100svh;
  min-height: 520px;
  overflow: hidden;            /* allowed on the stage itself; never on an ancestor */
  background: radial-gradient(62% 72% at 71% 48%, var(--m-elevated) 0%, var(--m-bg) 72%);
}
.film__world {
  --u: min(calc(100vh / 900), calc(56vw / 760));
  position: absolute; inset: 0;
  font-size: calc(var(--u) * 100);
  perspective: 16em;
  perspective-origin: 71% 50%;   /* the vanishing point sits on the rig */
  pointer-events: none;
}
@supports (height: 100svh) {
  .film__world { --u: min(calc(100svh / 900), calc(56vw / 760)); }
}
.film__rig { position: absolute; left: 71%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.film__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 18%),
    linear-gradient(to top, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) 16%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.72) 26%, rgba(0, 0, 0, 0) 55%);
}

/* ---------- rig objects (each one is centered on the rig origin; the transform is its pose) ---------- */
.pcard, .mq, .phone { position: absolute; left: 0; top: 0; backface-visibility: hidden; }
.pcard {
  width: 2.7em; height: 3.6em; margin: -1.8em 0 0 -1.35em;
  border-radius: 0.16em; overflow: hidden; background: var(--m-surface);
}
.pcard img { width: 100%; height: 100%; object-fit: cover; }
.pcard[data-card="0"] { transform: translate3d(-2.9em, -2.3em, -5.6em) rotateY(16deg); opacity: 0.5; }
.pcard[data-card="1"] { transform: translate3d(3em, -2.5em, -4.2em) rotateY(-12deg); opacity: 0.72; }
.pcard[data-card="2"] { transform: translate3d(3.5em, 2.4em, -3.8em) rotateY(-16deg); opacity: 0.8; }
.pcard[data-card="3"] { transform: translate3d(-2.7em, 2.7em, -4.6em) rotateY(12deg); opacity: 0.6; }
.pcard--insp { width: 3em; height: 4em; margin: -2em 0 0 -1.5em; opacity: 0; }
.pcard--res { width: 3em; height: 3.6em; margin: -1.8em 0 0 -1.5em; opacity: 0; }
.mq { width: 3.2em; height: 4.8em; max-width: none; margin: -2.4em 0 0 -1.6em; opacity: 0; }

/* ---------- phone ---------- */
.phone {
  width: 2.9em; height: 6em; margin: -3em 0 0 -1.45em;
  transform-style: preserve-3d;
  transform: translate3d(0.2em, 0.1em, 0) rotateY(-24deg) rotateX(7deg) rotateZ(3deg);
}
.phone__edge {
  position: absolute; inset: 0; border-radius: 0.46em;
  background: linear-gradient(100deg, #6E666A, #2B2628 38%, #575053 70%, #242021);
  transform: translateZ(calc(var(--d) * -0.022em));
}
.phone__face {
  position: absolute; inset: 0; border-radius: 0.46em; background: #0B0A0B;
  box-shadow: inset 0 0 0 0.012em #6E666A, inset 0 0 0 0.034em #171415;
}
.phone__screen { position: absolute; inset: 0.09em; border-radius: 0.38em; overflow: hidden; background: #000000; }
.phone__island { position: absolute; left: 50%; top: 0.2em; width: 0.84em; height: 0.24em; margin-left: -0.42em; border-radius: 0.12em; background: #000000; }

/* ---------- screens ---------- */
.scr { position: absolute; inset: 0; }

/* gallery: one pose per screen, like the Poses tab */
.scr__strip { position: absolute; inset: 0; }
.scr__pose { position: absolute; inset: 0; transform: translateY(calc(var(--n) * 100%)); }
.scr__pose > img { width: 100%; height: 100%; object-fit: cover; }
.scr__pose::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.62), rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0) 52%, rgba(0, 0, 0, 0.72));
}
.scr__cap { position: absolute; left: 0.16em; right: 0.86em; bottom: 0.72em; z-index: 1; display: grid; }
.scr__cap span { font-size: 0.11em; color: rgba(255, 255, 255, 0.86); }
.scr__cap strong { font-size: 0.16em; line-height: 1.2; font-weight: 700; color: #FFFFFF; }
.scr__guide {
  position: absolute; right: 0.16em; bottom: 0.72em; z-index: 1;
  width: 0.56em; height: 0.96em; border-radius: 0.09em;
  background: rgba(0, 0, 0, 0.5); box-shadow: inset 0 0 0 0.01em rgba(255, 255, 255, 0.25);
}
.scr__guide img { width: 100%; height: 100%; object-fit: contain; padding: 0.04em 0 0; }
.scr__tabs { position: absolute; left: 0; right: 0; top: 0.56em; display: flex; justify-content: center; gap: 0.16em; }
.scr__tabs span { font-size: 0.11em; font-weight: 500; color: rgba(255, 255, 255, 0.8); padding-bottom: 0.4em; }
.scr__tabs .is-on { font-weight: 700; color: #FFFFFF; box-shadow: inset 0 -0.16em 0 -0.02em #FFFFFF; }
.scr__use {
  position: absolute; left: 0.16em; right: 0.16em; bottom: 0.2em;
  display: grid; place-items: center; height: 0.4em; border-radius: 0.1em;
  background: #FFFFFF; color: #241A1D;
}
.scr__use span { font-size: 0.125em; font-weight: 600; }

/* camera */
.scr--camera { opacity: 0; background: #000000; }
.cam__frame { position: absolute; top: 0; left: 50%; width: 4.85em; height: 100%; margin-left: -2.425em; }
.cam__live { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 54% 40%; }
.cam__guide { position: absolute; left: 16.6%; top: 5.2%; width: 75%; aspect-ratio: 2 / 3; opacity: 0; }
.cam__guide img { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.38; }
.cam__glow {
  position: absolute; inset: 0; opacity: 0;
  background: var(--sig-red);
  -webkit-mask: url(assets/img/guia-07.webp) center / contain no-repeat;
  mask: url(assets/img/guia-07.webp) center / contain no-repeat;
  filter: blur(0.07em);
  transition: opacity var(--dur-panel) ease;
}
.cam__glow[data-glow="near"] { background: var(--sig-orange); }
.cam__glow[data-glow="ok"] { background: var(--sig-green); }
[data-fit="far"] .cam__glow[data-glow="far"],
[data-fit="near"] .cam__glow[data-glow="near"],
[data-fit="ok"] .cam__glow[data-glow="ok"] { opacity: 0.4; }
.cam__shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 66%, rgba(0, 0, 0, 0.62)); }
.cam__corners { position: absolute; left: 0.3em; right: 0.3em; top: 0.98em; bottom: 1.5em; }
.cam__corners i { position: absolute; width: 0.2em; height: 0.2em; border: 0 solid #FFFFFF; }
.cam__corners i:nth-child(1) { left: 0; top: 0; border-width: 0.016em 0 0 0.016em; border-top-left-radius: 0.09em; }
.cam__corners i:nth-child(2) { right: 0; top: 0; border-width: 0.016em 0.016em 0 0; border-top-right-radius: 0.09em; }
.cam__corners i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 0.016em 0.016em; border-bottom-left-radius: 0.09em; }
.cam__corners i:nth-child(4) { right: 0; bottom: 0; border-width: 0 0.016em 0.016em 0; border-bottom-right-radius: 0.09em; }
.cam__chip {
  position: absolute; left: 50%; top: 0.54em; transform: translateX(-50%);
  display: grid; align-items: center; justify-items: center;
  height: 0.3em; padding: 0 0.12em; border-radius: 0.15em; background: rgba(0, 0, 0, 0.78);
}
.cam__chip span {
  grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 0.5em;
  font-size: 0.115em; font-weight: 600; color: #FFFFFF; white-space: nowrap;
  opacity: 0; transition: opacity var(--dur-panel) ease;
}
.cam__chip span::before { content: ''; width: 0.72em; height: 0.72em; border-radius: 50%; background: var(--sig-red); }
.cam__chip [data-chip="near"]::before { background: var(--sig-orange); }
.cam__chip [data-chip="ok"]::before { background: var(--sig-green); }
[data-fit="far"] [data-chip="far"], [data-fit="near"] [data-chip="near"], [data-fit="ok"] [data-chip="ok"] { opacity: 1; }
.cam__modes { position: absolute; left: 0; right: 0; bottom: 1.08em; display: flex; justify-content: center; gap: 0.2em; }
.cam__modes span { font-size: 0.11em; font-weight: 500; color: rgba(255, 255, 255, 0.8); }
.cam__modes .is-on { font-weight: 700; color: #FFFFFF; }
.cam__shutter {
  position: absolute; left: 50%; bottom: 0.3em; width: 0.62em; height: 0.62em; margin-left: -0.31em;
  border-radius: 50%; box-shadow: inset 0 0 0 0.026em #FFFFFF;
}
.cam__shutter::after { content: ''; position: absolute; inset: 0.058em; border-radius: 50%; background: #FFFFFF; }
.cam__thumb { position: absolute; left: 0.3em; bottom: 0.44em; width: 0.34em; height: 0.34em; border-radius: 0.07em; overflow: hidden; box-shadow: 0 0 0 0.015em #FFFFFF; }
.cam__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cam__flip { position: absolute; right: 0.28em; bottom: 0.42em; width: 0.38em; height: 0.38em; }
.cam__flip svg { width: 100%; height: 100%; fill: none; stroke: #FFFFFF; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.cam__flash { position: absolute; inset: 0; background: #FFFFFF; opacity: 0; }

/* ---------- beats ---------- */
.film__beats {
  position: relative; z-index: 2;
  margin-top: -100vh;          /* pulled up so the beats scroll over the stuck stage */
  margin-top: -100svh;
  pointer-events: none;        /* empty areas belong to the stage */
}
.beat {
  --len: 1.1;
  display: flex; align-items: center;
  min-height: calc(100vh * var(--len));
  min-height: calc(100svh * var(--len));
  padding-inline: max(var(--inset), env(safe-area-inset-left)) max(var(--inset), env(safe-area-inset-right));
}
.beat--hero { --len: 1; min-height: max(520px, 100vh); min-height: max(520px, 100svh); }
.beat__panel { pointer-events: auto; width: min(480px, 100%); }
.beat__panel h2 { font-size: var(--t-h2); }
.beat__panel p { margin-top: var(--s-4); font-size: var(--t-18); color: var(--m-ink-2); }
.beat__thumb { display: none; }

.hero__title { font-size: var(--t-display); line-height: 1.0; letter-spacing: -0.035em; }
.hero__sub { margin-top: var(--s-6); max-width: 34ch; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; color: var(--m-ink); }
.hero__sub span { color: var(--m-ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-3); margin-top: var(--s-8); }
.hero .eyebrow a { color: inherit; text-underline-offset: 3px; }
.beat--hero .beat__panel { width: min(600px, 100%); }

/* live: panels are fixed and light up with the progress (JS writes the opacity) */
/* a tail after the last beat: its panel fades before the page slides over the stage */
.is-live .film__beats { padding-bottom: 36vh; padding-bottom: 36svh; }
.is-live .beat__panel {
  position: fixed; top: 50%; left: max(var(--inset), env(safe-area-inset-left));
  width: min(460px, 38vw);
  transform: translateY(-50%);
}
.is-live .beat--hero .beat__panel { width: min(600px, 44vw); }
.is-live .beat:not(.beat--hero) .beat__panel {
  opacity: 0; pointer-events: none;   /* until the scene writes the first frame; the watchdog falls back to static */
  padding: var(--s-8);
  border-radius: var(--r-lg);
  background: rgba(18, 18, 18, 0.72);
  border: 1px solid var(--m-line);
  border-top-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
/* keyboard wins over the inline opacity written by JS */
.is-live .beat .beat__panel:focus-within { opacity: 1 !important; pointer-events: auto !important; }
.beat__panel:focus { outline: none; }

/* layers that start transparent are rastered ahead, so their first appearance costs no frame */
.is-live :is(.scr--camera, .cam__guide, .mq, .pcard--insp, .pcard--res) { will-change: opacity; }

/* hero children rise once on load */
@media (prefers-reduced-motion: no-preference) {
  :root.is-live .hero > * {
    animation: hero-in var(--dur-hero) var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 70ms);
  }
}
@keyframes hero-in { from { transform: translateY(14px); opacity: 0; } }

/* ---------- controls ---------- */
.film__pause {
  position: absolute; z-index: 4; right: max(var(--inset), env(safe-area-inset-right)); bottom: var(--s-6);
  display: none; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: var(--m-ink);
  touch-action: manipulation;
  transition: background-color var(--dur-color) ease, transform var(--dur-press) var(--ease-out);
}
.is-live .film__pause { display: grid; }
.film__pause:active { transform: scale(0.97); }
.film__pause:focus-visible { outline-color: var(--m-ink); border-radius: 50%; }
.film__pause svg { width: 18px; height: 18px; fill: currentColor; }
.film__pause .i-play, .film__pause[aria-pressed="true"] .i-pause { display: none; }
.film__pause[aria-pressed="true"] .i-play { display: block; }
@media (hover: hover) and (pointer: fine) { .film__pause:hover { background: rgba(255, 255, 255, 0.24); } }

.scroll-cue {
  position: absolute; z-index: 3; left: 50%; bottom: var(--s-6); display: none;
  width: 1px; height: 34px; overflow: clip; background: rgba(255, 255, 255, 0.28);
  transition: opacity var(--dur-nav) ease;
}
.is-live .scroll-cue { display: block; }
.is-live.is-scrolled .scroll-cue { opacity: 0; }
.scroll-cue::after { content: ''; position: absolute; left: -1px; top: 0; width: 3px; height: 10px; border-radius: 2px; background: var(--m-ink); }
@media (prefers-reduced-motion: no-preference) {
  :root.is-live .scroll-cue::after { animation: cue-drop 1.8s var(--ease-in-out) infinite; }
  :root.is-paused .scroll-cue::after, :root.is-scrolled .scroll-cue::after { animation-play-state: paused; }
}
@keyframes cue-drop { from { transform: translateY(-10px); } to { transform: translateY(34px); } }

/* ---------- static mode and no JS: one layout, the story as a grid ---------- */
:is(.no-js, .is-static) .film__stage { position: absolute; inset: 0 0 auto; }
:is(.no-js, .is-static) .film__beats {
  margin-top: 0; pointer-events: auto;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-12) var(--s-6);
  padding-bottom: var(--section-y);
}
:is(.no-js, .is-static) .beat { display: block; min-height: 0; }
:is(.no-js, .is-static) .beat--hero { display: flex; grid-column: 1 / -1; min-height: max(520px, 100vh); min-height: max(520px, 100svh); }
:is(.no-js, .is-static) .beat__panel { width: 100%; }
:is(.no-js, .is-static) .beat--hero .beat__panel { width: min(600px, 44vw); }
:is(.no-js, .is-static) .beat__thumb {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px;
  aspect-ratio: 16 / 10; margin-bottom: var(--s-6);
  border-radius: var(--r-lg); overflow: hidden; background: var(--m-surface);
}
:is(.no-js, .is-static) .beat__thumb img { width: 100%; height: 100%; min-height: 0; object-fit: cover; }
:is(.no-js, .is-static) .beat__thumb img[data-guide] { object-fit: contain; padding-top: 6%; background: var(--m-elevated); }
@media (min-width: 800px) {
  :is(.no-js, .is-static) .film__beats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- portrait: object in the upper third, text anchored low ---------- */
@media (max-aspect-ratio: 9/10) {
  .film__stage { background: radial-gradient(90% 52% at 50% 34%, var(--m-elevated) 0%, var(--m-bg) 74%); }
  .film__world { --u: min(calc(54vh / 660), calc(100vw / 430)); }
  @supports (height: 100svh) {
    .film__world { --u: min(calc(54svh / 660), calc(100vw / 430)); }
  }
  .film__world { perspective-origin: 50% 34%; }
  .film__rig { left: 50%; top: 34%; }
  .phone { transform: translate3d(0.08em, 0.1em, 0) rotateY(-24deg) rotateX(7deg) rotateZ(3deg); }
  .pcard[data-card="0"] { transform: translate3d(-1.9em, -2em, -5.6em) rotateY(14deg); opacity: 0.5; }
  .pcard[data-card="1"] { transform: translate3d(1.85em, -2.15em, -4.2em) rotateY(-12deg); opacity: 0.7; }
  .pcard[data-card="2"] { transform: translate3d(2.15em, 1.5em, -3.8em) rotateY(-14deg); opacity: 0.7; }
  .pcard[data-card="3"] { transform: translate3d(-2em, 1.7em, -4.6em) rotateY(12deg); opacity: 0.5; }
  .film__scrim {
    background:
      linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 14%),
      linear-gradient(to top, rgba(0, 0, 0, 0.94) 0%, rgba(0, 0, 0, 0.9) 30%, rgba(0, 0, 0, 0) 62%);
  }
  .is-live .beat__panel, .is-live .beat--hero .beat__panel {
    top: auto; bottom: calc(var(--s-6) + env(safe-area-inset-bottom));
    left: max(var(--s-4), env(safe-area-inset-left)); right: max(var(--s-4), env(safe-area-inset-right));
    width: auto; transform: none;
    max-height: 54vh; max-height: 54svh; overflow-y: auto; overscroll-behavior: contain;
  }
  .is-live .beat:not(.beat--hero) .beat__panel { padding: var(--s-6); background: rgba(18, 18, 18, 0.82); }
  .hero__title { font-size: clamp(30px, 8.6vw, 44px); }
  .hero__sub { margin-top: var(--s-3); font-size: var(--t-16); max-width: none; }
  .hero__actions { margin-top: var(--s-4); }
  .hero .store__note { display: none; }   /* the same line is in the final call and in the FAQ */
  .beat__panel p { font-size: var(--t-16); margin-top: var(--s-2); }
  .film__pause { bottom: auto; top: calc(var(--nav-h) + env(safe-area-inset-top) + var(--s-2)); right: max(var(--s-3), env(safe-area-inset-right)); }
  .scroll-cue { display: none !important; }
  :is(.no-js, .is-static) .beat--hero { align-items: flex-end; padding-bottom: var(--s-8); }
  :is(.no-js, .is-static) .beat--hero .beat__panel { width: 100%; }
}
/* short screens, in steps: smaller object, compact hero */
@media (max-aspect-ratio: 9/10) and (max-height: 740px) {
  .film__world { --u: min(calc(45vh / 660), calc(100vw / 430)); perspective-origin: 50% 31%; }
  @supports (height: 100svh) {
    .film__world { --u: min(calc(45svh / 660), calc(100vw / 430)); }
  }
  .film__rig { top: 31%; }
  .hero .eyebrow { display: none; }
  .hero__sub span { display: none; }
}
@media (min-aspect-ratio: 9/10) and (max-height: 600px) {
  .film__stage { min-height: 360px; }
  .beat--hero { min-height: max(360px, 100vh); min-height: max(360px, 100svh); }
  .film__world { perspective-origin: 71% 56%; }
  .film__rig { top: 56%; }   /* under the nav */
  .hero .eyebrow, .hero .store__note, .hero__sub span { display: none; }
  .hero__title { font-size: clamp(28px, 8vh, 48px); }
  .hero__sub { margin-top: var(--s-3); font-size: var(--t-16); }
  .hero__actions { margin-top: var(--s-4); }
  .beat__panel h2 { font-size: var(--t-28); }
  .beat__panel p { margin-top: var(--s-2); font-size: var(--t-16); }
  .is-live .beat__panel { top: calc(50% + var(--nav-h) / 2); }   /* centered in what is left under the nav */
  .is-live .beat:not(.beat--hero) .beat__panel { padding: var(--s-6); }
}

/* ---------- reduced motion (also switches the page to static in the head script) ---------- */
@media (prefers-reduced-motion: reduce) {
  .film__pause { transition: background-color var(--dur-color) ease; }
  .film__pause:active { transform: none; }
  .cam__glow, .cam__chip span { transition: none; }
}