/* =====================================================================
   HACKER THEME v4 — 3D + SCARIER
   3D cyber-core landing, neon grid floor, 3D text, tilting 3D cards,
   click shockwave, heartbeat vignette, visitor sound button.
   Loaded after hacker-theme.css (only when the Hacker theme is active).
   ===================================================================== */
:root { --hk-blood: #ff1744; --hk-blood-dark: #7a0018; }

/* ---------- heartbeat red vignette over the whole site ---------- */
body.hk-theme::before {
    content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 99997;
    animation: hk-heartbeat 4.2s infinite;
}
@keyframes hk-heartbeat {
    0%, 100% { box-shadow: inset 0 0 140px rgba(255,23,68,0); }
    8%  { box-shadow: inset 0 0 160px rgba(255,23,68,.28); }
    14% { box-shadow: inset 0 0 140px rgba(255,23,68,.05); }
    20% { box-shadow: inset 0 0 170px rgba(255,23,68,.32); }
    34% { box-shadow: inset 0 0 140px rgba(255,23,68,0); }
}

/* ---------- 3D extruded name (terminal landing) ---------- */
.hk-glitch {
    text-shadow:
        0 1px 0 #00c853, 0 2px 0 #00a844, 0 3px 0 #008a38, 0 4px 0 #006b2b, 0 5px 0 #004d1f,
        0 6px 1px rgba(0,0,0,.5), 0 0 12px rgba(0,255,102,.9), 0 0 40px rgba(0,255,102,.45) !important;
    transform: perspective(600px) rotateX(12deg);
}

/* terminal window floats in 3D and tilts with the mouse (JS sets --rx/--ry) */
.hk-terminal {
    transform: perspective(1000px) rotateX(var(--rx, 6deg)) rotateY(var(--ry, 0deg));
    transform-style: preserve-3d; transition: transform .15s ease-out;
    box-shadow: 0 30px 60px rgba(0,0,0,.8), 0 0 50px rgba(0,255,102,.15), 0 0 0 1px rgba(0,255,102,.15) !important;
}

/* ---------- neon grid floor ---------- */
.hk-floor {
    position: absolute; left: -50%; right: -50%; bottom: 0; height: 45%;
    perspective: 320px; perspective-origin: 50% 0%; pointer-events: none; z-index: 1;
    -webkit-mask-image: linear-gradient(to top, #000 30%, transparent 100%);
            mask-image: linear-gradient(to top, #000 30%, transparent 100%);
}
.hk-floor-grid {
    position: absolute; inset: 0 0 -100% 0;
    background-image:
        linear-gradient(rgba(255,23,68,.65) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,23,68,.65) 1px, transparent 1px);
    background-size: 60px 60px;
    transform: rotateX(68deg); transform-origin: 50% 0;
    animation: hk-floor-move 2.2s linear infinite;
    filter: drop-shadow(0 0 4px rgba(255,23,68,.8));
}
.hk-floor-green .hk-floor-grid {
    background-image:
        linear-gradient(rgba(0,255,102,.45) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,102,.45) 1px, transparent 1px);
    filter: drop-shadow(0 0 4px rgba(0,255,102,.7));
}
@keyframes hk-floor-move { from { background-position: 0 0; } to { background-position: 0 60px; } }

/* ---------- 3D CYBER CORE landing ---------- */
.hk-cyber { background: radial-gradient(ellipse at 50% 38%, #2a0010 0%, #0a0003 55%, #000 100%) !important; }
#hk-core { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hk-cyber .hk-scanlines { z-index: 2; }
.hk-cyber-inner { z-index: 3; }
.hk-cyber .hk-status { color: var(--hk-blood) !important; border-color: rgba(255,23,68,.6) !important; background: rgba(20,0,5,.6); }
.hk-cyber .hk-dot { background: var(--hk-blood); box-shadow: 0 0 8px var(--hk-blood); }
.hk-3d-name {
    font-family: var(--hk-mono) !important; font-weight: 800; text-transform: uppercase;
    font-size: clamp(38px, 8vw, 92px); line-height: 1; margin: 6px 0 20px; letter-spacing: 3px;
    color: #fff !important; overflow-wrap: anywhere;
    text-shadow:
        0 1px 0 #ff5c7a, 0 2px 0 #ff2e55, 0 3px 0 #e0123d, 0 4px 0 #c00d33, 0 5px 0 #a00a2a,
        0 6px 0 #800822, 0 7px 0 #60061a, 0 8px 12px rgba(0,0,0,.9),
        0 0 30px rgba(255,23,68,.7), 0 0 80px rgba(255,23,68,.35) !important;
    transform: perspective(700px) rotateX(var(--nrx, 14deg)) rotateY(var(--nry, 0deg));
    transition: transform .15s ease-out;
    animation: hk-name-flicker 6s infinite;
}
@keyframes hk-name-flicker { 0%, 93%, 100% { opacity: 1; } 94% { opacity: .4; } 95% { opacity: 1; } 96.5% { opacity: .2; } 97.5% { opacity: 1; } }
.hk-3d-role { font-size: clamp(15px, 2.2vw, 22px); color: #ffd1da !important; margin-bottom: 26px; }
.hk-3d-role #hk-typed { color: #fff !important; text-shadow: 0 0 10px rgba(255,23,68,.9); }
.hk-3d-bracket { color: var(--hk-blood) !important; font-weight: 700; }
.hk-3d-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-bottom: 26px; perspective: 800px; }
.hk-3d-stat {
    min-width: 160px; padding: 10px 16px; text-align: left; background: rgba(25,0,6,.7);
    border: 1px solid rgba(255,23,68,.45); border-left: 3px solid var(--hk-blood);
    transform: rotateX(18deg); box-shadow: 0 14px 30px rgba(0,0,0,.6), 0 0 18px rgba(255,23,68,.15);
}
.hk-3d-stat span { display: block; font-size: 10px; letter-spacing: 2px; color: #ff8fa3 !important; }
.hk-3d-stat b { font-size: 14px; color: #fff !important; letter-spacing: 1px; }
.hk-red-text { color: var(--hk-blood) !important; text-shadow: 0 0 8px rgba(255,23,68,.8); animation: hk-red-pulse 1.6s infinite; }
@keyframes hk-red-pulse { 50% { opacity: .45; text-shadow: 0 0 2px rgba(255,23,68,.4); } }
.hk-actions-center { justify-content: center; padding-left: 0 !important; }
.hk-cta-red { color: #fff !important; border-color: var(--hk-blood) !important; box-shadow: inset 0 0 0 0 var(--hk-blood), 0 0 18px rgba(255,23,68,.35) !important; }
.hk-cta-red:hover { box-shadow: inset 0 0 0 40px var(--hk-blood), 0 0 30px rgba(255,23,68,.7) !important; color: #fff !important; }
.hk-cyber .hk-socials a { color: var(--hk-blood) !important; border-color: rgba(255,23,68,.4); }
.hk-cyber .hk-socials a:hover { background: var(--hk-blood); color: #fff !important; }

/* target lock-on crosshair (follows the mouse via JS) */
.hk-crosshair {
    position: absolute; z-index: 2; width: 74px; height: 74px; left: 50%; top: 40%;
    margin: -37px 0 0 -37px; pointer-events: none; border: 1px solid rgba(255,23,68,.7); border-radius: 50%;
    box-shadow: 0 0 14px rgba(255,23,68,.5); transition: left .25s ease-out, top .25s ease-out;
}
.hk-crosshair::before { content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(255,23,68,.6); border-radius: 50%; animation: hk-spin 6s linear infinite; }
.hk-crosshair span { position: absolute; background: rgba(255,23,68,.8); }
.hk-crosshair span:first-child { left: 50%; top: -12px; bottom: -12px; width: 1px; }
.hk-crosshair span:nth-child(2) { top: 50%; left: -12px; right: -12px; height: 1px; }
.hk-crosshair b { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 16px; font-size: 9px; letter-spacing: 2px; color: var(--hk-blood); white-space: nowrap; animation: hk-blink 1s infinite steps(1); }
@keyframes hk-spin { to { transform: rotate(360deg); } }
@media (hover: none), (max-width: 991px) { .hk-crosshair { display: none; } }

/* ---------- 3D tilting cards (JS sets --tx/--ty/--gx/--gy) ---------- */
.hk-tilt {
    transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) translateZ(0) !important;
    transform-style: preserve-3d; transition: transform .18s ease-out, box-shadow .2s !important;
    position: relative; will-change: transform;
}
.hk-tilt::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 5;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(0,255,102,.18), transparent 55%);
    opacity: 0; transition: opacity .2s;
}
.hk-tilt:hover::after { opacity: 1; }
.hk-tilt:hover { box-shadow: 0 25px 50px rgba(0,0,0,.7), 0 0 25px rgba(0,255,102,.35) !important; }

/* 3D section titles */
.section-title h2 {
    text-shadow: 0 1px 0 #00c853, 0 2px 0 #00a844, 0 3px 0 #007a32, 0 4px 6px rgba(0,0,0,.8), 0 0 18px rgba(0,255,102,.6) !important;
    transform: perspective(500px) rotateX(10deg);
}

/* ---------- click shockwave + flash ---------- */
.hk-shock {
    position: fixed; z-index: 2147482000; pointer-events: none; width: 16px; height: 16px; margin: -8px 0 0 -8px;
    border: 2px solid var(--hk-blood); border-radius: 50%; box-shadow: 0 0 14px var(--hk-blood), inset 0 0 8px var(--hk-blood);
    animation: hk-shock .55s ease-out forwards;
}
.hk-shock.hk-shock-green { border-color: var(--hk-green); box-shadow: 0 0 14px var(--hk-green), inset 0 0 8px var(--hk-green); }
@keyframes hk-shock { to { transform: scale(7); opacity: 0; } }
.hk-flash { position: fixed; inset: 0; z-index: 2147481000; pointer-events: none; background: rgba(255,23,68,.12); animation: hk-flash .2s forwards; }
@keyframes hk-flash { to { opacity: 0; } }

/* ---------- visitor sound button ---------- */
#hk-sound-toggle {
    position: fixed; right: 16px; bottom: 46px; z-index: 9995; width: 42px; height: 42px; border-radius: 50%;
    background: #000; color: var(--hk-green); border: 1px solid var(--hk-green); font-size: 18px; line-height: 1; padding: 0;
    box-shadow: 0 0 14px rgba(0,255,102,.45); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
#hk-sound-toggle.hk-muted { color: var(--hk-blood); border-color: var(--hk-blood); box-shadow: 0 0 14px rgba(255,23,68,.45); }
#hk-sound-toggle:not(.hk-muted) { animation: hk-sound-pulse 2s infinite; }
@keyframes hk-sound-pulse { 50% { box-shadow: 0 0 22px rgba(0,255,102,.85); } }
body:not(.hk-theme) #hk-sound-toggle { display: none; }

@media (max-width: 575px) {
    .hk-3d-stats { gap: 6px; flex-wrap: nowrap; }
    .hk-3d-stat { min-width: 0; flex: 1 1 0; padding: 7px 8px; transform: rotateX(12deg); }
    .hk-3d-stat span { font-size: 8px; letter-spacing: 1px; }
    .hk-3d-stat b { font-size: 11px; letter-spacing: 0; overflow-wrap: anywhere; }
    .hk-floor { height: 30%; }
}
@media (prefers-reduced-motion: reduce) {
    body.hk-theme::before, .hk-floor-grid, .hk-3d-name, .hk-crosshair::before, .hk-red-text { animation: none !important; }
    .hk-tilt, .hk-terminal, .hk-3d-name { transform: none !important; }
}