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

@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}

@property --foco{syntax:"<number>";inherits:true;initial-value:0}

@property --r{syntax:"<length>";inherits:true;initial-value:0px}

@property --rot{syntax:"<angle>";inherits:true;initial-value:0deg}

@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{

    --noite:#24070C;
    --noite-2:#2E0A10;
    --vinho:#5C0C18;
    --vermelho:#C8132F;
    --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);

    --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;

    --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}

  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}
}

@layer forma{
  .env{width:min(100% - var(--recuo)*2,var(--larg));margin-inline:auto}

  .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);

    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}

  .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)}

  .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)}

  .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{position:fixed;inset:0;z-index:0;pointer-events:none}
  .ambiente span{position:absolute;inset:0;display:block}

  .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%)}

  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)}

  .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}

  .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}

  .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)}

  .pelicula img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}

  .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}

  .c-foco{height:280vh;padding:0}
  .foco-palco{position:sticky;top:0;height:100svh;overflow:hidden;
    display:grid;place-items:center;isolation:isolate}

  .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}

  .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}

  .lp{position:relative;--r:0px;--rot:0deg}
  .lp img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}

  .borrada{filter:blur(11px) brightness(.7) saturate(.8);scale:1.05}

  .nitida{position:absolute;inset:0;height:100%;opacity:0}

  .iris{position:absolute;inset:0;overflow:clip;pointer-events:none;
    --lam-a:color-mix(in oklch,var(--creme) 17%,var(--noite));
    --lam-b:color-mix(in oklch,var(--creme) 6%,var(--noite));
    --lam-c:color-mix(in oklch,#000 48%,var(--noite));
    --lam-luz:color-mix(in oklch,var(--trigo) 44%,transparent)}

  .iris::before{content:"";position:absolute;inset:0;background:var(--lam-c);
    --R:calc(var(--r) * 1.0824);
    clip-path:polygon(evenodd,0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,
      calc(50% + var(--R) * cos(calc(var(--rot) - 22.5deg + 0deg))) calc(50% + var(--R) * sin(calc(var(--rot) - 22.5deg + 0deg))),
      calc(50% + var(--R) * cos(calc(var(--rot) - 22.5deg + 45deg))) calc(50% + var(--R) * sin(calc(var(--rot) - 22.5deg + 45deg))),
      calc(50% + var(--R) * cos(calc(var(--rot) - 22.5deg + 90deg))) calc(50% + var(--R) * sin(calc(var(--rot) - 22.5deg + 90deg))),
      calc(50% + var(--R) * cos(calc(var(--rot) - 22.5deg + 135deg))) calc(50% + var(--R) * sin(calc(var(--rot) - 22.5deg + 135deg))),
      calc(50% + var(--R) * cos(calc(var(--rot) - 22.5deg + 180deg))) calc(50% + var(--R) * sin(calc(var(--rot) - 22.5deg + 180deg))),
      calc(50% + var(--R) * cos(calc(var(--rot) - 22.5deg + 225deg))) calc(50% + var(--R) * sin(calc(var(--rot) - 22.5deg + 225deg))),
      calc(50% + var(--R) * cos(calc(var(--rot) - 22.5deg + 270deg))) calc(50% + var(--R) * sin(calc(var(--rot) - 22.5deg + 270deg))),
      calc(50% + var(--R) * cos(calc(var(--rot) - 22.5deg + 315deg))) calc(50% + var(--R) * sin(calc(var(--rot) - 22.5deg + 315deg))),
      calc(50% + var(--R) * cos(calc(var(--rot) - 22.5deg + 0deg))) calc(50% + var(--R) * sin(calc(var(--rot) - 22.5deg + 0deg))),0% 0%)}
  .iris b{position:absolute;inset:0;
    --t:calc(var(--i) * 45deg + var(--rot));
    --cx:calc(var(--r) * 1.0824 * cos(calc(var(--t) - 22.5deg)));
    --cy:calc(var(--r) * 1.0824 * sin(calc(var(--t) - 22.5deg)));
    clip-path:polygon(
      calc(50% + var(--cx)) calc(50% + var(--cy)),
      calc(50% + var(--cx) - 300cqi * sin(var(--t))) calc(50% + var(--cy) + 300cqi * cos(var(--t))),
      calc(50% + var(--cx) - 300cqi * sin(calc(var(--t) - 45deg))) calc(50% + var(--cy) + 300cqi * cos(calc(var(--t) - 45deg))));

    background:
      linear-gradient(calc(var(--t) + 90deg),transparent calc(50% + var(--r)),
        var(--lam-luz) calc(50% + var(--r)),transparent calc(50% + var(--r) + .8cqi)),
      linear-gradient(calc(var(--t) + 90deg),var(--lam-a) calc(50% + var(--r)),
        var(--lam-b) calc(50% + var(--r) + 14cqi),var(--lam-c) calc(50% + var(--r) + 50cqi))}
  .iris b:nth-child(1){--i:0}
  .iris b:nth-child(2){--i:1}
  .iris b:nth-child(3){--i:2}
  .iris b:nth-child(4){--i:3}
  .iris b:nth-child(5){--i:4}
  .iris b:nth-child(6){--i:5}
  .iris b:nth-child(7){--i:6}
  .iris b:nth-child(8){--i:7}

  .abertura{position:absolute;left:0;right:0;bottom:10%;z-index:2;display:grid;justify-items:center;gap:6px;
    font:400 .62rem/1 var(--hud);letter-spacing:.08em;color:var(--tinta-hud);pointer-events:none;
    text-shadow:0 1px 5px rgba(0,0,0,.9)}
  .abertura::before{content:"";width:1px;height:9px;background:var(--sinal)}
  .abertura>i{display:block;width:15.2em;overflow:clip;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 28%,#000 72%,transparent)}
  .abertura span{display:flex;width:max-content}
  .abertura b{display:block;width:3.8em;text-align:center;font-weight:400}

  .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}

  .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)}

  .c-inter{min-height:100svh;display:grid;place-items:center;padding:var(--passo) var(--recuo)}
  .cartela{position:relative;display:grid;justify-items:center;gap:clamp(16px,2.6vh,28px);text-align:center;
    width:min(100%,900px);padding:clamp(40px,7vh,84px) clamp(22px,5vw,72px);
    border:1px solid var(--linha-forte);outline:1px solid var(--linha);outline-offset:9px;
    background:radial-gradient(80% 70% at 50% 40%,color-mix(in oklch,var(--vinho) 36%,transparent),transparent 72%)}
  .cartela .d1{max-width:16ch}
  .cartela .lead{margin-inline:auto}
  .carimbo{display:grid;gap:3px;justify-items:center;margin-top:6px;padding:12px 24px;border:1px solid var(--sinal);
    background:color-mix(in oklch,var(--noite) 70%,transparent)}
  .carimbo b{font:600 .74rem/1 var(--hud);letter-spacing:.2em;text-transform:uppercase;color:var(--sinal)}
  .carimbo em{font-family:var(--display);font-style:italic;font-size:1.2rem;color:var(--trigo)}

  .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{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))}
}

