/* ====================================================
   Magic Encounter System — Cat + future characters
   Effect layers (bottom → top):
     1. back smoke   (z 1) — grote zachte rookpluimen ACHTER de kat
     2. mid smoke    (z 2) — kleinere rookdetails + energy flicker
     3. cat          (z 3) — de toverkat zelf (video/key-canvas + schaduw)
     4. sparks       (z 4) — canvas; heldere, energieke vonken
     5. front smoke  (z 5) — lichte rook deels VÓÓR de kat
     6. sparkles     (z 6) — canvas; fijne magische glinsters
   Z-index layer: 900 (below modals at 1000, above content)
   ==================================================== */

/*
   Asset measurements at the compositor's 480px buffer (first frame):
   - after mirroring, the visible tail starts at x=53 (53 / 480 = 11.0417%)
   - the visible paws end at y=461 (19 / 480 = 3.9583% transparent bottom)
   The x compensation also includes the compositor's two-pixel alpha feather.
   Keeping these values relative to the rendered square makes the same visual
   home position work at every responsive size.
*/
:root {
    --magic-cat-home-x: 0px;
    --magic-cat-home-y: 0px;
    --magic-cat-asset-x: -11.8%;
    --magic-cat-asset-y: 3.9583%;
    --magic-cat-height: clamp(320px, 44vh, 460px);
    --magic-cat-max-width: 44vw;
}

/* Fixed fullscreen overlay: pointer-events none so page stays interactive. */
.magic-encounter-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 900;
    overflow: hidden;
    overflow: clip; /* only the viewport clips the moving tail/effects */
}

/* Viewport-coupled home position. This layer is never animated. */
.magic-encounter-positioner {
    position: absolute;
    left: var(--magic-cat-home-x);
    bottom: var(--magic-cat-home-y);
}

/* Compensates only for measured transparent padding in the square source. */
.magic-encounter-asset-alignment {
    display: inline-block;
    transform: translate(var(--magic-cat-asset-x), var(--magic-cat-asset-y));
}

/* The source has its tail on the right; mirror it so the tail is at the left
   viewport edge and the cat/lantern face inward toward the page. */
.magic-encounter-orientation {
    display: inline-block;
    transform: scaleX(-1);
}

/* ---- Animation state machine ----
   is-spawning   : Appearing  (rook → kat fade-in → effecten zakken weg)
   (rust)        : Visible    (alleen de kat, geen effecten)
   is-despawning : Disappearing (rook zwelt aan → kat lost op → rook trekt weg)
   De JS-brug (halloween.encounter) bewaakt dat er nooit twee fases tegelijk
   lopen en verwijdert 'is-spawning' na het settle-moment. */
.magic-encounter-animator {
    position: relative;
    display: inline-block;
    isolation: isolate;
    overflow: visible;
}

/* ---- Layer 3: de kat zelf (fade/scale los van de effecten) ---- */
.magic-encounter-figure {
    position: relative;
    z-index: 3;
}

.magic-encounter-animator.is-spawning .magic-encounter-figure {
    animation: magic-cat-spawn 0.86s cubic-bezier(.18,.89,.32,1.18) 0.12s both;
}

/* Kat wordt door de rook opgenomen: korte vertraging zodat de rook eerst zwelt */
.magic-encounter-animator.is-despawning .magic-encounter-figure {
    animation: magic-cat-despawn 0.72s ease-in 0.24s forwards;
}

/* ---- Video ---- */
/* NOTE: no mix-blend-mode:screen here anymore. With a BLACK cat that blend
   mode made the cat itself invisible on the dark site. Transparency is done
   by the edge-connected black-key compositor (canvas) instead. */
.magic-encounter-video {
    display: block;
    height: var(--magic-cat-height);
    width: auto;
    max-width: var(--magic-cat-max-width);
    object-fit: contain;
    background: transparent;
    vertical-align: bottom;
}

