/* ============================================================
   DESIGN · hero cinematográfico (palco da home + parede de artes)
   Carregado DEPOIS do style.css: só adiciona, não reescreve a base.
   ============================================================ */
:root{
  --bg:#110c29;
  --purple:#7c4dff;
  --purple-light:#a99cff;
  --title:#b6b5b9;
}
body{padding-top:0}

/* ============ RODAPÉ (padrão do site) ============ */
.footer-wrap{position:relative;overflow:hidden;padding-top:90px}
.footer-wrap::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 130% 78% at 50% 100%, rgba(255,138,60,.62) 0%, rgba(216,88,34,.44) 28%, rgba(122,44,26,.28) 50%, transparent 74%),
    radial-gradient(ellipse 80% 46% at 50% 100%, rgba(255,180,110,.32), transparent 70%)}
.footer-card{position:relative;z-index:1;max-width:1160px;margin:0 auto;
  border-radius:26px 26px 0 0;
  background:linear-gradient(180deg,rgba(24,17,32,.85),rgba(11,8,17,.95));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,170,110,.14);border-bottom:none;
  padding:clamp(34px,5vw,56px) clamp(26px,5vw,60px) 34px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}
.footer-brand .logo-line{display:flex;align-items:center;gap:10px}
.footer-brand .logo-line .logo-img{height:38px;width:auto;display:block}
.footer-brand .tagline{margin-top:14px;color:var(--ink-soft);font-size:14px;max-width:270px;line-height:1.55}
.footer-social{display:flex;gap:16px;margin-top:22px}
.footer-social a{color:var(--ink-soft);transition:color .2s,transform .2s;display:inline-flex}
.footer-social a:hover{color:#ffb27a;transform:translateY(-2px)}
.footer-social svg{width:19px;height:19px}
.footer-col b{display:block;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,190,140,.75);margin-bottom:16px}
.footer-col a{display:block;color:var(--ink-soft);text-decoration:none;font-size:14px;padding:5px 0;transition:color .2s}
.footer-col a:hover{color:var(--ink)}
.footer-base{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:40px;padding-top:24px;color:var(--ink-soft);font-size:13px}
.footer-base .links{display:flex;gap:10px;align-items:center}
.footer-base .links a{color:var(--ink-soft);text-decoration:none;transition:color .2s}
.footer-base .links a:hover{color:var(--ink)}
.footer-base .links i{font-style:normal;opacity:.4}
@media (max-width:640px){
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .footer-card{border-radius:20px 20px 0 0}
  .footer-base{flex-direction:column;align-items:flex-start}
}

/* ---------- palco ---------- */
.dhero{position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:center;justify-content:center;isolation:isolate}

/* aurora ambiente (mesma da home) */
.aurora{position:absolute;inset:-10% -5%;z-index:0;pointer-events:none;filter:blur(50px);opacity:0;animation:auroraIn 2.4s ease .1s forwards}
.aurora span{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.aurora .a1{width:52vw;height:52vw;left:8%;top:12%;background:radial-gradient(circle,rgba(108,69,150,.34),transparent 66%);animation:drift1 22s ease-in-out infinite}
.aurora .a2{width:46vw;height:46vw;right:6%;top:22%;background:radial-gradient(circle,rgba(138,92,196,.26),transparent 66%);animation:drift2 26s ease-in-out infinite}
.aurora .a3{width:60vw;height:60vw;left:24%;bottom:-18%;background:radial-gradient(circle,rgba(108,69,150,.32),transparent 68%);animation:drift3 30s ease-in-out infinite}
@keyframes auroraIn{to{opacity:1}}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(6%,-4%) scale(1.12)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-5%,5%) scale(1.15)}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(4%,-6%) scale(1)}}

/* canvas de partículas */
.cine{position:absolute;inset:0;z-index:1;width:100%;height:100%;opacity:0;transition:opacity 1.8s ease .3s}
.cine.on{opacity:1}

/* vinheta de lente */
.cine-vignette{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 46%, transparent 42%, rgba(8,6,14,.55) 82%, rgba(6,4,11,.82) 100%),
    radial-gradient(58% 44% at 50% 52%, rgba(8,6,14,.5), rgba(8,6,14,.18) 55%, transparent 78%)}

/* grão de filme */
.cine-grain{position:absolute;inset:-60px;z-index:4;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:220px 220px;animation:grainShift 1.1s steps(5) infinite}
@keyframes grainShift{
  0%{transform:translate(0,0)}20%{transform:translate(-28px,14px)}40%{transform:translate(16px,-30px)}
  60%{transform:translate(-12px,-18px)}80%{transform:translate(26px,22px)}100%{transform:translate(0,0)}}

/* light leak ocasional */
.cine-leak{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:screen;opacity:0;
  background:linear-gradient(105deg,transparent 30%,rgba(138,92,196,.16) 46%,rgba(255,150,90,.10) 52%,rgba(138,92,196,.14) 58%,transparent 72%);
  transform:translateX(-120%);animation:leakSweep 13s ease-in-out infinite 4s}
