/* ==========================================================================
   Animations — elegant, restrained motion
   Scroll reveals are driven by an IntersectionObserver (animations.js) that
   adds `.is-visible`. Reveal states are gated behind the `.js` class so that,
   with JavaScript disabled, all content remains fully visible.
   ========================================================================== */

/* ---- Base reveal states (only when JS is active) ---------------------- */
.js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
    transition-delay: calc(var(--i, 0) * 70ms);
    will-change: opacity, transform;
}
.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Cover / portrait reveal — a gentle rise with a hint of scale */
.js .reveal-cover {
    opacity: 0;
    transform: translateY(34px) scale(0.97);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.js .reveal-cover.is-visible {
    opacity: 1;
    transform: none;
}

/* ---- Hero entrance ----------------------------------------------------- */
/* Hero reveals animate on load; animations.js adds .is-visible immediately. */
.js .hero .reveal {
    transform: translateY(20px);
    transition-duration: 1s;
}
.js .hero .reveal-cover {
    transform: translateY(0) scale(0.94);
    filter: saturate(0.9);
    transition: opacity 1.4s var(--ease), transform 1.4s var(--ease), filter 1.4s var(--ease);
}
.js .hero .reveal-cover.is-visible {
    filter: saturate(1);
}

/* Stagger the hero text lines for a cinematic settle */
.js .hero .hero-eyebrow.reveal  { transition-delay: 0.15s; }
.js .hero .hero-title.reveal    { transition-delay: 0.30s; }
.js .hero .hero-subtitle.reveal { transition-delay: 0.45s; }
.js .hero .hero-byline.reveal   { transition-delay: 0.60s; }
.js .hero .hero-intro.reveal    { transition-delay: 0.75s; }
.js .hero .hero-actions.reveal  { transition-delay: 0.90s; }
.js .hero .reveal-cover         { transition-delay: 0.25s; }

/* ---- Continuous, subtle motion ---------------------------------------- */
@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}
[data-float] {
    animation: floaty 7s ease-in-out infinite;
}

@keyframes scrollPulse {
    0%   { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
    50%  { transform: scaleY(1);   transform-origin: top; opacity: 1;   }
    100% { transform: scaleY(0.4); transform-origin: bottom; opacity: 0.4; }
}
.hero-scroll-line { animation: scrollPulse 2.4s ease-in-out infinite; }

@keyframes dotPulse {
    0%   { box-shadow: 0 0 0 0 rgba(211,163,74,0.35); }
    70%  { box-shadow: 0 0 0 8px rgba(211,163,74,0); }
    100% { box-shadow: 0 0 0 0 rgba(211,163,74,0); }
}
.status-dot { animation: dotPulse 2.4s ease-out infinite; }

/* ---- Animated section divider ----------------------------------------- */
.js .divider .divider-line {
    transform: scaleX(0);
    transition: transform 1s var(--ease) 0.2s;
}
.js .divider .divider-line:first-child  { transform-origin: right; }
.js .divider .divider-line:last-child   { transform-origin: left;  }
.js .divider .divider-diamond {
    opacity: 0;
    transform: rotate(-40deg) scale(0.6);
    transition: opacity 0.7s var(--ease) 0.5s, transform 0.7s var(--ease) 0.5s;
}
.js .reveal.is-visible .divider-line,
.js .is-visible .divider-line,
.js .divider.is-visible .divider-line { transform: scaleX(1); }
.js .reveal.is-visible .divider-diamond,
.js .is-visible .divider-diamond,
.js .divider.is-visible .divider-diamond { opacity: 1; transform: rotate(0) scale(1); }

/* Image zoom-on-hover for framed covers */
.cover-frame--static img,
.author-photo {
    transition: transform 0.9s var(--ease);
}
.cover-frame--static:hover img,
.portrait-frame:hover .author-photo { transform: scale(1.04); }

/* ---- Respect reduced-motion preferences ------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    /* Guarantee everything is shown, unmoved */
    .js .reveal,
    .js .reveal-cover,
    .js .hero .reveal,
    .js .hero .reveal-cover {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .js .divider .divider-line   { transform: scaleX(1) !important; }
    .js .divider .divider-diamond{ opacity: 1 !important; transform: none !important; }

    [data-float],
    .hero-scroll-line,
    .status-dot { animation: none !important; }

    .hero-bg { transform: none !important; }
}