/* =============================================================================
   ANIMATIONS.CSS — Scroll Reveal & Motion System
   =============================================================================
   HOW SCROLL REVEAL WORKS:
   1. Add class "reveal" to any element you want to fade in on scroll
   2. js/scroll-reveal.js adds ".is-visible" when it enters the viewport
   3. The CSS transition here does the visual animation

   STAGGERED DELAY: Add style="--delay: 200ms;" to stagger elements.

   PHILOSOPHY: Very subtle. Fade-in / slide-up only. No pulsing, no glowing.
   ============================================================================= */

/* =========================
   SCROLL REVEAL — VARIANTS
   ========================= */

.reveal {
    --reveal-y: 20px;
    opacity: 0;
    transform: translateY(var(--reveal-y));
    transition:
        opacity 0.75s ease-out,
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-24px);
}
.reveal-left.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(24px);
}
.reveal-right.is-visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.97);
}
.reveal-scale.is-visible {
    opacity: 1;
    transform: scale(1);
}

/* Stagger delay support via CSS custom prop */
.reveal[style] {
    transition-delay: var(--delay, 0ms);
}

/* =========================
   HERO ANIMATED GRID
   Very faint — barely visible, NOT a neon laser grid.
   ========================= */

.hero-animated-grid {
    position: relative;
    overflow: hidden;
}

.hero-animated-grid::before {
    content: '';
    position: absolute;
    inset: -50%;
    z-index: 0;
    background-image:
        linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
    background-size: 64px 64px;
    animation: gridMove 60s linear infinite;
    mask-image: radial-gradient(ellipse at center, black 10%, transparent 55%);
    pointer-events: none;
}

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

/* =========================
   CONNECTOR LINE
   (Home page: Power/Sensor/Actuator connectors)
   ========================= */

/* NOTE: connector-line is now a thin grey line, not cyan.
   Overrides are in home.css. This base just handles the reveal animation. */
.connector-line {
    /* No box-shadow glow — plain thin line */
    transition: opacity 0.5s ease;
}
.connector-line.is-visible {
    opacity: 1;
}

/* =========================
   WORD REVEAL (Hero Title)
   Each word slides up and fades in with stagger.
   ========================= */

.word-reveal {
    display: inline-block;
    opacity: 0;
    transform: translateY(32px) rotateX(15deg);
    transition:
        opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--word-i, 0) * 80ms + 250ms);
    transform-origin: bottom center;
}

.word-reveal.is-visible {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
}

/* =========================
   SUBTITLE ANIMATE
   ========================= */

.subtitle-animate {
    opacity: 0;
    transform: translateY(16px);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.subtitle-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================
   HERO BUTTONS STAGGER
   ========================= */

.hero-actions-animate {
    opacity: 0;
    transform: translateY(12px);
    transition:
        opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-actions-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* =========================
   SYS LABEL TYPING CURSOR
   ========================= */

.sys-label-typing::after {
    content: '▌';
    animation: cursorBlink 0.6s step-end infinite;
    color: var(--accent-primary);
    font-weight: 400;
    margin-left: 2px;
}

.sys-label-typing.typed-done::after {
    animation: cursorBlink 0.6s step-end infinite 2s;
    opacity: 0;
    transition: opacity 0.3s ease 2s;
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* =========================
   DIVIDER DRAW-IN
   Line scales from center outward.
   ========================= */

.divider-draw {
    transform: scaleX(0);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center;
}

.divider-draw.drawn {
    transform: scaleX(1);
}

.divider-draw .tech-node {
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.3s ease 0.6s, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
}

.divider-draw.drawn .tech-node {
    opacity: 0.7;
    transform: scale(1);
}

/* =========================
   CARD CASCADE
   Cards slide up and fade in with stagger.
   ========================= */

/* Card cascade uses .is-visible added by scroll-animations.js with staggered
   setTimeout. The .reveal base class already handles the hidden → visible transition. */

/* =========================
   SCROLL PROGRESS BAR
   ========================= */

.scroll-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 2px;
    width: 0%;
    background: var(--accent-primary);
    z-index: 10000;
    transition: width 0.1s linear;
    pointer-events: none;
}

/* =========================
   CARD HOVER — BORDER TRACE
   Accent line sweeps around the border on hover.
   ========================= */

.home-diff-item {
    position: relative;
    overflow: hidden;
}

.home-diff-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1.5px solid transparent;
    transition: border-color 0.3s ease;
    pointer-events: none;
}

.home-diff-item:hover::after {
    border-color: var(--accent-primary);
    animation: borderTrace 0.6s ease forwards;
}

@keyframes borderTrace {
    0% {
        clip-path: inset(0 100% 100% 0);
    }
    50% {
        clip-path: inset(0 0 100% 0);
    }
    100% {
        clip-path: inset(0 0 0 0);
    }
}

/* =========================
   REDUCED MOTION
   ========================= */

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .word-reveal,
    .subtitle-animate,
    .hero-actions-animate,
    .divider-draw {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }

    .sys-label-typing::after {
        display: none;
    }

    .scroll-progress-bar {
        display: none;
    }
}