/* 
   Zack Efelgin Landing Page Styles - V3 Premium (Calvin Harris Inspired)
*/

:root {
    --zel-bg: #000000;
    --zel-text: #ffffff;
    --zel-text-muted: #888888;
    --zel-accent: #ffffff;
    --font-primary: 'Space Grotesk', sans-serif;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 8rem;
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

.zel-body {
    margin: 0; padding: 0;
    background-color: var(--zel-bg);
    color: var(--zel-text);
    font-family: var(--font-primary);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    line-height: 1.6;
    cursor: none;
}

/* Custom Cursor */
.zel-cursor, .zel-cursor-follower {
    position: fixed; top: 0; left: 0; border-radius: 50%;
    pointer-events: none; z-index: 10000; transform: translate(-50%, -50%);
}
.zel-cursor { width: 8px; height: 8px; background-color: var(--zel-accent); }
.zel-cursor-follower {
    width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.4);
    transition: width 0.3s, height 0.3s, background-color 0.3s;
}
.zel-cursor-follower.hover-active {
    width: 60px; height: 60px; background-color: rgba(255,255,255,0.1); border-color: transparent; mix-blend-mode: difference;
}

/* Preloader */
.zel-preloader {
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100svh;
    background: #050510; /* Deep dark space blue/black */
    z-index: 9999;
    display: flex; justify-content: center; align-items: center;
    transition: opacity 0.5s var(--ease-out-expo), visibility 0.5s;
}
.zel-preloader.hidden { opacity: 0; visibility: hidden; }

/* Custom Binary Typing Visuals */
.binary-typing-container {
    width: 90vw;
    max-width: 800px;
    font-family: 'Space Grotesk', monospace;
    font-size: clamp(1rem, 3vw, 1.8rem);
    color: #e91e63;
    text-shadow: 0 0 15px rgba(233, 30, 99, 0.8), 0 0 30px rgba(233, 30, 99, 0.4);
    line-height: 1.5;
    letter-spacing: 0.1em;
    word-break: break-all;
    text-align: left;
}
.binary-cursor {
    display: inline-block;
    width: 1ch;
    color: #fff;
    text-shadow: 0 0 10px #fff;
    animation: blinkCursor 0.8s step-end infinite;
}

/* Background Texture */
.zel-bg-fx {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: -1;
    background: radial-gradient(circle at 50% 50%, rgba(15,15,15,1) 0%, rgba(0,0,0,1) 100%);
}
.zel-bg-fx::after {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* Typography Base */
a { color: var(--zel-accent); text-decoration: none; cursor: none; }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1; text-transform: uppercase; }

.zel-huge-title { font-size: clamp(4rem, 12vw, 12rem); letter-spacing: -0.04em; margin-bottom: var(--spacing-md); line-height: 0.85; }
.zel-section-title { font-size: clamp(2.5rem, 5vw, 4.5rem); letter-spacing: 0.02em; margin-bottom: var(--spacing-lg); }
.zel-lead-text { font-size: clamp(1.25rem, 2.5vw, 2.5rem); font-weight: 500; margin-bottom: var(--spacing-lg); max-width: 900px; line-height: 1.3; }
p { font-size: 1.125rem; color: var(--zel-text-muted); font-weight: 300; margin-bottom: var(--spacing-md); }
.highlight-text { color: var(--zel-text); font-weight: 400; font-size: 1.5rem; }

/* Wrapper Layout */
.zel-wrapper { width: 100%; display: flex; flex-direction: column; min-height: 100vh; }
.zel-section-inner-wrap { max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-md); width: 100%; }

/* Navigation */
.zel-navbar {
    position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
    transition: background 0.4s var(--ease-out-expo), padding 0.4s var(--ease-out-expo);
    padding: var(--spacing-md) 0;
}
.zel-navbar.scrolled {
    background: rgba(0,0,0,0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    padding: var(--spacing-sm) 0; border-bottom: 1px solid rgba(255,255,255,0.05);
}
.zel-nav-inner {
    max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-md);
    display: flex; justify-content: space-between; align-items: center;
}
.zel-nav-actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}
.zel-nav-logo { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.05em; position: relative; z-index: 110; }
.zel-nav-links { display: flex; align-items: center; gap: 2rem; }
.zel-nav-links a { font-size: 0.875rem; text-transform: uppercase; font-weight: 500; letter-spacing: 0.1em; transition: color 0.3s, opacity 0.3s; }
.zel-nav-links a:hover { opacity: 0.5; }

/* Hamburger Button Settings (Hidden on Desktop) */
.zel-hamburger {
    display: none;
    width: 44px;
    height: 44px;
    position: relative;
    z-index: 110;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 10px 24px rgba(0,0,0,0.25);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    appearance: none;
}
.zel-hamburger .bar {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    position: absolute;
    left: 50%;
    margin-left: -9px;
    border-radius: 999px;
    transition: transform 0.28s ease, opacity 0.22s ease, background 0.28s ease;
}
.zel-hamburger .bar:nth-child(1) { top: 15px; }
.zel-hamburger .bar:nth-child(2) { top: 21px; }
.zel-hamburger .bar:nth-child(3) { top: 27px; }
.zel-hamburger:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.14);
}

