/* ============================================================
   REDDIK OS — DESIGN SYSTEM GLOBAL (V2 · TRON-tech 2050)
   Carregado em TODAS as páginas. Linguagem única: superfícies
   pretas profundas, linhas de energia vermelha, alto contraste,
   tecnologia elegante. Performático: só transform/opacity, rAF,
   respeita prefers-reduced-motion.
   ============================================================ */
:root{
  --rk-red:#ff2d2d; --rk-red-soft:#ff5a5a; --rk-crimson:#c8102e;
  --rk-red-rgb:255,45,45;
  --rk-deep:#050506; --rk-carbon:#0b0c0e; --rk-gunmetal:#16181c; --rk-panel:#0e0f12;
  --rk-line:rgba(255,255,255,.09); --rk-edge:rgba(255,45,45,.34);
  --rk-smoke:rgba(255,255,255,.045);
  --rk-glow-s:0 0 10px rgba(255,45,45,.45);
  --rk-glow-m:0 0 22px rgba(255,45,45,.38), inset 0 0 20px rgba(255,45,45,.10);
  --rk-cine:cubic-bezier(.19,1,.22,1);
  --rk-mono:'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

/* profundidade real no preto (nunca chapado) */
html{ background:#050506; }
body{ background:
    radial-gradient(120% 80% at 50% -10%, #0d0e11 0%, #070708 45%, #040405 100%) fixed; }

::selection{ background:rgba(255,45,45,.28); color:#fff; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#070708; }
::-webkit-scrollbar-thumb{ background:linear-gradient(#2a2c31,#141519); border-radius:10px; border:2px solid #070708; }
::-webkit-scrollbar-thumb:hover{ background:linear-gradient(var(--rk-crimson),#3a1416); }

/* ---------- FUNDO EM CAMADAS (injetado pelo JS: .rk-bg) ---------- */
.rk-bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.rk-bg > *{ position:absolute; inset:0; }
.rk-grid{
  background-image:
    linear-gradient(rgba(255,45,45,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,45,45,.04) 1px, transparent 1px);
  background-size:66px 66px, 66px 66px;
  -webkit-mask-image:radial-gradient(130% 100% at 50% 10%, #000 12%, transparent 80%);
          mask-image:radial-gradient(130% 100% at 50% 10%, #000 12%, transparent 80%);
  animation:rkGrid 70s linear infinite; opacity:.6;
}
.rk-vol{
  background:
    radial-gradient(50% 34% at 50% -4%, rgba(255,45,45,.11), transparent 60%),
    radial-gradient(46% 46% at 88% 108%, rgba(200,16,46,.09), transparent 62%);
  animation:rkVol 24s ease-in-out infinite alternate;
}
.rk-particles{ width:100%; height:100%; opacity:.9; }
.rk-scanline{
  height:140px; top:-140px; left:0; right:0;
  background:linear-gradient(180deg, transparent, rgba(255,45,45,.05) 60%, rgba(255,60,60,.10));
  animation:rkScan 12s linear infinite; opacity:.5;
}
@keyframes rkGrid{ from{background-position:0 0,0 0} to{background-position:66px 66px,66px 66px} }
@keyframes rkVol{ 0%{opacity:.75;transform:translateY(0)} 100%{opacity:1;transform:translateY(-16px)} }
@keyframes rkScan{ 0%{transform:translateY(0)} 100%{transform:translateY(120vh)} }

/* conteúdo sempre acima do fundo */
body > header, body > main, body > footer, body > nav, body > section{ position:relative; z-index:1; }

/* ---------- LINHA DE ENERGIA nas divisões de seção ---------- */
.rk-edge{
  position:absolute; top:0; left:0; height:1px; width:100%; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, transparent, var(--rk-red), transparent);
  background-size:240px 100%; background-repeat:no-repeat; opacity:.5;
  animation:rkEdge 8s linear infinite;
}
@keyframes rkEdge{ 0%{background-position:-240px 0} 100%{background-position:calc(100% + 240px) 0} }

/* ---------- CURSOR EXCLUSIVO ---------- */
html.rk-cursor-on, html.rk-cursor-on *{ cursor:none !important; }
.rk-cursor, .rk-cursor-ring{ position:fixed; top:0; left:0; z-index:99999; pointer-events:none;
  border-radius:50%; margin-left:-4px; margin-top:-4px; will-change:transform; }
.rk-cursor{ width:8px; height:8px; background:var(--rk-red); box-shadow:0 0 10px rgba(255,45,45,.9); }
.rk-cursor-ring{ width:34px; height:34px; margin-left:-17px; margin-top:-17px;
  border:1px solid rgba(255,45,45,.55); box-shadow:0 0 14px rgba(255,45,45,.22);
  transition:width .3s var(--rk-cine), height .3s var(--rk-cine), margin .3s var(--rk-cine), border-color .3s, opacity .3s; }
body.rk-hover .rk-cursor-ring{ width:56px; height:56px; margin-left:-28px; margin-top:-28px; border-color:var(--rk-red); box-shadow:0 0 22px rgba(255,45,45,.4); }
body.rk-down .rk-cursor-ring{ width:22px; height:22px; margin-left:-11px; margin-top:-11px; }

/* ---------- LOADING SCREEN ---------- */
.rk-load{ position:fixed; inset:0; z-index:100000; background:#040405; display:grid; place-items:center;
  transition:opacity .7s var(--rk-cine); }
.rk-load::before{ content:''; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,45,45,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,45,45,.05) 1px, transparent 1px);
  background-size:54px 54px,54px 54px; -webkit-mask-image:radial-gradient(60% 60% at 50% 50%, #000, transparent 75%); mask-image:radial-gradient(60% 60% at 50% 50%, #000, transparent 75%); }
.rk-load.out{ opacity:0; }
.rk-load-core{ position:relative; text-align:center; }
.rk-load-logo{ font-family:'Clash Display','Switzer',system-ui,sans-serif; font-weight:700; letter-spacing:.28em;
  font-size:clamp(2rem,6vw,3.4rem); color:#fff; text-shadow:0 0 22px rgba(255,45,45,.5);
  animation:rkPulse 2s ease-in-out infinite; }
.rk-load-sub{ font-family:var(--rk-mono); font-size:.62rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--rk-red-soft); margin-top:18px; }
.rk-load-bar{ width:min(240px,52vw); height:2px; margin:22px auto 0; background:rgba(255,255,255,.08); overflow:hidden; }
.rk-load-bar i{ display:block; height:100%; width:40%; background:linear-gradient(90deg,transparent,var(--rk-red),transparent);
  animation:rkLoadBar 1.2s var(--rk-cine) infinite; }
@keyframes rkLoadBar{ 0%{transform:translateX(-120%)} 100%{transform:translateX(360%)} }
@keyframes rkPulse{ 0%,100%{text-shadow:0 0 14px rgba(255,45,45,.35)} 50%{text-shadow:0 0 34px rgba(255,45,45,.7)} }

/* ---------- BOTÕES (sistema único de energia) ---------- */
.btn, .cta, .btn-outline, .see-more, .apr-cta, .mbtn, .btn.solid, .btn.line, button.cta{
  position:relative; overflow:hidden; isolation:isolate;
  transition:box-shadow .55s var(--rk-cine), border-color .55s var(--rk-cine),
             background-color .55s var(--rk-cine), color .3s var(--rk-cine), transform .45s var(--rk-cine);
}
.btn::after, .cta::after, .btn-outline::after, .see-more::after, .apr-cta::after, .mbtn::after, button.cta::after{
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.16) 47%, rgba(255,45,45,.30) 53%, transparent 72%);
  transform:translateX(-135%); transition:transform .95s var(--rk-cine);
}
.btn:hover::after, .cta:hover::after, .btn-outline:hover::after, .see-more:hover::after,
.apr-cta:hover::after, .mbtn:hover::after, button.cta:hover::after{ transform:translateX(135%); }
.btn:hover, .cta:hover, .btn-outline:hover, .see-more:hover, .apr-cta:hover, .mbtn:hover, .btn.line:hover{
  box-shadow:var(--rk-glow-m); border-color:var(--rk-red);
}

/* ---------- CARDS (bordas energizadas + corte industrial + HUD) ---------- */
.work-media, .vcard-media, .fxcard-media, .card .img, .feature .img, .apr-card{
  position:relative; transition:box-shadow .55s var(--rk-cine), border-color .55s var(--rk-cine), transform .55s var(--rk-cine);
}
/* cantinho de HUD (corte diagonal luminoso) */
.work-media::after, .card .img::after, .feature .img::after, .apr-card::after{
  content:''; position:absolute; top:0; right:0; width:26px; height:26px; z-index:3; pointer-events:none;
  border-top:1px solid var(--rk-edge); border-right:1px solid var(--rk-edge);
  clip-path:polygon(100% 0, 100% 100%, 0 0); opacity:.6; transition:opacity .4s;
}
.work:hover .work-media, .vcard:hover .vcard-media, .fxcard:hover .fxcard-media,
.card:hover .img, .feature:hover .img, .apr-card:hover{
  box-shadow:0 0 0 1px var(--rk-edge), 0 0 34px rgba(255,45,45,.16);
}
.work:hover .work-media::after, .card:hover .img::after, .apr-card:hover::after{ opacity:1; }

/* ---------- INPUTS ---------- */
input, textarea, select{
  background:rgba(10,11,13,.7); border:1px solid var(--rk-line); color:#fff;
  transition:border-color .4s var(--rk-cine), box-shadow .4s var(--rk-cine);
}
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--rk-red); box-shadow:0 0 0 1px rgba(255,45,45,.4), 0 0 18px rgba(255,45,45,.2); }

/* ---------- NAVBAR (mais fina, linha de energia) ---------- */
header{ position:relative; }
header::after{ content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:linear-gradient(90deg, transparent, rgba(255,45,45,.5), transparent);
  background-size:200px 100%; background-repeat:no-repeat; animation:rkEdge 9s linear infinite; opacity:.4; }

/* ---------- FOOTER ---------- */
footer{ position:relative; }
footer::before{ content:''; position:absolute; top:0; left:0; height:1px; width:100%;
  background:linear-gradient(90deg, transparent, var(--rk-red), transparent);
  background-size:240px 100%; background-repeat:no-repeat; animation:rkEdge 10s linear infinite; opacity:.4; }

/* ---------- utilitário HUD / scan reutilizável ---------- */
.rk-scan-x{ position:absolute; left:0; right:0; top:0; height:2px; pointer-events:none; z-index:3;
  background:linear-gradient(90deg,transparent,rgba(255,60,60,.8),transparent); box-shadow:0 0 12px rgba(255,45,45,.55);
  animation:rkScanX 6s var(--rk-cine) infinite; }
@keyframes rkScanX{ 0%{transform:translateY(0);opacity:.2} 50%{opacity:.8} 100%{transform:translateY(100%);opacity:.2} }

/* ---------- reveal global ---------- */
.rk-reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--rk-cine), transform .8s var(--rk-cine); }
.rk-reveal.rk-in{ opacity:1; transform:none; }

/* ---------- respeito a acessibilidade / mobile ---------- */
@media (prefers-reduced-motion: reduce){
  .rk-grid, .rk-vol, .rk-scanline, .rk-edge, header::after, footer::before,
  .rk-load-logo, .rk-load-bar i, .rk-scan-x{ animation:none !important; }
}
@media (pointer:coarse){ html.rk-cursor-on, html.rk-cursor-on *{ cursor:auto !important; } .rk-cursor,.rk-cursor-ring{ display:none; } }

/* ============================================================
   REDDIK OS — SKIN DOS COMPONENTES (estado de repouso visível)
   Aplica a nova identidade nas páginas reais (home, curso...)
   ============================================================ */

/* --- HERO cinematográfico (home + curso): profundidade, glow, scan --- */
.hero{ position:relative; }
.hero::before{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(60% 42% at 50% 8%, rgba(255,45,45,.14), transparent 60%),
    radial-gradient(90% 60% at 50% 120%, rgba(200,16,46,.10), transparent 60%);
  mix-blend-mode:screen; opacity:.9; animation:rkVol 20s ease-in-out infinite alternate; }
.hero::after{ content:''; position:absolute; left:0; right:0; top:0; height:120px; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,60,60,.10), transparent);
  animation:rkHeroScan 9s linear infinite; opacity:.5; }
@keyframes rkHeroScan{ 0%{transform:translateY(-120px)} 100%{transform:translateY(102vh)} }
.hero-grid, .hero .in-h, .hero-scrim{ position:relative; z-index:2; }
/* colchetes de precisão nos cantos do hero */
.hero-grid::before, .hero-grid::after{ content:''; position:absolute; width:46px; height:46px; z-index:2; pointer-events:none;
  border:1px solid var(--rk-edge); opacity:.7; }
.hero-grid::before{ top:6px; left:0; border-right:0; border-bottom:0; }
.hero-grid::after{ bottom:6px; right:0; border-left:0; border-top:0; }

/* título do hero com energia */
.hero-h, .h-hero{ text-shadow:0 0 32px rgba(255,45,45,.16); }
.hero-h .hl{ position:relative; }

/* --- NAVBAR mais tech --- */
.topbar, .nav{ -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1);
  background:linear-gradient(180deg, rgba(6,6,8,.72), rgba(6,6,8,.28)); }
