/* ─── Anna_Marie · motion layer ──────────────────────────────────
   Parallax, tilt, marquee and scroll-driven effects. Kept separate
   from style.css so the whole thing can be dialled back or dropped
   by removing one <link>. Everything here is motion-only: no layout
   depends on it, and the reduced-motion block at the bottom turns
   all of it off for anyone who asks the OS for less movement.
   ──────────────────────────────────────────────────────────────── */

/* ── Scroll progress bar ─────────────────────────────────────── */
.scroll-progress {
    position: fixed; top: 0; left: 0; z-index: 9999;
    height: 3px; width: 100%;
    transform: scaleX(0); transform-origin: 0 50%;
    background: linear-gradient(90deg, var(--accent-mid), var(--accent), var(--accent-bright));
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.7);
    pointer-events: none; will-change: transform;
}

/* ── Cursor glow (pointer devices only) ──────────────────────── */
.cursor-glow {
    position: fixed; top: 0; left: 0; z-index: 1;
    width: 460px; height: 460px; margin: -230px 0 0 -230px;
    border-radius: 50%; pointer-events: none;
    opacity: 0; transition: opacity .5s ease;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.11) 0%, transparent 62%);
    will-change: transform;
}
body.cursor-active .cursor-glow { opacity: 1; }

/* ── Film grain ──────────────────────────────────────────────── */
.grain {
    position: fixed; inset: -120px; z-index: 2;
    pointer-events: none; opacity: .04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grain-shift 1.1s steps(5) infinite;
}
@keyframes grain-shift {
    0%   { transform: translate(0,0); }
    20%  { transform: translate(-6%, 4%); }
    40%  { transform: translate(5%, -6%); }
    60%  { transform: translate(-4%, -4%); }
    80%  { transform: translate(6%, 5%); }
    100% { transform: translate(0,0); }
}

/* ── Parallax / scroll-skew ──────────────────────────────────── */
[data-parallax] { will-change: transform; }
[data-skew]     { will-change: transform; transform-origin: 50% 50%; }

/* ── 3D tilt ─────────────────────────────────────────────────── */
.tilt-wrap { perspective: 1100px; }
.tilt {
    transform-style: preserve-3d;
    transition: transform .6s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}
.tilt.is-tilting { transition: transform .1s linear; }
.tilt-shine {
    position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; opacity: 0; transition: opacity .35s ease;
    background: linear-gradient(var(--shine-angle, 120deg),
                rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%);
}
.tilt.is-tilting .tilt-shine { opacity: 1; }

/* ── Marquee ─────────────────────────────────────────────────── */
.marquee {
    overflow: hidden; white-space: nowrap;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee-track {
    display: inline-flex; align-items: center;
    animation: marquee-run var(--marquee-duration, 34s) linear infinite;
    will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee--reverse .marquee-track { animation-direction: reverse; }
@keyframes marquee-run { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

.marquee-item {
    display: inline-flex; align-items: center; gap: 1.6rem;
    padding: 0 1.6rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 900; font-style: italic;
    font-size: clamp(1.4rem, 3.4vw, 2.6rem);
    letter-spacing: .01em; white-space: nowrap;
}
.marquee-dot { width: .45em; height: .45em; border-radius: 50%; background: currentColor; opacity: .55; }

/* ── Reveal variants (base .reveal lives in style.css) ───────── */
/* Scoped to .motion-on so a failed/blocked motion.js can never leave the
   page invisible — without the class these are simply visible content. */
.motion-on .reveal-left, .motion-on .reveal-right,
.motion-on .reveal-scale, .motion-on .reveal-blur {
    opacity: 0;
    transition: opacity .85s cubic-bezier(.22,.61,.36,1),
                transform .85s cubic-bezier(.22,.61,.36,1),
                filter .85s ease;
}
.reveal-left  { transform: translate3d(-54px,0,0); }
.reveal-right { transform: translate3d(54px,0,0); }
.reveal-scale { transform: scale(.9); }
.reveal-blur  { filter: blur(14px); transform: translate3d(0,22px,0); }
.reveal-left.visible, .reveal-right.visible, .reveal-scale.visible, .reveal-blur.visible {
    opacity: 1; transform: none; filter: blur(0);
}

/* Per-item stagger, set from JS as --i */
.stagger > * { transition-delay: calc(var(--i, 0) * 70ms); }

/* ── Word-by-word headline reveal ────────────────────────────── */
.split-word { display: inline-block; }
.motion-on .split-word {
    opacity: 0;
    transform: translate3d(0, .75em, 0) rotate(3deg);
    transition: opacity .7s cubic-bezier(.22,.61,.36,1),
                transform .7s cubic-bezier(.22,.61,.36,1);
    transition-delay: calc(var(--w, 0) * 80ms);
}
.split-ready .split-word { opacity: 1; transform: none; }

/* ── Magnetic buttons ────────────────────────────────────────── */
.magnetic { will-change: transform; transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.magnetic.is-pulling { transition: transform .12s ease-out; }

/* ── Accent glow pulse ───────────────────────────────────────── */
.glow-pulse { animation: glow-pulse 4.5s ease-in-out infinite; }
@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 60px 8px rgba(var(--accent-rgb), .34), 0 0 170px 40px rgba(var(--accent-rgb), .14); }
    50%      { box-shadow: 0 0 110px 16px rgba(var(--accent-rgb), .58), 0 0 240px 60px rgba(var(--accent-rgb), .22); }
}

/* ── Slow drift for background blooms ────────────────────────── */
.drift { animation: drift 18s ease-in-out infinite alternate; }
@keyframes drift {
    from { transform: translate3d(-2.5%, -1.5%, 0) scale(1); }
    to   { transform: translate3d(2.5%, 1.5%, 0) scale(1.07); }
}

/* ── Touch devices: drop the pointer-driven effects ──────────── */
@media (hover: none) {
    .cursor-glow { display: none; }
    .tilt { transform: none !important; }
    .tilt-shine { display: none; }
}

/* ── Reduced motion: switch the whole layer off ──────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-blur, .split-word {
        opacity: 1 !important; transform: none !important; filter: none !important;
    }
    [data-parallax], [data-skew], .tilt, .magnetic {
        transform: none !important;
    }
    .cursor-glow, .grain, .scroll-progress, .tilt-shine { display: none !important; }
    .marquee-track { animation: none !important; }
    .marquee {
        overflow-x: auto;
        -webkit-mask-image: none; mask-image: none;
    }
    .glow-pulse, .drift { animation: none !important; }
}