/* FoodClone — phone.css · celular CSS-3D pinado em qualquer largura */
.story { position: relative; }

/* 360vh (era 520/560): scrollytelling bem mais curto — menos rolagem por
   capítulo e menos pista morta. Founder 2026-06-15: "espaçamentos gigantes". */
.story-track { height: 360vh; position: relative; }

.story-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: clip;
  display: grid;
  grid-template-columns: minmax(18rem, 28rem) 1fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 5rem);
  width: min(var(--container-wide), 100% - 3rem);
  margin-inline: auto;
}

/* Captions sincronizadas */
.story-captions { position: relative; min-height: 16rem; }
.story-caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
  opacity: 0;
  pointer-events: none;
}
.story-caption.is-active { opacity: 1; }
.story-caption .ch-index {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .2em;
  color: var(--color-tomato);
  white-space: nowrap;
}
.story-caption h3 {
  font-size: clamp(1.7rem, 2.6vw, 2.6rem);
  font-weight: 800;
  letter-spacing: var(--tracking-display);
}
.story-caption p {
  font-size: clamp(1rem, 1.2vw, 1.3rem);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
  max-width: 26em;
  text-wrap: pretty;
}
/* capítulo 5 — texto claro sobre a noite */
body.is-night .story-caption .ch-index { color: var(--color-mango); }
body.is-night .story-caption h3 { color: var(--color-cream-light); }
body.is-night .story-caption p { color: color-mix(in oklch, var(--color-cream) 72%, transparent); }

/* Progresso dos capítulos — fora da caixa do texto SEMPRE: os captions são
   absolute/inset:0 (ignoram padding do pai), então qualquer posição dentro
   do container colide com texto longo. Ancorado abaixo do bloco inteiro. */
.story-progress {
  position: absolute;
  left: 0;
  top: calc(100% + 2.75rem);
  display: flex;
  gap: .65rem;
}
.story-progress i {
  width: 2.1rem; height: 2px;
  border-radius: var(--radius-pill);
  background: color-mix(in oklch, var(--color-espresso) 12%, transparent);
  overflow: hidden;
  position: relative;
}
.story-progress i::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--color-tomato);
  scale: var(--p, 0) 1;
  transform-origin: left;
}
body.is-night .story-progress i { background: color-mix(in oklch, var(--color-cream) 18%, transparent); }
body.is-night .story-progress i::after { background: var(--color-mango); }

/* ---------- O celular ---------- */
.phone-scene {
  perspective: 1700px;
  display: grid;
  place-items: center;
  height: 100%;
  position: relative;
}
/* aura ambiente atrás do celular — cor dirigida por capítulo via JS */
.phone-aura {
  position: absolute;
  width: min(60vw, 46rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--aura, rgba(244,161,0,.16)) 0%, transparent 65%);
  filter: blur(10px);
  pointer-events: none;
}
.phone {
  --phone-w: clamp(190px, min(23vw, 38svh), 330px);
  width: var(--phone-w);
  aspect-ratio: 9 / 19.2;
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}
.phone-frame {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--phone-w) * .155);
  background: linear-gradient(155deg, #3a332c 0%, #221d18 45%, #16120e 100%);
  box-shadow:
    inset 0 0 0 2px rgba(255, 248, 235, .14),
    inset 0 0 0 7px #0e0b09,
    0 1px 2px rgba(26,22,18,.3);
  padding: calc(var(--phone-w) * .035);
  transform: translateZ(0);
}
.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--phone-w) * .12);
  overflow: hidden;
  background: var(--color-cream);
  isolation: isolate;
}
/* Dynamic island */
.phone-screen::before {
  content: '';
  position: absolute;
  top: calc(var(--phone-w) * .028);
  left: 50%;
  translate: -50% 0;
  width: calc(var(--phone-w) * .26);
  height: calc(var(--phone-w) * .075);
  border-radius: var(--radius-pill);
  background: #0e0b09;
  z-index: 40;
}
/* Sweep de reflexo no vidro */
.phone-gloss {
  position: absolute;
  inset: calc(var(--phone-w) * .035);
  border-radius: calc(var(--phone-w) * .12);
  overflow: hidden;
  pointer-events: none;
  z-index: 50;
  transform: translateZ(2px);
}
.phone-gloss::after {
  content: '';
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  width: 46%;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255, 252, 245, .14) 42%,
    rgba(255, 252, 245, .26) 50%,
    rgba(255, 252, 245, .12) 58%,
    transparent 100%);
  transform: translateX(var(--gloss, -120%)) rotate(8deg);
}
.phone-shadow {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: calc(var(--phone-w) * -.18);
  height: calc(var(--phone-w) * .13);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(26,22,18, var(--sh-a, .3)), transparent 70%);
  filter: blur(calc(var(--phone-w) * .035));
  transform: scaleX(var(--sh-s, 1));
}
body.is-night .phone-shadow { background: radial-gradient(closest-side, rgba(0,0,0, .5), transparent 70%); }

/* Telas empilhadas dentro do celular */
.app-screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.app-screen.is-active { opacity: 1; }
html.no-js .app-screen:first-child { opacity: 1; }

/* ---------- Largura estreita: coluna única, ainda pinado ---------- */
@media (max-width: 760px) {
  .story-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    /* limpa o header sticky (72px no mobile) — a story é pinada, então sem
       este offset a régua de progresso ficaria PERMANENTEMENTE atrás do vidro */
    padding-top: clamp(5.25rem, 10svh, 6rem);
    gap: var(--space-4);
  }
  .story-captions {
    min-height: 10.5rem;
    text-align: center;
  }
  .story-caption { align-items: center; justify-content: flex-start; gap: var(--space-2); }
  .story-caption p { font-size: .95rem; max-width: 32em; }
  .story-progress {
    left: 50%;
    translate: -50% 0;
    top: 0;
  }
  /* abre espaço REAL entre régua e eyebrow: caption é absolute (inset:0
     ignora padding do pai), então o offset vai no próprio caption */
  .story-caption { top: 2.4rem; }
  .story-captions { padding-top: 1.4rem; min-height: 12.9rem; }
  /* cap por ALTURA: padding-top (10svh) + captions (~25svh) + telefone
     (largura × 19.2/9 ÷ svh) precisam caber em 100svh — com 34svh de largura
     o pé do telefone era CORTADO pelo clip do palco (founder 2026-06-12) */
  .phone { --phone-w: min(56vw, 28svh); }
  .phone-scene { align-items: start; }
}