.brand-wordmark, .nav .brand, .nav .lg{ filter:drop-shadow(0 0 10px rgba(255,45,45,.18)); }

/* --- TÍTULOS DE SEÇÃO com marcador de energia + label HUD --- */
.section-title, .h-sec, .block-title{ position:relative; }
.section-title::before, .h-sec::before{ content:''; display:inline-block; width:26px; height:2px; vertical-align:middle;
  margin-right:16px; background:linear-gradient(90deg, var(--rk-red), transparent);
  box-shadow:0 0 10px rgba(255,45,45,.6); }
.section-sub{ position:relative; }

/* --- SEÇÕES como AMBIENTES (cada uma com sua iluminação) --- */
.block, .section-dark{ position:relative; overflow:hidden; }
.block::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.55; }
.section-dark:nth-of-type(odd)::before{ background:radial-gradient(70% 50% at 18% 0%, rgba(255,45,45,.06), transparent 60%); }
.section-dark:nth-of-type(even)::before{ background:radial-gradient(70% 50% at 82% 100%, rgba(200,16,46,.06), transparent 60%); }
.block > *{ position:relative; z-index:1; }

/* --- CARDS com HUD permanente (código + scan sutil) --- */
.work-media, .card .img, .apr-card, .feature .img{ overflow:hidden; }
.work-media::before{ content:'● REC'; position:absolute; top:10px; left:12px; z-index:3;
  font-family:var(--rk-mono); font-size:.5rem; letter-spacing:.14em; color:rgba(255,90,90,.8);
  text-shadow:0 0 8px rgba(255,45,45,.6); opacity:.55; }
