/* =========================================================================
   ANIMATIONS & MICRO-INTERACTIONS
   -------------------------------------------------------------------------
   Additive motion layer. Loaded after style.css / responsive.css / page CSS
   so it can gently enhance existing components without touching layout,
   content, or branding.

   Principles
     - Animate only `transform` and `opacity` (GPU-friendly, 60 FPS).
     - Above-the-fold intros use pure CSS keyframes (no FOUC, no JS needed).
     - Below-the-fold reveals are driven by JS via the `.is-visible` class.
     - Everything is disabled under `prefers-reduced-motion: reduce`.

   Sections
     01. Page fade-in
     02. Reveal-on-scroll utilities (fade/scale/zoom + stagger)
     03. Hero intro + floating background shapes
     04. Page-hero intro + animated breadcrumb
     05. Sticky header (shrink + blur on scroll)
     06. Buttons (lift / scale / ripple) + CTA glow
     07. Cards (icon lift, blog media zoom)
     08. Images (fade + scale-in reveal)
     09. Timeline (alternate slide-in)
     10. Footer (fade-up + social icon spin)
     11. Forms (focus + submit loading/success)
     12. Scroll progress indicator
     13. Section dividers + title reveal
     14. Reduced-motion overrides
   ========================================================================= */

/* =========================================================================
   01. PAGE FADE-IN
   ========================================================================= */
@keyframes aPageIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

body.page {
    animation: aPageIn 0.5s var(--ease-out) both;
}

/* =========================================================================
   02. REVEAL-ON-SCROLL UTILITIES
   -------------------------------------------------------------------------
   Elements start hidden; JS adds `.is-visible` when they enter the viewport.
   `--anim-delay` is set per-element by JS to stagger groups (cards, lists).
   ========================================================================= */
[data-animate] {
    opacity: 0;
    transition:
        opacity var(--duration-slow) var(--ease-out),
        transform var(--duration-slow) var(--ease-out);
    transition-delay: var(--anim-delay, 0s);
    will-change: opacity, transform;
}

[data-animate="fade-up"]    { transform: translate3d(0, 28px, 0); }
[data-animate="fade-down"]  { transform: translate3d(0, -28px, 0); }
[data-animate="fade-left"]  { transform: translate3d(-36px, 0, 0); }
[data-animate="fade-right"] { transform: translate3d(36px, 0, 0); }
[data-animate="scale-in"]   { transform: scale(0.96); }
[data-animate="zoom-in"]    { transform: scale(0.9); }

[data-animate].is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* =========================================================================
   03. HERO INTRO + FLOATING BACKGROUND SHAPES
   -------------------------------------------------------------------------
   Above-the-fold: pure CSS so it plays on load with no flash and no JS.
   ========================================================================= */