/* Canvas output of the edge-connected black-key compositor */
.magic-encounter-canvas {
    display: block;
    height: var(--magic-cat-height);
    width: auto;
    max-width: var(--magic-cat-max-width);
    vertical-align: bottom;
}

/* ---- Ground shadow under the cat ---- */
.magic-encounter-shadow {
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 62%;
    height: 16px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    filter: blur(10px);
    opacity: 0;
    z-index: 0;
}

.magic-encounter-animator.is-spawning  .magic-encounter-shadow { animation: magic-shadow-in  0.55s ease forwards; }
.magic-encounter-animator.is-despawning .magic-encounter-shadow { animation: magic-shadow-out 0.50s ease 0.15s forwards; }

/* ---- Effect layer containers ---- */
.magic-fx {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    overflow: visible;
}

.magic-fx--aura  { z-index: 0; bottom: -15%; width: 220%; height: 175%; }
.magic-fx--back  { z-index: 1; bottom: -15%; width: 220%; height: 155%; }
.magic-fx--mid   { z-index: 2; bottom: -10%; width: 195%; height: 125%; }
.magic-fx--front { z-index: 5; bottom: -6%;  width: 175%; height: 88%; }

/* ---- Magical charge, bloom and impact ring ---- */
.magic-aura,
.magic-flash,
.magic-shockwave {
    position: absolute;
    left: 50%;
    top: 54%;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.magic-aura {
    width: 72%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 225, 151, .46) 0 5%, rgba(255, 143, 48, .24) 22%, rgba(153, 67, 216, .18) 48%, transparent 72%);
    box-shadow: 0 0 5rem rgba(226, 98, 255, .18), 0 0 3.5rem rgba(255, 132, 45, .22);
    mix-blend-mode: screen;
}

.magic-flash {
    width: 58%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 252, 218, .96) 0 3%, rgba(255, 196, 83, .75) 9%, rgba(207, 94, 255, .34) 28%, rgba(255, 122, 27, .13) 48%, transparent 68%);
    mix-blend-mode: screen;
}

.magic-shockwave {
    width: 34%;
    aspect-ratio: 1;
    border: clamp(1px, .45vw, 3px) solid rgba(255, 198, 93, .68);
    border-radius: 50%;
    box-shadow: 0 0 1.2rem rgba(255, 150, 50, .42), inset 0 0 1rem rgba(197, 91, 255, .30);
}

.magic-encounter-animator.is-spawning .magic-aura { animation: magic-aura-build 1.75s ease-out both; }
.magic-encounter-animator.is-spawning .magic-flash { animation: magic-burst-flash .62s ease-out .12s both; }
.magic-encounter-animator.is-spawning .magic-shockwave { animation: magic-shockwave 1.12s cubic-bezier(.16,.72,.28,1) .16s both; }
.magic-encounter-animator.is-despawning .magic-aura { animation: magic-aura-collapse 1.55s ease-out both; }
.magic-encounter-animator.is-despawning .magic-flash { animation: magic-burst-flash .58s ease-out .14s both; }
.magic-encounter-animator.is-despawning .magic-shockwave { animation: magic-shockwave .98s cubic-bezier(.16,.72,.28,1) .18s both; }

/* ---- Smoke puffs (back / mid / front) ----
   Zachte randen worden in de gradient zelf gebakken (geen dure blur filters),
   alleen transform + opacity animeren → GPU-gecomponeerd. */
.magic-smoke-puff {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    will-change: transform, opacity;
    aspect-ratio: var(--puff-aspect, 1);
    transform-origin: var(--puff-origin, 50% 72%);
    background:
        radial-gradient(circle at 28% 61%,
            rgba(230, 208, 233, .78) 0 10%, rgba(143, 101, 160, .58) 24%, rgba(49, 31, 62, 0) 48%),
        radial-gradient(circle at 69% 43%,
            rgba(207, 170, 222, .70) 0 12%, rgba(111, 72, 135, .54) 27%, rgba(40, 25, 53, 0) 51%),
        radial-gradient(ellipse at 49% 66%,
            rgba(171, 132, 190, .68) 0 23%, rgba(82, 54, 101, .54) 43%, rgba(26, 17, 35, .24) 62%, rgba(12, 9, 18, 0) 78%);
}

