/* ==========================================================================
   Motion — atmospheric, slow and restrained.
   Everything here is progressive: content is visible without JavaScript, and
   all motion is removed for visitors who prefer reduced motion.
   ========================================================================== */

/* Fog drift (compositor-only transforms) */
@keyframes fogDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-1200px, 0, 0); } }
@keyframes fogDriftReverse { from { transform: translate3d(-1200px, 0, 0); } to { transform: translate3d(0, 0, 0); } }
.fog--a { animation: fogDrift 95s linear infinite; }
.fog--b { animation: fogDrift 60s linear infinite; }
.fog--c { animation: fogDriftReverse 140s linear infinite; }

/* Film grain */
@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-3%, 2%); }
    40% { transform: translate(2%, -3%); }
    60% { transform: translate(-2%, -1%); }
    80% { transform: translate(3%, 3%); }
}
.grain { animation: grain 1.2s steps(5) infinite; }

/* Floating book */
@keyframes bookFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes shadowFloat { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.86); opacity: 0.7; } }
.book3d--float { animation: bookFloat 7s var(--ease-in-out) infinite; }
.book3d--float .book3d__shadow { animation: shadowFloat 7s var(--ease-in-out) infinite; }

/* Spotlight breathing */
@keyframes spotlight { 0%, 100% { opacity: 0.85; } 50% { opacity: 1; } }
.book3d__spotlight { animation: spotlight 6s ease-in-out infinite; }

/* Crimson glow pulse on key purchase buttons */
@keyframes glowPulse {
    0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 12px 32px -14px rgba(215, 25, 32, 0.85), 0 0 0 0 rgba(215, 25, 32, 0.0); }
    50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 16px 40px -12px rgba(215, 25, 32, 1), 0 0 34px 2px rgba(215, 25, 32, 0.32); }
}
.btn--glow { animation: glowPulse 3.6s ease-in-out infinite; }
.btn--glow:hover { animation-play-state: paused; }

/* Scroll cue */
@keyframes scrollCue { 0% { transform: translateY(-100%); } 100% { transform: translateY(260%); } }
.scroll-cue__line::after { animation: scrollCue 2.2s var(--ease-in-out) infinite; }

/* Hero glow flicker — like distant red light through fog */
@keyframes glowFlicker { 0%, 100% { opacity: 1; } 47% { opacity: 0.86; } 50% { opacity: 0.95; } 53% { opacity: 0.8; } }
.hero__glow { animation: glowFlicker 9s ease-in-out infinite; }

/* --------------------------------------------------------------------------
   Page load & transitions
   -------------------------------------------------------------------------- */
@keyframes curtainOut { from { opacity: 1; } to { opacity: 0; } }
.js .page-curtain { opacity: 1; animation: curtainOut 0.9s var(--ease) 0.05s forwards; }
.js body.is-leaving .page-curtain { animation: none; opacity: 1; transition: opacity 0.35s var(--ease); }

/* Hero entrance sequence */
.js [data-hero] { opacity: 0; transform: translateY(26px); }
.js [data-hero="book"] { transform: translateY(40px) scale(0.94); }
.js body.is-loaded [data-hero] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: opacity 1.2s var(--ease), transform 1.4s var(--ease);
}
.js body.is-loaded [data-hero="1"] { transition-delay: 0.25s; }
.js body.is-loaded [data-hero="2"] { transition-delay: 0.4s; }
.js body.is-loaded [data-hero="3"] { transition-delay: 0.55s; }
.js body.is-loaded [data-hero="4"] { transition-delay: 0.85s; }
.js body.is-loaded [data-hero="5"] { transition-delay: 1s; }
.js body.is-loaded [data-hero="6"] { transition-delay: 1.15s; }
.js body.is-loaded [data-hero="7"] { transition-delay: 1.3s; }
.js body.is-loaded [data-hero="book"] { transition-delay: 0.6s; transition-duration: 1.6s; }