.work-media, .card .img{ box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }

/* --- GRIDS energizados (linhas dos separadores) --- */
.grid, .miss{ position:relative; }
.grid::after, .miss::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:2;
  background:linear-gradient(90deg, transparent 49.6%, rgba(255,45,45,.10) 50%, transparent 50.4%);
  opacity:.5; }

/* --- CONTATO / CTA final com aura --- */
.contato, .close, .oferta{ position:relative; }
.contato::before{ content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(50% 60% at 50% 50%, rgba(255,45,45,.08), transparent 62%); }

/* --- SFX / área de áudio: waveform de fundo (injetado pelo JS: .rk-wave) --- */
.rk-wave{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5; }
@media (prefers-reduced-motion: reduce){
  .hero::before, .hero::after{ animation:none; }
}

/* ============================================================
   REDDIK OS — BLOQUEIO PREMIUM (ACCESS RESTRICTED) + HOLOGRAMAS
   ============================================================ */

/* --- camadas extras de fundo: holograma + feixes de energia --- */
.rk-holo{ background:repeating-linear-gradient(0deg, rgba(255,45,45,.032) 0 1px, transparent 1px 3px);
  mix-blend-mode:screen; opacity:.28; animation:rkHolo 7s linear infinite; }
@keyframes rkHolo{ from{background-position:0 0} to{background-position:0 3px} }
.rk-beam{ position:absolute; left:0; right:0; height:1px; top:-6%;
  background:linear-gradient(90deg, transparent, rgba(255,70,70,.55), transparent);
  box-shadow:0 0 16px rgba(255,45,45,.45); opacity:0; animation:rkBeam 16s linear infinite; }
