/* ============================================
   MATRIX — ANIMATION SYSTEM
   Premium, restrained motion design
   ============================================ */

/* ============================================
   PRIMARY EASING
   ============================================ */
:root {
    --ease-primary: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-subtle: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
}

/* ============================================
   MATRIX RAIN — Canvas (flows over all sections)
   Sits above content, below header. pointer-events: none.
   ============================================ */
#matrix-rain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    opacity: 0.35;
}

/* ============================================
   SCROLL REVEAL — BASE STATE
   Elements start hidden, revealed by IntersectionObserver
   ============================================ */
[data-reveal] {
    opacity: 0;
    will-change: transform, opacity;
}

[data-reveal="up"] {
    transform: translateY(30px);
}

[data-reveal="left"] {
    transform: translateX(-40px);
}

[data-reveal="right"] {
    transform: translateX(40px);
}

[data-reveal="fade"] {
    transform: none;
}

[data-reveal="scale"] {
    transform: scale(0.96);
}

/* Revealed state */
[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
    transition:
        opacity 0.6s var(--ease-primary),
        transform 0.6s var(--ease-primary),
        filter 0.6s var(--ease-primary);
}

/* Custom durations via data attributes */
[data-reveal].revealed[data-duration="700"] {
    transition-duration: 0.7s;
}

[data-reveal].revealed[data-duration="800"] {
    transition-duration: 0.8s;
}

[data-reveal].revealed[data-duration="500"] {
    transition-duration: 0.5s;
}

/* ============================================
   HERO WORD REVEAL
   ============================================ */
.hero-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px);
    filter: blur(6px);
    transition:
        opacity 0.85s var(--ease-primary),
        transform 0.85s var(--ease-primary),
        filter 0.85s var(--ease-primary);
}

.hero-word.revealed {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.hero-subline[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
}

.hero-subline.revealed {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 0.7s var(--ease-primary),
        transform 0.7s var(--ease-primary);
}

/* ============================================
   CARD HOVER EFFECTS
   GPU-only transforms, no layout thrash
   ============================================ */

/* Feature cards — subtle lift + edge glow */
.feature-card {
    transition:
        transform 200ms var(--ease-subtle),
        box-shadow 300ms var(--ease-subtle),
        border-color 300ms var(--ease-subtle);
}

.feature-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 240, 255, 0.1);
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(0, 240, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Module grid cards — glow intensifies */
.module-card {
    transition:
        border-color 200ms var(--ease-subtle),
        box-shadow 200ms var(--ease-subtle),
        background 200ms var(--ease-subtle);
}

.mod-cyan:hover {
    border-color: rgba(0, 240, 255, 0.18);
    box-shadow: 0 0 28px rgba(0, 240, 255, 0.08);
}

.mod-purple:hover {
    border-color: rgba(139, 92, 246, 0.18);
    box-shadow: 0 0 28px rgba(139, 92, 246, 0.08);
}

.mod-green:hover {
    border-color: rgba(34, 197, 94, 0.18);
    box-shadow: 0 0 28px rgba(34, 197, 94, 0.08);
}

.mod-red:hover {
    border-color: rgba(239, 68, 68, 0.18);
    box-shadow: 0 0 28px rgba(239, 68, 68, 0.08);
}

.module-card:hover .module-icon {
    filter: brightness(1.3);
    transition: filter 200ms var(--ease-subtle);
}

/* Bento cards — lift + cyan edge glow */
.bento-card {
    transition:
        transform 250ms var(--ease-subtle),
        box-shadow 300ms var(--ease-subtle),
        border-color 300ms var(--ease-subtle);
}

.bento-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 240, 255, 0.1);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.25),
        0 0 30px rgba(0, 240, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Detail page module cards — stronger themed glow */
.detail-card {
    transition:
        border-color 200ms var(--ease-subtle),
        box-shadow 300ms var(--ease-subtle),
        transform 200ms var(--ease-subtle);
}

.dc-cyan:hover {
    border-color: rgba(0, 240, 255, 0.25);
    box-shadow:
        0 0 36px rgba(0, 240, 255, 0.15),
        inset 0 1px 0 rgba(0, 240, 255, 0.06);
    transform: translateY(-2px);
}

.dc-purple:hover {
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow:
        0 0 36px rgba(139, 92, 246, 0.18),
        inset 0 1px 0 rgba(139, 92, 246, 0.06);
    transform: translateY(-2px);
}

.dc-green:hover {
    border-color: rgba(34, 197, 94, 0.25);
    box-shadow:
        0 0 36px rgba(34, 197, 94, 0.15),
        inset 0 1px 0 rgba(34, 197, 94, 0.06);
    transform: translateY(-2px);
}

.dc-red:hover {
    border-color: rgba(239, 68, 68, 0.25);
    box-shadow:
        0 0 36px rgba(239, 68, 68, 0.15),
        inset 0 1px 0 rgba(239, 68, 68, 0.06);
    transform: translateY(-2px);
}

/* ============================================
   DOWNLOAD POP ANIMATION
   Triggered once when scrolling past bento grid
   ============================================ */
@keyframes dlPop {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

.dl-pop {
    animation: dlPop 0.4s var(--ease-primary);
}

/* ============================================
   CTA BUTTON — GLOW + SCALE
   ============================================ */
.cta-button {
    transition:
        transform 180ms var(--ease-subtle),
        box-shadow 300ms var(--ease-subtle);
}

.cta-button:hover {
    transform: scale(1.04);
    box-shadow:
        0 0 60px rgba(0, 240, 255, 0.35),
        0 0 0 4px rgba(0, 240, 255, 0.2);
}

.nav-cta {
    transition:
        transform 180ms var(--ease-subtle),
        box-shadow 250ms var(--ease-subtle);
}

.nav-cta:hover {
    transform: scale(1.04);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.25);
}

/* Download buttons on detail pages */
.detail-dl-btn {
    transition:
        transform 180ms var(--ease-subtle),
        box-shadow 250ms var(--ease-subtle);
}

.detail-dl-btn:hover {
    transform: scale(1.04);
}

.dl-cyan:hover {
    box-shadow: 0 0 30px rgba(0, 240, 255, 0.35);
}

.dl-purple:hover {
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.4);
}