/* Active Hamburger (X) */
.zel-hamburger.active .bar:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.zel-hamburger.active .bar:nth-child(2) { opacity: 0; }
.zel-hamburger.active .bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 768px) {
    .zel-hamburger {
        display: none !important;
        visibility: hidden;
        pointer-events: none;
    }
    .zel-nav-links {
        display: flex !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: none !important;
        width: auto !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}

/* Global helper to stop scroll when modal is open */
body.no-scroll { overflow: hidden; }

/* Mobile Menu Media Query */
@media (max-width: 767px) {
    .zel-navbar {
        padding: 1rem 0;
    }
    .zel-navbar.scrolled,
    .zel-navbar.is-menu-open {
        background: rgba(0,0,0,0.88);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .zel-nav-inner {
        position: relative;
        padding: 0 var(--spacing-sm);
    }
    .zel-nav-actions {
        position: relative;
        margin-left: auto;
    }
    .zel-hamburger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 44px;
    }
    .zel-nav-links {
        position: absolute;
        top: calc(100% + 0.85rem);
        right: 0;
        width: min(calc(100vw - 2rem), 22rem);
        padding: 0.5rem;
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 16px;
        background: rgba(8, 8, 12, 0.92);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
        box-shadow: 0 20px 50px rgba(0,0,0,0.45);
        flex-direction: column;
        align-items: stretch;
        gap: 0.2rem;
        opacity: 0; pointer-events: none; visibility: hidden;
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
        z-index: 105;
        transform: translateY(-10px);
    }
    .zel-nav-links.menu-open {
        opacity: 1; pointer-events: auto; visibility: visible;
        transform: translateY(0);
    }
    .zel-nav-links a {
        display: block;
        width: 100%;
        padding: 0.95rem 1rem;
        border-radius: 12px;
        font-size: 0.95rem;
        letter-spacing: 0.16em;
    }
    .zel-nav-links a:hover {
        opacity: 1;
        background: rgba(255,255,255,0.06);
        color: #fff;
    }
}

/* Hero */
.zel-header { 
    width: 100%; min-height: 100vh; min-height: 100svh; position: relative;
    display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; 
}
/* Premium Sci-Fi Glitch Logo */
.zel-logo { 
    position: relative; z-index: 10; display: inline-flex; flex-direction: column; align-items: flex-start; 
    cursor: none; text-decoration: none; padding: 1rem; margin-top: -1rem; margin-left: -1rem;
}

.ze-glitch-logo {
    position: relative;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 900;
    letter-spacing: 0.1em;
    color: #fff;
    text-transform: uppercase;
    line-height: 0.9;
}

.ze-glitch-text { position: relative; z-index: 2; }

.ze-glitch-layer {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0.8;
}

.ze-glitch-cyan {
    color: #0ff; z-index: 1;
    animation: simpleGlitchCyan 4s infinite linear alternate-reverse;
}
.ze-glitch-magenta {
    color: #f0f; z-index: 1;
    animation: simpleGlitchMagenta 3.5s infinite linear alternate-reverse;
}

.ze-logo-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.4em;
    color: rgba(255,255,255,0.4);
    margin-top: 1.2rem;
    padding-left: 0.2rem;
    text-transform: uppercase;
    transition: all 0.3s;
}

/* Base Glitch Animations */
@keyframes simpleGlitchCyan {
    0% { transform: translate(0) skew(0); clip-path: inset(0 0 0 0); }
    10% { transform: translate(-2px, 1px) skew(-1deg); clip-path: inset(20% 0 80% 0); }
    15% { transform: translate(0) skew(0); clip-path: inset(0 0 0 0); }
    30% { transform: translate(2px, -1px) skew(1deg); clip-path: inset(60% 0 20% 0); }
    35% { transform: translate(0) skew(0); clip-path: inset(0 0 0 0); }
    100% { transform: translate(0) skew(0); clip-path: inset(0 0 0 0); }
}
@keyframes simpleGlitchMagenta {
    0% { transform: translate(0) skew(0); clip-path: inset(0 0 0 0); }
    15% { transform: translate(2px, -1px) skew(1deg); clip-path: inset(10% 0 60% 0); }
    20% { transform: translate(0) skew(0); clip-path: inset(0 0 0 0); }
    35% { transform: translate(-2px, 1px) skew(-1deg); clip-path: inset(80% 0 10% 0); }
    40% { transform: translate(0) skew(0); clip-path: inset(0 0 0 0); }
    100% { transform: translate(0) skew(0); clip-path: inset(0 0 0 0); }
}

/* Aggressive Glitch on Hover */
.zel-logo:hover .ze-glitch-cyan { animation: freakGlitchCyan 0.15s infinite linear alternate-reverse; }
.zel-logo:hover .ze-glitch-magenta { animation: freakGlitchMagenta 0.15s infinite linear alternate-reverse; }

@keyframes freakGlitchCyan {
    0% { transform: translate(-4px, 2px) skew(-8deg); filter: hue-rotate(90deg) brightness(2); clip-path: inset(10% 0 30% 0); }
    100% { transform: translate(4px, -2px) skew(8deg); filter: hue-rotate(90deg) brightness(1.5); clip-path: inset(60% 0 10% 0); }
}
@keyframes freakGlitchMagenta {
    0% { transform: translate(4px, -2px) skew(8deg); filter: hue-rotate(-90deg) brightness(2); clip-path: inset(20% 0 50% 0); }
    100% { transform: translate(-4px, 2px) skew(-8deg); filter: hue-rotate(-90deg) brightness(1.5); clip-path: inset(40% 0 20% 0); }
}

.zel-logo:hover .ze-logo-subtitle { color: #ff0000; text-shadow: 0 0 8px rgba(255,0,0,0.8); }

/* Terminal Typing Effect */
.zel-terminal-msg {
    margin-top: 5rem;
    font-family: 'Space Grotesk', monospace;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    height: 1.5rem;
    display: flex;
    align-items: center;
    z-index: 10;
    opacity: 0.9;
}
.zel-terminal-msg::before {
    content: 'SYS >';
    margin-right: 12px;
    color: #0ff;
    text-shadow: 0 0 12px rgba(0, 255, 255, 0.8);
}
.zel-terminal-msg::after {
    content: '_';
    margin-left: 8px;
    color: #f0f;
    text-shadow: 0 0 12px rgba(255, 0, 255, 0.8);
    animation: blinkCursor 1s step-end infinite;
}
@keyframes blinkCursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.zel-scroll-indicator {
    position: absolute; bottom: 5vh; left: 50%; transform: translateX(-50%);
    display: none !important; flex-direction: column; align-items: center; gap: 10px; z-index: 2;
}
.zel-scroll-indicator span { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,0.5); }
.zel-scroll-indicator .line { width: 1px; height: 40px; background: rgba(255,255,255,0.2); overflow: hidden; position: relative; }
.zel-scroll-indicator .line::after { content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: #fff; animation: scrollDrop 2s infinite ease-in-out; }
@keyframes scrollDrop { 0% { top: -100%; } 100% { top: 100%; } }

/* Marquee Ticker */
.zel-marquee {
    width: 100%; padding: 1.5rem 0; background: var(--zel-accent); color: var(--zel-bg);
    overflow: hidden; white-space: nowrap; display: flex; align-items: center;
    border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(255,255,255,0.1);
}
.zel-marquee-content {
    display: inline-block; animation: marqueeScroll 20s linear infinite; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.05em;
}
@keyframes marqueeScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-33.33%); } }

/* Sections */
.zel-section { padding: var(--spacing-xl) 0; }
.zel-about-body { margin-left: auto; border-left: 1px solid rgba(255,255,255,0.1); padding-left: var(--spacing-md); }

