/* ==========================================================================
   CT Pilates Estúdios: camada de movimento (Fase 2).
   Só acrescenta. Sem JS, em modo-estatico ou com falha de carregamento, vale a
   base: nenhum estado escondido aqui existe sem html.js + um dos modos.

   Pins do modo-cine são position: sticky com altura em CSS, não pin-spacer por
   JS. A altura da página fica estável desde a primeira pintura: recarregar no
   meio, entrar por âncora e CLS não dependem do GSAP. Se as bibliotecas
   falharem, main.js troca modo-cine por modo-leve e tudo isto se desliga.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Lenis (mesmas regras de lenis.css, sem baixar um arquivo a mais)
   -------------------------------------------------------------------------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Foco programático depois de âncora: leva o cursor de Tab, sem contorno na seção */
[tabindex="-1"]:focus { outline: none; }

/* --------------------------------------------------------------------------
   Reveal: a classe .rv só entra por JS, e só em quem ainda está abaixo da tela.
   Blur só em texto: em foto grande ele pesa e ninguém percebe.
   -------------------------------------------------------------------------- */
html.js .rv {
  opacity: 0;
  transform: translateY(14px);
}
html.js .rv.rv--texto { filter: blur(4px); }
html.js .rv.is-revelado {
  opacity: 1;
  transform: none;
  filter: blur();
  will-change: opacity, transform;
  transition:
    opacity .9s var(--ease-controle),
    transform .9s var(--ease-controle),
    filter .9s var(--ease-controle);
}
/* Aparelho mais simples: nada de tela desfocada e entrada mais curta */
html.modo-leve .rv.rv--texto { filter: none; }
html.modo-leve .rv.is-revelado { transition-duration: .6s; }