@keyframes aFadeUp {
    from { opacity: 0; transform: translate3d(0, 26px, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes aFadeInRight {
    from { opacity: 0; transform: translate3d(44px, 0, 0); }
    to   { opacity: 1; transform: none; }
}

.hero__content > * {
    opacity: 0;
    animation: aFadeUp 0.7s var(--ease-out) both;
}
.hero__content > *:nth-child(1) { animation-delay: 0.05s; }
.hero__content > *:nth-child(2) { animation-delay: 0.15s; }
.hero__content > *:nth-child(3) { animation-delay: 0.25s; }
.hero__content > *:nth-child(4) { animation-delay: 0.35s; }
.hero__content > *:nth-child(5) { animation-delay: 0.45s; }

.hero__media {
    opacity: 0;
    animation: aFadeInRight 0.9s var(--ease-out) 0.3s both;
    /* Parallax offset written by JS (scroll + pointer). */
    transform: translate3d(var(--px, 0), var(--py, 0), 0);
    transition: transform 0.2s var(--ease-out);
}

/* Very slow, subtle floating for the decorative cards / glow. */
@keyframes aFloatY {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

.hero__card--float {
    animation: aFloatY 6s var(--ease-in-out) infinite;
}
.hero__card--bottom { animation-duration: 7.5s; animation-delay: -2s; }

.hero__glow { animation: aFloatY 9s var(--ease-in-out) infinite; }

/* Lightweight floating "blobs" behind the hero. */
.hero { position: relative; }
.hero::after {
    content: "";
    position: absolute;
    top: -80px;
    right: -60px;
    width: 320px;
    height: 320px;
    border-radius: var(--radius-circle);
    background: radial-gradient(circle at 30% 30%,
        rgba(var(--color-primary-light-rgb), 0.18), transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: aFloatY 11s var(--ease-in-out) infinite;
}
.hero__inner { position: relative; z-index: 1; }

/* =========================================================================
   04. PAGE-HERO INTRO + ANIMATED BREADCRUMB
   ========================================================================= */
.page-hero__inner > * {
    opacity: 0;
    animation: aFadeUp 0.6s var(--ease-out) both;
}
.page-hero__inner > *:nth-child(1) { animation-delay: 0.05s; }
.page-hero__inner > *:nth-child(2) { animation-delay: 0.15s; }
.page-hero__inner > *:nth-child(3) { animation-delay: 0.25s; }

.breadcrumb .breadcrumb__item,
.breadcrumb .breadcrumb__sep {
    opacity: 0;
    animation: aFadeUp 0.5s var(--ease-out) both;
}
.breadcrumb .breadcrumb__item:nth-child(1) { animation-delay: 0.10s; }
.breadcrumb .breadcrumb__sep:nth-child(2)  { animation-delay: 0.18s; }
.breadcrumb .breadcrumb__item:nth-child(3) { animation-delay: 0.26s; }

/* =========================================================================
   05. STICKY HEADER — shrink + blur on scroll
   -------------------------------------------------------------------------
   `.is-scrolled` is toggled by app.js. We only layer visual polish here.
   ========================================================================= */
.site-header {
    transition:
        background-color var(--transition),
        box-shadow var(--transition),
        backdrop-filter var(--transition);
}

.site-header.is-scrolled {
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    box-shadow: var(--shadow-sm);
}

.navbar__inner { transition: padding-block var(--transition); }
.site-header.is-scrolled .navbar__inner { padding-block: var(--space-2xs); }

.navbar__logo,
.site-header.is-scrolled .navbar__logo {
    transition: height var(--transition);
}
.site-header.is-scrolled .navbar__logo { height: 40px; }

/* =========================================================================
   06. BUTTONS — lift / scale / press / ripple + CTA glow
   ========================================================================= */
.btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.btn--primary:hover,
.btn--accent:hover,
.btn--secondary:hover {
    transform: translateY(-3px) scale(1.03);
}

.btn--primary:hover,
.btn--accent:hover {
    box-shadow: 0 12px 26px rgba(var(--color-primary-rgb), 0.32);
}

.btn:active { transform: translateY(0) scale(0.97); }

/* Ripple element injected by JS on click. */
@keyframes aRipple {
    to { transform: scale(4); opacity: 0; }
}

.btn__ripple {
    position: absolute;
    border-radius: var(--radius-circle);
    background: currentColor;
    opacity: 0.28;
    transform: scale(0);
    pointer-events: none;
    z-index: -1;
    animation: aRipple 0.6s var(--ease-out);
}

/* Soft glow behind primary CTAs on hover. */
.cta__panel { position: relative; }

.cta__panel::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: radial-gradient(120% 140% at 50% 0%,
        rgba(var(--color-primary-light-rgb), 0.28), transparent 60%);
    opacity: 0;
    transition: opacity var(--transition-slow);
    pointer-events: none;
}
.cta__panel:hover::before { opacity: 1; }

/* =========================================================================
   07. CARDS — icon lift + blog media zoom
   ========================================================================= */
.card__icon { transition: transform var(--transition), background-color var(--transition); }
.card--hover:hover .card__icon {
    transform: translateY(-5px);
    background: var(--color-primary);
    color: var(--color-white);
}

/* Blog card image zoom on hover (media has overflow:hidden already).
   Blog cards start at scale(1.22) in style.css so portrait art fills the frame;
   hover pushes a little further. Regular .card__media keeps a lighter zoom. */
.card__media img,
.blog-card__media img {
    transition: transform var(--transition-slow);
}
.card--hover:hover .card__media img {
    transform: scale(1.06);
}
.card--hover:hover .blog-card__media img {
    transform: scale(1.3);
}

/* Animated "Read more" underline for blog/card links. */
.card__link {
    position: relative;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1.5px;
    transition: background-size var(--transition);
}
.card__link:hover,
.card--hover:hover .card__link {
    background-size: 100% 1.5px;
}

/* =========================================================================
   08. IMAGES — fade + scale-in when revealed
   -------------------------------------------------------------------------
   Applied via data-animate="img-in" that JS assigns to content images.
   ========================================================================= */
[data-animate="img-in"] {
    opacity: 0;
    transform: scale(0.95);
    transition:
        opacity var(--duration-slow) var(--ease-out),
        transform var(--duration-slow) var(--ease-out);
    transition-delay: var(--anim-delay, 0s);
}
[data-animate="img-in"].is-visible {
    opacity: 1;
    transform: none;
}

/* =========================================================================
   09. TIMELINE — alternate slide-in (variants set by JS per item)
   ========================================================================= */
.timeline__item[data-animate] { will-change: opacity, transform; }

/* =========================================================================
   10. FOOTER — social icon spin on hover
   ========================================================================= */
.social-links__link {
    transition:
        background-color var(--transition),
        color var(--transition),
        transform var(--transition),
        box-shadow var(--transition);
}
.social-links__link:hover {
    transform: translateY(-3px) rotate(-8deg) scale(1.1);
}

/* =========================================================================
   11. FORMS — focus polish + submit loading / success
   ========================================================================= */
.input,
.textarea,
.select {
    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);
}
.input:focus,
.textarea:focus,
.select:focus {
    transform: translateY(-1px);
}

/* Loading spinner on the submit button while the form posts. */
.btn.is-loading {
    color: transparent !important;
    pointer-events: none;
}
.btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    border-radius: var(--radius-circle);
    animation: spin 0.6s linear infinite;
}

/* Server-rendered alerts glide in. */
.alert { animation: aFadeUp 0.45s var(--ease-out) both; }

/* =========================================================================
   12. SCROLL PROGRESS INDICATOR (element injected by JS)
   ========================================================================= */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: linear-gradient(90deg,
        var(--color-primary), var(--color-primary-light));
    z-index: var(--z-toast);
    pointer-events: none;
    will-change: transform;
}

/* =========================================================================
   13. SECTION DIVIDERS + TITLE UNDERLINE REVEAL
   ========================================================================= */
.section__title { position: relative; }
.section__header[data-animate] .section__title::after {
    content: "";
    display: block;
    width: 0;
    height: 3px;
    margin-top: var(--space-sm);
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg,
        var(--color-primary), var(--color-primary-light));
    transition: width 0.6s var(--ease-out) 0.2s;
}
.section__header--center[data-animate] .section__title::after { margin-inline: auto; }
.section__header[data-animate].is-visible .section__title::after { width: 56px; }

/* Animated gradient divider utility. */
@keyframes aShimmer {
    0%   { background-position: -160% 0; }
    100% { background-position: 260% 0; }
}
.divider--animated {
    height: 2px;
    border: 0;
    background: linear-gradient(90deg,
        transparent, var(--color-primary), transparent);
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: aShimmer 3.5s linear infinite;
}

/* =========================================================================
   14. REDUCED-MOTION OVERRIDES
   -------------------------------------------------------------------------
   Reveal everything instantly and neutralise decorative motion.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    body.page,
    .hero__content > *,
    .hero__media,
    .page-hero__inner > *,
    .breadcrumb .breadcrumb__item,
    .breadcrumb .breadcrumb__sep,
    .alert {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    [data-animate] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .hero__card--float,
    .hero__glow,
    .hero::after,
    .divider--animated,
    .scroll-progress {
        animation: none !important;
    }

    .section__header[data-animate] .section__title::after { transition: none !important; }
}