/* Inverted Editorial Look (White bg, black text) */
.zel-inverted { background-color: #ffffff; color: #000000; position: relative; z-index: 10; padding: var(--spacing-xl) 0; }
.zel-inverted .zel-about-body { border-left-color: rgba(0,0,0,0.1); }
.zel-inverted p { color: #333333; }

.zel-about-editorial {
    display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center;
}
.zel-about-image-col { width: 100%; border-radius: 4px; overflow: hidden; }
.zel-editorial-img { width: 100%; height: auto; display: block; filter: contrast(1.1) grayscale(0.2); transition: transform 0.6s var(--ease-out-expo); }
.zel-editorial-img:hover { transform: scale(1.02); }
.zel-about-text-col { display: flex; flex-direction: column; justify-content: center; }

/* Tour List */
.zel-tour-list { display: flex; flex-direction: column; width: 100%; }
.zel-tour-row {
    display: grid; grid-template-columns: 1fr 2fr 1fr auto; align-items: center;
    padding: 2rem 0; border-bottom: 1px solid rgba(255,255,255,0.1);
    transition: background 0.3s ease, padding-left 0.4s var(--ease-out-expo); cursor: none;
}
.zel-tour-row.is-header { color: var(--zel-text-muted); font-size: 0.875rem; border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 1rem; }
.zel-tour-row:hover { background: rgba(255,255,255,0.03); padding-left: 1rem; border-bottom-color: rgba(255,255,255,0.3); }
.tour-date { font-weight: 400; font-size: 1.25rem; color: var(--zel-text-muted); }
.tour-venue { font-weight: 700; font-size: 1.5rem; }
.tour-location { font-weight: 300; font-size: 1.125rem; }
.zel-btn-small {
    background: transparent; border: 1px solid rgba(255,255,255,0.3); color: #fff;
    padding: 0.75rem 2rem; font-family: var(--font-primary); text-transform: uppercase;
    font-size: 0.875rem; letter-spacing: 0.1em; cursor: none; transition: all 0.3s ease; border-radius: 50px;
}
.zel-tour-row:hover .zel-btn-small { background: #fff; color: #000; }

/* SPACE SECTION: ANDROMEDA GALAXY ORBIT */
.zel-space-section {
    position: relative; overflow: hidden;
    background: radial-gradient(circle at center top, #111 0%, #000 100%);
    padding-bottom: 8rem;
}

/* Starfield Generator */
.zel-starfield {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 0; overflow: hidden;
}
.css-star {
    position: absolute; background: #fff; border-radius: 50%;
    box-shadow: 0 0 5px #fff, 0 0 12px #fff;
    animation: starTwinkle alternate infinite ease-in-out;
}
@keyframes starTwinkle {
    0% { opacity: 0.1; transform: scale(0.6); }
    100% { opacity: 0.9; transform: scale(1.3); }
}

/* 3D GALAXY ATOM / GYROSCOPE SCENE (Kids In The Space) */
.zel-gyro-scene {
    position: relative; width: 100%; height: 900px;
    display: flex; justify-content: center; align-items: center;
    perspective: 2500px; pointer-events: none; margin-top: 2rem;
    transform-style: preserve-3d;
}

.zel-gyro-center {
    position: absolute; top: 50%; left: 50%;
    transform-style: preserve-3d;
    z-index: 10;
}

/* GALAXY WARP LAYER (Shooting Stars & Spaceships) */
.zel-warp-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 1; overflow: hidden;
}

.zel-shooting-star {
    position: absolute; width: 150px; height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    border-radius: 50%; filter: drop-shadow(0 0 10px #fff);
    animation: shootStar 4s linear infinite; opacity: 0;
}
.star-1 { top: 20%; left: -200px; animation-duration: 3s; animation-delay: 1s; transform: rotate(15deg); }
.star-2 { top: 70%; right: -200px; animation-duration: 4.5s; animation-delay: 2s; transform: rotate(160deg); background: linear-gradient(90deg, rgba(0,255,255,1) 0%, transparent 100%); width: 250px; }
.star-3 { top: 40%; left: -200px; animation-duration: 5s; animation-delay: 0.5s; transform: rotate(-25deg); background: linear-gradient(90deg, rgba(138,43,226,1) 0%, transparent 100%); width: 200px; }
.star-4 { top: 85%; left: -200px; animation-duration: 3.5s; animation-delay: 3s; transform: rotate(5deg); }

@keyframes shootStar {
    0% { transform: translateX(0) scaleX(1); opacity: 0; }
    10% { opacity: 1; transform: translateX(10vw) scaleX(1); }
    80% { opacity: 1; transform: translateX(90vw) scaleX(1); }
    100% { transform: translateX(120vw) scaleX(3); opacity: 0; }
}

.zel-ufo {
    position: absolute; width: 40px; height: 12px;
    background: #fff; border-radius: 50px;
    box-shadow: 0 0 20px #fff, 0 0 40px #0ff;
    animation: flyUFO 10s cubic-bezier(0.25, 1, 0.5, 1) infinite; opacity: 0;
}
.zel-ufo::after {
    content: ''; position: absolute; top: 50%; right: 100%; transform: translateY(-50%);
    width: 120px; height: 4px; border-radius: 10px;
    background: linear-gradient(90deg, transparent 0%, rgba(0,255,255,0.8) 100%);
}
.ufo-1 { top: 30%; left: -100px; animation-duration: 12s; animation-delay: 2s; }
.ufo-2 { top: 80%; right: -100px; animation-duration: 15s; animation-delay: 5s; animation-direction: reverse; box-shadow: 0 0 20px #fff, 0 0 40px #f0f; }
.ufo-2::after { right: auto; left: 100%; background: linear-gradient(-90deg, transparent 0%, rgba(255,0,255,0.8) 100%); }
.ufo-3 { top: 60%; left: -100px; animation-duration: 8s; animation-delay: 7s; transform: scale(0.6); }

@keyframes flyUFO {
    0% { transform: translateX(-10vw) translateY(0) rotate(5deg); opacity: 0; }
    10% { opacity: 1; transform: translateX(5vw) translateY(-20px) rotate(0deg); }
    90% { opacity: 1; transform: translateX(90vw) translateY(30px) rotate(-5deg); }
    100% { transform: translateX(110vw) translateY(0) rotate(0deg); opacity: 0; }
}

/* FOREGROUND ASTEROIDS (PARALLAX) */
.zel-asteroids-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 20; overflow: hidden;
}
.zel-asteroid {
    position: absolute; background: #080808;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    box-shadow: inset -20px -20px 40px #000, inset 5px 5px 30px rgba(255,255,255,0.05);
    animation: driftAst 40s linear infinite alternate;
}
.ast-1 { width: 180px; height: 150px; top: 5%; left: -50px; filter: blur(6px); animation-duration: 45s; }
.ast-2 { width: 100px; height: 120px; bottom: 15%; right: 5%; filter: blur(3px); animation-duration: 25s; animation-delay: -10s; }
.ast-3 { width: 300px; height: 240px; bottom: -80px; left: 10%; filter: blur(12px); animation-duration: 60s; opacity: 0.8; }

@keyframes driftAst {
    0% { transform: translateY(0) rotate(0deg); }
    100% { transform: translateY(-150px) rotate(60deg); }
}

/* Wobbly Hand-Drawn Core -> REVERTED TO PRISTINE HIGH-TECH CORE */
.zel-kid-core {
    position: absolute; top: -150px; left: -150px; /* Center a 300px element */
    width: 300px; height: 300px;
    border-radius: 50%;
    background: #000;
    box-shadow: 0 0 50px rgba(0,255,255,0.4), 0 0 100px rgba(138,43,226,0.2), inset 0 0 20px rgba(255,255,255,0.5);
    pointer-events: auto; z-index: 1000;
    overflow: hidden; cursor: crosshair;
    animation: floatCore 6s infinite alternate ease-in-out;
}
.core-tech-ring {
    position: absolute; top: -5px; left: -5px; width: calc(100% + 10px); height: calc(100% + 10px);
    border-radius: 50%; pointer-events: none;
    border: 1px dashed rgba(255,255,255,0.4);
    animation: orbSpin 20s linear infinite; z-index: 2;
}
.zel-kid-core img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
    transition: all 0.6s var(--ease-out-expo); filter: contrast(1.1) saturate(1.2);
}
.zel-kid-core:hover img { transform: scale(1.05); filter: contrast(1.1) saturate(1.2) brightness(1.2); }

@keyframes floatCore {
    0% { transform: translateY(-10px); }
    100% { transform: translateY(10px); }
}

/* 7 Intersecting Rings Physics Variables */
.zel-gyro-plane, .zel-gyro-pivot, .zel-wobbly-ring, .zel-gyro-spoke, .zel-distance, .zel-counter-pivot, .zel-counter-spoke {
    position: absolute; top: 0; left: 0;
    transform-style: preserve-3d;
}

.zel-wobbly-ring {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    border: 3px dashed rgba(255,255,255,0.15);
    pointer-events: none; box-sizing: border-box;
    box-shadow: 0 0 20px rgba(138,43,226,0.1), inset 0 0 20px rgba(0,255,255,0.1);
}

@keyframes orbSpin { from { transform: rotateZ(0deg); } to { transform: rotateZ(360deg); } }
@keyframes orbSpinRev { from { transform: rotateZ(360deg); } to { transform: rotateZ(0deg); } }

/* Pause on hover mechanism */
.zel-gyro-scene:hover .zel-gyro-pivot,
.zel-gyro-scene:hover .zel-counter-pivot {
    animation-play-state: paused !important;
}

/* THE TRACK OBJECT (Drawn Star -> Pristine Album) */
.zel-kid-track {
    position: absolute;
    top: -45px; left: -45px; /* Center 90px */
    width: 90px; height: 90px;
    cursor: none; pointer-events: auto;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    z-index: 50;
    transform-style: preserve-3d;
}

.kid-planet {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 30% 30%, #fff 0%, #aaa 100%);
    box-shadow: inset -15px -15px 25px rgba(0,0,0,0.8), 0 0 20px rgba(255,255,255,0.6);
    border: 2px solid rgba(255,255,255,0.8);
    transition: all 0.6s;
}

.kid-track-img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transition: all 0.5s; border-radius: 12px;
}

.kid-track-hover-ui {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.4s; background: rgba(0,0,0,0.3); border-radius: 12px; pointer-events: none;
}
.kid-track-hover-ui span {
    background: #fff; color: #000; padding: 12px 24px; border-radius: 50px;
    font-size: 0.85rem; font-weight: 800; transform: translateY(20px); transition: all 0.4s;
}

.kid-track-title {
    position: absolute; bottom: -40px; left: 50%; transform: translateX(-50%);
    width: 250px; text-align: center;
    color: #fff; opacity: 0; transition: all 0.4s; pointer-events: none; text-shadow: 0 4px 15px rgba(0,0,0,0.9);
}
.kid-track-title .num { display: block; font-size: 0.8rem; color: rgba(255,255,255,0.5); font-family: monospace; letter-spacing: 0.2em; }
.kid-track-title h4 { font-size: 1.2rem; margin-top: 5px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; }

/* REVEAL MAGIC ON HOVER */
.zel-kid-track:hover {
    width: 280px; height: 280px;
    top: -140px; left: -140px;
    z-index: 9999;
}
.zel-kid-track:hover .kid-planet {
    opacity: 0; transform: scale(1.5); /* Pop effect */
}
.zel-kid-track:hover .kid-track-img {
    opacity: 1; box-shadow: 0 30px 60px rgba(0,0,0,0.9), 0 0 60px rgba(138,43,226,0.4);
}
.zel-kid-track:hover .kid-track-hover-ui { opacity: 1; }
.zel-kid-track:hover .kid-track-hover-ui span { transform: translateY(0); }
.zel-kid-track:hover .kid-track-title { opacity: 1; bottom: -60px; }

/* --------------------------------------------------------------------------
   2B. THE FREAK SPACE LORE BOOK SECTION
-------------------------------------------------------------------------- */
.zel-dante-section {
    position: relative; overflow: hidden; background: #000;
    min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 10rem 0;
}

/* Deep Space Neon Vortex Background */
.zel-vortex-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0;
    display: flex; justify-content: center; align-items: center; perspective: 1000px;
}
.vortex-core {
    position: absolute; width: 200px; height: 200px; background: #000; border-radius: 50%;
    box-shadow: 0 0 100px 50px rgba(0,0,0,1), 0 0 150px 80px rgba(138,43,226,0.3);
}
.vortex-ring {
    position: absolute; border-radius: 50%; border: 1px solid rgba(255,255,255,0.02); animation: spinVortex linear infinite;
}
.vortex-ring.ring-a { width: 800px; height: 800px; border-width: 2px; border-top-color: rgba(0,255,255,0.5); animation-duration: 20s; transform: rotateX(70deg) rotateY(-20deg); }
.vortex-ring.ring-b { width: 1200px; height: 1200px; border-width: 1px; border-bottom-color: rgba(138,43,226,0.5); animation-duration: 35s; transform: rotateX(60deg) rotateY(10deg); animation-direction: reverse; }
.vortex-ring.ring-c { width: 600px; height: 600px; border: 2px solid rgba(255,0,255,0.2); animation-duration: 15s; transform: rotateX(80deg) rotateY(30deg); }
@keyframes spinVortex { from { transform: rotateX(75deg) rotateZ(0deg); } to { transform: rotateX(75deg) rotateZ(360deg); } }

/* The Levitating Artifact */
.zel-dante-artifact {
    position: relative; z-index: 10; margin-bottom: 5rem; width: 100%; display: flex; justify-content: center; align-items: center; perspective: 1200px;
}
.zel-book-levitation {
    animation: driftArtifact 6s ease-in-out infinite alternate; cursor: none;
}
@keyframes driftArtifact {
    0% { transform: translateY(-20px) rotateX(5deg); }
    100% { transform: translateY(20px) rotateX(-5deg); }
}

.zel-book-3d-model {
    position: relative; width: clamp(250px, 30vw, 400px); 
    transform-style: preserve-3d; transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    box-shadow: 0 50px 100px rgba(0,0,0,0.9), 0 0 80px rgba(138,43,226,0.3);
    border-radius: 4px; border: 1px solid rgba(255,255,255,0.1); background: transparent;
}
.base-book-img { width: 100%; display: block; opacity: 0; pointer-events: none; }
.zel-book-3d-model::before {
    content: ''; position: absolute; top: 0; left: -15px; width: 15px; height: 100%;
    background: #000; transform-origin: right; transform: rotateY(-90deg); border-left: 1px solid rgba(255,255,255,0.2);
    transition: opacity 0.4s;
}

/* ----------------------------------------------------
   FREAK SPACE / METEORITE MURDER IMPACT CSS
---------------------------------------------------- */
.meteor-crater {
    position: absolute; top: 50%; left: 50%; width: 200px; height: 200px;
    background: radial-gradient(circle at center, #000 0%, #300000 30%, #500000 50%, rgba(138,3,3,0.8) 70%, transparent 100%);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0; z-index: 5; pointer-events: none;
    box-shadow: inset 0 0 50px #000, 0 0 40px #ff0000;
    will-change: transform, opacity;
}
.zel-book-levitation:hover .meteor-crater {
    transform: translate(-50%, -50%) scale(1); opacity: 1; transition: transform 0.1s 0.25s, opacity 0.1s 0.25s;
    animation: craterPulse 2s infinite alternate 0.35s;
}
@keyframes craterPulse { 
    0% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.95); } 
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 
}

