/* =====================================================================
   DINIZ PRIME // O FOCO  -- molde 3, o filme (teste de 01/10/2026)

   100% inspirado no curumim-cine (ACERVO_SITES/curumim-cine/assets/css/cu.css):
   a mesma gramatica de visor de camera, as mesmas 6 camadas, as mesmas
   travas medidas (A1 a A11 da nota do MOLDE 3). Muda o conteudo e as duas
   cenas presas, que no Curumim eram o forno e o hamburguer:
     . 04 O FOCO: a vitrine da loja comeca BORRADA e entra em foco por
       dentro de um par de lentes; no fim, a foto inteira fica nitida.
       E o "forno que acende" desta casa: --foco, propriedade registrada,
       trava o AF do visor e acende a luz de baixo, e nao apaga mais.
     . 05 A TROCA: as lentes novas entram na armacao que o cliente ja tem.
       E o servico que uma avaliacao de 5 estrelas conta (duas armacoes
       reaproveitadas, so com lentes novas). Desenhado em CSS, sem foto.
   ⭐ A textura da armacao desenhada (tartaruga-b.webp, 5,6 KB) foi montada
   so com trechos de ACETATO PURO recortados da foto real de uma armacao
   da rede (ig27). Mesma fronteira do lastro da massa do Curumim.
   ⛔ A linha do tempo NAO e um dia inventado: e o caminho de quem chega a
   loja (a loja, as armacoes, quem atende, o foco, a troca, a casa), e
   cada capitulo se apoia num fato da ficha de lastro.
   ===================================================================== */

@layer reset, base, forma, comp, mov, estado;