@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)}

  .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}

  .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)}
}

@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}

  @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}

  @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)}
  }

  @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}

  @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%}

  @keyframes sobe{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
  .c-armacoes .dito,.c-atende .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%}

  @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%}

  @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%}

  @keyframes abrir-iris{
    0%,8%{--r:.7cqi;--rot:-22deg}
    38%,60%{--r:17cqi;--rot:0deg}
    86%,100%{--r:74cqi;--rot:24deg}
  }
  .lp{animation-name:abrir-iris;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--k4;animation-range:contain 0% contain 100%}
  @keyframes nitida-focar{0%,16%{opacity:0}40%,100%{opacity:1}}
  .nitida{animation-name:nitida-focar;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--k4;animation-range:contain 0% contain 100%}

  @keyframes abertura-correr{
    0%,8%{translate:5.7em 0}
    38%,60%{translate:-13.3em 0}
    86%,100%{translate:-24.7em 0}
  }
  .abertura span{animation-name:abertura-correr;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:--k4;animation-range:contain 0% contain 100%}
  @keyframes abertura-sair{0%,72%{opacity:1}84%,100%{opacity:0}}
  .abertura{animation-name:abertura-sair;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%}

  @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%}

  @keyframes cartela-entra{from{opacity:0;filter:blur(6px);scale:.97}to{opacity:1;filter:blur(0);scale:1}}
  .cartela{animation-name:cartela-entra;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range:entry 10% cover 40%}
  @keyframes carimbar{0%{opacity:0;scale:1.12}70%{opacity:1;scale:.98}100%{opacity:1;scale:1}}
  .carimbo{animation-name:carimbar;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range:entry 100% cover 40%}

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

@layer estado{

  @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}}

  .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}

  .pular-gatilho:checked ~ .abre{animation:none;opacity:0;visibility:hidden}

  :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}

    @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{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}
    .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}
  }

  @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,.cartela,.carimbo,
    .c-armacoes .dito,.c-atende .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}
    .iris,.abertura{display:none!important}
    .nitida{animation:none!important;opacity:1!important}
    .foco-frase{animation:none!important;opacity:0!important}
    .foco-frase{display:none}
    .ambiente .amb-foco{opacity:.55}
    .af i+i{opacity:1}
  }

  @supports not (animation-timeline:view()){
    .poco img,.retic,.specs,.poco-foco,.fantasma,.pelicula figure,.cartela,.carimbo,
    .c-armacoes .dito,.c-atende .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}
    .iris,.abertura,.foco-frase{display:none}
    .nitida{opacity:1}
    .c-foco{height:auto}
    .foco-palco{position:static;height:auto;padding-block:var(--passo)}
    .ambiente .amb-foco{opacity:.5}
    .hud-barra i{scale:0 1}
  }
}

@layer estado{

  @media print{
    .abre,.hud,.ambiente,.zap,.topo,.iris,.abertura,.foco-frase{display:none}
    .nitida{opacity:1}
    .c-foco{height:auto}
    .foco-palco{position:static;height:auto}
    .dito-fixo{position:static}
    .lp{animation:none;--r:200cqi}
    *,*::before,*::after{animation:none!important}
  }
}

@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}
}

@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}
}