.meteorite-projectile {
    position: absolute; top: 50%; left: 50%; width: 50px; height: 50px;
    background: radial-gradient(circle, #fff, #ffae00, #ff0000, transparent); border-radius: 50%;
    transform: translate(-50%, -50%) translateZ(800px) scale(0);
    opacity: 0; pointer-events: none; z-index: 20;
    box-shadow: 0 0 100px #ff0000, 0 0 50px #ffae00;
    will-change: transform, opacity;
}
.zel-book-levitation:hover .meteorite-projectile {
    animation: meteorStrike 0.3s cubic-bezier(0.1, 0.9, 0.2, 1) forwards;
}
@keyframes meteorStrike {
    0% { transform: translate(-50%, -50%) translateZ(600px) scale(0.2); opacity: 1; }
    90% { transform: translate(-50%, -50%) translateZ(10px) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) translateZ(-50px) scale(3); opacity: 0; }
}

/* Massive Blood Bath */
.blood-bath {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 6; pointer-events: none;
}
.blood-splatter {
    position: absolute; background: #8a0303; border-radius: 50%;
    transform: scale(0); opacity: 0; filter: blur(2px); mix-blend-mode: multiply;
}
.main-splat { top: 30%; left: 20%; width: 250px; height: 200px; background: radial-gradient(circle, #300000, rgba(255,0,0,0.8)); }
.splat-2 { top: 40%; left: 10%; width: 100px; height: 150px; }
.splat-3 { top: 45%; right: 5%; width: 120px; height: 180px; }

.zel-book-levitation:hover .blood-splatter {
    transform: scale(1); opacity: 0.9;
    transition: transform 0.1s 0.28s, opacity 0.1s 0.28s;
}

/* Cascading Heavy Drips */
.heavy-drip {
    position: absolute; top: 50%; width: 8px; height: 100%;
    background: linear-gradient(to bottom, #500000, #ff0000);
    border-radius: 0 0 8px 8px; opacity: 0; box-shadow: 0 5px 10px rgba(0,0,0,0.8);
    transform-origin: top; transform: scaleY(0);
    will-change: transform, opacity;
}
.hd-1 { left: 40%; width: 12px; animation-delay: 0.3s !important; }
.hd-2 { left: 45%; width: 6px; animation-delay: 0.4s !important; }
.hd-3 { left: 52%; width: 15px; animation-delay: 0.35s !important; }
.hd-4 { left: 58%; width: 8px; animation-delay: 0.5s !important; }
.hd-5 { left: 63%; width: 10px; animation-delay: 0.32s !important; }
.hd-6 { left: 35%; width: 5px; animation-delay: 0.45s !important; }
.hd-7 { left: 68%; width: 6px; animation-delay: 0.48s !important; }
.hd-8 { left: 30%; width: 14px; animation-delay: 0.38s !important; }

.zel-book-levitation:hover .heavy-drip {
    animation: bloodPour 1.5s cubic-bezier(.5,0,.8,.5) forwards;
}
@keyframes bloodPour {
    0% { transform: scaleY(0); opacity: 1; }
    100% { transform: scaleY(1); opacity: 1; }
}

/* Violent Hover Shake */
.zel-book-3d-model { will-change: transform; }
.zel-book-levitation:hover .zel-book-3d-model {
    animation: violentShake 0.1s infinite;
    box-shadow: 0 80px 150px rgba(0,0,0,1), 0 0 150px rgba(138,3,3,0.8);
}
@keyframes violentShake {
    0% { transform: scale(1.05) rotateY(-15deg) rotateX(10deg) translate3d(2px, 2px, 0); }
    25% { transform: scale(1.05) rotateY(-15deg) rotateX(10deg) translate3d(-2px, -2px, 0); }
    50% { transform: scale(1.05) rotateY(-15deg) rotateX(10deg) translate3d(-2px, 2px, 0); }
    75% { transform: scale(1.05) rotateY(-15deg) rotateX(10deg) translate3d(2px, -2px, 0); }
    100% { transform: scale(1.05) rotateY(-15deg) rotateX(10deg) translate3d(2px, 2px, 0); }
}
@keyframes freakGlitch {
    0% { filter: hue-rotate(0deg) brightness(1); transform: rotate(-16deg) scaleY(20) translateX(0); }
    50% { filter: hue-rotate(90deg) brightness(1.5); transform: rotate(-16deg) scaleY(15) translateX(10px); }
    100% { filter: hue-rotate(-90deg) brightness(2); transform: rotate(-16deg) scaleY(25) translateX(-10px); }
}

.zel-book-light-sweep {
    position: absolute; top: 0; left: -150%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transform: skewX(-20deg); transition: left 0.8s; pointer-events: none; mix-blend-mode: overlay; z-index: 5;
}
.zel-book-levitation:hover .zel-book-light-sweep { left: 150%; }

/* Orbiting Debris */
.zel-dante-debris { position: absolute; top: 50%; left: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.debris { position: absolute; border-radius: 50%; transform-style: preserve-3d; background: #fff; box-shadow: 0 0 10px #fff, 0 0 20px #0ff; }
.d-1 { width: 4px; height: 4px; animation: debrisOrbitA 12s linear infinite; }
.d-2 { width: 2px; height: 2px; background: #f0f; box-shadow: 0 0 15px #f0f; animation: debrisOrbitB 8s linear infinite reverse; }
.d-3 { width: 6px; height: 6px; background: rgba(138,43,226,1); box-shadow: 0 0 20px rgba(138,43,226,1); animation: debrisOrbitC 18s linear infinite; }
@keyframes debrisOrbitA { 0% { transform: rotateY(0deg) translateX(300px) rotateY(0deg); } 100% { transform: rotateY(360deg) translateX(300px) rotateY(-360deg); } }
@keyframes debrisOrbitB { 0% { transform: rotateX(45deg) rotateY(0deg) translateX(250px) rotateY(0deg); } 100% { transform: rotateX(45deg) rotateY(360deg) translateX(250px) rotateY(-360deg); } }
@keyframes debrisOrbitC { 0% { transform: rotateZ(60deg) rotateY(0deg) translateX(400px) rotateY(0deg); } 100% { transform: rotateZ(60deg) rotateY(360deg) translateX(400px) rotateY(-360deg); } }

/* Cinematic Typography */
.zel-dante-typography {
    text-align: center; max-width: 800px; margin: 0 auto; position: relative; z-index: 10; padding: 0 2rem;
}
.dante-subtitle { color: #0ff; letter-spacing: 0.3em; font-size: 0.9rem; text-transform: uppercase; margin-bottom: 1rem; text-shadow: 0 0 10px rgba(0,255,255,0.5); }
.dante-title { font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 900; letter-spacing: -0.05em; margin-bottom: 2rem; line-height: 1; text-transform: uppercase; background: linear-gradient(180deg, #fff 0%, #aaa 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.8)); }
.dante-desc { font-size: 1.25rem; color: #ccc; margin-bottom: 3rem; line-height: 1.6; }

/* /* Premium Sci-Fi UX Buttons */
.zel-dante-actions { display: flex; gap: 2rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }

.dante-btn {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 1.2rem 2.8rem;
    font-family: 'Inter', 'Space Grotesk', sans-serif;
    font-weight: 700;
    letter-spacing: 0.12em;
    font-size: 0.85rem;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 8px;
    background: rgba(20, 20, 30, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    overflow: hidden;
    cursor: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

/* Glowing Border using Mask Compositing */
.dante-btn::before {
    content: ''; position: absolute; inset: 0; border-radius: 8px; padding: 1px;
    background: linear-gradient(135deg, rgba(0,255,255,0.5), transparent 50%, rgba(138,43,226,0.5));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.6; transition: all 0.4s; pointer-events: none;
}

/* Light Sweep Hover Effect */
.dante-btn::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transform: skewX(-20deg); transition: none; mix-blend-mode: overlay; pointer-events: none;
}
.dante-btn:hover::after { animation: premiumSweep 1s ease-out forwards; }
@keyframes premiumSweep { 0% { left: -100%; } 100% { left: 200%; } }

/* Distinguish Primary (Download) */
.dante-btn.primary-btn { background: rgba(0, 255, 255, 0.03); }
.dante-btn.primary-btn::before { background: linear-gradient(135deg, rgba(0,255,255,0.8), transparent 60%); }
.dante-btn.primary-btn:hover {
    background: rgba(0, 255, 255, 0.1); transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.8), 0 0 25px rgba(0,255,255,0.3);
}
.dante-btn.primary-btn:hover::before { opacity: 1; background: linear-gradient(135deg, rgba(0,255,255,1), rgba(138,43,226,0.8)); }

/* Distinguish Secondary (Support) */
.dante-btn.secondary-btn { background: rgba(138, 43, 226, 0.03); }
.dante-btn.secondary-btn::before { background: linear-gradient(135deg, rgba(138,43,226,0.8), transparent 60%); }
.dante-btn.secondary-btn:hover {
    background: rgba(138, 43, 226, 0.1); transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.8), 0 0 25px rgba(138,43,226,0.3);
}
.dante-btn.secondary-btn:hover::before { opacity: 1; background: linear-gradient(135deg, rgba(138,43,226,1), rgba(255,0,80,0.8)); }

/* Icon and Text alignment */
.btn-label { position: relative; z-index: 2; display: flex; align-items: center; gap: 0.75rem; }
.btn-icon-svg { width: 18px; height: 18px; fill: none; stroke: currentColor; transition: transform 0.3s; }

/* Subtle Icon Animations on Hover */
.dante-btn.primary-btn:hover .btn-icon-svg { transform: translateY(2px); stroke: #0ff; }
.dante-btn.secondary-btn:hover .btn-icon-svg.support-heart { transform: scale(1.1); fill: rgba(255,0,80,1) !important; filter: drop-shadow(0 0 5px #ff0050); }



/* Buttons & Countdown - Retained Premium V2 Styles */
.zel-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 1rem 2.5rem; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 6px;
    font-size: 1rem; text-transform: uppercase; letter-spacing: 0.25em; cursor: none;
    background: rgba(255, 255, 255, 0.02); color: #fff; text-decoration: none;
    text-indent: 0.25em; /* Fixes optical centering issue caused by letter-spacing */
    transition: all 0.4s var(--ease-out-expo);
    position: relative; overflow: hidden;
    backdrop-filter: blur(10px);
}
.zel-btn::before {
    content: ''; position: absolute; top: 0; left: -100%; width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
    transform: skewX(-20deg); transition: all 0.6s var(--ease-out-expo);
}
.zel-btn:hover { 
    border-color: rgba(0, 255, 255, 0.6); 
    background: rgba(0, 255, 255, 0.05); 
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2), inset 0 0 10px rgba(0, 255, 255, 0.1);
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
    transform: translateY(-2px);
    color: #fff;
}
.zel-btn:hover::before { left: 150%; }
.btn-icon { transition: transform 0.4s var(--ease-out-expo); }
.zel-btn:hover .btn-icon { transform: translateX(10px) scale(1.1); color: #0ff; }

.zel-countdown-wrapper { display: flex; flex-direction: column; align-items: center; text-align: center; }
.zel-timer { display: flex; align-items: baseline; justify-content: center; margin-top: var(--spacing-lg); flex-wrap: wrap; }
.time-block { display: flex; flex-direction: column; align-items: center; width: clamp(80px, 15vw, 150px); }
.time-val { font-size: clamp(3rem, 8vw, 8rem); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.time-label { text-transform: uppercase; font-size: 0.875rem; letter-spacing: 0.2em; color: var(--zel-text-muted); margin-top: 1rem; }
.separator { font-size: clamp(2rem, 5vw, 5rem); color: rgba(255,255,255,0.2); transform: translateY(-30px); margin: 0 1rem; }

/* Premium Contact Form Glassmorphism */
.zel-contact-form {
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    transition: transform 0.4s var(--ease-out-expo), box-shadow 0.4s var(--ease-out-expo);
}
.zel-contact-form:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* Inputs */
.zel-input-group { position: relative; width: 100%; margin-bottom: 2rem; }
.zel-input-group input, .zel-input-group textarea {
    width: 100%; 
    background: rgba(0, 0, 0, 0.3); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-radius: 8px;
    color: var(--zel-text);
    font-family: var(--font-primary); font-size: 1.1rem; 
    padding: 1.25rem 1.5rem; 
    resize: none; cursor: none;
    transition: all 0.4s var(--ease-out-expo);
}
.zel-input-group input:focus, .zel-input-group textarea:focus { 
    outline: none; 
    border-color: rgba(255, 0, 80, 0.5);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 20px rgba(255, 0, 80, 0.15), inset 0 0 10px rgba(255, 0, 80, 0.05);
}

/* Hide the old single line */
.input-line { display: none; }

.zel-input-group label {
    position: absolute; left: 1.5rem; top: 1.25rem; color: rgba(255,255,255,0.4); font-size: 1.1rem;
    pointer-events: none; transition: all 0.3s var(--ease-out-expo);
}

.zel-input-group input:not(:placeholder-shown) + label,
.zel-input-group textarea:not(:placeholder-shown) + label,
.zel-input-group input:focus + label,
.zel-input-group textarea:focus + label {
    top: -10px; left: 1rem; font-size: 0.75rem; color: #ff0050; letter-spacing: 0.1em;
    background: rgba(10, 10, 10, 0.8);
    padding: 0 0.5rem; border-radius: 4px;
}

/* Footer Giant Logo String */
.zel-footer { padding: var(--spacing-xl) 0 2rem; border-top: 1px solid rgba(255,255,255,0.05); }
.zel-footer-giant-text {
    font-size: clamp(4rem, 15vw, 20rem); font-weight: 800; line-height: 0.8; letter-spacing: -0.05em;
    text-align: center; white-space: nowrap; overflow: hidden; color: rgba(255,255,255,0.05);
    margin-bottom: var(--spacing-lg); pointer-events: none;
}
.zel-footer-bottom { 
    max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-md);
    display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 2rem; 
}
.zel-social-links a { text-transform: uppercase; font-size: 0.875rem; font-weight: 500; letter-spacing: 0.1em; margin-right: 1.5rem; transition: opacity 0.3s; }
.zel-social-links a:hover { opacity: 0.5; }
.zel-copyright { font-size: 0.75rem; color: var(--zel-text-muted); text-transform: uppercase; letter-spacing: 0.1em; }

/* Animations Utilities */
.fade-in { opacity: 0; transform: translateY(40px); transition: opacity 1.2s var(--ease-out-expo), transform 1.2s var(--ease-out-expo); }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* Response Mobile */
@media (max-width: 1023px) {
    .zel-section {
        padding: clamp(5rem, 9vw, 7rem) 0;
    }
    .zel-section-inner-wrap {
        padding: 0 1.5rem;
    }
    .zel-header {
        padding: 8rem 1.5rem 5rem;
        min-height: 100svh;
        text-align: center;
    }
    .zel-logo {
        align-items: center;
        margin: 0;
        padding: 0;
    }
    .ze-glitch-logo {
        font-size: clamp(2.6rem, 8vw, 4.2rem);
        letter-spacing: 0.07em;
    }
    .ze-logo-subtitle {
        margin-top: 0.9rem;
        padding-left: 0;
        font-size: 0.68rem;
        letter-spacing: 0.28em;
        text-align: center;
    }
    .zel-terminal-msg {
        margin-top: 2.5rem;
        max-width: min(90vw, 40rem);
        height: auto;
        min-height: 1.5rem;
        text-align: center;
        justify-content: center;
        flex-wrap: wrap;
        line-height: 1.5;
    }
    .zel-about-editorial {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .zel-about-body {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: var(--spacing-md);
    }
    .zel-inverted .zel-about-body {
        border-top-color: rgba(0,0,0,0.1);
    }
    .zel-album-intro {
        margin-bottom: 2rem !important;
        padding: 0 0.5rem;
    }
    .zel-gyro-scene {
        height: 760px;
        transform: scale(0.68) translateY(-35px);
    }
    .zel-kid-core {
        width: 240px;
        height: 240px;
        top: -120px;
        left: -120px;
    }
    .zel-kid-track {
        width: 80px;
        height: 80px;
        top: -40px;
        left: -40px;
    }
    .kid-track-title {
        width: 190px;
    }
    .kid-track-title h4 {
        font-size: 0.95rem;
    }
    .zel-kid-track:hover {
        width: 80px;
        height: 80px;
        top: -40px;
        left: -40px;
    }
    .zel-dante-section {
        padding: 7rem 0;
    }
    .vortex-ring.ring-a {
        width: 620px;
        height: 620px;
    }
    .vortex-ring.ring-b {
        width: 880px;
        height: 880px;
    }
    .vortex-ring.ring-c {
        width: 460px;
        height: 460px;
    }
    .zel-dante-typography {
        padding: 0 1.5rem;
    }
    .zel-dante-actions {
        gap: 1rem;
    }
    .dante-btn {
        width: 100%;
        max-width: 26rem;
    }
    .zel-tour-row { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.5rem 0; }
    .tour-date { font-size: 1rem; }
    .tour-action { margin-top: 1rem; }
    .zel-countdown-wrapper {
        padding: 3rem 1.5rem !important;
    }
    .time-block {
        width: clamp(72px, 17vw, 120px);
    }
    .time-label {
        letter-spacing: 0.14em;
    }
    .separator {
        margin: 0 0.5rem;
        transform: translateY(-18px);
    }
    .zel-contact-form {
        padding: 2rem 1.5rem;
    }
    .zel-input-group input,
    .zel-input-group textarea {
        font-size: 1rem;
        padding: 1.1rem 1.1rem;
    }
    .zel-input-group textarea {
        min-height: 9rem;
    }
    .zel-footer {
        padding-top: 6rem;
    }
    .zel-footer-giant-text {
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 0.95;
        padding: 0 1rem;
    }
    .zel-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    .zel-social-links {
        display: flex;
        flex-wrap: wrap;
        gap: 0.9rem 1.2rem;
    }
    .zel-social-links a {
        margin-right: 0;
    }
}
@media (hover: none), (pointer: coarse) {
    .zel-kid-track:hover {
        width: 90px !important;
        height: 90px !important;
        top: -45px !important;
        left: -45px !important;
        z-index: 50;
    }
    .zel-kid-track:hover .kid-planet {
        opacity: 1;
        transform: none;
    }
    .zel-kid-track:hover .kid-track-img,
    .zel-kid-track:hover .kid-track-hover-ui,
    .zel-kid-track:hover .kid-track-title {
        opacity: 0;
        box-shadow: none;
        bottom: -40px;
    }
    .zel-kid-track:hover .kid-track-hover-ui span {
        transform: translateY(20px);
    }
}
@media (max-width: 1023px) and (hover: none), (max-width: 1023px) and (pointer: coarse) {
    .zel-kid-track:hover {
        width: 80px !important;
        height: 80px !important;
        top: -40px !important;
        left: -40px !important;
    }
}
@media (max-width: 767px) {
    .zel-cursor, .zel-cursor-follower { display: none; }
    .zel-body { cursor: auto; }
    a, button { cursor: pointer; }
    .zel-section-inner-wrap { padding: 0 var(--spacing-sm); }
    .zel-header {
        padding: 7.5rem var(--spacing-sm) 4rem;
    }
    .zel-huge-title {
        font-size: clamp(3rem, 15vw, 4.8rem);
        line-height: 0.9;
    }
    .zel-section-title {
        font-size: clamp(2rem, 11vw, 3rem);
        margin-bottom: 2.5rem;
    }
    .zel-lead-text,
    .highlight-text {
        font-size: 1rem;
        line-height: 1.5;
    }
    p {
        font-size: 1rem;
    }
    .ze-glitch-logo {
        font-size: clamp(2.2rem, 14vw, 3.4rem);
        letter-spacing: 0.05em;
    }
    .ze-logo-subtitle {
        font-size: 0.62rem;
        letter-spacing: 0.22em;
    }
    .zel-terminal-msg {
        margin-top: 1.8rem;
        font-size: 0.75rem;
        letter-spacing: 0.14em;
    }
    .zel-btn {
        width: 100%;
        max-width: 20rem;
        padding: 0.95rem 1.4rem;
        font-size: 0.85rem;
        letter-spacing: 0.18em;
    }
    .zel-space-section {
        padding-bottom: 4rem;
    }
    .zel-gyro-scene {
        height: 500px;
        margin-top: 0;
        transform: scale(0.42) translateY(-140px);
    }
    .zel-kid-core {
        width: 190px;
        height: 190px;
        top: -95px;
        left: -95px;
    }
    .zel-kid-track {
        width: 64px;
        height: 64px;
        top: -32px;
        left: -32px;
    }
    .zel-kid-track:hover {
        width: 64px !important;
        height: 64px !important;
        top: -32px !important;
        left: -32px !important;
    }
    .kid-track-title {
        width: 150px;
    }
    .kid-track-title .num {
        font-size: 0.68rem;
    }
    .kid-track-title h4 {
        font-size: 0.72rem;
    }
    .zel-dante-section {
        min-height: auto;
        padding: 5.5rem 0;
    }
    .vortex-core {
        width: 130px;
        height: 130px;
    }
    .vortex-ring.ring-a {
        width: 360px;
        height: 360px;
    }
    .vortex-ring.ring-b {
        width: 560px;
        height: 560px;
    }
    .vortex-ring.ring-c {
        width: 280px;
        height: 280px;
    }
    .dante-title {
        font-size: clamp(2.3rem, 12vw, 3.6rem);
    }
    .dante-desc {
        font-size: 1rem;
    }
    .dante-btn {
        padding: 1rem 1.25rem;
        font-size: 0.78rem;
        letter-spacing: 0.1em;
    }
    .zel-countdown-wrapper {
        padding: 2rem 1rem !important;
    }
    .zel-timer {
        row-gap: 0.75rem;
    }
    .time-block {
        width: calc(50% - 0.5rem);
    }
    .time-val {
        font-size: clamp(2.3rem, 14vw, 4rem);
    }
    .time-label {
        margin-top: 0.55rem;
        font-size: 0.72rem;
    }
    .separator {
        display: none;
    }
    .zel-contact-email {
        font-size: 0.9rem !important;
        letter-spacing: 0.12em !important;
    }
    .zel-contact-form {
        padding: 1.5rem 1rem;
        border-radius: 10px;
    }
    .zel-input-group {
        margin-bottom: 1.2rem;
    }
    .zel-input-group label {
        left: 1rem;
        top: 1rem;
        font-size: 0.95rem;
    }
    .zel-input-group input,
    .zel-input-group textarea {
        padding: 1rem;
    }
    .zel-footer {
        padding-bottom: 1.5rem;
    }
    .zel-footer-giant-text {
        font-size: clamp(3rem, 17vw, 5rem);
        margin-bottom: 2rem;
    }
    .zel-copyright {
        font-size: 0.68rem;
        line-height: 1.6;
    }
    .delay-mobile { display: none; }
}