/* ---- FONTES (as mesmas do curumim-cine) --------------------------- */
@font-face{font-family:"Newsreader";src:url("../fonte/newsreader-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../fonte/newsreader-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonte/barlow-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonte/barlow-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---- PROPRIEDADES REGISTRADAS -------------------------------------- */
/* --foco: 0 a 1, interpola de verdade (A1: meca num FILHO, nunca na raiz) */
@property --foco{syntax:"<number>";inherits:true;initial-value:0}
/* --r: o raio de cada lente no capitulo 04. Registrado como <length> para
   interpolar; e herdado em px pelos filhos, por isso a mascara da foto e o
   desenho da armacao usam O MESMO numero e nunca descolam. */
@property --r{syntax:"<length>";inherits:true;initial-value:0px}

@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  *{margin:0}
  html{-webkit-text-size-adjust:100%}
  img,svg{display:block;max-width:100%}
  ul,ol{list-style:none;padding:0}
  table{border-collapse:collapse;width:100%}
  a{color:inherit}
  s{text-decoration:none}
}

@layer base{
  :root{
    /* ⭐ paleta da casa, nao inventada: vermelho, vinho e fundo escuro sao
       os tokens da previa v7 (#C8132F medido no simbolo da rede, #5C0C18,
       #33070E); o trigo #E8C9A0 e o acento da v7, a madeira clara da loja.
       Regra herdada do Curumim (17/09): fundo escuro se TINGE da cor do
       cliente, nao do preto. Aqui o palco e vinho, nao preto. */
    --noite:#24070C;
    --noite-2:#2E0A10;
    --vinho:#5C0C18;
    --vermelho:#C8132F;
    /* texto pequeno vermelho sobre --noite: #C8132F daria 3,23:1 (reprova).
       --sinal mede 6,31:1. O vermelho da marca fica nas formas grandes. */
    --sinal:#F06A72;
    --trigo:#E8C9A0;
    --creme:#FBF8F4;
    --aro-foco:#140507;

    --tinta:var(--creme);
    --tinta-2:color-mix(in oklch,var(--creme) 80%,var(--noite));
    --tinta-3:color-mix(in oklch,var(--creme) 68%,var(--noite));
    --tinta-hud:color-mix(in oklch,var(--creme) 86%,var(--noite));
    --linha:color-mix(in oklch,var(--trigo) 18%,transparent);
    --linha-forte:color-mix(in oklch,var(--trigo) 34%,transparent);

    --display:"Newsreader",Georgia,"Times New Roman",serif;
    --corpo:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --hud:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;

    --larg:1240px;
    --recuo:clamp(20px,5vw,64px);
    --topo:62px;
    --passo:clamp(72px,11vh,140px);

    --saida:cubic-bezier(.23,1,.32,1);
    --entra-sai:cubic-bezier(.77,0,.175,1);

    /* ==========================================================
       MOVIMENTO: tokens fixos da casa. NAO editar por cliente.
       Copiados sem editar do template mestre (4.6), 01/10/2026: o molde 3
       troca a gramatica, nao o sistema.
       ========================================================== */
    --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
    --t-toque: 130ms;
    --t-perto: 180ms;
    --t-bloco: 240ms;
    --t-cena:  300ms;
    --mola: linear(0, .0705, .2269, .4092, .5820, .7277, .8404, .9209,
                   .9741, 1.0058, 1.0220, 1.0278, 1.0274, 1.0237,
                   1.0186, 1.0136, 1.0092, 1.0056, 1.0030);
    --t-mola: 430ms;
    /* vinheta: o unico registro, alem da mola, que passa de --t-cena */
    --t-gesto:   620ms;
    --t-marca:   960ms;
    --t-vinheta: 2600ms;

    timeline-scope:--k1,--k2,--k3,--k4,--k5,--k6;
    color-scheme:dark;
    accent-color:var(--vermelho);
    caret-color:var(--vermelho);
    scrollbar-color:var(--vinho) var(--noite);
  }
  ::selection{background:var(--vermelho);color:var(--creme)}
  a{text-underline-offset:.18em;text-decoration-thickness:1px}

  /* ⛔ horizontal nunca, e clip (nao hidden): hidden mataria o sticky e o
     scroll(root block) em silencio (A3). */
  html{scroll-behavior:smooth;overflow-x:clip}
  body{
    margin:0;
    background:var(--noite);
    color:var(--tinta);
    font:400 clamp(1rem,.96rem + .18vw,1.08rem)/1.62 var(--corpo);
    overflow-x:clip;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  .d1,.d2,.d3{font-family:var(--display);font-weight:300;letter-spacing:-.02em;text-wrap:balance}
  .d1{font-size:clamp(2.5rem,1.5rem + 4.4vw,4.6rem);line-height:1.02}
  .d2{font-size:clamp(1.9rem,1.25rem + 2.9vw,3.3rem);line-height:1.08}
  .d3{font-size:clamp(1.35rem,1.1rem + 1.2vw,1.95rem);line-height:1.16}
  .d1 span,.d2 span,.d3 span{font-style:italic;color:var(--trigo)}
  .lead{max-width:52ch;color:var(--tinta-2);font-size:clamp(1rem,.97rem + .3vw,1.16rem);text-wrap:pretty}
  p{text-wrap:pretty}
}

/* =====================================================================
   FORMA -- esqueleto e medidas. ⛔ nada de layout na camada MOV (A4).
   ===================================================================== */
@layer forma{
  .env{width:min(100% - var(--recuo)*2,var(--larg));margin-inline:auto}

  /* ---- TOPO ---- */
  .topo{
    position:fixed;inset:0 0 auto;z-index:60;height:var(--topo);
    display:flex;align-items:center;gap:clamp(14px,3vw,40px);
    padding-inline:var(--recuo);
    /* item 17 do /site: backdrop-filter no header fixo custa um quadro a mais
       em TODA rolagem. Fundo opaco (96%) no lugar: a diferenca nao se ve. */
    background:color-mix(in oklch,var(--noite) 96%,transparent);
    border-bottom:1px solid var(--linha);
  }
  .marca{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
  .marca img{height:26px;width:auto}
  .marca i{font-family:var(--display);font-style:italic;font-size:.9rem;color:var(--tinta-3);white-space:nowrap}
  .capitulos{display:flex;gap:clamp(10px,1.5vw,22px);margin-inline:auto;font:400 .78rem/1 var(--corpo)}
  .capitulos a{display:flex;align-items:center;gap:6px;text-decoration:none;white-space:nowrap;color:var(--tinta-3)}
  .capitulos em{font:600 .64rem/1 var(--hud);font-style:normal;letter-spacing:.06em;color:var(--sinal);opacity:.5}
  .bt-zap{flex:0 0 auto;margin-left:auto}
  .capitulos + .bt-zap{margin-left:0}

  /* ---- VISOR ---- */
  .hud{position:fixed;inset:0;z-index:55;pointer-events:none;font:400 .66rem/1 var(--hud);letter-spacing:.14em;
    color:var(--tinta-hud);text-shadow:0 1px 6px color-mix(in oklch,var(--noite) 88%,transparent)}
  .hud-barra{position:absolute;inset:0 0 auto;height:2px;background:var(--linha)}
  .hud-barra i{display:block;height:100%;width:100%;transform-origin:0 50%;background:linear-gradient(90deg,var(--trigo),var(--vermelho))}
  .hud-tl{position:absolute;top:calc(var(--topo) + 16px);left:var(--recuo);display:flex;align-items:center;gap:12px}
  .hud-tr{position:absolute;top:calc(var(--topo) + 16px);right:var(--recuo)}
  .hud-bl{position:absolute;bottom:18px;left:var(--recuo)}
  /* sai de baixo do botao flutuante do WhatsApp (54 px + folga) */
  .hud-br{position:absolute;bottom:18px;right:calc(var(--recuo) + 76px)}
  .rec{display:flex;align-items:center;gap:6px;color:var(--sinal)}
  .rec b{width:7px;height:7px;border-radius:50%;background:var(--vermelho);box-shadow:0 0 6px var(--vermelho)}
  /* o AF do visor: cinza enquanto procura, vermelho quando o foco trava
     (no capitulo 04). As duas camadas se cruzam pela --foco. */
  .af{position:relative;display:inline-block;width:3.2em;height:1.7em}
  .af i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal;letter-spacing:.1em;
    border:1px solid var(--linha-forte)}
  .af i+i{border-color:var(--sinal);color:var(--sinal);background:color-mix(in oklch,var(--vermelho) 16%,transparent);opacity:var(--foco)}
  .hud-foco,.hud-cap{position:relative;display:inline-block}
  .hud-foco{min-width:11ch;height:1em}
  .hud-cap{min-width:24ch;height:1em}
  .hud-foco em,.hud-cap em{position:absolute;inset:0;font-style:normal;white-space:nowrap;opacity:0}
  .hud-foco em{color:var(--tinta-2)}
  .ct{position:absolute;width:18px;height:18px;border:1px solid var(--linha-forte)}
  .ct-a{top:calc(var(--topo) + 14px);left:calc(var(--recuo) - 14px);border-right:0;border-bottom:0}
  .ct-b{top:calc(var(--topo) + 14px);right:calc(var(--recuo) - 14px);border-left:0;border-bottom:0}
  .ct-c{bottom:14px;left:calc(var(--recuo) - 14px);border-right:0;border-top:0}
  .ct-d{bottom:14px;right:calc(var(--recuo) - 14px);border-left:0;border-top:0}

  /* ---- AMBIENTE: a luz da vitrine atravessa a pagina ---- */
  .ambiente{position:fixed;inset:0;z-index:0;pointer-events:none}
  .ambiente span{position:absolute;inset:0;display:block}
  /* tres camadas: a luz quente das vitrines no alto, o vinho da marca nas
     laterais e um assentamento escuro na base. Fixo: o conteudo passa por
     dentro da luz, ela nao rola junto. */
  .amb-vitrine{background:
    radial-gradient(140% 92% at 50% -14%,color-mix(in oklch,var(--trigo) 24%,transparent),transparent 64%),
    radial-gradient(100% 70% at 86% 4%,color-mix(in oklch,var(--vinho) 80%,transparent),transparent 64%),
    radial-gradient(96% 64% at 6% 30%,color-mix(in oklch,var(--vinho) 86%,transparent),transparent 68%),
    linear-gradient(180deg,color-mix(in oklch,var(--vinho) 40%,transparent),transparent 52%)}
  .amb-foco{opacity:calc(var(--foco));background:
    radial-gradient(90% 62% at 50% 112%,color-mix(in oklch,var(--vermelho) 42%,transparent),transparent 66%),
    radial-gradient(60% 44% at 84% 92%,color-mix(in oklch,var(--trigo) 16%,transparent),transparent 62%)}

  /* ---- CENAS ---- */
  main{position:relative;z-index:1}
  .cena{position:relative}
  .c-loja{min-height:100svh;padding:calc(var(--topo) + clamp(56px,9vh,110px)) 0 var(--passo)}
  /* ⚠️ min-height: o tempo de tela do capitulo E a altura dele (A6) */
  .c-armacoes,.c-atende{padding:var(--passo) 0;min-height:100svh;display:grid;align-content:center}
  .c-casa{padding:var(--passo) 0 clamp(60px,9vh,110px)}

  .palco{width:min(100% - var(--recuo)*2,var(--larg));margin-inline:auto;
    display:grid;gap:clamp(30px,5vw,68px);align-items:center;
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
  .palco .poco{order:2}
  .palco .dito{order:1}
  .poco-loja{width:100%;max-width:440px;justify-self:center}
  .palco-2{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);align-items:start}
  .palco-2 .dito{order:1}
  .palco-2 .pelicula{order:2}
  /* a tira de filme passa e o texto fica: sticky precisa de align-self */
  .dito-fixo{position:sticky;top:calc(var(--topo) + 12vh);align-self:start}

  .dito{display:grid;gap:clamp(16px,2.4vh,26px);justify-items:start}
  .acoes{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
  .nota{max-width:46ch;font-size:.9rem;color:var(--tinta-3);padding-top:14px;border-top:1px solid var(--linha)}

  .ficha{display:grid;gap:12px;width:100%;max-width:46ch}
  .ficha li{display:grid;grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:4px 18px;
    padding-top:12px;border-top:1px solid var(--linha)}
  .ficha b{font:600 .72rem/1.4 var(--hud);letter-spacing:.14em;text-transform:uppercase;color:var(--sinal)}
  .ficha span{color:var(--tinta-2);font-size:.98rem}

  .numeros{display:flex;flex-wrap:wrap;gap:clamp(20px,3.4vw,44px)}
  .numeros li{display:grid;gap:2px}
  .numeros b{font-family:var(--display);font-weight:300;font-size:clamp(2.1rem,1.4rem + 2.4vw,3rem);line-height:1;color:var(--trigo)}
  .numeros span{font:400 .8rem/1.3 var(--hud);letter-spacing:.08em;color:var(--tinta-3);max-width:15ch}

  /* ---- A PELICULA: as armacoes passam como quadros de um rolo de 35 mm.
     Os furos sao duas faixas de gradiente, zero imagem. ---- */
  .pelicula{position:relative;display:grid;gap:14px;padding:16px 34px;counter-reset:q;
    background:#120306;border:1px solid var(--linha)}
  .pelicula::before,.pelicula::after{content:"";position:absolute;top:10px;bottom:10px;width:12px;
    background:repeating-linear-gradient(180deg,
      transparent 0 7px,
      color-mix(in oklch,var(--trigo) 26%,transparent) 7px 19px,
      transparent 19px 26px)}
  .pelicula::before{left:11px}
  .pelicula::after{right:11px}
  .pelicula figure{position:relative;overflow:hidden;counter-increment:q;border:1px solid var(--linha)}
  .pelicula figure::after{content:"FR. 0" counter(q);position:absolute;left:10px;bottom:8px;
    font:400 .58rem/1 var(--hud);letter-spacing:.14em;color:var(--trigo);
    text-shadow:0 1px 5px rgba(0,0,0,.95)}
  /* ⛔ L2 (toda foto, produto inteiro): o quadro tem a MESMA proporcao 3:2
     da imagem, entao o cover nao corta nada. Margem medida da armacao ate
     a borda: 7% ou mais nos 4 lados, nas 3. */
  .pelicula img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}

  /* ---- POCO DE LUZ: a foto derrete no escuro (retangulo emplumado, A5) ---- */
  .poco{position:relative;isolation:isolate}
  .poco::before{content:"";position:absolute;inset:-14% -8%;z-index:-1;
    background:radial-gradient(60% 56% at 50% 50%,color-mix(in oklch,var(--trigo) 18%,transparent),transparent 70%);
    filter:blur(26px)}
  .poco img{width:100%;height:auto;
    -webkit-mask-image:
      linear-gradient(to right,transparent 0,#000 11%,#000 89%,transparent 100%),
      linear-gradient(to bottom,transparent 0,#000 8%,#000 88%,transparent 100%);
    mask-image:
      linear-gradient(to right,transparent 0,#000 11%,#000 89%,transparent 100%),
      linear-gradient(to bottom,transparent 0,#000 8%,#000 88%,transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  .poco-alto img{aspect-ratio:4/3;object-fit:cover}
  .retic{position:absolute;inset:16% 20%;pointer-events:none;
    background:
      linear-gradient(var(--sinal),var(--sinal)) 0 0/16px 1px no-repeat,
      linear-gradient(var(--sinal),var(--sinal)) 0 0/1px 16px no-repeat,
      linear-gradient(var(--sinal),var(--sinal)) 100% 0/16px 1px no-repeat,
      linear-gradient(var(--sinal),var(--sinal)) 100% 0/1px 16px no-repeat,
      linear-gradient(var(--sinal),var(--sinal)) 0 100%/16px 1px no-repeat,
      linear-gradient(var(--sinal),var(--sinal)) 0 100%/1px 16px no-repeat,
      linear-gradient(var(--sinal),var(--sinal)) 100% 100%/16px 1px no-repeat,
      linear-gradient(var(--sinal),var(--sinal)) 100% 100%/1px 16px no-repeat}

  .citacao{display:grid;gap:8px;padding-left:18px;border-left:1px solid var(--linha-forte);max-width:46ch}
  .citacao p{font-family:var(--display);font-weight:300;font-size:clamp(1.05rem,1rem + .5vw,1.3rem);line-height:1.34}

  /* ---- 04. O FOCO: a cena presa ---- */
  /* item 17 do /site: rolagem presa medida em 31,5% da pagina (v3); a casa
     trouxe a dela de 38% para 29%. 280 + 240 deixa ~29% no computador. */
  .c-foco{height:280vh;padding:0}
  .foco-palco{position:sticky;top:0;height:100svh;overflow:hidden;
    display:grid;place-items:center;isolation:isolate}
  /* ⛔ centro por place-items, nunca por translate (A4) */
  .fantasma{position:absolute;inset:0;z-index:0;display:grid;place-items:end center;
    padding:0 var(--recuo) clamp(34px,6vh,72px) clamp(200px,24vw,380px);
    font:600 clamp(2.2rem,8vw,6.2rem)/1 var(--corpo);letter-spacing:.02em;
    color:transparent;-webkit-text-stroke:1px color-mix(in oklch,var(--trigo) 22%,transparent);
    white-space:nowrap;pointer-events:none}
  /* o poco e o CONTAINER das medidas: cqi = 1% da largura da foto. Raio,
     afastamento e espessura da armacao saem todos dele, entao o desenho
     acompanha a foto em qualquer tela sem um px solto. */
  .poco-foco{position:relative;z-index:1;width:min(56vw,740px);margin-left:auto;margin-right:clamp(0px,4vw,70px);
    container-type:inline-size;
    -webkit-mask-image:
      linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),
      linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);
    mask-image:
      linear-gradient(to right,transparent 0,#000 8%,#000 92%,transparent 100%),
      linear-gradient(to bottom,transparent 0,#000 8%,#000 92%,transparent 100%);
    -webkit-mask-composite:source-in;mask-composite:intersect}
  /* ⚠️ a animacao do raio mora no .lp, FILHO do container: unidade cqi
     declarada no proprio container mediria o avo, nao ele. */
  .lp{position:relative;--sep:17cqi;--r:0px}
  .lp img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
  /* a visao embacada: a mesma foto, pequena (560 px) porque vai borrada */
  .borrada{filter:blur(11px) brightness(.7) saturate(.8);scale:1.05}
  /* a visao nitida: so aparece por dentro das duas lentes (raio --r) */
  .nitida{position:absolute;inset:0;height:100%;
    -webkit-mask-image:
      radial-gradient(circle var(--r) at calc(50% - var(--sep)) 50%,#000 calc(100% - 1.5px),transparent 100%),
      radial-gradient(circle var(--r) at calc(50% + var(--sep)) 50%,#000 calc(100% - 1.5px),transparent 100%);
    mask-image:
      radial-gradient(circle var(--r) at calc(50% - var(--sep)) 50%,#000 calc(100% - 1.5px),transparent 100%),
      radial-gradient(circle var(--r) at calc(50% + var(--sep)) 50%,#000 calc(100% - 1.5px),transparent 100%);
    -webkit-mask-composite:source-over;mask-composite:add}
  /* a armacao por cima: dois aros e a ponte, com o MESMO --r da mascara */
  .armacao-foco{position:absolute;inset:0;pointer-events:none;opacity:0}
  .armacao-foco b{position:absolute;top:50%;width:calc(var(--r) * 2 + 2px);aspect-ratio:1;translate:-50% -50%;
    border-radius:50%;border:max(3px,1.1cqi) solid var(--aro-foco);
    box-shadow:0 0 0 1px color-mix(in oklch,var(--trigo) 46%,transparent),
               inset 0 0 0 1px color-mix(in oklch,var(--trigo) 26%,transparent),
               0 18px 40px -10px rgba(0,0,0,.8)}
  .armacao-foco b:nth-of-type(1){left:calc(50% - var(--sep))}
  .armacao-foco b:nth-of-type(2){left:calc(50% + var(--sep))}
  .armacao-foco s{position:absolute;top:calc(50% - var(--r) * .86);left:calc(50% - var(--sep) + var(--r) * .76);
    width:max(0px,calc(var(--sep) * 2 - var(--r) * 1.52));height:calc(var(--r) * .24);
    border-top:max(3px,1.1cqi) solid var(--aro-foco);border-radius:50% 50% 0 0/100% 100% 0 0;
    filter:drop-shadow(0 -1px 0 color-mix(in oklch,var(--trigo) 40%,transparent))}

  .specs{position:absolute;left:var(--recuo);top:46%;translate:0 -50%;z-index:2;
    display:grid;gap:13px;width:min(30vw,300px)}
  .specs dl{display:grid;gap:9px}
  .specs dl div{display:grid;gap:2px;padding-top:9px;border-top:1px solid var(--linha)}
  .specs dt{font:600 .64rem/1.3 var(--hud);letter-spacing:.16em;text-transform:uppercase;color:var(--sinal)}
  .specs dd{margin:0;font-size:.92rem;color:var(--tinta-2)}
  .grande{font-family:var(--display);font-weight:300;font-size:clamp(2.6rem,5.4vw,4.4rem);line-height:.92;color:var(--trigo)}
  .grande span{font-style:italic}
  /* a frase de fecho mora DENTRO do quadro preso: entra sobre a foto que recua */
  .foco-frase{position:absolute;inset:0;z-index:3;display:grid;place-items:center;
    padding-inline:var(--recuo);text-align:center;pointer-events:none;opacity:0}
  .foco-frase p{max-width:22ch;text-wrap:balance;text-shadow:0 2px 18px rgba(0,0,0,.6)}

  /* ---- 05. A TROCA: a cena presa desenhada em CSS ---- */
  .c-troca{height:240vh;padding:0}
  .troca-palco{position:sticky;top:0;height:100svh;
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;
    gap:clamp(24px,4vw,60px);
    width:min(100% - var(--recuo)*2,var(--larg));margin-inline:auto}
  .troca-palco>.chapa{position:absolute;top:calc(var(--topo) + 72px);left:0}
  /* ⭐ tudo e RAZAO de --w (a largura da frente dos oculos), nunca px solto */
  .bancada{position:relative;height:min(60vh,460px);--w:min(34vw,420px)}
  .bancada::before{content:"";position:absolute;left:48%;top:50%;translate:-50% -50%;
    width:min(80vw,600px);aspect-ratio:1/.7;border-radius:50%;pointer-events:none;z-index:-1;
    background:
      radial-gradient(closest-side,color-mix(in oklch,var(--trigo) 22%,transparent),transparent 76%),
      radial-gradient(closest-side at 50% 74%,color-mix(in oklch,var(--vermelho) 26%,transparent),transparent 70%);
    filter:blur(30px)}
  .bancada::after{content:"";position:absolute;left:48%;top:50%;width:calc(var(--w) * .9);aspect-ratio:1/.42;
    translate:-50% -50%;border-radius:50%;pointer-events:none;opacity:0;filter:blur(16px);
    background:radial-gradient(circle,color-mix(in oklch,var(--creme) 70%,transparent),transparent 68%)}
  .oculos{position:absolute;left:48%;top:50%;width:var(--w);height:calc(var(--w) * .36);translate:-50% -50%;
    filter:drop-shadow(0 16px 18px rgba(0,0,0,.6))}
  /* o aro: borda com textura, miolo vazado. Duas mascaras que se excluem
     (padding-box x border-box) deixam so o anel, em qualquer formato. */
  .aro{position:absolute;top:0;z-index:2;width:calc(var(--w) * .44);height:100%;
    border:calc(var(--w) * .034) solid transparent;
    background:
      linear-gradient(172deg,rgba(255,238,214,.40),rgba(255,238,214,0) 30%,rgba(0,0,0,0) 60%,rgba(0,0,0,.45)) border-box,
      url("../img/tartaruga-b.webp") 50% 50%/calc(var(--w) * .5) auto border-box;
    -webkit-mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);
    -webkit-mask-clip:padding-box,border-box;
    -webkit-mask-composite:xor;
    mask-image:linear-gradient(#000 0 0),linear-gradient(#000 0 0);
    mask-clip:padding-box,border-box;
    mask-composite:exclude}
  /* gatinho: o canto de cima, do lado de FORA, sobe e fecha; embaixo, redondo */
  .aro-e{left:0;border-radius:18% 36% 44% 40% / 24% 30% 62% 70%}
  .aro-d{right:0;border-radius:36% 18% 40% 44% / 30% 24% 70% 62%}
  .ponte{position:absolute;z-index:3;left:calc(var(--w) * .41);width:calc(var(--w) * .18);
    top:calc(var(--w) * .05);height:calc(var(--w) * .07);
    background:
      linear-gradient(180deg,rgba(255,238,214,.36),rgba(0,0,0,.35)),
      url("../img/tartaruga-b.webp") 30% 40%/calc(var(--w) * .5) auto;
    -webkit-mask-image:radial-gradient(54% 104% at 50% 128%,transparent 97%,#000 100%);
    mask-image:radial-gradient(54% 104% at 50% 128%,transparent 97%,#000 100%)}
  .haste{position:absolute;z-index:1;top:calc(var(--w) * .03);width:calc(var(--w) * .05);height:calc(var(--w) * .08);
    background:
      linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,238,214,.25)),
      url("../img/tartaruga-b.webp") 60% 60%/calc(var(--w) * .5) auto}
  .haste-e{left:calc(var(--w) * -.032);border-radius:40% 12% 12% 40%}
  .haste-d{right:calc(var(--w) * -.032);border-radius:12% 40% 40% 12%}
  /* a lente: um pouco MAIOR que o vao do aro e por baixo dele, entao a
     borda some sob o acetato e ela parece assentada, nao colada */
  .lente{position:absolute;z-index:1;top:calc(var(--w) * .017);width:calc(var(--w) * .406);height:calc(var(--w) * .326);
    /* vidro: quase transparente, com o reflexo em faixa e a borda clara.
       (v1 era rosa e leitosa: lia como lente de sol, e a cena e de grau) */
    background:
      linear-gradient(118deg,transparent 18%,rgba(255,255,255,.20) 26%,rgba(255,255,255,.05) 33%,transparent 40%),
      radial-gradient(110% 80% at 26% 18%,rgba(255,255,255,.14),transparent 50%),
      linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.015) 55%,rgba(0,0,0,.16));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.42),inset 0 0 12px rgba(255,255,255,.07),inset 0 -12px 22px -14px rgba(0,0,0,.5)}
  .lente-e{left:calc(var(--w) * .017);border-radius:18% 36% 44% 40% / 24% 30% 62% 70%}
  .lente-d{left:calc(var(--w) * .577);border-radius:36% 18% 40% 44% / 30% 24% 70% 62%}
  .lente::after{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;
    background:linear-gradient(115deg,transparent 36%,rgba(255,255,255,.42) 48%,transparent 60%) 120% 0/300% 100% no-repeat}

  .rot{position:absolute;white-space:nowrap;font:400 .68rem/1.3 var(--hud);letter-spacing:.12em;
    text-transform:uppercase;color:var(--tinta-2);opacity:0}
  .rot::before{content:"";position:absolute;width:1px;background:var(--linha-forte)}
  .rot-a{left:calc(48% - var(--w) * .5);top:calc(50% - var(--w) * .18 - 58px)}
  .rot-a::before{left:12px;top:calc(100% + 6px);height:30px}
  .rot-b{left:calc(48% + var(--w) * .1);top:calc(50% + var(--w) * .18 + 30px)}
  .rot-b::before{left:50%;bottom:calc(100% + 6px);height:22px}
  .selo{position:absolute;left:48%;bottom:0;translate:-50% 0;display:grid;gap:2px;justify-items:center;
    padding:12px 22px;border:1px solid var(--sinal);opacity:0;white-space:nowrap;
    background:color-mix(in oklch,var(--noite) 70%,transparent)}
  .selo b{font:600 .74rem/1 var(--hud);letter-spacing:.2em;text-transform:uppercase;color:var(--sinal)}
  .selo em{font-family:var(--display);font-style:italic;font-size:1.2rem;color:var(--trigo)}
  .troca-dito{display:grid;gap:18px;justify-items:start}

  /* ---- 06. A CASA ---- */
  .c-casa .env{display:grid;gap:var(--passo)}
  .prova{display:grid;gap:clamp(22px,3.4vw,40px);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .nota-grande{grid-column:1/-1;display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
    padding-bottom:clamp(18px,3vh,30px);border-bottom:1px solid var(--linha)}
  .nota-grande b{font-family:var(--display);font-weight:300;font-size:clamp(3.4rem,8vw,6rem);line-height:.86;color:var(--trigo)}
  .nota-grande span{max-width:38ch;color:var(--tinta-2);font-size:.98rem}
  blockquote{display:grid;gap:10px;padding-left:20px;border-left:1px solid var(--linha-forte)}
  blockquote p{font-family:var(--display);font-weight:300;font-size:clamp(1.1rem,1rem + .7vw,1.4rem);line-height:1.34}
  cite{font:400 .72rem/1.4 var(--hud);letter-spacing:.1em;font-style:normal;color:var(--tinta-3)}

  .bloco-honesto{display:grid;gap:clamp(18px,3vh,28px)}
  .bloco-honesto ul{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
  .bloco-honesto li{padding-top:14px;border-top:1px solid var(--linha);color:var(--tinta-2);font-size:.96rem}
  .bloco-honesto b{color:var(--tinta);font-weight:600}

  .dupla{display:grid;gap:clamp(30px,5vw,64px);grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .onde,.quando{display:grid;gap:18px;align-content:start}
  .onde dl{display:grid;gap:12px}
  .onde dl div{display:grid;gap:2px;padding-top:11px;border-top:1px solid var(--linha)}
  .onde dt{font:600 .64rem/1.3 var(--hud);letter-spacing:.16em;text-transform:uppercase;color:var(--sinal)}
  .onde dd{margin:0;color:var(--tinta-2)}
  .quando th{text-align:left;font-weight:400;color:var(--tinta-2)}
  .quando td{text-align:right;font-variant-numeric:tabular-nums;color:var(--tinta)}
  .quando th,.quando td{padding:10px 0;border-bottom:1px solid var(--linha);font-size:.95rem}

  .fecho{display:grid;gap:24px;justify-items:center;text-align:center;padding-top:clamp(20px,4vh,40px)}

  /* ---- RODAPE ---- */
  .rodape{position:relative;z-index:1;padding:clamp(40px,7vh,80px) 0 calc(clamp(40px,7vh,80px) + 70px);
    border-top:1px solid var(--linha);background:var(--noite-2)}
  .rodape .env{display:grid;gap:10px}
  .rod-marca{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .rod-marca img{height:30px;width:auto}
  .rod-marca span{font-family:var(--display);font-style:italic;color:var(--tinta-2)}
  .rodape p{color:var(--tinta-3);font-size:.88rem}
  .rod-links a{color:var(--tinta-2)}
  .rod-aviso{max-width:76ch;font-size:.79rem;color:color-mix(in oklch,var(--creme) 50%,var(--noite))}
}

/* =====================================================================
   COMP -- pecas reutilizaveis
   ===================================================================== */
@layer comp{
  .bt{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
    padding:13px 22px;font:600 .84rem/1 var(--corpo);letter-spacing:.02em;
    border:1px solid var(--linha-forte);color:var(--tinta);
    transition:transform var(--t-toque) var(--ease-out),background-color var(--t-toque) var(--ease-out),
      border-color var(--t-toque) var(--ease-out),color var(--t-toque) var(--ease-out)}
  .bt:active{transform:scale(.97)}
  /* branco sobre o vermelho da marca: 5,85:1 */
  .bt-cheio{background:var(--vermelho);border-color:var(--vermelho);color:#fff}
  .bt-cheio:hover{background:color-mix(in oklch,var(--vermelho) 86%,#fff)}
  .bt-vazio:hover,.bt-zap:hover{border-color:var(--sinal);color:var(--sinal)}
  .bt-zap{padding:9px 16px;font-size:.78rem}

  .chapa{display:flex;align-items:center;gap:10px;
    font:600 .7rem/1 var(--hud);letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-3)}
  .chapa em{font-style:normal;color:var(--linha-forte)}
  .chapa b{color:var(--trigo);font-weight:600}
  .chapa-sinal{color:var(--sinal)}
  .chapa-sinal em{color:color-mix(in oklch,var(--sinal) 50%,transparent)}

  .zap{position:fixed;right:clamp(14px,3vw,26px);bottom:clamp(14px,3vw,26px);z-index:70;
    display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
    background:#13823F;color:#fff;box-shadow:0 10px 30px -8px rgba(0,0,0,.7)}
  .zap:hover{background:#0F7A3D}

  .pular-gatilho{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

  /* ---- VINHETA DE ABERTURA (zero JavaScript): a lente foca ---- */
  .abre{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
    background:var(--noite);overflow:hidden}
  .abre-luz{position:absolute;inset:auto 0 -24%;height:70%;opacity:0;
    background:
      radial-gradient(52% 100% at 50% 100%,color-mix(in oklch,var(--vermelho) 62%,transparent),transparent 66%),
      radial-gradient(80% 100% at 50% 100%,color-mix(in oklch,var(--vinho) 70%,transparent),transparent 72%);
    filter:blur(14px)}
  .abre-trava{position:relative;display:grid;justify-items:center;gap:18px;text-align:center}
  .abre-lentes{display:flex;align-items:center}
  .abre-lentes span{width:clamp(40px,9vw,58px);aspect-ratio:1;border-radius:50%;
    border:2px solid var(--trigo);opacity:0}
  .abre-lentes i{width:clamp(10px,2.2vw,16px);height:2px;margin-bottom:clamp(10px,2vw,16px);
    background:var(--trigo);opacity:0}
  .abre-logo{width:min(66vw,320px);height:auto;opacity:0}
  .abre-sub{font-family:var(--display);font-style:italic;font-size:clamp(1rem,2.6vw,1.4rem);color:var(--trigo);opacity:0}
  .abre-local{font:400 .66rem/1 var(--hud);letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-3);opacity:0}
  .abre-pular{position:absolute;right:var(--recuo);bottom:26px;cursor:pointer;
    font:400 .68rem/1 var(--hud);letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-3);
    padding:9px 14px;border:1px solid var(--linha)}
  .abre-pular:hover{color:var(--sinal);border-color:var(--sinal)}
}

/* =====================================================================
   MOV -- movimento, e SO movimento.
   ===================================================================== */
@layer mov{

  #c1{view-timeline:--k1 block}
  #c2{view-timeline:--k2 block}
  #c3{view-timeline:--k3 block}
  #c4{view-timeline:--k4 block}
  #c5{view-timeline:--k5 block}
  #c6{view-timeline:--k6 block}

  /* ---- a barra do filme: a unica presa a rolagem da pagina inteira ---- */
  @keyframes correr{from{scale:0 1}to{scale:1 1}}
  .hud-barra i{animation-name:correr;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(root block)}

  @keyframes piscar{0%,44%{opacity:1}52%,96%{opacity:.18}100%{opacity:1}}
  .rec b{animation:piscar 1.9s steps(1,end) infinite}

  /* ---- leitura do visor e do menu: cada capitulo acende a sua ---- */
  @keyframes acender{
    0%,14%{opacity:0;translate:0 6px;filter:blur(2px)}
    26%,74%{opacity:1;translate:0 0;filter:blur(0)}
    86%,100%{opacity:0;translate:0 -6px;filter:blur(2px)}
  }
  /* o capitulo apagado do menu e LINK: a .34 do Curumim media 1,8:1 no
     pixel. A .72 ele continua apagado em relacao ao aceso e passa a ler. */
  @keyframes acender-menu{
    0%,14%{opacity:.72;color:var(--tinta-3)}
    26%,74%{opacity:1;color:var(--trigo)}
    86%,100%{opacity:.72;color:var(--tinta-3)}
  }
  @keyframes acender-num{0%,14%{opacity:.7}26%,74%{opacity:1}86%,100%{opacity:.7}}

  .hud-foco .h1,.hud-cap .h1,.capitulos .n1{animation-timeline:--k1}
  .hud-foco .h2,.hud-cap .h2,.capitulos .n2{animation-timeline:--k2}
  .hud-foco .h3,.hud-cap .h3,.capitulos .n3{animation-timeline:--k3}
  .hud-foco .h4,.hud-cap .h4,.capitulos .n4{animation-timeline:--k4}
  .hud-foco .h5,.hud-cap .h5,.capitulos .n5{animation-timeline:--k5}
  .hud-foco .h6,.hud-cap .h6,.capitulos .n6{animation-timeline:--k6}
  .hud-foco em,.hud-cap em{animation-name:acender;animation-fill-mode:both;animation-timing-function:linear;animation-range:cover 0% cover 100%}
  .capitulos a{animation-name:acender-menu;animation-fill-mode:both;animation-timing-function:linear;animation-range:cover 0% cover 100%}
  .capitulos a em{animation-name:acender-num;animation-timing-function:linear;animation-fill-mode:both;animation-range:cover 0% cover 100%}
  .capitulos .n1 em{animation-timeline:--k1}
  .capitulos .n2 em{animation-timeline:--k2}
  .capitulos .n3 em{animation-timeline:--k3}
  .capitulos .n4 em{animation-timeline:--k4}
  .capitulos .n5 em{animation-timeline:--k5}
  .capitulos .n6 em{animation-timeline:--k6}

  /* ---- ⭐ o foco TRAVA no capitulo 04 e nao destrava mais ----
     quando as duas lentes estao no lugar, o AF do visor fica vermelho e a
     luz de baixo acende. fill both: dali em diante a pagina esta em foco. */
  @keyframes trava-foco{from{--foco:0}to{--foco:1}}
  :root{animation-name:trava-foco;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--k4;animation-range:contain 26% contain 42%}

  /* ---- entrada das cenas ---- */
  @keyframes sobe{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
  .c-armacoes .dito,.c-atende .dito,.troca-dito,.prova,.bloco-honesto,.dupla,.fecho{
    animation-name:sobe;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range:entry 12% cover 34%}
  /* o quadro da pelicula entra fora de foco e foca, como numa moviola */
  @keyframes quadro{
    from{opacity:0;translate:0 30px;filter:blur(8px)}
    to{opacity:1;translate:0 0;filter:blur(0)}
  }
  .pelicula figure{animation-name:quadro;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range:entry 4% cover 30%}

  /* ---- o poco de luz respira: a foto entra com escala e foco ---- */
  @keyframes focar{
    from{opacity:.2;scale:1.09;filter:blur(7px) saturate(.7)}
    to{opacity:1;scale:1;filter:blur(0) saturate(1)}
  }
  .poco img{animation-name:focar;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range:entry 0% cover 42%}
  @keyframes travar{
    0%{opacity:0;inset:4% 6%}
    62%{opacity:1;inset:16% 20%}
    100%{opacity:.75;inset:16% 20%}
  }
  .retic{animation-name:travar;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range:entry 10% cover 46%}

  /* ---- 04. O FOCO ---- */
  /* o raio das lentes: 0 (tudo borrado) -> 15% da foto (o par de lentes
     parado, so o que esta dentro e nitido) -> 95% (as lentes engolem a foto
     inteira: tudo em foco). Medir no FILHO .nitida, nunca no .lp (A1). */
  @keyframes abrir-lentes{
    0%,10%{--r:0px}
    38%,60%{--r:15cqi}
    84%,100%{--r:95cqi}
  }
  .lp{animation-name:abrir-lentes;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--k4;animation-range:contain 0% contain 100%}
  @keyframes armacao-aparece{0%,12%{opacity:0}28%,60%{opacity:1}72%,100%{opacity:0}}
  .armacao-foco{animation-name:armacao-aparece;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--k4;animation-range:contain 0% contain 100%}
  @keyframes foco-entrar{
    0%{opacity:.3;scale:.94;translate:0 4vh}
    16%{opacity:1;scale:1;translate:0 0}
    84%{opacity:1;scale:1.01;translate:0 0;filter:blur(0) brightness(1)}
    96%,100%{opacity:.16;scale:1.05;translate:0 -3vh;filter:blur(6px) brightness(.5)}
  }
  .poco-foco{animation-name:foco-entrar;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--k4;animation-range:contain 0% contain 100%}
  @keyframes frase-entrar{
    0%,84%{opacity:0;translate:0 3vh;filter:blur(5px)}
    95%,100%{opacity:1;translate:0 0;filter:blur(0)}
  }
  .foco-frase{animation-name:frase-entrar;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--k4;animation-range:contain 0% contain 100%}
  /* o letreiro fantasma tambem foca: chega borrado e assenta */
  @keyframes fantasma-focar{
    0%{opacity:.2;filter:blur(14px);letter-spacing:.14em}
    40%{opacity:1;filter:blur(0);letter-spacing:.02em}
    100%{opacity:.22;filter:blur(0);letter-spacing:0em}
  }
  .fantasma{animation-name:fantasma-focar;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--k4;animation-range:contain 0% contain 100%}
  @keyframes specs-entrar{
    0%{opacity:0;translate:-24px 0;clip-path:inset(0 100% 0 0)}
    22%,64%{opacity:1;translate:0 0;clip-path:inset(0 0 0 0)}
    80%,100%{opacity:0;translate:-18px 0;clip-path:inset(0 0 0 0)}
  }
  .specs{animation-name:specs-entrar;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--k4;animation-range:contain 0% contain 100%}

  /* ---- 05. A TROCA: as lentes novas chegam e assentam no aro ---- */
  /* o trecho 72% -> 88% e o assentamento: a lente passa um tico do lugar
     e volta. E o que da PESO; sem isso o encaixe parece ima. */
  @keyframes lente-e{
    0%{translate:calc(var(--w) * -.9) calc(var(--w) * -.5);rotate:-28deg;scale:1.5;opacity:0;filter:blur(6px)}
    14%{opacity:1}
    46%{translate:calc(var(--w) * -.32) calc(var(--w) * -.16);rotate:-10deg;scale:1.18;filter:blur(1.5px)}
    72%{translate:calc(var(--w) * -.03) calc(var(--w) * -.02);rotate:-2deg;scale:1.03;filter:blur(0)}
    80%{translate:0 calc(var(--w) * .006);rotate:0deg;scale:.985}
    88%,100%{translate:0 0;rotate:0deg;scale:1;opacity:1;filter:blur(0)}
  }
  @keyframes lente-d{
    0%{translate:calc(var(--w) * .9) calc(var(--w) * -.5);rotate:28deg;scale:1.5;opacity:0;filter:blur(6px)}
    14%{opacity:1}
    46%{translate:calc(var(--w) * .32) calc(var(--w) * -.16);rotate:10deg;scale:1.18;filter:blur(1.5px)}
    72%{translate:calc(var(--w) * .03) calc(var(--w) * -.02);rotate:2deg;scale:1.03;filter:blur(0)}
    80%{translate:0 calc(var(--w) * .006);rotate:0deg;scale:.985}
    88%,100%{translate:0 0;rotate:0deg;scale:1;opacity:1;filter:blur(0)}
  }
  .lente{animation-timeline:--k5;animation-range:contain 0% contain 100%;animation-timing-function:linear;animation-fill-mode:both}
  .lente-e{animation-name:lente-e}
  .lente-d{animation-name:lente-d}
  /* o brilho que corre a lente depois que ela assenta */
  @keyframes brilho{0%,84%{opacity:0;background-position:120% 0}90%{opacity:1}100%{opacity:0;background-position:-20% 0}}
  .lente::after{animation-name:brilho;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--k5;animation-range:contain 0% contain 100%}
  /* a armacao chega primeiro: so opacidade e escala (o translate dela e layout) */
  @keyframes armacao-chega{0%{opacity:.35;scale:.94}14%,100%{opacity:1;scale:1}}
  .oculos{animation-name:armacao-chega;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--k5;animation-range:contain 0% contain 100%}
  @keyframes rot-a{0%,6%{opacity:0}18%,100%{opacity:1}}
  @keyframes rot-b{0%,26%{opacity:0}40%,100%{opacity:1}}
  .rot-a{animation-name:rot-a;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--k5;animation-range:contain 0% contain 100%}
  .rot-b{animation-name:rot-b;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--k5;animation-range:contain 0% contain 100%}
  @keyframes selar{0%,74%{opacity:0;scale:.92}86%,100%{opacity:1;scale:1}}
  .selo{animation-name:selar;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--k5;animation-range:contain 0% contain 100%}
  @keyframes estalo{0%,74%{opacity:0;scale:.5}80%{opacity:.7;scale:1.2}92%,100%{opacity:0;scale:1.7}}
  .bancada::after{animation-name:estalo;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--k5;animation-range:contain 0% contain 100%}
  @keyframes bancada-zoom{0%{scale:.96}40%{scale:.98}78%{scale:1.04}100%{scale:1.03}}
  .bancada{animation-name:bancada-zoom;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--k5;animation-range:contain 0% contain 100%}

  .capitulos a,.hud-foco em,.hud-cap em{will-change:opacity}
}

/* =====================================================================
   ESTADO -- vinheta, foco, telas pequenas, movimento reduzido
   ===================================================================== */
@layer estado{

  /* ---- a vinheta corre em TEMPO, nao em rolagem ---- */
  @keyframes abre-lente-e{0%{opacity:0;translate:-70px 0;scale:1.7;filter:blur(8px)}100%{opacity:1;translate:0 0;scale:1;filter:blur(0)}}
  @keyframes abre-lente-d{0%{opacity:0;translate:70px 0;scale:1.7;filter:blur(8px)}100%{opacity:1;translate:0 0;scale:1;filter:blur(0)}}
  @keyframes abre-aparece{from{opacity:0}to{opacity:1}}
  @keyframes abre-focar{0%{opacity:0;filter:blur(18px);scale:1.08}100%{opacity:1;filter:blur(0);scale:1}}
  @keyframes abre-letra{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
  @keyframes abre-luz{0%{opacity:0}60%{opacity:1}100%{opacity:.7}}
  @keyframes abre-fim{to{opacity:0;visibility:hidden}}

  /* duracao sempre num degrau da casa; o atraso e a coreografia e mora em
     animation-delay (no atalho, o 1o tempo e lido como duracao) */
  .abre{animation-name:abre-fim;animation-duration:var(--t-gesto);animation-timing-function:var(--ease-in-out);animation-delay:2600ms;animation-fill-mode:both}
  .abre-lentes span:nth-child(1){animation-name:abre-lente-e;animation-duration:var(--t-marca);animation-timing-function:var(--ease-out);animation-delay:120ms;animation-fill-mode:both}
  .abre-lentes span:nth-child(3){animation-name:abre-lente-d;animation-duration:var(--t-marca);animation-timing-function:var(--ease-out);animation-delay:120ms;animation-fill-mode:both}
  .abre-lentes i{animation-name:abre-aparece;animation-duration:var(--t-cena);animation-timing-function:linear;animation-delay:860ms;animation-fill-mode:both}
  .abre-luz{animation-name:abre-luz;animation-duration:var(--t-marca);animation-timing-function:var(--ease-out);animation-delay:260ms;animation-fill-mode:both}
  .abre-logo{animation-name:abre-focar;animation-duration:var(--t-marca);animation-timing-function:var(--ease-out);animation-delay:780ms;animation-fill-mode:both}
  .abre-sub{animation-name:abre-letra;animation-duration:var(--t-gesto);animation-timing-function:var(--ease-out);animation-delay:1500ms;animation-fill-mode:both}
  .abre-local{animation-name:abre-letra;animation-duration:var(--t-gesto);animation-timing-function:var(--ease-out);animation-delay:1720ms;animation-fill-mode:both}

  /* o botao Pular e uma caixa de selecao escondida: zero JavaScript */
  .pular-gatilho:checked ~ .abre{animation:none;opacity:0;visibility:hidden}

  /* ⚠️ a vinheta NAO tranca o scroll: overflow animado no <html> mata o
     sticky e zera o scroll(root block) na pagina inteira (lab da Next). */

  :where(a,button,label,input):focus-visible{outline:2px solid var(--sinal);outline-offset:3px}

  @media (max-width:1219px){
    .marca i{display:none}
  }
  @media (max-width:1099px){
    .capitulos{display:none}
    /* ⛔ no celular o specs entra pelo eixo Y: o X vazava 4 px para fora (A8) */
    @keyframes specs-entrar-m{
      0%{opacity:0;translate:0 20px}
      22%,72%{opacity:1;translate:0 0}
      88%,100%{opacity:0;translate:0 -14px}
    }
    .specs{position:static;translate:none;width:100%;max-width:520px;animation-name:specs-entrar-m}
    .specs dl{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:18px}
    .grande{display:none}
    .foco-palco{grid-template-rows:auto auto;align-content:center;gap:22px;padding-inline:var(--recuo)}
    .poco-foco{width:min(92vw,600px);margin-inline:auto}
  }
  @media (max-width:899px){
    :root{--topo:56px}
    .palco,.palco-2,.prova,.dupla,.troca-palco{grid-template-columns:minmax(0,1fr)}
    .palco .poco{order:1}
    .palco .dito{order:2}
    .poco-loja{max-width:400px}
    .dito-fixo{position:static}
    .pelicula{padding:12px 26px;gap:10px}
    .pelicula::before{left:7px}
    .pelicula::after{right:7px}
    .c-foco{height:240vh}
    .c-troca{height:220vh}
    .troca-palco{grid-template-rows:auto auto auto;align-content:center;gap:16px;height:100svh;padding-top:calc(var(--topo) + 34px)}
    .troca-palco>.chapa{position:static}
    /* ⚠️ no celular a frente dos oculos encolhe para caber com os rotulos:
       orcamento na largura de 390, rotulo mais longo ~190 px (A9). */
    .bancada{height:min(36vh,270px);--w:min(74vw,290px)}
    .troca-dito{gap:12px}
    .troca-dito .lead{font-size:.95rem}
    .rot{font-size:.6rem;letter-spacing:.08em}
    .rot-a{left:calc(48% - var(--w) * .5);top:calc(50% - var(--w) * .18 - 48px)}
    .bancada::after{width:calc(var(--w) * .9)}
    .hud-tr,.hud-br{display:none}
    .ct-b{right:calc(var(--recuo) - 10px)}
    .ct-d{right:calc(var(--recuo) - 10px)}
    .fantasma{font-size:clamp(1.7rem,7.2vw,3rem);padding-left:var(--recuo);place-items:end center}
    .nota-grande b{font-size:clamp(3rem,16vw,4.6rem)}
    .abre{animation-delay:2150ms}
  }
  @media (max-width:560px){
    .ficha li{grid-template-columns:minmax(0,1fr)}
    .specs dl{gap:7px}
    .numeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
    .numeros span{font-size:.7rem}
    .selo{padding:10px 16px}
    .selo em{font-size:1.05rem}
  }

  /* ⭐ quem pediu menos movimento recebe a pagina inteira, parada e NITIDA */
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .abre{display:none}
    *,*::before,*::after{
      animation-duration:1ms!important;animation-iteration-count:1!important;
      transition-duration:1ms!important;animation-delay:0ms!important}
    .hud-foco .h1,.hud-cap .h1{opacity:1}
    .poco img,.retic,.specs,.poco-foco,.fantasma,.pelicula figure,.oculos,.rot,.selo,.lente,
    .c-armacoes .dito,.c-atende .dito,.troca-dito,.prova,.bloco-honesto,.dupla,.fecho{
      opacity:1!important;scale:1!important;translate:none!important;rotate:none!important;filter:none!important;clip-path:none!important}
    .lp{animation:none!important;--r:200cqi}
    .armacao-foco,.foco-frase,.bancada::after,.lente::after{animation:none!important;opacity:0!important}
    .foco-frase{display:none}
    .ambiente .amb-foco{opacity:.55}
    .af i+i{opacity:1}
  }

  /* navegador sem scroll-driven animation: entrega tudo visivel e nitido */
  @supports not (animation-timeline:view()){
    .poco img,.retic,.specs,.poco-foco,.fantasma,.pelicula figure,.oculos,.rot,.selo,.lente,
    .c-armacoes .dito,.c-atende .dito,.troca-dito,.prova,.bloco-honesto,.dupla,.fecho,
    .hud-foco .h1,.hud-cap .h1{
      opacity:1;scale:1;translate:none;rotate:none;filter:none;clip-path:none;animation:none}
    .lp{animation:none;--r:200cqi}
    .armacao-foco,.foco-frase{display:none}
    .c-foco,.c-troca{height:auto}
    .foco-palco,.troca-palco{position:static;height:auto;padding-block:var(--passo)}
    .ambiente .amb-foco{opacity:.5}
    .hud-barra i{scale:0 1}
  }
}

@layer estado{
  /* item 15.4-g do /site: no papel nao ha rolagem; tudo parado, aberto e nitido */
  @media print{
    .abre,.hud,.ambiente,.zap,.topo,.armacao-foco,.foco-frase,.borrada{display:none}
    .c-foco,.c-troca{height:auto}
    .foco-palco,.troca-palco{position:static;height:auto}
    .dito-fixo{position:static}
    .lp{animation:none;--r:200cqi}
    *,*::before,*::after{animation:none!important}
  }
}

/* ---- PRIVACIDADE ---- */
@layer forma{
  .priv{position:relative;z-index:1;padding:clamp(60px,10vh,110px) 0}
  .priv .env{max-width:760px;display:grid;gap:30px}
  .priv section{display:grid;gap:10px;padding-top:18px;border-top:1px solid var(--linha)}
  .priv p,.priv li{color:var(--tinta-2)}
  .priv ul{display:grid;gap:8px;padding-left:1.1em;list-style:disc}
  .priv .marca-priv img{height:30px;width:auto}
}

/* =====================================================================
   404 -- mora aqui, e nao num <style> no 404.html: com CSP estrita sem
   'unsafe-inline', o bloco embutido seria bloqueado.
   ===================================================================== */
@layer forma{
  .e404{min-height:100svh;display:grid;align-content:center;gap:24px;justify-items:start;
    width:min(100% - var(--recuo)*2,900px);margin-inline:auto}
  .e404 .cod{font-family:var(--display);font-weight:300;font-size:clamp(5rem,17vw,12rem);
    line-height:.84;color:var(--trigo);opacity:.32}
}