/* Cartão digital — Wincer Oliveira, Wow Soluções.
   Um plano-sequência: a rolagem move a câmera pela cidade acesa da home. O retrato recortado fica na frente de tudo
   (o rosto nunca é coberto), os títulos entram como créditos de filme. Mobile primeiro: é onde o toque no NFC abre.
   Duas formas: "filme" (cena fixa, câmera controlada pela rolagem) e "estática" (sem JavaScript ou com movimento reduzido). */

@font-face{font-family:'Anton';src:url(fonts/Anton-latin.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url(fonts/Newsreader-roman-latin.woff2) format('woff2');font-weight:400 500;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url(fonts/Newsreader-italic-latin.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}

:root{
  --bg:#090101;
  --ink:#f3ede4;
  --mute:rgba(243,237,228,.76);
  --line:rgba(243,237,228,.16);
  --red:#ff4a56;
  --teal:#4fb3b0;
  --lime:#cdff69;
  --display:'Anton','Impact','Arial Narrow',sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --pad:clamp(20px,6vw,44px);
  --ease:cubic-bezier(.16,1,.3,1);
  --vh:100vh;
  --dock:calc(74px + env(safe-area-inset-bottom));
}
@supports (height:100svh){:root{--vh:100svh}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg);overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:400 clamp(17px,4.6vw,19px)/1.55 var(--serif);font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;min-height:var(--vh);overflow-x:clip}
h1,h2,h3,p,ul,small,figure{margin:0;padding:0}
ul{list-style:none}
a{color:inherit}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
::selection{background:var(--lime);color:#14070a}
.skip{position:absolute;left:12px;top:-60px;z-index:90;background:var(--ink);color:#14070a;padding:.6em 1em;border-radius:8px}
.skip:focus{top:12px}
.wrap{width:min(1120px,100% - 2*var(--pad));margin-inline:auto}

/* ───────── cinema: barras de abertura e grão de filme ───────── */
.bars i{position:fixed;left:0;right:0;height:13svh;background:#000;z-index:80;pointer-events:none}
.bars i:first-child{top:0;animation:barTop .9s .75s var(--ease) forwards}
.bars i:last-child{bottom:0;animation:barBot .9s .75s var(--ease) forwards}
@keyframes barTop{to{transform:translateY(-101%);visibility:hidden}}
@keyframes barBot{to{transform:translateY(101%);visibility:hidden}}
.grain{position:fixed;inset:-50%;width:200%;height:200%;z-index:70;pointer-events:none;opacity:.07;will-change:transform;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain .8s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-5%,3%)}40%{transform:translate(4%,-5%)}60%{transform:translate(-3%,-3%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}

/* ───────── botões ───────── */
.btn{display:flex;align-items:center;justify-content:center;min-height:58px;padding:.7em 1.2em;border-radius:999px;border:1px solid rgba(243,237,228,.32);background:rgba(243,237,228,.06);color:var(--ink);font:500 1.08rem/1.1 var(--serif);letter-spacing:.012em;text-decoration:none;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:background-color .3s,color .3s,border-color .3s,box-shadow .3s,transform .2s}
.btn:active{transform:scale(.985)}
.btn--primary{background:var(--lime);border-color:var(--lime);color:#14070a;box-shadow:0 0 34px rgba(205,255,105,.25)}
@media (hover:hover){.btn:hover{background:var(--lime);border-color:var(--lime);color:#14070a;box-shadow:0 0 30px rgba(205,255,105,.45)}}
.textlink{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;padding-bottom:.2em;transition:color .3s;white-space:nowrap}
.textlink:hover{color:var(--lime)}

/* ═════════ O FILME — forma estática (padrão): tudo legível, em fluxo normal ═════════ */
.film{position:relative}
.film__pin{position:relative}
.world{position:absolute;left:0;right:0;top:0;height:max(var(--vh),640px);overflow:hidden;background:var(--bg);z-index:0}
.w,.glow,.dim{position:absolute;inset:0}
.w img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.w--sun{opacity:.7}
.glow{pointer-events:none}
.glow--teal{background:radial-gradient(60% 40% at 8% 52%,rgba(79,179,176,.5),transparent 70%)}
.glow--red{background:radial-gradient(60% 42% at 94% 38%,rgba(255,74,86,.55),transparent 70%)}
.glow--lime,.glow--amber,.dim{opacity:0}
.dim{background:#090101}
.embers{position:absolute;left:0;right:0;top:0;height:max(var(--vh),640px);width:100%;pointer-events:none;z-index:3}

.person{position:absolute;z-index:2;left:0;right:0;top:calc(6 * var(--vh) / 100);margin-inline:auto;width:min(118vw,74 * var(--vh) / 100);aspect-ratio:765/1024;pointer-events:none;transform-origin:50% 38%}
.person img{position:absolute;inset:0;width:100%;height:100%;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(to bottom,#000 78%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 14%,#000 86%,transparent 100%),linear-gradient(to bottom,#000 78%,transparent 100%);-webkit-mask-composite:source-in;mask-composite:intersect}
.person__glow{opacity:.7;transform:scale(1.04)}
.sweep{position:absolute;z-index:4;left:0;top:0;width:70%;height:max(var(--vh),640px);pointer-events:none;background:linear-gradient(100deg,transparent 32%,rgba(255,255,255,.14) 50%,transparent 68%);transform:translateX(-120%) skewX(-12deg);animation:sweep 1.9s 1s ease-out both}
@keyframes sweep{to{transform:translateX(220%) skewX(-12deg)}}
.shade{position:absolute;z-index:4;left:0;right:0;top:0;height:max(var(--vh),640px);pointer-events:none;background:linear-gradient(to bottom,rgba(9,1,1,.5),rgba(9,1,1,0) 13%),linear-gradient(to top,var(--bg) 0%,rgba(9,1,1,.78) 17%,rgba(9,1,1,0) 48%)}
.mark{position:absolute;z-index:7;top:calc(16px + env(safe-area-inset-top));left:var(--pad);font:400 1.9rem/1 var(--display);letter-spacing:.01em;text-decoration:none;text-transform:uppercase;color:var(--ink);text-shadow:0 1px 14px rgba(0,0,0,.6)}
.mark span{color:var(--lime);display:inline-block;font-style:italic;transform:skewX(-8deg)}
.hint{display:none}

.cards{position:relative;z-index:6}
.card{position:relative;padding:clamp(44px,7svh,84px) var(--pad)}
.card__txt{width:min(1120px,100%);margin-inline:auto}
.card--open{min-height:max(var(--vh),640px);display:flex;align-items:flex-end;padding-bottom:calc(22px + env(safe-area-inset-bottom))}
.card--open .card__txt{max-width:none}

h1{display:flex;flex-direction:column;font:400 clamp(3.7rem,21.5vw,7.4rem)/.9 var(--display);text-transform:uppercase;letter-spacing:.004em;text-shadow:0 3px 26px rgba(9,1,1,.75)}
h1 span{display:block}
h2{font:400 clamp(2rem,9.5vw,3rem)/1 var(--display);text-transform:uppercase;letter-spacing:.006em}
.card--title h2{font-size:clamp(7rem,40vw,15rem);line-height:.8;margin-left:-.03em}
.lead{margin-top:18px;font-style:italic;font-size:1.2rem;color:rgba(243,237,228,.92)}
.role{margin-top:.7rem;font-style:italic;font-size:1.08rem;color:rgba(243,237,228,.94)}
.tag{margin-top:.2rem;font-size:1.02rem;color:var(--mute)}
.cta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.card h3{font:500 clamp(1.5rem,6.8vw,2rem)/1.15 var(--serif);letter-spacing:-.005em}
.card--beat p{margin-top:.55rem;color:var(--mute)}
.card--beat,.card--also{border-top:1px solid var(--line)}
.card--title{border:0}

/* painéis de cada cena (estático: simples, em bloco) */
.panel{margin-top:22px;width:min(1120px,100%);margin-inline:auto}
.card--beat .panel{margin-bottom:22px}
.panel--words{display:flex;flex-wrap:wrap;gap:0 .5em;font:400 clamp(2.4rem,10vw,4rem)/1 var(--display);text-transform:uppercase}
.panel--words b{font-weight:400}
.panel--shots{display:grid;gap:14px}
.shot{border-radius:12px;overflow:hidden;background:#10161c;box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12)}
.shot img{display:block;width:100%;height:auto;aspect-ratio:640/371}
.panel--code{padding:16px 18px;border-radius:14px;border:1px solid var(--line);background:rgba(10,14,16,.72)}
.code__file{display:block;margin-bottom:10px;font:italic 400 .95rem var(--serif);color:var(--mute)}
.code__body{font:500 clamp(.8rem,3.3vw,.98rem)/1.55 ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',monospace;color:var(--ink);overflow-wrap:anywhere}
.code__body i{display:block;font-style:normal;white-space:pre-wrap}
.code__body .k{color:var(--lime)}
.code__body em{display:inline-block;width:.55em;height:1.05em;margin-left:2px;vertical-align:-.18em;background:var(--lime);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.panel--score{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px}
.panel--score div::after{content:'';display:block;height:2px;margin-top:8px;background:linear-gradient(90deg,var(--red),var(--teal))}
.panel--score b{display:block;font:400 clamp(3.6rem,17vw,5.6rem)/.9 var(--display)}
.panel--score span{display:block;margin-top:.3rem;font-style:italic;color:var(--mute);font-size:1rem}
.panel--score small{grid-column:1/-1;color:var(--mute);font-size:.92rem}

.rows{margin-top:22px}
.rows a{position:relative;display:block;padding:19px 0;border-top:1px solid var(--line);text-decoration:none;transition:padding-left .4s var(--ease)}
.rows li:last-child a{border-bottom:1px solid var(--line)}
.rows a::before,.list a::before{content:'';position:absolute;left:0;top:-1px;width:0;height:2px;background:linear-gradient(90deg,var(--red),var(--teal));transition:width .5s var(--ease)}
.rows b{display:block;font-weight:500;font-size:1.22rem;line-height:1.25}
.rows span{display:block;margin-top:.25rem;color:var(--mute);font-size:1rem;line-height:1.45}
@media (hover:hover){.rows a:hover,.list a:hover{padding-left:10px}.rows a:hover::before,.list a:hover::before{width:100%}}
.rows a:active::before,.list a:active::before{width:100%}

/* ───────── diagnóstico ───────── */
.diagwrap{position:relative;padding:clamp(56px,9svh,110px) 0 clamp(40px,6svh,70px);background:radial-gradient(60% 50% at 8% 40%,rgba(79,179,176,.14),transparent 70%),radial-gradient(60% 50% at 96% 60%,rgba(255,74,86,.14),transparent 70%)}
.diag{padding:26px 22px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(255,74,86,.16),rgba(79,179,176,.12));max-width:40rem}
.diag h2{margin-bottom:12px}
.diag p{color:rgba(243,237,228,.9);margin-bottom:20px}

/* ───────── final: a cidade acesa e o farol ───────── */
.finale{position:relative;background:var(--bg)}
.finale__scene{position:relative;min-height:max(var(--vh),620px);overflow:hidden;--t:0;isolation:isolate}
.finale__scene::before{content:'';position:absolute;z-index:1;left:0;right:0;top:0;height:22%;background:linear-gradient(to bottom,var(--bg),rgba(9,1,1,0))}
.finale__scene::after{content:'';position:absolute;z-index:1;left:0;right:0;bottom:0;height:30%;background:linear-gradient(to top,var(--bg),rgba(9,1,1,0))}
.fw{position:absolute;inset:0}
.fl{position:absolute;inset:0}
.fl img{width:100%;height:100%;object-fit:cover;object-position:50% 100%}
.fl--sky{transform:scale(1.08)}
.fl--sun{transform:scale(calc(1.1 - var(--t)*.14))}
.fl--peaks{transform:translate3d(0,calc(var(--t)*-1.5%),0) scale(1.05)}
.fl--peak{transform:translate3d(0,calc(var(--t)*-3%),0) scale(1.06)}
.fl--city{transform:translate3d(0,calc(var(--t)*-5%),0) scale(1.08)}
.fl--near{transform:translate3d(0,calc(var(--t)*-8%),0) scale(1.12)}
.fl--sidel{transform:translate3d(calc(var(--t)*-5%),0,0) scale(1.1)}
.fl--sider{transform:translate3d(calc(var(--t)*5%),0,0) scale(1.1)}
.finale__txt{position:relative;z-index:2;padding-top:clamp(84px,15svh,170px)}
.finale__txt h2{font-size:clamp(3.4rem,18vw,8.5rem);line-height:.92;text-shadow:0 3px 28px rgba(9,1,1,.7)}
.finale__txt .lead{max-width:30rem;text-shadow:0 2px 16px rgba(9,1,1,.9)}
.pair{display:grid;gap:12px;margin-top:26px;max-width:34rem}
.contacts{position:relative;z-index:2;margin-top:-4px}
.list{max-width:40rem}
.list a{position:relative;display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:60px;padding:6px 0;border-top:1px solid var(--line);text-decoration:none;transition:padding-left .4s var(--ease)}
.list li:last-child a{border-bottom:1px solid var(--line)}
.list span{color:var(--mute);font-size:1rem;flex:none}
.list b{font-weight:500;font-size:1.06rem;text-align:right;overflow-wrap:anywhere}
.foot{margin-top:40px;display:grid;gap:16px;color:var(--mute);font-size:.98rem;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.foot__tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
.textbtn,.qr summary{background:none;border:0;padding:0;color:var(--ink);font:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:.22em;text-decoration-color:rgba(243,237,228,.4);list-style:none}
.qr summary::-webkit-details-marker{display:none}
.textbtn:hover,.qr summary:hover{text-decoration-color:var(--lime)}
.qr[open]{flex-basis:100%}
.qr img{margin-top:14px;width:200px;height:200px;padding:10px;border-radius:16px;background:#f3ede4}
.foot small{font-size:.9rem}

.dock{display:none}

/* entrada ao rolar: diagnóstico e final (só com JavaScript; sem ele tudo aparece) */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;translate:0 26px;transition:opacity .9s var(--ease),translate .9s var(--ease)}
  .reveal.in{opacity:1;translate:0 0}
}

/* ═════════ O FILME — forma de cinema: cena fixa e câmera controlada pela rolagem ═════════
   Variáveis escritas pelo card.js em .film:  --k (0 a 1, posição no filme)  --s (câmera avança até o retrato sair)
   --d (deriva lenta pela cidade)  --pf (retrato some)  --gr/--gt/--gl/--ga (luzes vermelha, verde-azulada, limão, âmbar)
   e em cada .card:  --e (entra)  --h (permanece)  --x (sai)  --v (visibilidade). */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .film{height:700vh;height:700svh;--k:0;--s:0;--d:0;--pf:0;--hv:1;--gr:1;--gt:.85;--gl:0;--ga:0;--mx:0;--my:0}
  .film__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;background:var(--bg)}
  .world,.embers,.sweep,.shade{height:100%}
  .world{inset:0;animation:worldIn 3.4s var(--ease) backwards}
  @keyframes worldIn{from{opacity:0;scale:1.16}}

  .w{transform-origin:50% 62%;will-change:transform}
  .w--sky{transform:translate3d(calc(var(--d)*3%),calc(var(--s)*-2% + var(--d)*-4%),0) scale(calc(1.07 + var(--s)*.05 + var(--d)*.16))}
  .w--sun{opacity:calc(.55 + var(--d)*.3 + var(--gl)*.15);transform:translate3d(0,calc(var(--s)*-3%),0) scale(calc(1 + var(--s)*.14 + var(--d)*.6))}
  .w--peaks{transform:translate3d(calc(var(--d)*-3%),0,0) scale(calc(1.03 + var(--s)*.1 + var(--d)*.14))}
  .w--peak{transform:translate3d(calc(var(--d)*-5%),calc(var(--s)*7%),0) scale(calc(1.02 + var(--s)*.08 + var(--d)*.18))}
  .w--city{transform:translate3d(calc(var(--d)*-8%),calc(var(--s)*6%),0) scale(calc(1.02 + var(--s)*.14 + var(--d)*.22))}
  .w--near{transform:translate3d(calc(var(--d)*-12%),calc(var(--s)*10% + var(--d)*4%),0) scale(calc(1.0 + var(--s)*.3 + var(--d)*.3))}
  .w--sidel{transform:translate3d(calc(var(--s)*-16% + var(--d)*-10%),0,0) scale(calc(1 + var(--s)*.26 + var(--d)*.16))}
  .w--sider{transform:translate3d(calc(var(--s)*16% + var(--d)*-4%),0,0) scale(calc(1 + var(--s)*.26 + var(--d)*.16))}
  .glow{will-change:opacity}
  .glow--teal{opacity:var(--gt)}
  .glow--red{opacity:var(--gr)}
  .glow--lime{opacity:var(--gl)}
  .glow--amber{opacity:var(--ga)}
  .dim{opacity:calc(var(--s)*.15)}

  .person{top:calc(6 * var(--vh) / 100);opacity:calc(1 - var(--pf));transform:translate3d(calc(var(--mx)*12px),calc(var(--s)*4svh + var(--my)*6px),0) scale(calc(1 + var(--s)*.75));animation:personIn 2.4s .35s var(--ease) backwards;will-change:transform,opacity}
  @keyframes personIn{from{opacity:0;scale:1.08;translate:0 3%}}
  .embers{z-index:3}

  .mark{position:absolute}
  .hint{display:flex;align-items:center;gap:10px;position:absolute;z-index:7;top:calc(22px + env(safe-area-inset-top));right:var(--pad);font:italic .98rem/1 var(--serif);color:var(--mute);opacity:var(--hv);animation:fade .9s 2.2s var(--ease) backwards}
  .hint i{display:block;width:1px;height:34px;background:linear-gradient(var(--ink),transparent);transform-origin:50% 0;animation:scan 1.8s ease-in-out infinite}
  @keyframes scan{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
  @keyframes rise{from{translate:0 24px;opacity:0}to{translate:0 0;opacity:1}}
  @keyframes fade{from{translate:0 14px;opacity:0}to{translate:0 0;opacity:1}}

  /* as cenas de texto: cada uma é uma tela cheia que entra e sai sobre o plano */
  .cards{position:absolute;inset:0;z-index:6;pointer-events:none}
  .card{position:absolute;inset:0;padding:0;min-height:0;display:block;border:0;opacity:var(--v,0)}
  .card--open{opacity:var(--v,1)}
  .card a{pointer-events:none}
  .card.on a{pointer-events:auto}
  .card__txt{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--dock) + 3svh);width:auto;margin:0;translate:0 calc((1 - var(--e,1))*5svh - var(--x,0)*5svh)}
  .card h3,.card p{text-shadow:0 2px 18px rgba(9,1,1,.92),0 0 2px rgba(9,1,1,.6)}

  .card--open .card__txt{bottom:calc(22px + env(safe-area-inset-bottom));translate:0 calc(var(--x,0)*34svh)}
  .card--open h1 span{animation:rise 1s .95s var(--ease) backwards}
  .card--open h1 span:nth-child(2){animation-delay:1.05s}
  .card--open .role{animation:fade .9s 1.35s var(--ease) backwards}
  .card--open .tag{animation:fade .9s 1.45s var(--ease) backwards}
  .card--open .cta{animation:fade .9s 1.6s var(--ease) backwards}

  .card--title .card__txt{bottom:auto;top:calc(22 * var(--vh) / 100)}
  .card--title h2{letter-spacing:calc((1 - var(--e,1))*.14em)}

  .panel{position:absolute;margin:0;left:var(--pad);right:var(--pad);top:calc(11 * var(--vh) / 100 + env(safe-area-inset-top));height:calc(34 * var(--vh) / 100);width:auto;opacity:var(--e,1)}
  .card--beat .panel{margin:0}

  .panel--words{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center;gap:.02em;font-size:clamp(3.1rem,16vw,6rem);line-height:.95;text-shadow:0 4px 30px rgba(9,1,1,.8)}
  .panel--words b{--n:0;--q:clamp(0,calc(var(--h,1)*7 - var(--n)),1);opacity:var(--q);letter-spacing:calc((1 - var(--q))*.16em);translate:calc((1 - var(--q))*-9vw) 0}
  .panel--words b:nth-child(2){--n:1.2}
  .panel--words b:nth-child(3){--n:2.4}

  .panel--shots{display:block}
  .panel--shots .shot{position:absolute;width:66%}
  .shot--1{left:0;top:0;rotate:-3deg;translate:calc((1 - var(--e,1))*-90vw + var(--h,0)*-5vw) calc(var(--h,0)*-3svh)}
  .shot--2{right:0;top:22%;rotate:2.2deg;z-index:2;translate:calc((1 - var(--e,1))*90vw + var(--h,0)*5vw) calc(var(--h,0)*-6svh)}
  .shot--3{left:9%;top:52%;rotate:-1deg;z-index:3;translate:calc(var(--h,0)*-2vw) calc((1 - var(--e,1))*48svh + var(--h,0)*-2svh)}

  .panel--code{display:block;align-self:center;height:auto;top:calc(11 * var(--vh) / 100 + env(safe-area-inset-top));-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .code__body i{opacity:clamp(0,calc(var(--h,1)*14 - var(--n,0)),1)}

  .panel--score{align-content:center}
  .panel--score div{--n:0;--q:clamp(0,calc(var(--h,1)*8 - var(--n)),1);opacity:var(--q);translate:0 calc((1 - var(--q))*3svh)}
  .panel--score div:nth-child(2){--n:1}
  .panel--score div:nth-child(3){--n:2}
  .panel--score div:nth-child(4){--n:3}
  .panel--score div::after{transform-origin:0 50%;transform:scaleX(var(--q))}
  .panel--score small{opacity:clamp(0,calc(var(--h,1)*8 - 4),1)}

  /* E também: o foco passa de uma linha para a próxima */
  .card--also .card__txt{translate:0 calc((1 - var(--e,1))*5svh)}
  .rows{margin-top:18px}
  .rows li{--f:1;opacity:calc(.3 + var(--f)*.7);filter:blur(calc((1 - var(--f))*2.4px));translate:calc((1 - var(--f))*-8px) 0}
  .rows a{padding:15px 0}

  /* ações sempre à mão depois da abertura */
  .dock{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;z-index:60;left:var(--pad);right:var(--pad);bottom:calc(12px + env(safe-area-inset-bottom));opacity:0;translate:0 140%;pointer-events:none;transition:opacity .45s,translate .6s var(--ease)}
  .dock.on{opacity:1;translate:0 0;pointer-events:auto}
  .dock .btn{min-height:50px;font-size:1rem;background:rgba(9,1,1,.74)}
  .dock .btn--primary{background:var(--lime)}
}

/* ───────── computador ───────── */
@media (min-width:900px){
  body{font-size:19px}
  .mark{left:clamp(40px,5vw,88px);top:clamp(28px,5vh,48px)}
  .person{width:min(70vh,46vw);width:min(70svh,46vw);top:calc(3 * var(--vh) / 100)}
  .card--open{padding-inline:clamp(40px,5vw,88px)}
  .card--open .card__txt{display:grid;grid-template-columns:1fr auto;align-items:end;gap:0 48px}
  .card--open h1{grid-column:1;font-size:clamp(5.4rem,10vw,10rem)}
  .card--open .role,.card--open .tag{grid-column:1}
  .card--open .cta{grid-column:2;grid-row:1/span 3;align-self:end;grid-template-columns:1fr;width:min(320px,26vw);margin-top:0}
  .card--title h2{font-size:clamp(9rem,19vw,19rem)}
  .rows,.list,.pair{max-width:46rem}
  .pair{grid-template-columns:1fr 1fr}
  .finale__txt h2{font-size:clamp(5.4rem,10vw,10rem)}
  .finale__txt{padding-top:clamp(110px,20svh,220px)}
  .panel--words{font-size:clamp(5rem,9vw,9rem)}
}
@media (min-width:900px) and (scripting:enabled) and (prefers-reduced-motion:no-preference){
  :root{--dock:76px}
  .card--open .card__txt{left:clamp(40px,5vw,88px);right:clamp(40px,5vw,88px);bottom:clamp(26px,5vh,54px)}
  .card--title .card__txt{left:clamp(40px,8vw,140px);right:auto;top:auto;bottom:20svh;width:auto}
  .card--beat .card__txt,.card--also .card__txt{left:clamp(40px,8vw,140px);right:auto;top:50%;bottom:auto;width:min(30rem,38vw);transform:translateY(-50%)}
  .card--also .card__txt{width:min(40rem,46vw)}
  .card h3{font-size:clamp(2rem,3vw,2.7rem)}
  .panel{left:auto;right:clamp(40px,7vw,120px);top:50%;width:min(44vw,640px);height:min(58svh,460px);transform:translateY(-50%)}
  .panel--code{height:auto;top:50%;align-self:auto}
  .panel--score{height:auto}
  .dock{left:auto;right:clamp(40px,5vw,88px);width:min(440px,40vw)}
}

/* ───────── movimento reduzido: forma estática, sem animações ───────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .bars{display:none}
  .reveal{opacity:1!important;translate:0 0!important}
}