/* =========================================================================
   AmazingDens — magic layer styles
   Supporting CSS for static/js/magic.js plus effects that don't need JS:
     - Canvas + lantern positioning and blend modes
     - Candlelight breathing glow behind the hero
     - 3D perspective tilt transforms driven by CSS custom properties
     - Text shimmer on italic display emphasis
   Heavily reduced-motion friendly: everything disables cleanly.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Particle canvas + lantern overlay
   Both are fixed to the viewport, pointer-events:none so they never
   block interaction, and mix-blend-mode:screen so they brighten dark
   surfaces but barely register over bright imagery.
   ------------------------------------------------------------------------- */
.magic-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: screen;
}

/* The lantern follows the cursor as a warm candlelight glow.
   Brightness modulation is driven by JS (see magic.js → driftLantern)
   so the dim/bright cycle is aperiodic rather than a rigid keyframe
   loop. We just set a long CSS transition so JS can set new opacity
   targets and the browser eases between them smoothly. */
.magic-lantern {
    --lx: 50vw;
    --ly: 50vh;
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: screen;
    background: radial-gradient(
        220px circle at var(--lx) var(--ly),
        rgba(255, 176, 92, 0.58) 0%,
        rgba(255, 150, 70, 0.36) 22%,
        rgba(255, 120, 50, 0.16) 48%,
        rgba(255, 100, 40, 0.05) 68%,
        transparent 82%
    );
    opacity: 0.85;
    will-change: opacity;
}

/* Touch devices: no lantern, no cursor trail — they don't have a
   cursor. The canvas itself still runs (stars + fireflies). */
@media (pointer: coarse) {
    .magic-lantern { display: none; }
}

/* Hero breathing glow moved into the cursor lantern (see .magic-lantern
   below) — the candlelight now follows the user instead of sitting in
   a fixed spot behind the headline. */

/* -------------------------------------------------------------------------
   3D tilt on [data-tilt] cards

   magic.js writes the `transform` directly to the element's inline
   style on every mousemove. We override the base .card's `transition:
   transform` so the cursor follow is instant (a transition would make
   the tilt chase the cursor with a visible 400ms lag). We also have
   to beat `.card:hover { transform: translateY(-4px) }` from shared.css
   during hover — since we're writing transform inline, inline wins
   regardless of the hover rule. An empty `transform` is set here at
   rest so the preserve-3d context is established for the child
   translateZ nudges.
   ------------------------------------------------------------------------- */
[data-tilt] {
    transform-style: preserve-3d;
    transition: border-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
    will-change: transform;
    /* Perspective on the PARENT so child Z offsets render in 3D even
       before the first mousemove fires. Smaller value = stronger
       vanishing-point foreshortening, so the 3D feels more cinematic
       at the larger tilt angles JS now writes. */
    perspective: 900px;
}

/* Kill the transform transition from .card so tilt is snappy, and
   beat the .card:hover translateY so our JS-written transform wins
   even while the cursor is physically over the card. */
[data-tilt].card {
    transition: border-color var(--dur-base) var(--ease-out);
}

/* Push the image well forward in Z so tilting reveals strong parallax
   between the photo layer and the card body behind it. */
[data-tilt] .card__media {
    transform: translateZ(40px);
    transform-style: preserve-3d;
}

/* Pull the card body back a touch so the title sits behind the image
   edge on steep tilt angles. */
[data-tilt] .card__body {
    transform: translateZ(14px);
    transform-style: preserve-3d;
}

/* -------------------------------------------------------------------------
   Text shimmer — sweeps a soft highlight across the italic terracotta
   emphasis in the hero headline. Uses background-clip:text so the
   effect is contained to the letterforms.
   ------------------------------------------------------------------------- */
.hero__display em {
    background: linear-gradient(
        100deg,
        var(--accent-soft) 0%,
        var(--accent-soft) 35%,
        #f1b892 48%,
        #ffcfa3 52%,
        var(--accent-soft) 65%,
        var(--accent-soft) 100%
    );
    background-size: 240% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: shimmer 6s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% { background-position: 100% 0; }
    50%      { background-position: -20% 0; }
}

/* -------------------------------------------------------------------------
   Reduced-motion killswitch. magic.js already bails out entirely; these
   rules hide the elements it injected in case the media query flips
   after initial load, plus disable the pure-CSS effects.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .magic-canvas,
    .magic-lantern {
        display: none !important;
    }
    .hero__display em {
        animation: none !important;
        background: none;
        -webkit-text-fill-color: var(--accent-soft);
        color: var(--accent-soft);
    }
    /* Tilt JS is already guarded on prefers-reduced-motion so cards
       never receive inline transforms in the first place. No need to
       fight with !important here. */
}