/* "MURDER" bleeds in */
.js .hero__title-main[data-hero] { clip-path: inset(-25% 100% -25% -10%); }
.js body.is-loaded .hero__title-main[data-hero] { clip-path: inset(-25% -10% -25% -10%); transition: opacity 1.2s var(--ease) 0.55s, transform 1.4s var(--ease) 0.55s, clip-path 1.6s var(--ease-in-out) 0.6s; }

/* --------------------------------------------------------------------------
   Scroll reveals
   -------------------------------------------------------------------------- */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s var(--ease), transform 1.1s var(--ease);
    transition-delay: var(--d, 0ms);
}
.js [data-reveal="zoom"] { transform: scale(0.94) translateY(20px); }
.js [data-reveal="left"] { transform: translateX(-36px); }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* Word-by-word heading reveal (spans injected by animations.js) */
/* No overflow masks: Bodoni's wide glyphs must never be clipped */
.split-word { display: inline-block; }
.split-word > span { display: inline-block; opacity: 0; transform: translateY(0.35em); transition: opacity 0.9s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--wi) * 55ms + var(--d, 0ms)); }
.is-visible .split-word > span, [data-split].is-visible .split-word > span { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Mobile menu stagger
   -------------------------------------------------------------------------- */
@keyframes menuItem { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes menuFade { from { opacity: 0; } to { opacity: 1; } }
.mobile-menu.is-open { animation: menuFade 0.4s var(--ease) both; }
.mobile-menu.is-open li { animation: menuItem 0.6s var(--ease) both; animation-delay: calc(var(--i) * 60ms + 80ms); }
.mobile-menu.is-open .btn { animation: menuItem 0.6s var(--ease) 0.5s both; }

/* --------------------------------------------------------------------------
   Reduced motion: remove all non-essential movement
   -------------------------------------------------------------------------- */
@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;
        transition-delay: 0ms !important;
    }
    .fog, .grain, .book3d--float, .book3d__shadow, .btn--glow, .hero__glow { animation: none !important; }
    .js [data-hero], .js [data-reveal], .split-word > span { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; }
    .js .page-curtain { display: none; }
}

/* --------------------------------------------------------------------------
   Background motifs: slow, ambient, paused off-screen (see animations.js)
   -------------------------------------------------------------------------- */
@keyframes fx-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes fx-drift {
    0%   { transform: translate(0, 0) rotate(var(--rot)); }
    50%  { transform: translate(30px, -24px) rotate(calc(var(--rot) + 7deg)); }
    100% { transform: translate(-20px, 18px) rotate(calc(var(--rot) - 6deg)); }
}
@keyframes fx-pulse {
    0%, 100% { transform: rotate(var(--rot)) scale(0.95); opacity: calc(var(--o) * 0.5); }
    50%      { transform: rotate(var(--rot)) scale(1.05); opacity: var(--o); }
}
@keyframes fx-fall { from { transform: translate3d(0, -4%, 0); } to { transform: translate3d(0, 112%, 0); } }
@keyframes fx-sway {
    from { transform: translateX(-12px) rotate(-16deg); }
    to   { transform: translateX(12px) rotate(16deg); }
}
@keyframes fx-ecg { from { stroke-dashoffset: 260; } to { stroke-dashoffset: -2600; } }

.fx--spin     { animation: fx-spin var(--dur) linear infinite; }
.fx--spin-rev { animation: fx-spin var(--dur) linear infinite reverse; }
.fx--drift    { animation: fx-drift var(--dur) ease-in-out var(--delay) infinite alternate; }
.fx--pulse    { animation: fx-pulse var(--dur) ease-in-out var(--delay) infinite; }
.fx--fall     { animation: fx-fall var(--dur) linear var(--delay) infinite; will-change: transform; }
.fx--sway     { animation: fx-sway calc(var(--dur) / 6) ease-in-out var(--delay) infinite alternate; }
.fx__ecg-pulse { animation: fx-ecg 6.5s linear infinite; }

.fx.is-paused *, .fx.is-paused { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
    .fx__lane, .fx__ecg-pulse { display: none; }
    .fx * { animation: none !important; }
}