@media print {
  html.js .rv { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* --------------------------------------------------------------------------
   Hero: entrada por CSS puro, sem esperar JS. O texto já está no HTML.
   backwards e não both: ao terminar, nenhum filtro fica preso no título.
   -------------------------------------------------------------------------- */
html.modo-cine { --hero-blur: 12px; }
html.modo-leve { --hero-blur: 0px; } /* No modo-leve, blur só no contador */

html.modo-cine .hero__titulo-linha,
html.modo-leve .hero__titulo-linha {
  animation: hero-foco 1.2s var(--ease-controle) .05s backwards;
}
html.modo-cine .hero__titulo-linha--recuo,
html.modo-leve .hero__titulo-linha--recuo { animation-delay: .22s; }

html.modo-cine .hero__selo,
html.modo-leve .hero__selo {
  animation: hero-suave .9s var(--ease-controle) .45s backwards;
}
html.modo-cine .hero__bloco-acoes,
html.modo-leve .hero__bloco-acoes {
  animation: hero-suave .9s var(--ease-controle) .2s backwards;
}

@keyframes hero-foco {
  from { opacity: 0; filter: blur(var(--hero-blur)); transform: translateY(16px); }
  to   { opacity: 1; filter: blur(); transform: none; }
}
@keyframes hero-suave {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Véu de saída: só escurece, nunca clareia o véu medido da base */
.hero__veu-saida {
  position: absolute;
  inset: 0;
  background: var(--navy);
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Linhas do logo
   Dash 1 + vão 2 e offset 1,01: evita o pontinho da ponta redonda no início.
   -------------------------------------------------------------------------- */
html.modo-cine .linha path {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.01;
}

/* modo-leve: desenho único ao entrar. A classe só entra por JS */
.linha--leve path {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1.01;
}
.linha--leve.is-desenhada path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s var(--ease-controle);
}

/* Traçado de celular de L1, L2 e L5: curto, no vão, longe de texto e de rosto */
@media (max-width: 1023.98px) and (orientation: portrait) {
  .linha--leve { display: block; }
  .linha--leve path { stroke-width: 1.25; }

  .linha--leve.linha--l1 {
    right: 0;
    top: calc(100% - 10px);
    width: min(36vw, 150px);
  }

  /* Largura travada: se escalar com a tela, a altura cresce e invade o título */
  .linha--leve.linha--l2 {
    top: .25rem;
    right: 0;
    width: min(calc(100% - var(--margem)), 340px);
  }

  .linha--leve.linha--l5 {
    left: 0;
    bottom: calc(100% - 6px);
    width: 300px;
    max-width: calc(100vw - var(--margem));
  }
}
.autoridade__texto { position: relative; }

/* --------------------------------------------------------------------------
   Monograma: a imagem do logo, revelada por máscara. Nunca redesenhada.
   -------------------------------------------------------------------------- */
.monograma-mascara {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.is-sob-mascara { visibility: hidden; }

/* --------------------------------------------------------------------------
   Contador: tabular, para os dígitos não dançarem enquanto contam
   -------------------------------------------------------------------------- */
[data-contador] { font-variant-numeric: lining-nums tabular-nums; }
.contador-ativo {
  display: inline-block;
  filter: blur(var(--contador-blur, 0px));
}

/* --------------------------------------------------------------------------
   autoridade em modo-leve: revelação única. A classe só entra por JS.
   -------------------------------------------------------------------------- */
.foto-a-revelar {
  clip-path: inset(12% 16% 14% 12% round 46% 54% 42% 58% / 52% 44% 56% 48%);
}
.foto-a-revelar.is-revelada {
  clip-path: inset(0% 0% 0% 0% round 0% 0% 0% 0% / 0% 0% 0% 0%);
  transition: clip-path 1.4s var(--ease-controle);
}

/* --------------------------------------------------------------------------
   Player: entrada calma. Fechar segue instantâneo, para o foco voltar sem atraso.
   -------------------------------------------------------------------------- */
html.modo-cine .video-dialog[open] .video-dialog__interno,
html.modo-leve .video-dialog[open] .video-dialog__interno {
  animation: dialogo-entra .6s var(--ease-controle) backwards;
}
html.modo-cine .video-dialog[open]::backdrop,
html.modo-leve .video-dialog[open]::backdrop {
  animation: dialogo-veu .5s var(--ease-controle) backwards;
}
@keyframes dialogo-entra {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dialogo-veu {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Botões: glint muito sutil, só ao passar o mouse, e toque preciso.
   :where() zera a especificidade: .mapa__botao e o CTA de depoimentos-video
   continuam com o position: absolute deles.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  :where(html.modo-cine .btn--primario) { position: relative; overflow: hidden; }
  html.modo-cine .btn--primario::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(112deg, transparent 38%, rgb(255 255 255 / .2) 50%, transparent 62%);
    transform: translateX(-110%);
    pointer-events: none;
  }
  html.modo-cine .btn--primario:hover::after {
    transform: translateX(110%);
    transition: transform 1.1s var(--ease-controle);
  }
  html.modo-cine .link-seta:hover { text-decoration: underline; text-underline-offset: .28em; }
}
html.modo-cine .btn:active { opacity: .92; }

/* Tablet deitado usa os 3 stills da base. L3 só existe com o tour em pin */
html.modo-leve .linha--l3 { display: none; }

/* ==========================================================================
   modo-cine, só em tela larga. O modo não muda ao redimensionar: abaixo de
   1024px uma janela encolhida volta à composição da base.
   ========================================================================== */
@media (min-width: 1024px) {
  /* Âncora cai no início exato do pin, sem a faixa da seção anterior */
  html.modo-cine #para-voce,
  html.modo-cine #autoridade,
  html.modo-cine #tour { scroll-margin-top: calc(var(--header-altura) * -1); }

  /* ---- autoridade: bloco sticky por 50vh ---- */
  html.modo-cine .autoridade {
    height: 150vh;
    padding-block: 0;
  }
  html.modo-cine .autoridade__moldura {
    position: sticky;
    top: 0;
    min-height: 100vh;
    align-content: center;
    padding-block: calc(var(--header-altura) + 1.25rem) 1.5rem;
  }
  html.modo-cine .autoridade .linha--l2 {
    display: block;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  html.modo-cine .autoridade__fotos,
  html.modo-cine .autoridade__texto { position: relative; z-index: 2; }

  /* ---- tour: palco e legendas no mesmo lugar da grade, ambos sticky ---- */
  html.modo-cine .tour {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: 400vh;
  }
  html.modo-cine .tour__palco,
  html.modo-cine .tour__planos {
    grid-area: 1 / 1;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
  }
  /* Os frames têm 1600 x 900: a moldura nunca passa disso e sobra a faixa da legenda */
  html.modo-cine .tour {
    --moldura: min(1600px, 78vw, calc((100vh - var(--header-altura) - 9rem) * 16 / 9));
    --moldura-a: calc(var(--moldura) * 9 / 16);
    --moldura-esq: calc(50% - var(--moldura) / 2);
    --moldura-topo: calc(var(--header-altura) + (100vh - var(--header-altura) - var(--moldura-a) - 6rem) / 2);
  }
  html.modo-cine .tour__cena {
    display: block;
    grid-area: 1 / 1;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    overflow: clip;
    background: linear-gradient(to bottom, var(--navy), var(--navy-profundo) 58%);
  }
  /* Blur gravado no arquivo: nenhum filter em tempo real */
  html.modo-cine .tour__cena::before {
    content: "";
    position: absolute;
    left: -5vw;
    top: -14vh;
    height: 128vh;
    aspect-ratio: 702 / 720;
    background: var(--marca-borrada) center / contain no-repeat;
    opacity: .18;
  }
  html.modo-cine .tour__janela {
    position: absolute;
    left: var(--moldura-esq);
    top: var(--moldura-topo);
    width: var(--moldura);
    height: var(--moldura-a);
    background: #12172B;
    box-shadow: 0 0 0 1px rgb(255 255 255 / .12), 0 36px 110px rgb(10 14 30 / .6);
  }
  html.modo-cine .tour__palco {
    z-index: 1;
    justify-self: start;
    top: var(--moldura-topo);
    margin: var(--moldura-topo) 0 0 var(--moldura-esq);
    width: var(--moldura);
    height: var(--moldura-a);
    aspect-ratio: auto;
  }
  html.modo-cine .tour__planos {
    z-index: 2;
    padding: 0;
    background: none;
    overflow: clip;
  }
  html.modo-cine .tour__plano { position: static; width: auto; margin: 0; }
  html.modo-cine .tour__plano--2 .tour__still,
  html.modo-cine .tour__plano--3 .tour__still { display: none; }
  html.modo-cine .tour__plano--1 .tour__still {
    position: absolute;
    inset: var(--moldura-topo) auto auto var(--moldura-esq);
    width: var(--moldura);
    height: var(--moldura-a);
    object-fit: cover;
    transition: opacity .8s var(--ease-controle);
  }
  html.modo-cine .tour.is-canvas-pronto .tour__plano--1 .tour__still { opacity: 0; }
  /* Legendas fora da imagem, na faixa sob a moldura: texto branco sobre navy liso */
  html.modo-cine .tour__legenda {
    left: var(--moldura-esq);
    right: auto;
    top: auto;
    bottom: clamp(1.25rem, 3vh, 2.25rem);
    display: flex;
    align-items: baseline;
    gap: 2rem;
    width: var(--moldura);
    padding: 0;
    transform: none;
    opacity: 0;
  }
  html.modo-cine .tour__legenda::before { display: none; }
  html.modo-cine .tour__frase { font-size: clamp(2.25rem, min(3vw, 6vh), 3.5rem); }
  html.modo-cine .tour__apoio { margin: 0; }

  .tour__dissolve {
    position: absolute;
    inset: 0;
    background: var(--grafite);
    opacity: 0;
    pointer-events: none;
  }

  /* A seção seguinte sobe por cima do fim do pin: o dissolve termina com o título
     já na tela, sem tela só de cinza. O header volta ao sólido quando ela chega */
  html.modo-cine { --tour-sobra: 45vh; }
  html.modo-cine .tour__sentinela { bottom: var(--tour-sobra); }
  html.modo-cine .depoimentos-video {
    position: relative;
    z-index: 2;
    margin-top: calc(var(--tour-sobra) * -1);
    padding-top: clamp(2.5rem, 5vw, 4.5rem);
  }

  /* Tela muito larga: moldura à direita e legenda na coluna ao lado */
  @media (min-width: 2240px) {
    html.modo-cine .tour {
      --moldura-esq: calc(100% - var(--margem) - var(--moldura));
      --moldura-topo: calc(var(--header-altura) + (100vh - var(--header-altura) - var(--moldura-a)) / 2);
    }
    html.modo-cine .tour__legenda {
      display: block;
      left: var(--margem);
      width: calc(100% - 2 * var(--margem) - var(--moldura) - 4rem);
      bottom: calc(100vh - var(--moldura-topo) - var(--moldura-a));
    }
    html.modo-cine .tour__frase { font-size: 4.75rem; line-height: 1.08; white-space: normal; }
    html.modo-cine .tour__apoio { margin-top: 1rem; }
  }

  /* ---- galeria: o recorte fica na <figure>, o parallax no <img> ---- */
  html.modo-cine [data-parallax] { overflow: clip; }
  html.modo-cine [data-parallax] img { transform: scale(1.1); }
}

/* ---- para-voce: trilho com pin. Em tela baixa fica a composição da base ---- */
@media (min-width: 1024px) and (min-height: 640px) {
  html.modo-cine .para-voce {
    --trilho-gap: min(3.5vw, 64px);
    height: 360vh;
    padding-block: 0;
  }
  html.modo-cine .para-voce__moldura {
    position: sticky;
    top: 0;
    display: flex;
    column-gap: 0;
    height: 100vh;
    padding: var(--header-altura) 0 0;
    overflow: clip;
  }
  html.modo-cine .para-voce__lateral {
    position: relative;
    top: auto;
    z-index: 2;
    flex: none;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(min(28vw, 560px) + var(--margem));
    padding: 1rem 2rem 1rem var(--margem);
    background: var(--off-white);
  }
  /* Os painéis somem com suavidade por baixo da coluna */
  html.modo-cine .para-voce__lateral::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 4vw;
    background: linear-gradient(to right, var(--off-white), rgb(254 250 248 / 0));
    pointer-events: none;
  }
  html.modo-cine .para-voce__lateral .titulo { font-size: clamp(2.25rem, min(3.4vw, 6vh), calc(3.5rem + var(--folga) * .028)); }
  html.modo-cine .para-voce__lateral .apoio { margin-top: .75rem; }
  html.modo-cine .para-voce__indice { margin-top: clamp(1rem, 3vh, 2rem); }
  html.modo-cine .para-voce__indice a { min-height: clamp(44px, 5.6vh, 48px); }

  html.modo-cine .para-voce__trilho {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--trilho-gap);
    flex: none;
    width: max-content;
    height: 100%;
    margin: 0;
    /* A sobra final encosta o último painel na coluna: o anterior sai por baixo dela */
    padding: 0 calc(100vw - min(28vw, 560px) - var(--margem) - min(38vw, 880px) - var(--trilho-gap)) 0 4vw;
    overflow: visible;
  }

  /* Painéis autônomos: 3 larguras e 3 posições de imagem, sem repetir */
  html.modo-cine .para-voce__trilho .perfil {
    flex: none;
    width: min(38vw, 880px);
    max-width: none;
    margin: 0;
  }
  html.modo-cine .para-voce__trilho .perfil--g { width: min(46vw, 1040px); }
  html.modo-cine .para-voce__trilho .perfil--p { width: min(30vw, 640px); }

  html.modo-cine .para-voce__trilho .perfil--esquerda,
  html.modo-cine .para-voce__trilho .perfil--direita {
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 12fr);
    column-gap: 2.5vw;
    align-items: center;
  }
  html.modo-cine .para-voce__trilho .perfil--esquerda .perfil__imagem { grid-column: 1; }
  html.modo-cine .para-voce__trilho .perfil--esquerda .perfil__texto { grid-column: 2; }
  html.modo-cine .para-voce__trilho .perfil--direita .perfil__texto { grid-column: 1; grid-row: 1; }
  html.modo-cine .para-voce__trilho .perfil--direita .perfil__imagem { grid-column: 2; grid-row: 1; }

  html.modo-cine .para-voce__trilho .perfil__imagem { width: 100%; max-width: min(72vh, 760px); }
  html.modo-cine .para-voce__trilho .perfil--acima .perfil__imagem { width: auto; height: 40vh; max-width: none; }
  html.modo-cine .para-voce__trilho .perfil--acima.perfil--p .perfil__imagem { height: 30vh; }
  html.modo-cine .para-voce__trilho .perfil--acima .perfil__texto { margin-top: 1rem; }

  /* A frase domina o painel */
  html.modo-cine .para-voce__trilho .perfil__frase { font-size: clamp(2rem, min(3.1vw, 5.6vh), calc(3.25rem + var(--folga) * .03)); }
  html.modo-cine .para-voce__trilho .perfil--acima .perfil__frase { font-size: clamp(1.75rem, min(2.5vw, 4.6vh), calc(2.625rem + var(--folga) * .02)); }
  html.modo-cine .para-voce__trilho .perfil--p .perfil__frase { font-size: clamp(1.625rem, min(2.1vw, 4vh), calc(2.25rem + var(--folga) * .014)); }
  html.modo-cine .para-voce__trilho .perfil__corpo { max-width: 34em; }

  /* Alturas diferentes dentro do trilho */
  html.modo-cine .para-voce__trilho [data-perfil="gestante"] { align-self: flex-start; padding-top: 3vh; }
  html.modo-cine .para-voce__trilho [data-perfil="postura"] { align-self: flex-end; padding-bottom: 4vh; }
  html.modo-cine .para-voce__trilho [data-perfil="atleta"] { align-self: flex-start; padding-top: 5vh; }
  html.modo-cine .para-voce__trilho [data-perfil="dores"] { align-self: flex-end; padding-bottom: 3vh; }
}

/* Marca tom sobre tom: atrás do trilho, cortada pela borda. Nítida, sem blur.
   Só de 1280 px para cima, para nenhuma tela menor baixar o arquivo. */
@media (min-width: 1280px) and (min-height: 640px) {
  html.modo-cine .para-voce__moldura::before {
    content: "";
    position: absolute;
    z-index: 0;
    right: -8vw;
    bottom: -26vh;
    height: 132vh;
    aspect-ratio: 702 / 720;
    background: var(--marca-nitida) center / contain no-repeat;
    opacity: .1;
    pointer-events: none;
  }
}