/* =====================================================================
   style-animations.css — Saathi Space  ✨ PREMIUM 3D EDITION
   
   Full 3D depth system: perspective cards, floating orbs,
   morphing gradients, magnetic buttons, particle canvas,
   glassmorphism panels, clip-path text reveals.
   ===================================================================== */


/* ─────────────────────────────────────────────────────────────────────
   0. ROOT TOKENS & 3D PERSPECTIVE CONTEXT
───────────────────────────────────────────────────────────────────── */
:root {
    --blue-primary   : #0d6efd;
    --blue-deep      : #0054fd;
    --blue-light     : #6ea8fe;
    --blue-glow      : rgba(13, 110, 253, 0.35);
    --blue-halo      : rgba(110, 168, 254, 0.20);
    --white-glass    : rgba(255, 255, 255, 0.10);
    --shadow-soft    : 0 8px 32px rgba(13, 110, 253, 0.18);
    --shadow-deep    : 0 24px 64px rgba(5, 50, 160, 0.30);
    --ease-spring    : cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-calm      : cubic-bezier(0.22, 1, 0.36, 1);
    --ease-out       : cubic-bezier(0.0, 0.0, 0.2, 1);
}
/* ── PARTICLES CANVAS ─────────────────────────────────────── */

body { -webkit-font-smoothing: antialiased; }

/* ─────────────────────────────────────────────────────────────────────
   ♿ ACCESSIBILITY: prefers-reduced-motion
───────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .scroll-reveal, .anim-fade-up, .anim-card,
    .list-item-reveal, .anim-footer-fade {
        opacity: 1 !important;
        transform: none !important;
    }
    #particleCanvas { display: none; }
}


/* ─────────────────────────────────────────────────────────────────────
   1. HERO — Particle canvas + ambient orbs + clip-path text reveal
───────────────────────────────────────────────────────────────────── */
.hero {
    position: relative;
    overflow: hidden;
}

/* Canvas injected by JS sits behind content */
#particleCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Hero content sits above canvas */
.hero h1, .hero p {
    position: relative;
    z-index: 1;
}

/* Clip-path curtain reveal for hero text */
.anim-fade-up {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(30px);
    animation: curtainReveal 1s var(--ease-calm) forwards;
}
.anim-delay-1 { animation-delay: 0.2s;  }
.anim-delay-2 { animation-delay: 0.48s; }
.anim-delay-3 { animation-delay: 0.70s; }

@keyframes curtainReveal {
    0%   { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(30px); }
    30%  { opacity: 1; }
    100% { opacity: 1; clip-path: inset(0 0 0% 0);   transform: translateY(0);   }
}

/* Ambient floating gradient orbs behind hero */
.hero::before,
.hero::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.hero::before {
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(110,168,254,0.28), transparent 70%);
    top: -60px; left: -80px;
    animation: orbFloat 12s ease-in-out infinite alternate;
}

.hero::after {
    width: 260px; height: 260px;
    background: radial-gradient(circle, rgba(37,99,235,0.22), transparent 70%);
    bottom: -40px; right: -60px;
    animation: orbFloat 9s ease-in-out infinite alternate-reverse;
}

@keyframes orbFloat {
    from { transform: translate(0, 0)     scale(1);    }
    to   { transform: translate(30px, 20px) scale(1.12); }
}



/* ─────────────────────────────────────────────────────────────────────
   3. SECTION BOXES — Glassmorphism panel + shine sweep
───────────────────────────────────────────────────────────────────── */
.section-boxes {
    position: relative;
    background: linear-gradient(
        145deg,
        rgba(255,255,255,0.96) 0%,
        rgba(238,244,255,0.92) 100%
    );
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(13,110,253,0.18) !important;
    border-radius: 20px !important;
    overflow: hidden;
    box-shadow:
        0 4px 20px rgba(13,110,253,0.08),
        inset 0 1px 0 rgba(255,255,255,0.85);
    transition:
        box-shadow 0.55s var(--ease-calm),
        border-color 0.55s ease,
        transform 0.55s var(--ease-calm);
    transform-style: preserve-3d;
}

