/* ==========================================================
ALPHASTRIKE OS
Design Engine

File        : 06_animations.css
Version     : 1.0.0
Created     : 12 August 2026
Maintainer  : ALPHASTRIKE
Description : Shared keyframes + scroll-reveal utility classes.
              Paired with core/js/06_animations.js, which toggles
              .is-visible via IntersectionObserver, and
              core/js/04_counters.js for the count-up number effect.
              All motion values come from --alpha-motion-* tokens.
Copyright (c) 2026 ALPHASTRIKE
    All Rights Reserved.
============================================================*/

@keyframes as-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes as-fade-up {
    from {
        opacity: 0;
        /* 24px - 50% further than the original 16px, per request 2026-08-12 */
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes as-scale-in {
    from {
        opacity: 0;
        /* 1.03 - 50% bigger than --alpha-motion-scale-subtle's 1.02 delta,
           per request 2026-08-12. Hardcoded rather than scaling the
           locked token itself, so design-system/tokens stays untouched. */
        transform: scale(1.03);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes as-spin {
    to {
        transform: rotate(360deg);
    }
}

/* -----------------------------------------------------------
   SCROLL REVEAL
   Elements start hidden; core/js/06_animations.js adds
   .is-visible the first time each element enters the viewport.
----------------------------------------------------------- */

.as-reveal {
    opacity: 0;
    /* 24px - 50% further than the original 16px, per request 2026-08-12 */
    transform: translateY(24px);
    /* --alpha-motion-duration-slow (320ms) -> -normal (200ms), 2026-08-13:
       a >=50% faster reveal per request (320/200 = 1.6x rate), using an
       existing token rather than a bespoke value. */
    transition:
        opacity var(--alpha-motion-duration-normal) var(--alpha-motion-ease-enter),
        transform var(--alpha-motion-duration-normal) var(--alpha-motion-ease-enter);
}

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

.as-reveal--scale {
    /* 1.03 - 50% bigger delta than --alpha-motion-scale-subtle's 1.02 */
    transform: scale(1.03);
}

.as-reveal--scale.is-visible {
    transform: scale(1);
}

/* Stagger helper - apply alongside .as-reveal, incrementing index.
   Delays were 90/180/270/360/450ms (a 2026-08-12 increase from an
   original 60/120/180/240/300ms). Halved again on 2026-08-13 per a
   direct request to speed the reveal rate up by >=50% - net effect
   vs. that original baseline is still faster, not just back to it. */
.as-reveal[data-reveal-index="1"] { transition-delay: 45ms; }
.as-reveal[data-reveal-index="2"] { transition-delay: 90ms; }
.as-reveal[data-reveal-index="3"] { transition-delay: 135ms; }
.as-reveal[data-reveal-index="4"] { transition-delay: 180ms; }
.as-reveal[data-reveal-index="5"] { transition-delay: 225ms; }

@media (prefers-reduced-motion: reduce) {
    .as-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* -----------------------------------------------------------
   LOADER
   Paired with core/js/01_loader.js.
----------------------------------------------------------- */

.as-loader {
    position: fixed;
    inset: 0;
    z-index: var(--as-z-loader);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--alpha-surface-page);
    transition: opacity var(--alpha-motion-duration-normal) var(--alpha-motion-ease-standard);
}

.as-loader__mark {
    width: 32px;
    height: 32px;
    border: var(--alpha-border-medium) solid var(--alpha-border-default);
    border-top-color: var(--alpha-interactive-default);
    border-radius: var(--alpha-radius-full);
    animation: as-spin var(--alpha-motion-duration-deliberate) linear infinite;
}

.as-loader--hidden {
    opacity: 0;
    pointer-events: none;
}

body.as-loading {
    overflow: hidden;
}


/* -------------------------------------------------------------
   BACKGROUND DATA-POINT FIELD
   Full-bleed decorative layer, one SVG per page (assets/images/
   bg-dots-*.svg). The twinkle animation lives inside each SVG's
   own <style> block so it keeps animating even though the file
   is loaded via <img> - only the positioning/stacking lives here.
   Per design-system/guidelines/imagery.md Sec 15: must not compete
   with foreground content, hence the reduced opacity and z-index
   kept behind everything in .alpha-os.
----------------------------------------------------------------- */

.as-bg-dots {
    position: fixed;
    inset: 0;
    z-index: 0;

    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;

    /* 0.7 -> 0.82, 2026-08-13, alongside the ~50% dot-count increase in
       assets/images/bg-dots-*.svg - together these keep wide-viewport
       margins from reading as flat empty black next to featured hero
       graphics, while staying well short of competing with foreground
       content (imagery.md Sec 15). */
    opacity: 0.82;
    pointer-events: none;
}

.alpha-os {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
    .as-bg-dots {
        opacity: 0.5;
    }
}

/* -------------------------------------------------------------
   HERO VISUAL - NODE TWINKLE
   For the inline (not <img>-embedded) constellation graphics in
   .alpha-hero__visual - these live in the page DOM, so unlike
   bg-dots-*.svg they share this stylesheet's keyframes directly
   rather than needing their own <style> block.
----------------------------------------------------------------- */

@keyframes as-node-twinkle {
    0%   { opacity: 0.55; }
    50%  { opacity: 1; }
    100% { opacity: 0.55; }
}

.as-hero-node {
    animation: as-node-twinkle 7s ease-in-out infinite;
}

.as-hero-node:nth-of-type(2n) { animation-duration: 8.4s; animation-delay: -2.1s; }
.as-hero-node:nth-of-type(3n) { animation-duration: 9.6s; animation-delay: -4.3s; }
.as-hero-node:nth-of-type(4n) { animation-duration: 6.2s; animation-delay: -1.4s; }
.as-hero-node:nth-of-type(5n) { animation-duration: 7.8s; animation-delay: -3.6s; }

@media (prefers-reduced-motion: reduce) {
    .as-hero-node {
        animation: none;
        opacity: 0.85;
    }
}

/* -----------------------------------------------------------------
   LIGHT THEME OVERRIDE (v1.1)

   The constellation graphic above (.as-hero-node / .as-hero-link)
   is authored directly in each page's markup (automation.html,
   enterprise.html, trading.html) with fill/stroke="#F5B800" as SVG
   presentation attributes, not CSS custom properties - it predates
   the v1.1 light-theme chrome accent (see design-system/foundations/
   colors.md section 9). CSS fill/stroke declarations here beat SVG
   presentation attributes in the cascade regardless of specificity,
   so this repoints them to the locked light-theme chrome tokens
   without editing the per-page SVG markup. Dark theme is untouched -
   the pages carry no [data-theme="dark"] selector, so #F5B800 keeps
   applying there by default.
----------------------------------------------------------------- */

[data-theme="light"] .as-hero-link {
    stroke: var(--alpha-color-brand-chrome-steel);
}

[data-theme="light"] .as-hero-node circle {
    fill: var(--alpha-color-brand-chrome-steel);
}