/* Ruststand: geen rook zichtbaar, alleen de kat */
.magic-encounter-animator:not(.is-spawning):not(.is-despawning) .magic-smoke-puff,
.magic-encounter-animator:not(.is-spawning):not(.is-despawning) .magic-energy-flicker,
.magic-encounter-animator:not(.is-spawning):not(.is-despawning) .magic-aura,
.magic-encounter-animator:not(.is-spawning):not(.is-despawning) .magic-flash,
.magic-encounter-animator:not(.is-spawning):not(.is-despawning) .magic-shockwave {
    display: none;
}

/* ---- Back smoke: seven large, asymmetrical lobes spanning 2.2 cat widths ---- */
.magic-smoke-puff--back-1 { width: 48%; left: -3%; bottom: -2%; --puff-delay: .10s; --puff-dur: 1.90s; --smoke-x: -18%; --smoke-rotate: -13deg; --puff-aspect: 1.15; }
.magic-smoke-puff--back-2 { width: 45%; left: 15%; bottom: 2%; --puff-delay: .14s; --puff-dur: 1.82s; --smoke-x: -8%; --smoke-rotate: 10deg; --puff-aspect: .92; }
.magic-smoke-puff--back-3 { width: 50%; left: 38%; bottom: -5%; --puff-delay: .18s; --puff-dur: 1.94s; --smoke-x: 7%; --smoke-rotate: -8deg; --puff-aspect: 1.18; }
.magic-smoke-puff--back-4 { width: 43%; left: 66%; bottom: 5%; --puff-delay: .22s; --puff-dur: 1.76s; --smoke-x: 20%; --smoke-rotate: 14deg; --puff-aspect: .88; }
.magic-smoke-puff--back-5 { width: 34%; left: 4%; bottom: 38%; --puff-delay: .24s; --puff-dur: 1.68s; --smoke-x: -14%; --smoke-rotate: 9deg; }
.magic-smoke-puff--back-6 { width: 39%; left: 32%; bottom: 48%; --puff-delay: .28s; --puff-dur: 1.84s; --smoke-x: 2%; --smoke-rotate: -12deg; --puff-aspect: 1.22; }
.magic-smoke-puff--back-7 { width: 35%; left: 62%; bottom: 40%; --puff-delay: .32s; --puff-dur: 1.70s; --smoke-x: 16%; --smoke-rotate: 11deg; --puff-aspect: .9; }

/* ---- Mid smoke: denser rolling core that briefly wraps the silhouette ---- */
.magic-smoke-puff--mid-1 { width: 38%; left: 0; bottom: -1%; --puff-delay: .13s; --puff-dur: 1.54s; --smoke-x: -13%; --smoke-rotate: -10deg; }
.magic-smoke-puff--mid-2 { width: 35%; left: 20%; bottom: 10%; --puff-delay: .17s; --puff-dur: 1.48s; --smoke-x: -5%; --smoke-rotate: 12deg; --puff-aspect: .9; }
.magic-smoke-puff--mid-3 { width: 40%; left: 42%; bottom: 1%; --puff-delay: .20s; --puff-dur: 1.58s; --smoke-x: 7%; --smoke-rotate: -9deg; --puff-aspect: 1.16; }
.magic-smoke-puff--mid-4 { width: 34%; left: 70%; bottom: 12%; --puff-delay: .24s; --puff-dur: 1.44s; --smoke-x: 15%; --smoke-rotate: 13deg; }
.magic-smoke-puff--mid-5 { width: 31%; left: 35%; bottom: 48%; --puff-delay: .29s; --puff-dur: 1.50s; --smoke-x: 3%; --smoke-rotate: -14deg; --puff-aspect: .86; }