/* Glowing top edge bar on hover */
.section-boxes::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(13,110,253,0.7) 30%,
        rgba(110,168,254,1.0) 55%,
        transparent 100%
    );
    transform: translateX(-100%);
    transition: transform 0.7s var(--ease-calm);
    border-radius: 20px 20px 0 0;
    z-index: 2;
}

.section-boxes:hover::before { transform: translateX(0); }

.section-boxes:hover {
    box-shadow:
        0 20px 60px rgba(13,110,253,0.20),
        0 8px 24px rgba(13,110,253,0.12),
        inset 0 1px 0 rgba(255,255,255,0.9);
    border-color: rgba(13,110,253,0.40) !important;
    transform: perspective(800px) translateZ(6px);
}

/* Section h2 — morphing gradient + shine sweep */
.section-boxes h2 {
    background: linear-gradient(
        90deg,
        var(--blue-deep) 0%,
        var(--blue-primary) 40%,
        #3b82f6 70%,
        var(--blue-primary) 100%
    ) !important;
    background-size: 200% auto !important;
    animation: gradientShift 6s linear infinite;
    position: relative;
    overflow: hidden;
}

@keyframes gradientShift {
    0%   { background-position: 0%   center; }
    100% { background-position: 200% center; }
}

.section-boxes h2::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    transform: skewX(-20deg);
    animation: shineSweep 4s ease-in-out infinite;
}

@keyframes shineSweep {
    0%  { left: -100%; }
    60% { left:  140%; }
    100%{ left:  140%; }
}


/* ─────────────────────────────────────────────────────────────────────
   4. SCROLL REVEAL — 3D perspective flip-up + blur clear
───────────────────────────────────────────────────────────────────── */
.scroll-reveal {
    opacity: 0;
    transform: perspective(900px) rotateX(12deg) translateY(40px);
    transform-origin: top center;
    transition:
        opacity  0.95s var(--ease-calm),
        transform 0.95s var(--ease-calm),
        filter   0.95s ease;
    filter: blur(4px);
    will-change: opacity, transform, filter;
}

.scroll-reveal.is-visible {
    opacity: 1;
    transform: perspective(900px) rotateX(0deg) translateY(0);
    filter: blur(0);
}

.stagger-delay-1 { transition-delay: 0.10s; }
.stagger-delay-2 { transition-delay: 0.20s; }


/* ─────────────────────────────────────────────────────────────────────
   5. LIST ITEMS — 3D rotateY flip cascade + dot accent
───────────────────────────────────────────────────────────────────── */
.list-item-reveal {
    opacity: 0;
    transform: perspective(600px) rotateY(-28deg) translateX(-20px);
    transition:
        opacity   0.65s var(--ease-calm),
        transform 0.65s var(--ease-spring);
    transform-origin: left center;
    will-change: opacity, transform;
    position: relative;
    padding-left: 14px;
}

.list-item-reveal::before {
    content: "✦";
    position: absolute;
    left: -4px;
    font-size: 10px;
    color: var(--blue-primary);
    opacity: 0;
    transform: scale(0) rotate(-45deg);
    transition: opacity 0.4s ease 0.3s, transform 0.4s var(--ease-spring) 0.3s;
}

.list-item-reveal.item-visible {
    opacity: 1;
    transform: perspective(600px) rotateY(0deg) translateX(0);
}

.list-item-reveal.item-visible::before {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}


/* ─────────────────────────────────────────────────────────────────────
   6. RESOURCE CARDS — 3D entrance + mouse-tilt + specular highlight
───────────────────────────────────────────────────────────────────── */
.anim-card {
    opacity: 0;
    transform: perspective(700px) rotateX(18deg) translateY(40px) scale(0.94);
    transition:
        opacity   0.85s var(--ease-calm),
        transform 0.85s var(--ease-calm),
        box-shadow 0.4s ease;
    transform-style: preserve-3d;
    will-change: opacity, transform;
    position: relative;
    overflow: hidden;
}

.anim-card.card-visible {
    opacity: 1;
    transform: perspective(700px) rotateX(0deg) translateY(0) scale(1);
}

/* JS-driven 3D tilt */
.anim-card.card-visible.tilting {
    transform:
        perspective(700px)
        rotateX(var(--rx, 0deg))
        rotateY(var(--ry, 0deg))
        translateZ(12px);
    box-shadow: var(--shadow-deep), 0 0 0 1px rgba(13,110,253,0.12);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

/* Specular highlight follows mouse */
.anim-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        circle at var(--mx, 50%) var(--my, 40%),
        rgba(255,255,255,0.22) 0%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 1;
}

.anim-card.tilting::before { opacity: 1; }

/* Gradient border glow on tilt */
.anim-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid transparent;
    background:
        linear-gradient(white, white) padding-box,
        linear-gradient(135deg,
            rgba(13,110,253,0.65),
            rgba(110,168,254,0.45),
            rgba(13,110,253,0.25)
        ) border-box;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.anim-card.card-visible:hover::after { opacity: 1; }


/* ─────────────────────────────────────────────────────────────────────
   7. BREATHING CIRCLE — Full 3D layered ring system
───────────────────────────────────────────────────────────────────── */
.breathing-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Dual orbital rings */
.breathing-container::before,
.breathing-container::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.breathing-container::before {
    width: 155px; height: 155px;
    border: 2px dashed rgba(110,168,254,0.30);
    animation: orbitRing1 7s linear infinite;
}

.breathing-container::after {
    width: 200px; height: 200px;
    border: 1.5px solid rgba(13,110,253,0.15);
    animation: orbitRing2 11s linear infinite reverse;
}

@keyframes orbitRing1 { to { transform: rotate(360deg); } }
@keyframes orbitRing2 { to { transform: rotate(360deg); } }

#breathingCircle {
    position: relative;
    z-index: 2;
    background: linear-gradient(135deg, #0054fd 0%, #6ea8fe 60%, #93c5fd 100%);
    box-shadow:
        inset 0 2px 10px rgba(255,255,255,0.35),
        0 8px 32px rgba(13,110,253,0.30);
    transition: box-shadow 0.8s ease, background 0.8s ease;
}

/* Glass highlight dome on circle */
#breathingCircle::before {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: radial-gradient(
        circle at 35% 35%,
        rgba(255,255,255,0.48) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 1;
}

/* Conic gradient spinning ring (visible when active) */
#breathingCircle::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(110,168,254,0.65),
        rgba(13,110,253,0.45),
        rgba(147,197,253,0.65),
        rgba(110,168,254,0.65)
    );
    z-index: -1;
    opacity: 0;
    transition: opacity 0.9s ease;
    animation: conicSpin 4s linear infinite;
}

@keyframes conicSpin { to { transform: rotate(360deg); } }

#breathingCircle.animate {
    box-shadow:
        0 0 0 10px  rgba(110,168,254,0.16),
        0 0 0 26px  rgba(110,168,254,0.09),
        0 0 0 50px  rgba(110,168,254,0.04),
        inset 0 2px 10px rgba(255,255,255,0.38),
        0 16px 52px rgba(13,110,253,0.50);
    animation: breathe3D 8s ease-in-out infinite;
}

#breathingCircle.animate::after { opacity: 1; }

@keyframes breathe3D {
    0%   {
        transform: scale(1) translateZ(0);
        box-shadow:
            0 0 0 4px  rgba(110,168,254,0.22),
            0 0 0 14px rgba(110,168,254,0.10),
            0 0 0 28px rgba(110,168,254,0.04),
            0 8px 28px rgba(13,110,253,0.38);
    }
    50%  {
        transform: scale(1.62) translateZ(22px);
        box-shadow:
            0 0 0 18px rgba(110,168,254,0.18),
            0 0 0 40px rgba(110,168,254,0.08),
            0 0 0 70px rgba(110,168,254,0.03),
            0 24px 68px rgba(13,110,253,0.55);
    }
    100% {
        transform: scale(1) translateZ(0);
        box-shadow:
            0 0 0 4px  rgba(110,168,254,0.22),
            0 0 0 14px rgba(110,168,254,0.10),
            0 0 0 28px rgba(110,168,254,0.04),
            0 8px 28px rgba(13,110,253,0.38);
    }
}


/* ─────────────────────────────────────────────────────────────────────
   8. BREATHING BUTTON — Magnetic shimmer + ring pulse
───────────────────────────────────────────────────────────────────── */
.anim-btn {
    position: relative;
    overflow: hidden;
    transition:
        transform    0.4s var(--ease-spring),
        box-shadow   0.4s ease,
        letter-spacing 0.3s ease;
}

/* Shine sweep on hover */
.anim-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.28) 50%,
        rgba(255,255,255,0) 100%
    );
    transform: translateX(-110%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

.anim-btn:hover::before { transform: translateX(110%); }

/* Pulsing border ring */
.anim-btn::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 2px solid rgba(110,168,254,0);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
    pointer-events: none;
}

.anim-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow:
        0 12px 36px rgba(13,110,253,0.50),
        0 0 0 4px rgba(110,168,254,0.22),
        inset 0 1px 0 rgba(255,255,255,0.28);
    letter-spacing: 0.5px;
}

.anim-btn:hover::after {
    border-color: rgba(110,168,254,0.55);
    box-shadow: 0 0 18px rgba(110,168,254,0.40);
    animation: ringPulse 1.6s ease-in-out infinite;
}

@keyframes ringPulse {
    0%, 100% { box-shadow: 0 0 0 0   rgba(110,168,254,0.45); }
    50%       { box-shadow: 0 0 0 10px rgba(110,168,254,0.0);  }
}

.anim-btn:active {
    transform: translateY(-1px) scale(0.97);
    transition-duration: 0.1s;
}


/* ─────────────────────────────────────────────────────────────────────
   9. AUDIO PLAYER — Levitate + waveform glow
───────────────────────────────────────────────────────────────────── */
#audio {
    opacity: 0;
    border-radius: 40px;
    display: block;
    width: 90%;
    max-width: 400px;
    animation:
        audioFadeIn    0.9s var(--ease-calm) 0.4s forwards,
        audioLevitate  6s   ease-in-out       1.4s infinite;
    box-shadow:
        0 8px 28px rgba(13,110,253,0.22),
        0 0 0 1px rgba(13,110,253,0.14);
    transition: transform 0.4s var(--ease-calm), box-shadow 0.4s ease;
}

@keyframes audioFadeIn {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

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

#audio:hover {
    transform: translateY(-4px) scale(1.01) !important;
    box-shadow:
        0 18px 52px rgba(13,110,253,0.38),
        0 0 0 2px rgba(13,110,253,0.28);
    animation-play-state: paused;
}


/* ─────────────────────────────────────────────────────────────────────
   10. RESOURCE SECTION — Depth orbs + gradient heading
───────────────────────────────────────────────────────────────────── */
.resource {
    position: relative;
    overflow: hidden;
}

.resource::before {
    content: "";
    position: absolute;
    width: 500px; height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13,110,253,0.06), transparent 70%);
    top: -150px; right: -150px;
    animation: orbFloat 14s ease-in-out infinite alternate;
    pointer-events: none;
}

.resource::after {
    content: "";
    position: absolute;
    width: 350px; height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(110,168,254,0.07), transparent 70%);
    bottom: -100px; left: -100px;
    animation: orbFloat 11s ease-in-out infinite alternate-reverse;
    pointer-events: none;
}

.resource h2 {
    background: linear-gradient(90deg, #0054fd, #0d6efd, #3b82f6, #0d6efd, #0054fd) !important;
    background-size: 300% auto !important;
    animation: gradientShift 5s linear infinite;
    position: relative;
    overflow: hidden;
}

.resource h2::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 55%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);
    transform: skewX(-20deg);
    animation: shineSweep 3.5s ease-in-out infinite;
}


/* ─────────────────────────────────────────────────────────────────────
   11. SECTION background depth orbs
───────────────────────────────────────────────────────────────────── */
.section {
    position: relative;
}

.section:nth-child(odd)::before {
    content: "";
    position: absolute;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(13,110,253,0.04), transparent 70%);
    top: 50%; left: -120px;
    transform: translateY(-50%);
    pointer-events: none;
    animation: orbFloat 12s ease-in-out infinite alternate;
    z-index: 0;
}

.section:nth-child(even)::after {
    content: "";
    position: absolute;
    width: 250px; height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(110,168,254,0.05), transparent 70%);
    top: 50%; right: -90px;
    transform: translateY(-50%);
    pointer-events: none;
    animation: orbFloat 10s ease-in-out infinite alternate-reverse;
    z-index: 0;
}


/* ─────────────────────────────────────────────────────────────────────
   12. FOOTER — 3D rise + scanline + social bounce
───────────────────────────────────────────────────────────────────── */
.anim-footer-fade {
    opacity: 0;
    animation: footerRise 1s var(--ease-calm) 0.6s forwards;
    position: relative;
    overflow: hidden;
}

.anim-footer-fade::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.55) 30%,
        rgba(255,255,255,0.9)  50%,
        rgba(255,255,255,0.55) 70%,
        transparent
    );
    animation: scanline 4s linear 2.5s infinite;
}

@keyframes scanline {
    0%    { transform: scaleX(0); transform-origin: left;  }
    49%   { transform: scaleX(1); transform-origin: left;  }
    50%   { transform: scaleX(1); transform-origin: right; }
    100%  { transform: scaleX(0); transform-origin: right; }
}

@keyframes footerRise {
    from { opacity: 0; transform: perspective(600px) rotateX(8deg)  translateY(20px); }
    to   { opacity: 1; transform: perspective(600px) rotateX(0deg) translateY(0);    }
}

.social-icons a {
    display: inline-block;
    transition:
        transform   0.4s var(--ease-spring),
        color       0.3s ease,
        text-shadow 0.3s ease;
}

.social-icons a:hover {
    transform: translateY(-7px) scale(1.28) rotate(-6deg);
    color: #cfe2ff !important;
    text-shadow: 0 0 22px rgba(191,219,254,0.85);
}

.footer-links a {
    position: relative;
    display: inline-block;
    transition: transform 0.3s var(--ease-spring), color 0.3s ease;
}

.footer-links a:hover {
    transform: translateY(-2px) scale(1.05);
    color: #93c5fd;
}

.footer-links a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -2px;
    width: 0%; height: 1.5px;
    background: linear-gradient(90deg, #93c5fd, #bfdbfe);
    box-shadow: 0 0 6px rgba(147,197,253,0.65);
    transition: width 0.35s var(--ease-calm);
}

.footer-links a:hover::after { width: 100%; }


/* ─────────────────────────────────────────────────────────────────────
   13. MOBILE — graceful degradation
───────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {

    .scroll-reveal {
        transform: perspective(600px) rotateX(6deg) translateY(22px);
    }

    .anim-card {
        transform: perspective(500px) rotateX(10deg) translateY(22px) scale(0.97);
    }

    .list-item-reveal {
        transform: translateX(-16px);
    }

    .hero::before { width: 180px; height: 180px; filter: blur(40px); }
    .hero::after  { width: 150px; height: 150px; filter: blur(40px); }

    .breathing-container::before { width: 135px; height: 135px; }
    .breathing-container::after  { width: 175px; height: 175px; }

    #audio {
        width: 100%;
        animation: audioFadeIn 0.9s var(--ease-calm) 0.4s forwards;
    }

    .section:nth-child(odd)::before,
    .section:nth-child(even)::after { display: none; }
}