@keyframes leakSweep{
  0%,72%{opacity:0;transform:translateX(-120%)}
  78%{opacity:1}
  88%,100%{opacity:0;transform:translateX(120%)}}

/* ---------- parede 3D de artes de design ---------- */
.hero-wall{position:absolute;inset:-14%;z-index:1;pointer-events:none;overflow:hidden;perspective:1500px}
.wall-plane{position:absolute;left:50%;top:50%;width:150%;height:160%;transform-style:preserve-3d;will-change:transform;
  display:flex;justify-content:center;gap:clamp(16px,2vw,28px);
  transform:translate(-50%,-50%) rotateX(16deg) rotateY(-9deg) rotateZ(4deg) scale(1.08);
  filter:brightness(.42) saturate(.75)}
.wall-col{display:flex;flex-direction:column;gap:clamp(16px,2vw,28px);width:clamp(190px,19vw,320px);
  animation:wallUp 90s linear infinite}
.wall-col img{width:100%;height:auto;display:block;border-radius:14px;border:1px solid rgba(255,255,255,.09)}
.wc-b{animation-name:wallDown;animation-duration:110s}
.wc-c{animation-duration:126s}
.wc-d{animation-name:wallDown;animation-duration:142s}
@keyframes wallUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes wallDown{from{transform:translateY(-50%)}to{transform:translateY(0)}}
/* névoa: funde a parede no roxo e garante leitura da headline */
.hero-wall::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 52% at 50% 46%,rgba(17,12,41,.32),rgba(17,12,41,.82) 82%),
    linear-gradient(180deg,rgba(17,12,41,.6) 0%,rgba(17,12,41,.12) 26%,rgba(17,12,41,.12) 58%,#110c29 97%),
    radial-gradient(ellipse 80% 70% at 50% 50%,rgba(93,42,173,.16),transparent 70%)}

/* ---------- conteúdo ---------- */
.dh-content{position:relative;z-index:5;text-align:center;width:100%;max-width:960px;padding:0 24px}
.dh-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'Space Mono',monospace;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--purple-light);margin-bottom:26px;
  opacity:0;animation:dRise 1s ease .75s forwards}
.dhero h1{font-family:'Poppins',sans-serif;font-weight:300;font-size:clamp(1.875rem,6.6vw,4.375rem);line-height:1.04;
  color:var(--title);letter-spacing:.06em;animation:dTrackIn 2s cubic-bezier(.16,.7,.2,1) 1s forwards}
@keyframes dTrackIn{to{letter-spacing:-0.035em}}
.dhero h1 .word{display:inline-block;opacity:0;transform:translateY(26px);filter:blur(6px);animation:dWordRise .9s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes dWordRise{to{opacity:1;transform:none;filter:blur(0)}}
.dhero h1 .grad,.port-head h2 .grad{color:#fff}
.dh-sub{margin:26px auto 0;font-size:clamp(1rem,1.6vw,1.18rem);line-height:1.6;color:var(--ink-soft);max-width:56ch;
  opacity:0;transform:translateY(14px);animation:dRise 1s ease 1.6s forwards}
.dh-sub b{color:var(--ink);font-weight:600}
.dh-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:36px;
  opacity:0;transform:translateY(14px);animation:dRise 1s ease 1.8s forwards}
@keyframes dRise{to{opacity:1;transform:none}}
.btn-primary{display:inline-flex;align-items:center;gap:10px;font-family:'Inter',sans-serif;font-weight:600;font-size:15px;color:#fff;
  background:var(--purple);padding:16px 28px;border-radius:12px;
  box-shadow:0 0 0 1px rgba(181,123,255,.32) inset,0 10px 34px rgba(139,61,255,.42);transition:transform .16s,filter .2s}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-primary svg{width:16px;height:16px}
.btn-ghost{display:inline-flex;align-items:center;font-family:'Inter',sans-serif;font-weight:600;font-size:15px;color:var(--ink);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);padding:16px 26px;border-radius:12px;
  transition:background .2s,border-color .2s}
.btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(181,123,255,.4)}

.scroll-cue{position:absolute;bottom:24px;left:0;right:0;margin:0 auto;width:max-content;z-index:5;display:flex;flex-direction:column;align-items:center;gap:9px;
  color:var(--ink-soft);font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  opacity:0;animation:dRise 1s ease 2.3s forwards}
.scroll-cue .mouse{width:22px;height:34px;border:1.5px solid var(--ink-soft);border-radius:12px;position:relative}
.scroll-cue .mouse::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:3px;height:6px;border-radius:2px;background:var(--purple-light);animation:dWheel 1.6s ease-in-out infinite}
@keyframes dWheel{0%{opacity:1;top:6px}70%{opacity:0;top:15px}100%{opacity:0;top:15px}}

/* ---------- faixa de números (contadores) ---------- */
.dh-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-top:clamp(44px,6vw,76px);padding-bottom:clamp(10px,2vw,20px)}
.dh-stat{border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,30px);background:rgba(255,255,255,.03);
  opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1),border-color .3s}