/* ---- Front smoke: lower-opacity curls crossing in front only briefly ---- */
.magic-smoke-puff--front-1 { width: 35%; left: -2%; bottom: -5%; --puff-delay: .18s; --puff-dur: 1.32s; --smoke-x: -16%; --smoke-rotate: -12deg; }
.magic-smoke-puff--front-2 { width: 32%; left: 21%; bottom: 4%; --puff-delay: .22s; --puff-dur: 1.26s; --smoke-x: -5%; --smoke-rotate: 10deg; --puff-aspect: .9; }
.magic-smoke-puff--front-3 { width: 36%; left: 46%; bottom: -4%; --puff-delay: .26s; --puff-dur: 1.36s; --smoke-x: 7%; --smoke-rotate: -8deg; --puff-aspect: 1.18; }
.magic-smoke-puff--front-4 { width: 30%; left: 73%; bottom: 7%; --puff-delay: .30s; --puff-dur: 1.22s; --smoke-x: 17%; --smoke-rotate: 13deg; }
.magic-smoke-puff--front-5 { width: 27%; left: 37%; bottom: 43%; --puff-delay: .34s; --puff-dur: 1.24s; --smoke-x: 1%; --smoke-rotate: -11deg; }

.magic-fx--front .magic-smoke-puff {
    background:
        radial-gradient(circle at 30% 62%, rgba(239, 218, 237, .60) 0 11%, rgba(142, 99, 157, .42) 27%, transparent 49%),
        radial-gradient(circle at 68% 43%, rgba(214, 181, 225, .52) 0 13%, rgba(118, 76, 139, .38) 29%, transparent 52%),
        radial-gradient(ellipse at 50% 65%, rgba(156, 112, 174, .45) 0 25%, rgba(69, 41, 84, .25) 54%, transparent 78%);
}

/* ---- Verschijnen: rook stijgt op, groeit en lost op ---- */
.magic-encounter-animator.is-spawning .magic-fx--back .magic-smoke-puff {
    animation: magic-smoke-rise-big var(--puff-dur, 1.85s) cubic-bezier(.16,.66,.28,1) var(--puff-delay, 0ms) both;
}
.magic-encounter-animator.is-spawning .magic-fx--mid .magic-smoke-puff {
    animation: magic-smoke-rise-med var(--puff-dur, 1.5s) cubic-bezier(.16,.66,.28,1) var(--puff-delay, 0ms) both;
}
.magic-encounter-animator.is-spawning .magic-fx--front .magic-smoke-puff {
    animation: magic-smoke-sway-light var(--puff-dur, 1.28s) cubic-bezier(.16,.66,.28,1) var(--puff-delay, 0ms) both;
}

/* ---- Verdwijnen: rook zwelt eerst aan, neemt de kat op, trekt dan weg ---- */
.magic-encounter-animator.is-despawning .magic-fx--back .magic-smoke-puff {
    animation: magic-smoke-swell-big var(--puff-dur, 1.45s) ease-out var(--puff-delay, 0ms) both;
}
.magic-encounter-animator.is-despawning .magic-fx--mid .magic-smoke-puff {
    animation: magic-smoke-swell-med var(--puff-dur, 1.28s) ease-out var(--puff-delay, 0ms) both;
}
.magic-encounter-animator.is-despawning .magic-fx--front .magic-smoke-puff {
    animation: magic-smoke-swell-light var(--puff-dur, 1.12s) ease-out var(--puff-delay, 0ms) both;
}

/* ---- Energy flicker (korte magische ontlading in de rook) ---- */
.magic-energy-flicker {
    position: absolute;
    inset: -10% -8% -5%;
    border-radius: 50%;
    opacity: 0;
    will-change: opacity;
    background: radial-gradient(
        circle,
        rgba(255, 224, 143, .58) 0%,
        rgba(255, 142, 51, .30) 22%,
        rgba(194, 87, 255, .26) 48%,
        rgba(20, 14, 28, 0) 72%
    );
    mix-blend-mode: screen;
}

