/* ==========================================================
   ANIMWEB TECHNOLOGIES — SITE-WIDE 3D BACKGROUND + MOTION LAYER
   Loaded only on the landing page. Makes the fixed WebGL universe
   show through every section and layers in premium micro-motion.
   The 3D canvas is fixed, behind content, and never intercepts
   scroll or clicks — native scrolling stays perfectly smooth.
   ========================================================== */

/* ---- Never flash white; deep-space base always behind canvas ---- */
html { background: var(--color-black); }

/* Let the fixed WebGL universe behind the body show through.
   body::before (z-index:-2) keeps a solid dark base if WebGL fails. */
body { background: transparent; }

/* ==================== THE FIXED 3D STAGE ==================== */
#site-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;   /* critical: scrolling & clicks pass straight through */
    overflow: hidden;
    /* faint base nebula glow under the WebGL layer */
    background:
        radial-gradient(ellipse at 18% 8%, rgba(30,107,255,0.16), transparent 52%),
        radial-gradient(ellipse at 82% 92%, rgba(77,142,255,0.12), transparent 52%),
        radial-gradient(ellipse at 50% 50%, rgba(10,62,184,0.10), transparent 65%);
}
#site-bg canvas { display: block; width: 100% !important; height: 100% !important; }

/* CSS fallback starfield — only visible until/unless the canvas mounts */
#site-bg::before {
    content: '';
    position: absolute;
    inset: -10%;
    background-image:
        radial-gradient(2px 2px at 20% 30%, #fff, transparent),
        radial-gradient(1px 1px at 80% 60%, #fff, transparent),
        radial-gradient(1px 1px at 50% 50%, #4d8eff, transparent),
        radial-gradient(2px 2px at 90% 20%, #fff, transparent),
        radial-gradient(1px 1px at 33% 80%, #fff, transparent),
        radial-gradient(2px 2px at 65% 25%, #4d8eff, transparent);
    background-size: 220% 220%;
    opacity: 0.35;
    animation: bgStarFloat 40s linear infinite;
}
#site-bg.site-bg-ready:has(canvas)::before { opacity: 0; }

@keyframes bgStarFloat {
    0%   { background-position: 0% 0%; }
    100% { background-position: 220% 220%; }
}

/* Soft vignette over the 3D layer — melts the busy edges into deep
   space so foreground copy always has a calm backdrop to sit on. */
#site-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 75% 75% at 50% 42%, transparent 0%, transparent 45%, rgba(3,6,16,0.55) 100%),
        linear-gradient(180deg, rgba(3,6,16,0.35) 0%, transparent 18%, transparent 80%, rgba(3,6,16,0.5) 100%);
}

/* ==================== KILL THE SQUARE GRIDS ==================== */
/* The brief: no square boxes in the background. Hide every square
   grid overlay and let the volumetric nebula + shockwaves carry it. */
.has-universe .hero-grid-overlay,
.has-universe .tech-bg-grid,
.has-universe .dot-grid-bg { display: none !important; }

/* ==================== HERO — REVEAL THE UNIVERSE ==================== */
/* The fixed universe now lives behind the whole page, so the hero's
   own opaque fills are dropped and the hidden legacy canvas removed. */
.has-universe .hero {
    background: transparent;
    isolation: auto;
}
.has-universe #hero-canvas { display: none; }

/* Soften the hero vignette so the galaxy reads through,
   while keeping just enough scrim for headline contrast. */
.has-universe .hero::after {
    background:
        radial-gradient(ellipse 70% 55% at center, rgba(5,10,20,0.40) 0%, rgba(5,10,20,0.16) 40%, transparent 72%),
        linear-gradient(180deg, rgba(5,10,20,0.30) 0%, transparent 22%, transparent 70%, rgba(5,10,20,0.55) 100%);
}

/* A soft focal scrim directly behind the hero copy for legibility */
.has-universe .hero-inner::after {
    content: '';
    position: absolute;
    inset: -8% -6%;
    z-index: -1;
    background: radial-gradient(ellipse 62% 70% at center, rgba(5,10,20,0.55), rgba(5,10,20,0.18) 55%, transparent 78%);
    filter: blur(8px);
    pointer-events: none;
}

/* Keep section content above the 3D layer everywhere */
.has-universe .section,
.has-universe .stats,
.has-universe .cta-section,
.has-universe .site-footer { position: relative; z-index: 1; }

/* ==================== SOLID ACCENT WORDS ==================== */
/* Per request: the highlighted words use ONE clean brand color —
   no shifting gradient, no animation. */
.text-gradient,
.stat-num,
.hero-meta-num {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: var(--color-blue-light) !important;
    color: var(--color-blue-light) !important;
    animation: none !important;
}

/* ==================== SCROLL PROGRESS BEAM ==================== */
.scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    z-index: 1000;
    background: linear-gradient(90deg, #0a3eb8, #1e6bff 40%, #4d8eff 70%, #9ec5ff);
    box-shadow: 0 0 14px rgba(77,142,255,0.8), 0 0 4px rgba(77,142,255,0.9);
    pointer-events: none;
    will-change: transform;
}

/* ==================== CURSOR AURA ==================== */
.cursor-aura {
    position: fixed;
    top: 0; left: 0;
    width: 460px; height: 460px;
    margin: -230px 0 0 -230px;
    border-radius: 50%;
    z-index: 0;            /* sits above #site-bg(-1), below content */
    pointer-events: none;
    background: radial-gradient(circle, rgba(77,142,255,0.16) 0%, rgba(30,107,255,0.08) 35%, transparent 70%);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.5s ease;
    will-change: transform;
}
.cursor-aura.active { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor-aura { display: none; } }

/* ==================== 3D CARD TILT ==================== */
/* enhance.js adds .tilt-3d and sets --rx / --ry / --mx / --my */
.tilt-3d {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transform-style: preserve-3d;
    transition: transform 0.25s cubic-bezier(0.19,1,0.22,1), box-shadow 0.3s ease;
    will-change: transform;
}
.tilt-3d.tilting { transition: transform 0.05s linear; }

/* Roaming sheen that follows the pointer across tilt-enabled cards */
.tilt-3d::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 3;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%),
                rgba(120,170,255,0.18), transparent 60%);
}
.tilt-3d.tilting::after { opacity: 1; }

/* Lift the card's own children above the sheen */
.vertical-card.tilt-3d > *,
.product-card.tilt-3d > *,
.feature-card.tilt-3d > * { position: relative; z-index: 4; }

/* ==================== MAGNETIC / SHINE BUTTONS ==================== */
.btn-primary {
    background-size: 200% auto;
    transition: all var(--transition), background-position 0.6s ease;
}
.btn-primary:hover { background-position: right center; }

/* Sweeping highlight on primary buttons */
.btn-primary::after {
    content: '';
    position: absolute;
    top: 0; left: -120%;
    width: 60%; height: 100%;
    background: linear-gradient(110deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: skewX(-20deg);
    transition: left 0.7s cubic-bezier(0.19,1,0.22,1);
    pointer-events: none;
}
.btn-primary:hover::after { left: 140%; }

/* ==================== SECTION ENTRANCE (richer reveals) ==================== */
.reveal { transition-duration: 0.9s; }

/* Staggered child reveal — enhance.js tags items with --i */
.reveal.stagger > * {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s cubic-bezier(0.19,1,0.22,1), transform 0.7s cubic-bezier(0.19,1,0.22,1);
    transition-delay: calc(var(--i, 0) * 80ms);
}
.reveal.stagger.in-view > * { opacity: 1; transform: none; }

/* Cards float up with a soft scale-in when revealed */
.verticals-grid .vertical-card,
.products-grid .product-card,
.features-grid .feature-card {
    transition: transform 0.45s cubic-bezier(0.19,1,0.22,1),
                box-shadow 0.45s ease,
                border-color 0.45s ease,
                background 0.45s ease;
}

/* ==================== AMBIENT FLOAT FOR VISUAL ANCHORS ==================== */
.has-universe .intro-visual,
.has-universe .quote-block { animation: floatY 9s ease-in-out infinite; }
.has-universe .quote-block { animation-duration: 11s; }

@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* ==================== HEADER GLASS ON SCROLL ==================== */
.has-universe .site-header.scrolled {
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* ==================== STRONGER CARD GLASS OVER LIVE 3D ==================== */
/* Slightly raise card opacity so copy stays crisp over the moving galaxy */
.has-universe .vertical-card,
.has-universe .product-card,
.has-universe .feature-card,
.has-universe .stat-block {
    backdrop-filter: blur(10px) saturate(125%);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
}
.has-universe .ide-window,
.has-universe .browser-window { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ==================== INTRO LOGIN SPIN AURA ==================== */
.has-universe .intro-logo { box-shadow: 0 0 60px rgba(30,107,255,0.35); }

/* ==================== CONTENT LEGIBILITY OVER LIVE 3D ==================== */
/* Brighter scene → give every text layer a faint shadow so it stays
   razor-sharp against drifting nebula, plus a touch more glass on cards. */
.has-universe .hero-title { text-shadow: 0 0 22px rgba(3,6,16,0.7), 0 2px 30px rgba(3,6,16,0.6); }
.has-universe .hero-sub,
.has-universe .section-subtitle,
.has-universe .intro-text p,
.has-universe blockquote {
    text-shadow: 0 0 16px rgba(3,6,16,0.92), 0 0 6px rgba(3,6,16,0.85), 0 1px 12px rgba(3,6,16,0.7);
}
.has-universe .section-title { text-shadow: 0 0 20px rgba(3,6,16,0.8), 0 2px 22px rgba(3,6,16,0.55); }
.has-universe .intro-text h2 { text-shadow: 0 0 20px rgba(3,6,16,0.8); }

.has-universe .vertical-card,
.has-universe .product-card,
.has-universe .feature-card {
    background: rgba(9, 14, 30, 0.55);
    backdrop-filter: blur(14px) saturate(135%);
    -webkit-backdrop-filter: blur(14px) saturate(135%);
    border-color: rgba(77,142,255,0.22);
}
.has-universe .vertical-card:hover,
.has-universe .product-card:hover,
.has-universe .feature-card:hover {
    background: rgba(12, 20, 44, 0.66);
    border-color: rgba(120,170,255,0.5);
    box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 40px rgba(30,107,255,0.28);
}
.has-universe .stats {
    background: rgba(8, 13, 28, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Section eyebrows get a subtle glass chip so they read anywhere */
.has-universe .section-eyebrow,
.has-universe .hero-badge {
    background: rgba(9, 14, 30, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ==================== EXTREME-CONTRAST READER SCRIMS ==================== */
/* Soft, dark, blurred backplates behind every text block so the words stay
   crystal clear over the live 3D — on phones and 4K, near and far. */
.has-universe .section-header,
.has-universe .intro-text,
.has-universe .cta-card,
.has-universe .quote-block { position: relative; isolation: isolate; }

.has-universe .section-header::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -30px -7%;
    background: radial-gradient(ellipse 72% 100% at 50% 50%,
                rgba(3,6,14,0.86), rgba(3,6,14,0.5) 55%, transparent 82%);
    filter: blur(16px);
    pointer-events: none;
}

.has-universe .intro-text::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: -26px -26px;
    border-radius: 26px;
    background: linear-gradient(180deg, rgba(5,8,18,0.74), rgba(5,8,18,0.52));
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    pointer-events: none;
}

/* Strengthen the hero focal scrim for big, far-away legibility */
.has-universe .hero-inner::after {
    background: radial-gradient(ellipse 64% 74% at center,
                rgba(3,6,14,0.72), rgba(3,6,14,0.32) 56%, transparent 80%);
}

/* Darken the translucent CTA + testimonial panels so copy never washes out */
.has-universe .cta-card {
    background: linear-gradient(150deg, rgba(9,14,32,0.84), rgba(6,10,24,0.88));
    backdrop-filter: blur(22px) saturate(130%);
    -webkit-backdrop-filter: blur(22px) saturate(130%);
}
.has-universe .quote-block {
    background: rgba(7,11,26,0.72);
    backdrop-filter: blur(16px) saturate(125%);
    -webkit-backdrop-filter: blur(16px) saturate(125%);
    border-radius: var(--radius-xl);
    padding: clamp(1.6rem, 4vw, 3rem);
}

/* ==================== ADVANCED MOTION: BREATHING ICONS ==================== */
.has-universe .feature-card .feature-icon,
.has-universe .product-visual i {
    animation: iconBreathe 5s ease-in-out infinite;
}
@keyframes iconBreathe {
    0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 rgba(77,142,255,0)); }
    50%      { transform: translateY(-4px) scale(1.04); filter: drop-shadow(0 6px 18px rgba(77,142,255,0.5)); }
}

/* Continuous gradient drift on stat numbers */
.has-universe .stat-num,
.has-universe .hero-meta-num {
    background-size: 220% auto;
    animation: textSheen 6s linear infinite;
}

/* ==================== RESPONSIVE TUNING ==================== */
@media (max-width: 900px) {
    .cursor-aura { display: none; }
    /* keep readability scrim a touch stronger on small screens */
    .has-universe .hero::after {
        background:
            radial-gradient(ellipse 90% 60% at center, rgba(5,10,20,0.5) 0%, rgba(5,10,20,0.25) 45%, transparent 78%),
            linear-gradient(180deg, rgba(5,10,20,0.35) 0%, transparent 30%, rgba(5,10,20,0.6) 100%);
    }
}

@media (max-width: 600px) {
    .scroll-progress { height: 2px; }
    .has-universe .intro-visual,
    .has-universe .quote-block { animation: none; }  /* save battery on phones */
}

/* ==================== ACCESSIBILITY ==================== */
@media (prefers-reduced-motion: reduce) {
    .text-gradient { animation: none; }
    .cursor-aura { display: none; }
    #site-bg::before { animation: none; }
    .has-universe .intro-visual,
    .has-universe .quote-block { animation: none; }
    .scroll-progress { transition: none; }
}

/* ==========================================================
   ADVANCED LAYER — preloader · hero entrance · cursor · grain
   ========================================================== */

/* ---- Lock scroll while the preloader is up ---- */
html.lp-locked, html.lp-locked body { overflow: hidden; height: 100%; }

/* ---- Branded preloader ---- */
.preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    background: radial-gradient(circle at 50% 45%, #0a1024 0%, #050a14 60%, #02040c 100%);
    transition: opacity 0.7s ease, visibility 0.7s ease;
}
.preloader.done { opacity: 0; visibility: hidden; pointer-events: none; }

.pl-core { position: relative; width: 132px; height: 132px; }

/* Circular determinate progress ring (driven by enhance.js) */
.pl-progress { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.pl-track { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 3; }
.pl-arc {
    fill: none;
    stroke: var(--color-blue-light);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 339.292;       /* 2π·54 */
    stroke-dashoffset: 339.292;       /* starts empty; JS fills it */
    filter: drop-shadow(0 0 6px rgba(77,142,255,0.7));
    transition: stroke-dashoffset 0.25s ease;
}
.pl-logo { position: absolute; inset: 0; display: grid; place-items: center; }
.pl-logo img { width: 50px; height: auto; filter: drop-shadow(0 0 16px rgba(77,142,255,0.55)); animation: plpulse 2s ease-in-out infinite; }

.pl-name {
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.4em;
    font-weight: 600;
    color: var(--color-text-muted);
    padding-left: 0.4em;
}
.pl-name span { color: var(--color-blue-light); }

.pl-percent {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--color-text-dim);
    letter-spacing: 0.05em;
}
.pl-percent span { color: var(--color-white); font-weight: 600; }
.pl-percent i { font-style: normal; color: var(--color-blue-light); margin-left: 1px; }

@keyframes plpulse { 0%,100% { transform: scale(1); opacity: 0.92; } 50% { transform: scale(1.08); opacity: 1; } }

/* ---- Cinematic hero entrance (plays once the preloader clears) ---- */
.has-universe.lp-ready .hero-badge,
.has-universe.lp-ready .hero-title .text-white,
.has-universe.lp-ready .hero-title .text-gradient,
.has-universe.lp-ready .hero-sub,
.has-universe.lp-ready .hero-actions,
.has-universe.lp-ready .hero-meta {
    animation: heroUp 0.95s cubic-bezier(0.19, 1, 0.22, 1) both;
}
.has-universe.lp-ready .hero-badge              { animation-delay: 0.05s; }
.has-universe.lp-ready .hero-title .text-white  { animation-delay: 0.18s; }
.has-universe.lp-ready .hero-title .text-gradient { animation-delay: 0.30s; }
.has-universe.lp-ready .hero-sub                { animation-delay: 0.44s; }
.has-universe.lp-ready .hero-actions            { animation-delay: 0.58s; }
.has-universe.lp-ready .hero-meta               { animation-delay: 0.72s; }
@keyframes heroUp {
    from { opacity: 0; transform: translateY(34px); filter: blur(6px); }
    to   { opacity: 1; transform: none; filter: blur(0); }
}

/* ---- Advanced custom cursor ring (fine pointers only) ---- */
.cursor-ring {
    position: fixed;
    top: 0; left: 0;
    width: 38px; height: 38px;
    margin: -19px 0 0 -19px;
    border: 1.5px solid rgba(120, 170, 255, 0.7);
    border-radius: 50%;
    z-index: 9998;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease, width 0.25s ease, height 0.25s ease,
                margin 0.25s ease, background 0.25s ease, border-color 0.25s ease;
    will-change: transform;
    backdrop-filter: invert(6%);
    -webkit-backdrop-filter: invert(6%);
}
.cursor-ring.active { opacity: 1; }
.cursor-ring.hovering {
    width: 64px; height: 64px; margin: -32px 0 0 -32px;
    background: rgba(77, 142, 255, 0.12);
    border-color: rgba(158, 197, 255, 0.9);
}
.cursor-ring.pressing { width: 28px; height: 28px; margin: -14px 0 0 -14px; }
@media (hover: none), (pointer: coarse) { .cursor-ring { display: none; } }

/* ---- Subtle film grain for a premium finish (behind content) ---- */
.grain-overlay {
    position: fixed;
    inset: -50%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grainShift 0.6s steps(3) infinite;
}
@keyframes grainShift {
    0% { transform: translate(0,0); }
    33% { transform: translate(-3%, 2%); }
    66% { transform: translate(2%, -2%); }
    100% { transform: translate(0,0); }
}

/* ---- Accessibility ---- */
@media (prefers-reduced-motion: reduce) {
    .pl-logo img { animation: none !important; }
    .pl-arc { transition: none !important; }
    .has-universe.lp-ready .hero-badge,
    .has-universe.lp-ready .hero-title .text-white,
    .has-universe.lp-ready .hero-title .text-gradient,
    .has-universe.lp-ready .hero-sub,
    .has-universe.lp-ready .hero-actions,
    .has-universe.lp-ready .hero-meta { animation: none !important; }
    .grain-overlay { animation: none !important; }
    .cursor-ring { display: none !important; }
}

/* ==================== STACK SECTION + MARQUEE LEGIBILITY ==================== */
/* The galaxy can drift behind "A Modern Stack" — keep every word crisp. */
.has-universe #stack .section-header::before {
    background: radial-gradient(ellipse 82% 130% at 50% 50%,
                rgba(3,6,14,0.92), rgba(3,6,14,0.55) 55%, transparent 86%);
    inset: -40px -10%;
}
.has-universe .m-pill {
    background: rgba(9, 14, 30, 0.72) !important;
    border: 1px solid rgba(77,142,255,0.28);
    backdrop-filter: blur(9px) saturate(125%);
    -webkit-backdrop-filter: blur(9px) saturate(125%);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}