.rk-beam.b2{ animation-delay:7s; }
@keyframes rkBeam{ 0%{top:-6%;opacity:0} 8%{opacity:.55} 92%{opacity:.55} 100%{top:106%;opacity:0} }

/* --- SELO DE BLOQUEIO (aplicado em [data-rk-lock] pelo JS) --- */
[data-rk-lock]{ position:relative; }
.rk-lock-ov{ position:absolute; inset:0; z-index:20; display:grid; place-items:center; text-align:center;
  background:radial-gradient(120% 120% at 50% 42%, rgba(9,3,4,.42), rgba(4,4,5,.80));
  -webkit-backdrop-filter:blur(3px) saturate(.85); backdrop-filter:blur(3px) saturate(.85);
  border:1px solid var(--rk-edge); overflow:hidden; }
.rk-lock-ov::before{ content:''; position:absolute; inset:0; opacity:.55; pointer-events:none;
  background:
    linear-gradient(45deg,  transparent calc(50% - 1px), rgba(255,45,45,.22) 50%, transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), rgba(255,45,45,.22) 50%, transparent calc(50% + 1px)); }
.rk-lock-scan{ position:absolute; left:0; right:0; top:0; height:2px; z-index:2; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,70,70,.85), transparent);
  box-shadow:0 0 14px rgba(255,45,45,.6); animation:rkLockScan 5.5s var(--rk-cine) infinite; }