.magic-encounter-animator.is-spawning .magic-energy-flicker {
    animation: magic-energy-flicker 1.35s ease-out .05s both;
}
.magic-encounter-animator.is-despawning .magic-energy-flicker {
    animation: magic-energy-flicker 1.20s ease-out .04s both;
}

/* ---- Sparks & sparkles canvases (door JS geplaatst) ---- */
.magic-sparks-canvas,
.magic-sparkles-canvas {
    position: absolute;
    pointer-events: none;
    max-width: none;
    max-height: none;
}
.magic-sparks-canvas   { z-index: 4; }
.magic-sparkles-canvas { z-index: 6; mix-blend-mode: screen; }

/* ---- Dev trigger button ---- */
.magic-encounter-dev-btn {
    position: fixed;
    bottom: 12px;
    left: 12px;
    z-index: 901;
    padding: 8px 14px;
    border: 1px dashed rgba(255, 180, 60, 0.8);
    border-radius: 999px;
    background: rgba(10, 8, 18, 0.9);
    color: #ffb43c;
    font: 600 13px/1 var(--font-ui, "Source Sans 3", sans-serif);
    letter-spacing: 0.06em;
    cursor: pointer;
    pointer-events: auto;
    opacity: 0.85;
    transition: opacity 0.2s, background 0.2s;
}

.magic-encounter-dev-btn:hover { opacity: 1; background: rgba(28, 20, 8, 0.95); }

/* ==== Keyframes ==== */

@keyframes magic-cat-spawn {
    0%, 14% { opacity: 0; transform: translateY(42px) scale(.64) rotate(-4deg); }
    56%  { opacity: .96; transform: translateY(-5px) scale(1.06) rotate(0deg); }
    80%  { opacity: 1; transform: translateY(2px) scale(.985); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes magic-cat-despawn {
    0%, 16% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
    46%  { opacity: .74; transform: translateY(7px) scale(.96); filter: brightness(1.22); }
    100% { opacity: 0; transform: translateY(32px) scale(.68); filter: brightness(1.45); }
}

@keyframes magic-shadow-in {
    0%   { opacity: 0; }
    100% { opacity: 0.62; }
}

@keyframes magic-shadow-out {
    0%   { opacity: 0.62; }
    100% { opacity: 0; }
}

@keyframes magic-aura-build {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.18) rotate(-8deg); }
    10%  { opacity: .26; }
    28%  { opacity: .9; transform: translate(-50%, -50%) scale(.72) rotate(2deg); }
    56%  { opacity: .48; transform: translate(-50%, -50%) scale(1.12) rotate(8deg); }
    100% { opacity: 0; transform: translate(-50%, -55%) scale(1.42) rotate(14deg); }
}

@keyframes magic-aura-collapse {
    0%   { opacity: .08; transform: translate(-50%, -50%) scale(.52); }
    18%  { opacity: .62; transform: translate(-50%, -50%) scale(.76); }
    42%  { opacity: .9; transform: translate(-50%, -50%) scale(1.08); }
    100% { opacity: 0; transform: translate(-50%, -54%) scale(1.48); }
}

@keyframes magic-burst-flash {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.14); }
    24%  { opacity: .95; transform: translate(-50%, -50%) scale(.48); }
    48%  { opacity: .72; transform: translate(-50%, -50%) scale(.88); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.46); }
}

@keyframes magic-shockwave {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.24); }
    16%  { opacity: .86; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(4.4); }
}

/* Smoke — appear: dense impact, broad billow, then upward dispersal */
@keyframes magic-smoke-rise-big {
    0%   { opacity: 0; transform: translate(0, 14%) scale(.24) rotate(0deg); }
    12%  { opacity: .82; transform: translate(0, 2%) scale(.68) rotate(0deg); }
    34%  { opacity: .76; transform: translate(0, -8%) scale(1.06) rotate(0deg); }
    64%  { opacity: .42; }
    100% { opacity: 0; transform: translate(var(--smoke-x), -68%) scale(1.58) rotate(var(--smoke-rotate)); }
}