.dl-green:hover {
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.4);
}

/* Learn More buttons */
.learn-more-btn {
    transition:
        background 200ms var(--ease-subtle),
        box-shadow 200ms var(--ease-subtle),
        transform 180ms var(--ease-subtle);
}

.learn-more-btn:hover {
    transform: translateY(-1px);
}

.lm-cyan:hover {
    background: rgba(0, 240, 255, 0.14);
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.15);
}

.lm-purple:hover {
    background: rgba(139, 92, 246, 0.14);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.15);
}

.lm-green:hover {
    background: rgba(34, 197, 94, 0.14);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.15);
}

/* Back button */
.back-btn {
    transition:
        background 200ms var(--ease-subtle),
        border-color 200ms var(--ease-subtle);
}

/* ============================================
   CTA RADIAL PULSE
   ============================================ */
.cta-section {
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
            rgba(0, 240, 255, 0.06) 0%,
            transparent 70%);
    animation: ctaPulse 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes ctaPulse {

    0%,
    100% {
        opacity: 0.4;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }
}

/* ============================================
   DETAIL HERO — AMBIENT ROTATION
   ============================================ */
.detail-hero {
    position: relative;
    overflow: hidden;
}

.detail-hero::after {
    content: '';
    position: absolute;
    inset: -50%;
    border-radius: 50%;
    pointer-events: none;
    animation: heroAmbient 14s linear infinite;
    opacity: 0.4;
}

.hero-mace::after {
    background: radial-gradient(ellipse at center,
            rgba(0, 240, 255, 0.08) 0%,
            transparent 60%);
}

.hero-visual::after {
    background: radial-gradient(ellipse at center,
            rgba(139, 92, 246, 0.08) 0%,
            transparent 60%);
}

.hero-control::after {
    background: radial-gradient(ellipse at center,
            rgba(34, 197, 94, 0.08) 0%,
            transparent 60%);
}

@keyframes heroAmbient {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(180deg) scale(1.1);
    }

    100% {
        transform: rotate(360deg) scale(1);
    }
}

/* Detail hero content stays above pseudo */
.detail-hero-content {
    position: relative;
    z-index: 1;
}

/* ============================================
   CONTROL PAGE — DATA LINES
   ============================================ */
.data-lines-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.data-line {
    position: absolute;
    height: 1px;
    width: 200px;
    opacity: 0.04;
    animation: dataLineSlide 20s linear infinite;
}

.data-line:nth-child(1) {
    top: 20%;
    animation-delay: 0s;
}

.data-line:nth-child(2) {
    top: 35%;
    animation-delay: 4s;
}

.data-line:nth-child(3) {
    top: 55%;
    animation-delay: 8s;
}

.data-line:nth-child(4) {
    top: 70%;
    animation-delay: 12s;
}

.data-line:nth-child(5) {
    top: 85%;
    animation-delay: 16s;
}

@keyframes dataLineSlide {
    0% {
        transform: translateX(-200px);
        opacity: 0;
    }

    10% {
        opacity: 0.04;
    }

    90% {
        opacity: 0.04;
    }

    100% {
        transform: translateX(calc(100vw + 200px));
        opacity: 0;
    }
}

/* ============================================
   PAGE TRANSITION
   ============================================ */
.page-transition-overlay {
    position: fixed;
    inset: 0;
    background: #0A0A0F;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s var(--ease-primary);
}

.page-transition-overlay.active {
    opacity: 1;
}

/* ============================================
   NAV ACTIVE INDICATOR
   ============================================ */
.nav-links a:not(.nav-cta) {
    position: relative;
}

.nav-links a:not(.nav-cta)::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent-cyan);
    transition: width 250ms ease-in-out;
}

.nav-links a:not(.nav-cta):hover::after,
.nav-links a:not(.nav-cta).active::after {
    width: 100%;
}

/* ============================================
   MATRIX POP TEXT HIGHLIGHT
   ============================================ */
.matrix-pop {
    color: var(--accent-cyan);
    font-weight: 800;
    display: inline-block;
    will-change: transform, text-shadow;
}

.hero-subline.revealed .matrix-pop {
    animation: matrixPop 0.8s var(--ease-primary) forwards;
    animation-delay: 0.6s;
}

@keyframes matrixPop {
    0% {
        transform: scale(1);
        text-shadow: none;
    }

    40% {
        transform: scale(1.08) translateY(-2px);
        text-shadow: 0 0 20px rgba(0, 240, 255, 0.5);
    }

    100% {
        transform: scale(1) translateY(0);
        text-shadow: 0 0 8px rgba(0, 240, 255, 0.2);
    }
}

/* ============================================
   PREFERS REDUCED MOTION
   Respect user accessibility preferences
   ============================================ */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .hero-word {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    #matrix-rain {
        display: none !important;
    }

    .data-lines-bg {
        display: none !important;
    }

    .cta-section::before {
        animation: none !important;
        opacity: 0.6 !important;
    }

    .detail-hero::after {
        animation: none !important;
    }
}