@keyframes rkLockScan{ 0%{transform:translateY(0);opacity:.2} 50%{opacity:.9} 100%{transform:translateY(100%);opacity:.2} }
.rk-lock-core{ position:relative; z-index:3; padding:20px; }
.rk-lock-badge{ display:inline-flex; align-items:center; gap:12px; font-family:var(--rk-mono);
  letter-spacing:.28em; text-transform:uppercase; color:#ff6a6a; font-size:clamp(.62rem,1.4vw,.8rem);
  border:1px solid rgba(255,45,45,.5); padding:12px 22px; background:rgba(10,3,3,.6);
  box-shadow:0 0 22px rgba(255,45,45,.32), inset 0 0 16px rgba(255,45,45,.12);
  animation:rkLockPulse 3s ease-in-out infinite; }
@keyframes rkLockPulse{ 0%,100%{box-shadow:0 0 16px rgba(255,45,45,.24), inset 0 0 10px rgba(255,45,45,.08)}
  50%{box-shadow:0 0 30px rgba(255,45,45,.5), inset 0 0 18px rgba(255,45,45,.18)} }
.rk-lock-msg{ margin-top:16px; font-family:var(--rk-mono); font-size:.56rem; letter-spacing:.22em;
  color:rgba(255,255,255,.5); text-transform:uppercase; }
.rk-lock-bar{ width:min(200px,60%); height:2px; margin:16px auto 0; background:rgba(255,255,255,.08); overflow:hidden; }
.rk-lock-bar i{ display:block; height:100%; width:62%; background:linear-gradient(90deg,transparent,var(--rk-red),transparent);
  animation:rkLoadBar 1.7s var(--rk-cine) infinite; }
.rk-disabled{ pointer-events:none !important; opacity:.45 !important; filter:grayscale(.25); }

/* --- vídeo do portfólio aparece no hover (integração) --- */
.work-media video{ transition:opacity .6s var(--rk-cine), transform .8s var(--rk-cine); }

@media (prefers-reduced-motion: reduce){ .rk-holo, .rk-beam, .rk-lock-scan, .rk-lock-badge, .rk-lock-bar i{ animation:none !important; } }