@keyframes magic-smoke-rise-med {
    0%   { opacity: 0; transform: translate(0, 12%) scale(.26) rotate(0deg); }
    14%  { opacity: .76; transform: translate(0, 0) scale(.72); }
    38%  { opacity: .64; transform: translate(0, -12%) scale(1.08) rotate(0deg); }
    100% { opacity: 0; transform: translate(var(--smoke-x), -62%) scale(1.48) rotate(var(--smoke-rotate)); }
}

@keyframes magic-smoke-sway-light {
    0%   { opacity: 0; transform: translate(0, 10%) scale(.30); }
    16%  { opacity: .58; transform: translate(0, 0) scale(.76); }
    48%  { opacity: .36; transform: translate(0, -16%) scale(1.04); }
    100% { opacity: 0; transform: translate(var(--smoke-x), -58%) scale(1.38) rotate(var(--smoke-rotate)); }
}

/* Smoke — disappear: eerst aanzwellen rond de kat, dan wegtrekken */
@keyframes magic-smoke-swell-big {
    0%   { opacity: 0; transform: translate(var(--smoke-x), -42%) scale(.48) rotate(var(--smoke-rotate)); }
    20%  { opacity: .48; }
    42%  { opacity: .86; transform: translate(0, -4%) scale(1.02) rotate(0deg); }
    62%  { opacity: .68; transform: translate(0, -10%) scale(1.18); }
    100% { opacity: 0; transform: translate(var(--smoke-x), -70%) scale(1.62) rotate(var(--smoke-rotate)); }
}

@keyframes magic-smoke-swell-med {
    0%   { opacity: 0; transform: translate(var(--smoke-x), -34%) scale(.44); }
    24%  { opacity: .46; }
    46%  { opacity: .78; transform: translate(0, -2%) scale(1.04); }
    100% { opacity: 0; transform: translate(var(--smoke-x), -64%) scale(1.50) rotate(var(--smoke-rotate)); }
}

@keyframes magic-smoke-swell-light {
    0%   { opacity: 0; transform: translate(var(--smoke-x), -28%) scale(.42); }
    30%  { opacity: .34; }
    50%  { opacity: .58; transform: translate(0, 0) scale(1.02); }
    100% { opacity: 0; transform: translate(var(--smoke-x), -58%) scale(1.42) rotate(var(--smoke-rotate)); }
}

@keyframes magic-energy-flicker {
    0%   { opacity: 0; }
    10%  { opacity: .32; }
    19%  { opacity: .92; }
    31%  { opacity: .26; }
    46%  { opacity: .76; }
    61%  { opacity: .30; }
    74%  { opacity: .58; }
    100% { opacity: 0; }
}

/* ==== Accessibility: reduced motion ==== */
@media (prefers-reduced-motion: reduce) {
    .magic-encounter-animator.is-spawning .magic-encounter-figure {
        animation: magic-cat-fade-in 0.35s ease both;
    }
    .magic-encounter-animator.is-despawning .magic-encounter-figure {
        animation: magic-cat-fade-out 0.35s ease forwards;
    }
    .magic-smoke-puff,
    .magic-energy-flicker,
    .magic-aura,
    .magic-flash,
    .magic-shockwave,
    .magic-sparks-canvas,
    .magic-sparkles-canvas {
        display: none !important;
    }
    @keyframes magic-cat-fade-in  { from { opacity: 0; } to { opacity: 1; } }
    @keyframes magic-cat-fade-out { from { opacity: 1; } to { opacity: 0; } }
}

/* ==== Mobile sizing ==== */
@media (max-width: 768px) {
    :root {
        --magic-cat-height: clamp(200px, 32vh, 320px);
        --magic-cat-max-width: 46vw;
    }
}