:root{
  --bg:#c7c7c7;   /* mesmo cinza do vídeo */
  --ink:#0a0a0a;
  --soft:#4a4a4a;
  --line:#0a0a0a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Inter","Segoe UI",system-ui,sans-serif;
  min-height:100vh; overflow-x:hidden;
}
main{position:relative}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* HERO */
.hero{position:relative;height:100svh;min-height:520px;overflow:hidden}
.stage{
  position:absolute; inset:0;
  cursor:grab; touch-action:pan-y; user-select:none;
  -webkit-mask-image:linear-gradient(#000 82%,transparent 100%);
          mask-image:linear-gradient(#000 82%,transparent 100%);
}
.stage.drag{cursor:grabbing}
.stage video{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.hint{
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  font-size:11px; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  padding:9px 16px; background:var(--ink); color:var(--bg); white-space:nowrap;
  transition:opacity .4s;
}
.hint.gone{opacity:0}

/* APRESENTAÇÃO */
.card-intro{padding:8px 24px 28px;max-width:640px;margin:0 auto}
.handle{
  font-family:"Anton","Impact",sans-serif; font-weight:400;
  font-size:clamp(54px,15vw,110px); line-height:.92; letter-spacing:.005em;
}
.bio{margin-top:12px;color:var(--soft);font-size:15px;line-height:1.5;min-height:1.5em}
.bio::after{content:"▌";animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* LINKS */
.links{max-width:640px;margin:0 auto;padding:0 24px 24px;border-top:3px solid var(--line)}
.link{
  position:relative; display:flex; align-items:center; gap:16px; overflow:hidden;
  padding:20px 8px; text-decoration:none; color:var(--ink);
  border-bottom:3px solid var(--line);
  opacity:0; transform:translateY(20px);
  transition:color .25s;
  isolation:isolate;
}
.link::before{
  content:""; position:absolute; inset:0; z-index:-1; background:var(--ink);
  transform:translateY(101%); transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.link.in{opacity:1;transform:none;transition:opacity .6s,transform .6s,color .25s}
.link:hover,.link:focus-visible{color:var(--bg);outline:none}
.link:hover::before,.link:focus-visible::before{transform:none}
.link .i{font-family:"Anton",sans-serif;font-size:14px;letter-spacing:.1em;width:28px;opacity:.6}
.link .txt{flex:1;display:flex;flex-direction:column;min-width:0}
.link .t{font-family:"Anton","Impact",sans-serif;font-size:clamp(28px,7vw,40px);line-height:1;text-transform:uppercase;letter-spacing:.01em}
.link .d{font-size:13px;opacity:.65;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.link .arr{font-size:26px;transition:transform .3s}
.link:hover .arr{transform:translateX(6px) rotate(-45deg)}
.link .burst{position:absolute;width:7px;height:7px;pointer-events:none;background:currentColor;animation:burst .7s ease-out forwards}
@keyframes burst{to{transform:translate(var(--dx),var(--dy)) rotate(180deg) scale(.2);opacity:0}}

footer{
  max-width:640px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;
  padding:12px 24px 40px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);
}
.ghost{background:none;border:0;color:var(--soft);font:inherit;cursor:pointer;text-decoration:underline}

@media (max-width:600px){
  .hero{height:62svh;min-height:420px}
  .stage video{object-position:50% 35%}
}
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }