/* ================================================================
   SHIVAMSYS.IN — animations.css v10.0
   6 distinct entrance motions. Each element type has its own.
   JS drives visibility via .scroll-hidden / .scroll-visible +
   an anim--* modifier. Bidirectional — resets on scroll-out.
   Premium engineer website. Not a toy.
================================================================ */

/* ── ANIMATION TRANSITION DURATION ─────────────────────────── */
:root {
    --ease-out:    cubic-bezier(.4, 0, .2, 1);
    --ease-spring: cubic-bezier(.34, 1.22, .64, 1);   /* very subtle overshoot — only for scale */
}

/* ================================================================
   BASE: scroll-hidden / scroll-visible
   JS stamps .scroll-hidden on every [data-anim] element at init.
   When in viewport, it swaps to .scroll-visible + anim--* class.
   The anim--* class supplies the "from" keyframe via a CSS animation.
================================================================ */

.scroll-hidden {
    opacity: 0;
    will-change: opacity, transform;
}

/* Once JS adds .scroll-visible the element is animatable.
   The anim--* class drives the specific motion.
   After animation finishes the element rests at its natural place. */
.scroll-visible {
    opacity: 1;
}

/* ── DELAY SUPPORT ───────────────────────────────────────────
   JS sets --anim-delay via element.style. Each anim class reads it.  */


/* ================================================================
   ANIMATION 1 — fade-up  (bio cards, role cards, stack categories,
                            education, section subtitles)
   Classic upward entrance. Feels neutral + clean.
================================================================ */
.anim--fade-up {
    animation: _fadeUp 0.55s var(--ease-out) var(--anim-delay, 0ms) both;
}
@keyframes _fadeUp {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: translateY(0);    }
}


/* ================================================================
   ANIMATION 2 — fade-left  (section labels, edu list items)
   Slides in from the left. Signals "beginning of a line" — text
   that introduces something. Directional contrast to fade-up.
================================================================ */
.anim--fade-left {
    animation: _fadeLeft 0.5s var(--ease-out) var(--anim-delay, 0ms) both;
}
@keyframes _fadeLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0);     }
}


/* ================================================================
   ANIMATION 3 — fade-right  (reserved for right-origin elements)
================================================================ */
.anim--fade-right {
    animation: _fadeRight 0.5s var(--ease-out) var(--anim-delay, 0ms) both;
}
@keyframes _fadeRight {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0);    }
}


/* ================================================================
   ANIMATION 4 — scale-in  (perf stats, eng badges, github cards,
                              lc topics)
   Scales up from 93%. Feels like "it materialises". Perfect for
   metric cards and tags — they're not arriving, they're appearing.
   Slight spring easing — barely perceptible, never bouncy.
================================================================ */
.anim--scale-in {
    animation: _scaleIn 0.45s var(--ease-spring) var(--anim-delay, 0ms) both;
}
@keyframes _scaleIn {
    from { opacity: 0; transform: scale(0.93); }
    to   { opacity: 1; transform: scale(1);    }
}


/* ================================================================
   ANIMATION 5 — clip-up  (section titles, project cases)
   Clip-path reveal: content is hidden by a rectangle that slides
   up to expose it. Feels editorial, like print media. The "premium"
   animation. Reserved for the most important text and key cards.
================================================================ */
.anim--clip-up {
    animation: _clipUp 0.58s var(--ease-out) var(--anim-delay, 0ms) both;
}
@keyframes _clipUp {
    from {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        clip-path: inset(0% 0 0 0);
        transform: translateY(0);
    }
}


/* ================================================================
   ANIMATION 6 — line-in  (section dividers)
   Width grows from 0 to full. Draws the line like an underline
   being written.
================================================================ */
.anim--line-in {
    animation: _lineIn 0.55s var(--ease-out) var(--anim-delay, 0ms) both;
}
@keyframes _lineIn {
    from { opacity: 0; transform: scaleX(0); transform-origin: left; }
    to   { opacity: 1; transform: scaleX(1); transform-origin: left; }
}

/* Divider is usually set with a fixed width — override with transform */
.section-divider {
    transform-origin: left center;
}


/* ================================================================
   LEGACY SUPPORT — old .reveal system kept for any HTML element
   that still has .reveal or .reveal-left (harmless if absent)
================================================================ */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
    will-change: opacity, transform;
}
.reveal.active { opacity: 1; transform: none; }

.reveal-left {
    opacity: 0; transform: translateX(-20px);
    transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.reveal-left.active { opacity: 1; transform: none; }


/* ================================================================
   PROJECT CASES — internal element stagger
   The project-case itself is animated by anim--clip-up.
   Internal elements add a layer of micro-stagger after the card
   itself lands.
================================================================ */
.cs-arch {
    opacity: 0;
    transform: scaleX(0.97);
    transform-origin: left;
    transition: opacity .45s ease .25s, transform .45s ease .25s;
}
.scroll-visible .cs-arch { opacity: 1; transform: none; }

.cs-perf-row .perf-chip {
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .3s ease, transform .3s ease;
}
.scroll-visible .cs-perf-row .perf-chip:nth-child(1)  { opacity: 1; transform: none; transition-delay: .30s; }
.scroll-visible .cs-perf-row .perf-chip:nth-child(2)  { opacity: 1; transform: none; transition-delay: .36s; }
.scroll-visible .cs-perf-row .perf-chip:nth-child(3)  { opacity: 1; transform: none; transition-delay: .42s; }
.scroll-visible .cs-perf-row .perf-chip:nth-child(4)  { opacity: 1; transform: none; transition-delay: .48s; }
.scroll-visible .cs-perf-row .perf-chip:nth-child(5)  { opacity: 1; transform: none; transition-delay: .54s; }


/* ================================================================
   HERO ENTRANCE ANIMATIONS
   One-shot on page load. No JS needed — tied to page load timing.
================================================================ */
.system-status   { animation: _fadeUp .5s ease .05s  both; }
.hero-statement  { animation: _fadeUp .6s ease .15s  both; }
.hero-identity   { animation: _fadeUp .5s ease .35s  both; }
.hero-summary    { animation: _fadeUp .5s ease .48s  both; }
.target-row      { animation: _fadeUp .5s ease .58s  both; }
.hero-perf-pills { animation: _fadeUp .45s ease .68s both; }
.cta-group       { animation: _fadeUp .45s ease .78s both; }
.image-container { animation: _imgIn  .7s ease .1s   both; }

@keyframes _imgIn {
    from { opacity: 0; transform: translateX(20px) scale(.97); }
    to   { opacity: 1; transform: translateX(0)    scale(1);   }
}


/* ================================================================
   HIGHLIGHT SCANLINE (one looping element — subtle)
================================================================ */
.highlight-box::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(0,255,157,.05) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: _scanline 5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes _scanline {
    0%   { transform: translateX(-100%); }
    60%  { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}


/* ================================================================
   GLOW ORBS (ambient hero background — slow drift)
================================================================ */
.glow-orb {
    position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
    filter: blur(72px);
}
.glow-orb-1 {
    width: clamp(240px,35vw,480px); height: clamp(240px,35vw,480px);
    background: radial-gradient(circle, rgba(0,255,157,.06) 0%, transparent 70%);
    top: -5%; left: -8%;
    animation: _orbDrift 14s ease-in-out infinite alternate;
}
.glow-orb-2 {
    width: clamp(180px,25vw,360px); height: clamp(180px,25vw,360px);
    background: radial-gradient(circle, rgba(0,180,255,.05) 0%, transparent 70%);
    bottom: 8%; right: 4%;
    animation: _orbDrift 18s ease-in-out infinite alternate-reverse;
}
@keyframes _orbDrift {
    from { transform: translate(0, 0); }
    to   { transform: translate(2vw, 3vh); }
}


/* ================================================================
   PRELOADER
================================================================ */
.load-cmd {
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    border-right: 1.5px solid var(--accent);
}
.load-cmd:nth-child(2) { animation: _typeIn .7s steps(40,end) .3s  both, _blink .4s step-end .3s  3; }
.load-cmd:nth-child(3) { animation: _typeIn .7s steps(40,end) 1.1s both, _blink .4s step-end 1.1s 3; }
.load-cmd:nth-child(4) { animation: _typeIn .7s steps(40,end) 1.9s both, _blink .4s step-end 1.9s 3; }
@keyframes _typeIn {
    from { opacity: 1; width: 0; }
    to   { opacity: 1; width: 100%; }
}
@keyframes _blink {
    from, to { border-color: transparent; }
    50%      { border-color: var(--accent); }
}


/* ================================================================
   STATUS DOT PULSE
================================================================ */
@keyframes dotPulse {
    0%, 100% { opacity: 1;  transform: scale(1);   }
    50%       { opacity: .5; transform: scale(1.4); }
}


/* ================================================================
   REDUCED MOTION OVERRIDE — always at bottom, max specificity
================================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:    .001ms !important;
        animation-delay:       0s    !important;
        transition-duration:   .001ms !important;
    }
    .scroll-hidden { opacity: 1 !important; }
    .glow-orb, .highlight-box::after { display: none !important; }
    .section-divider { transform: none !important; }
    .cs-arch, .cs-perf-row .perf-chip {
        opacity: 1 !important; transform: none !important;
    }
}