.dh-stat.in{opacity:1;transform:none}
.dh-stat:hover{border-color:rgba(181,123,255,.35)}
.dh-stat b{display:block;font-family:'Poppins',sans-serif;font-weight:300;font-size:clamp(2rem,4vw,2.9rem);line-height:1;color:#fff;letter-spacing:-0.02em}
.dh-stat span{display:block;margin-top:10px;color:var(--ink-soft);font-size:.94rem;line-height:1.5}

/* ---------- portfólio: título dois tons + hover rico ---------- */
#trabalhos{scroll-margin-top:90px}
.port-head h2{color:var(--title)}

/* título cinético (palavra a palavra no scroll) */
.kin .kw{display:inline-block;opacity:0;transform:translateY(24px) rotate(2deg);filter:blur(6px);
  transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1),filter .65s ease}
.kin.kin-in .kw{opacity:1;transform:none;filter:none}

/* hover: tile levanta com brilho roxo, arte dá zoom sutil */
.tile.in{transition:opacity .6s ease,transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-color .35s ease}
.tile.in:hover{transform:translateY(-5px);border-color:rgba(181,123,255,.32);
  box-shadow:0 30px 60px -28px rgba(0,0,0,.9),0 0 44px -10px rgba(124,77,255,.4)}
.tile .art{transition:transform .55s cubic-bezier(.22,1,.36,1)}
.tile:hover .art{transform:scale(1.035)}

/* modo identidade visual: a página veste a marca, os dois tons acompanham */
body.brand-mode .port-head h2{color:var(--ink-soft)}
body.brand-mode .port-head h2 .grad,
body.brand-mode .dh-stat b{color:var(--ink)}
body.brand-mode .dh-stat{background:var(--paper-2)}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  .wall-plane{gap:14px;transform:translate(-50%,-50%) rotateX(14deg) rotateY(-6deg) rotateZ(3deg) scale(1.16)}
  .wall-col{width:44vw;gap:14px}
  .wc-c,.wc-d{display:none}
  .dh-stats{grid-template-columns:1fr;gap:12px}
  .tile.in:hover{transform:none}
  .tile:hover .art{transform:none}
}
@media (max-width:720px){
  .dhero{min-height:100svh;padding:110px 0 70px}
  .dh-content{padding:0 20px}
  .dh-actions{flex-direction:column;width:100%;max-width:380px;margin:32px auto 0}
  .dh-actions a{width:100%;justify-content:center;text-align:center}
  .scroll-cue{display:none}
}

/* ---------- acessibilidade: reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .aurora{animation:none;opacity:.7}
  .aurora span{animation:none}
  .cine-grain,.cine-leak{animation:none;opacity:0}
  .wall-col{animation:none}
  .dhero h1{animation:none;letter-spacing:-0.02em}
  .dhero h1 .word,.dh-eyebrow,.dh-sub,.dh-actions,.scroll-cue{animation:none;opacity:1;transform:none;filter:none}
  .scroll-cue .mouse::after{animation:none}
  .dh-stat{opacity:1;transform:none;transition:none}
  .kin .kw{opacity:1;transform:none;filter:none;transition:none}
  .tile.in,.tile .art{transition:none}
}

/* ============ FECHAMENTO do portfolio (o visitante que rolou tudo
   nao tinha CTA nenhum: o ultimo ficava no topo da pagina) ============ */
.dh-close{padding:clamp(48px,7vw,96px) 0 clamp(24px,4vw,48px)}
.dh-close-card{position:relative;isolation:isolate;overflow:hidden;
  border:1px solid rgba(181,123,255,.28);border-radius:22px;padding:clamp(36px,5vw,60px);
  background:radial-gradient(120% 140% at 50% 0%,rgba(124,77,255,.22),rgba(255,255,255,.03) 60%);
  box-shadow:0 0 0 1px rgba(124,77,255,.06) inset,0 30px 80px -30px rgba(124,77,255,.35);
  text-align:center}
.dh-close-card::before{content:"";position:absolute;z-index:-1;left:50%;top:-40%;
  width:70%;aspect-ratio:1;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(139,92,246,.35),transparent 70%);filter:blur(50px)}
.dh-close-k{display:inline-flex;align-items:center;gap:8px;font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--plum,#b57bff);margin-bottom:14px}
.dh-close-k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--purple,#8b3dff);
  box-shadow:0 0 9px 1px rgba(139,92,246,.85)}
.dh-close-card h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;
  font-size:clamp(1.7rem,3.6vw,2.9rem);line-height:1.08;letter-spacing:-.02em;margin:0 auto 14px}
.dh-close-card p{max-width:60ch;font-size:clamp(.98rem,1.4vw,1.08rem);line-height:1.65;
  color:var(--text-muted,rgba(255,255,255,.66));margin:0 auto 26px}
.dh-close-acts{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px}

/* titulo de secao com limite de largura, pra nao virar linha unica em tela larga */
.port-head h2{max-width:22ch;text-wrap:balance}
.dh-close-card h2{max-width:24ch;text-wrap:balance}
.dh-stat span{text-wrap:balance}