/* =========================================================
 * Legion MU — cinematic hammer impact sequence
 * ========================================================= */
.legion-hero-character-idle,
.legion-hero-character-impact {
    transition: opacity 170ms linear, transform 300ms cubic-bezier(.2,.85,.25,1), filter 300ms ease;
    will-change: opacity, transform, filter;
}

.legion-hero-character-idle {
    opacity: 1;
}

.legion-hero-character-impact {
    opacity: 0;
    transform: translate3d(42px, -22px, 0) scale(.97) rotate(1deg);
}

body.legion-cinematic-throwing .legion-hero-character-idle {
    transform: translate3d(18px, -6px, 0) rotate(1.8deg) scale(1.015);
    filter:
        drop-shadow(-18px 18px 24px rgba(0,0,0,.86))
        drop-shadow(-8px 12px 15px rgba(119,8,2,.34))
        drop-shadow(0 0 22px rgba(255,126,36,.33));
}

body.legion-cinematic-impact .legion-hero-character-idle {
    opacity: 0;
    transform: translate3d(34px, -12px, 0) rotate(3deg) scale(1.025);
}

body.legion-cinematic-impact .legion-hero-character-impact {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
}

.legion-cinematic-layer {
    position: fixed;
    inset: 0;
    z-index: 85;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    contain: layout paint style;
}

.legion-cinematic-layer.is-ready {
    visibility: visible;
}

.legion-flying-hammer,
.legion-hammer-ghost {
    position: fixed;
    top: 0;
    left: 0;
    width: clamp(112px, 10.5vw, 180px);
    height: auto;
    opacity: 0;
    transform-origin: 50% 50%;
    will-change: transform, opacity, filter;
}

.legion-flying-hammer {
    z-index: 8;
    filter:
        drop-shadow(0 14px 13px rgba(0,0,0,.76))
        drop-shadow(0 0 13px rgba(255,117,25,.75));
}

.legion-hammer-ghost {
    z-index: 7;
    filter:
        blur(3px)
        brightness(1.42)
        saturate(1.25)
        drop-shadow(0 0 18px rgba(255,74,5,.92));
}

.legion-hammer-ghost.ghost-two {
    filter:
        blur(7px)
        brightness(1.6)
        saturate(1.3)
        drop-shadow(0 0 24px rgba(255,44,0,.86));
}

.legion-impact-flash,
.legion-impact-shockwave,
.legion-impact-core {
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.1);
    will-change: transform, opacity;
}

.legion-impact-flash {
    z-index: 10;
    width: min(52vw, 760px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255,255,255,.98) 0 4%,
        rgba(255,238,161,.96) 5% 12%,
        rgba(255,157,24,.86) 18%,
        rgba(255,53,5,.52) 34%,
        rgba(111,8,1,.16) 55%,
        transparent 72%);
    filter: blur(2px);
    mix-blend-mode: screen;
}

.legion-impact-core {
    z-index: 11;
    width: min(30vw, 420px);
    aspect-ratio: 1.55;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at center,
            rgba(255,255,229,1) 0 5%,
            rgba(255,197,48,.98) 7% 18%,
            rgba(255,73,3,.88) 33%,
            rgba(114,4,0,.44) 56%,
            transparent 74%);
    filter: blur(5px);
    mix-blend-mode: screen;
}

.legion-impact-shockwave {
    z-index: 9;
    width: 108px;
    aspect-ratio: 1;
    border: 6px solid rgba(255,211,105,.9);
    border-radius: 50%;
    box-shadow:
        0 0 18px rgba(255,157,22,.95),
        inset 0 0 18px rgba(255,73,0,.72);
    mix-blend-mode: screen;
}

#legion-debris-canvas {
    position: fixed;
    inset: 0;
    z-index: 12;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.legion-breakable {
    position: relative;
    transform-origin: var(--break-origin-x, 50%) var(--break-origin-y, 50%);
    will-change: transform, filter;
    transition:
        transform 620ms cubic-bezier(.08,.82,.18,1.12),
        filter 220ms ease;
}

.legion-fracture-overlay {
    position: absolute;
    inset: -3px;
    z-index: 70;
    display: block;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    overflow: hidden;
    background: url('../img/legionmu-cracks.svg?v=1') center / 100% 100% no-repeat;
    filter:
        drop-shadow(0 0 2px rgba(255,237,156,.98))
        drop-shadow(0 0 9px rgba(255,71,0,.96));
    transition: opacity 120ms linear;
}

/* Dark, jagged opening that makes each panel read as two separated pieces. */
.legion-fracture-overlay::before {
    content: "";
    position: absolute;
    top: -12%;
    left: var(--gash-x, 50%);
    width: clamp(7px, 1.15vw, 15px);
    height: 124%;
    transform: translateX(-50%) rotate(var(--gash-r, -4deg));
    background: linear-gradient(90deg,
        rgba(0,0,0,.98) 0 28%,
        rgba(255,87,8,.92) 42%,
        rgba(255,220,104,.9) 49%,
        rgba(255,69,5,.92) 58%,
        rgba(0,0,0,.98) 72% 100%);
    clip-path: polygon(38% 0, 88% 8%, 34% 17%, 82% 27%, 25% 39%, 77% 49%, 18% 61%, 74% 72%, 28% 82%, 80% 91%, 45% 100%, 0 100%, 26% 90%, 0 81%, 28% 70%, 0 58%, 32% 47%, 0 35%, 34% 24%, 0 13%, 28% 5%);
    box-shadow:
        0 0 7px rgba(255,77,4,.95),
        0 0 20px rgba(255,35,0,.62);
    opacity: .96;
}

.legion-breakable.is-cracked > .legion-fracture-overlay {
    opacity: var(--crack-opacity, .88);
    animation: legion-crack-pulse 540ms ease-out both;
}

.legion-breakable.is-hit {
    transform:
        translate3d(var(--break-x, 0px), var(--break-y, 0px), 0)
        rotate(var(--break-r, 0deg))
        scale(var(--break-scale, 1));
    filter:
        drop-shadow(0 9px 13px rgba(0,0,0,.82))
        drop-shadow(0 0 8px rgba(255,67,7,.43));
}

.legion-breakable.is-settling {
    transition:
        transform 980ms cubic-bezier(.2,.72,.22,1),
        filter 520ms ease;
}

.legion-shake {
    animation: legion-impact-shake 390ms linear both;
}

@keyframes legion-impact-shake {
    0%   { transform: translate3d(0,0,0); }
    12%  { transform: translate3d(-8px,4px,0) rotate(-.16deg); }
    25%  { transform: translate3d(9px,-5px,0) rotate(.18deg); }
    38%  { transform: translate3d(-7px,-3px,0) rotate(-.12deg); }
    52%  { transform: translate3d(6px,4px,0) rotate(.12deg); }
    68%  { transform: translate3d(-4px,1px,0); }
    84%  { transform: translate3d(3px,-2px,0); }
    100% { transform: translate3d(0,0,0); }
}

@keyframes legion-crack-pulse {
    0%   { opacity: 0; filter: brightness(2.4) drop-shadow(0 0 16px #ff5b00); }
    35%  { opacity: 1; filter: brightness(1.65) drop-shadow(0 0 10px #ff3b00); }
    100% { opacity: var(--crack-opacity, .82); filter: brightness(1) drop-shadow(0 0 6px rgba(255,61,0,.8)); }
}



/* =========================================================
 * Enhanced scene fracture: split modules harder and crack the background
 * ========================================================= */
.legion-breakable.is-hit {
    transform:
        translate3d(var(--break-x, 0px), var(--break-y, 0px), 0)
        rotate(var(--break-r, 0deg))
        scale(var(--break-scale, 1));
    filter:
        drop-shadow(0 18px 24px rgba(0,0,0,.88))
        drop-shadow(0 0 18px rgba(255,82,9,.58));
}

.legion-breakable.is-cracked > .legion-fracture-overlay::before {
    width: clamp(12px, 1.7vw, 24px);
    box-shadow:
        0 0 12px rgba(255,77,4,.98),
        0 0 30px rgba(255,35,0,.72);
}

.legion-breakable.is-cracked > .legion-fracture-overlay::after {
    content: "";
    position: absolute;
    top: 12%;
    left: calc(var(--gash-x, 50%) + 4%);
    width: clamp(4px, .8vw, 10px);
    height: 52%;
    transform: translateX(-50%) rotate(calc(var(--gash-r, -4deg) * -1.18));
    transform-origin: top center;
    background: linear-gradient(180deg, rgba(255,208,115,.9) 0 5%, rgba(255,109,20,.92) 12%, rgba(12,2,1,.98) 32%, rgba(255,80,6,.8) 54%, rgba(0,0,0,.98) 100%);
    clip-path: polygon(35% 0, 100% 9%, 38% 20%, 82% 33%, 26% 45%, 76% 58%, 18% 70%, 64% 84%, 42% 100%, 0 100%, 18% 80%, 0 64%, 22% 47%, 0 30%, 24% 12%, 0 0);
    opacity: .88;
    filter: drop-shadow(0 0 6px rgba(255,108,24,.95));
}

#header.legion-hero {
    --header-impact-x: 74%;
    --header-impact-y: 84%;
    --header-impact-angle: -6deg;
}

#header.legion-hero::before {
    content: "";
    position: absolute;
    left: var(--header-impact-x);
    top: var(--header-impact-y);
    z-index: 54;
    width: clamp(20px, 2vw, 32px);
    height: 400px;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(255,236,163,.98) 0 2%,
        rgba(255,131,27,.96) 7%,
        rgba(68,8,2,.94) 16%,
        rgba(0,0,0,.98) 34%,
        rgba(255,93,9,.92) 52%,
        rgba(0,0,0,.98) 72%,
        rgba(27,4,2,.88) 100%);
    clip-path: polygon(48% 0, 88% 4%, 37% 11%, 84% 17%, 26% 24%, 76% 33%, 20% 40%, 74% 49%, 28% 57%, 82% 65%, 38% 72%, 94% 80%, 52% 100%, 0 100%, 24% 84%, 0 72%, 22% 61%, 0 49%, 28% 39%, 0 28%, 24% 17%, 0 6%, 26% 0);
    transform: translate(-50%, -12%) rotate(var(--header-impact-angle)) scaleY(.12);
    transform-origin: 50% 0;
    filter: drop-shadow(0 0 7px rgba(255,112,26,.98)) drop-shadow(0 0 20px rgba(255,45,0,.68));
}

#header.legion-hero.legion-header-fractured::before {
    opacity: .94;
    animation: legion-header-crack-burst 980ms cubic-bezier(.12,.82,.18,1) both;
}

#header.legion-hero.legion-header-fractured::after {
    animation: legion-impact-glow 1.1s ease-in-out infinite, legion-header-impact-burst 700ms ease-out both;
}

.legion-home-grid {
    position: relative;
    isolation: isolate;
    --bg-impact-x: 50%;
    --bg-impact-y: 14%;
    --bg-impact-angle: -5deg;
}

.legion-home-grid::before,
.legion-home-grid::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 0;
}

.legion-home-grid::before {
    inset: -24px -18px;
    z-index: 0;
    background:
        radial-gradient(circle at var(--bg-impact-x) var(--bg-impact-y), rgba(255,247,188,.28) 0 2.5%, rgba(255,168,56,.22) 5%, rgba(107,17,6,.18) 10%, transparent 24%),
        radial-gradient(circle at var(--bg-impact-x) var(--bg-impact-y), rgba(255,112,29,.18) 0 0, rgba(255,112,29,.14) 16%, transparent 34%);
    mix-blend-mode: screen;
    filter: blur(4px);
}

.legion-home-grid::after {
    top: -36px;
    bottom: -28px;
    left: var(--bg-impact-x);
    z-index: 1;
    width: clamp(30px, 2.5vw, 44px);
    background: linear-gradient(180deg,
        rgba(255,239,167,.94) 0 2%,
        rgba(255,138,35,.94) 6%,
        rgba(68,8,2,.96) 16%,
        rgba(0,0,0,.98) 34%,
        rgba(255,84,8,.92) 50%,
        rgba(0,0,0,.98) 74%,
        rgba(18,3,2,.92) 100%);
    clip-path: polygon(44% 0, 92% 4%, 38% 11%, 86% 18%, 25% 25%, 75% 33%, 18% 41%, 72% 49%, 26% 56%, 82% 66%, 35% 73%, 90% 82%, 58% 100%, 0 100%, 20% 86%, 0 75%, 18% 63%, 0 51%, 22% 39%, 0 27%, 26% 16%, 0 5%, 24% 0);
    transform: translateX(-50%) rotate(var(--bg-impact-angle)) scaleY(.12);
    transform-origin: 50% 0;
    filter: drop-shadow(0 0 9px rgba(255,106,23,.98)) drop-shadow(0 0 30px rgba(255,44,0,.72));
}

.legion-home-grid > * {
    position: relative;
    z-index: 2;
}

.legion-home-grid.legion-background-fractured {
    animation: legion-background-rattle 540ms linear both;
}

.legion-home-grid.legion-background-fractured::before {
    opacity: .95;
    animation: legion-background-scorch 820ms ease-out both;
}

.legion-home-grid.legion-background-fractured::after {
    opacity: .92;
    animation: legion-background-crack-burst 1080ms cubic-bezier(.12,.82,.18,1) both;
}


#container {
    position: relative;
    isolation: isolate;
    --container-impact-x: 50%;
    --container-impact-angle: -5deg;
}

#container::before,
#container::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 0;
}

#container::before {
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at var(--container-impact-x) 6%, rgba(255,235,172,.24) 0 1%, rgba(255,154,49,.16) 5%, rgba(115,18,6,.14) 11%, transparent 24%),
        linear-gradient(180deg, transparent 0 12%, rgba(17, 3, 2, .06) 35%, transparent 68%);
    mix-blend-mode: screen;
    filter: blur(6px);
}

#container::after {
    top: 0;
    bottom: 0;
    left: var(--container-impact-x);
    z-index: 1;
    width: clamp(24px, 2.2vw, 40px);
    background: linear-gradient(180deg,
        rgba(255,238,171,.96) 0 2%,
        rgba(255,126,24,.96) 8%,
        rgba(67,7,2,.96) 16%,
        rgba(0,0,0,.98) 35%,
        rgba(255,77,6,.86) 54%,
        rgba(0,0,0,.98) 78%,
        rgba(20,3,2,.94) 100%);
    clip-path: polygon(48% 0, 95% 5%, 42% 12%, 87% 18%, 28% 24%, 78% 32%, 20% 38%, 74% 46%, 26% 55%, 82% 63%, 34% 70%, 89% 78%, 42% 86%, 64% 100%, 0 100%, 22% 84%, 0 72%, 20% 58%, 0 46%, 24% 34%, 0 20%, 25% 10%, 0 0);
    transform: translateX(-50%) rotate(var(--container-impact-angle)) scaleY(.08);
    transform-origin: 50% 0;
    filter: drop-shadow(0 0 10px rgba(255,115,20,.92)) drop-shadow(0 0 24px rgba(255,43,0,.72));
}

#container.legion-container-fractured::before {
    opacity: .95;
    animation: legion-background-scorch 900ms ease-out both;
}

#container.legion-container-fractured::after {
    opacity: .96;
    animation: legion-container-crack-burst 1220ms cubic-bezier(.12,.82,.18,1) both;
}


.legion-zoom-shell,
#navbar,
.header-info-container,
.footer {
    position: relative;
    isolation: isolate;
    --scene-fracture-x: 50%;
    --scene-fracture-y: 50%;
    --scene-fracture-angle: -3deg;
}

.legion-zoom-shell::before,
.legion-zoom-shell::after,
#navbar::before,
#navbar::after,
.header-info-container::before,
.header-info-container::after,
.footer::before,
.footer::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 0;
}

.legion-zoom-shell::before,
#navbar::before,
.header-info-container::before,
.footer::before {
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at var(--scene-fracture-x) var(--scene-fracture-y), rgba(255,235,172,.18) 0 1%, rgba(255,156,54,.12) 6%, rgba(91,14,5,.12) 14%, transparent 28%),
        linear-gradient(180deg, transparent 0 18%, rgba(20,4,3,.08) 45%, transparent 74%);
    mix-blend-mode: screen;
    filter: blur(5px);
}

.legion-zoom-shell::after,
#navbar::after,
.header-info-container::after,
.footer::after {
    top: -6%;
    bottom: -6%;
    left: var(--scene-fracture-x);
    z-index: 2;
    width: clamp(12px, 1.5vw, 28px);
    background: linear-gradient(180deg,
        rgba(255,240,178,.96) 0 2%,
        rgba(255,130,24,.96) 8%,
        rgba(58,7,2,.96) 16%,
        rgba(0,0,0,.98) 34%,
        rgba(255,80,8,.82) 55%,
        rgba(0,0,0,.98) 78%,
        rgba(20,3,2,.94) 100%);
    clip-path: polygon(44% 0, 100% 4%, 40% 10%, 86% 17%, 24% 24%, 77% 31%, 17% 39%, 72% 48%, 26% 57%, 84% 66%, 35% 72%, 91% 80%, 43% 87%, 66% 100%, 0 100%, 22% 84%, 0 72%, 18% 58%, 0 44%, 24% 32%, 0 18%, 24% 8%, 0 0);
    transform: translateX(-50%) rotate(var(--scene-fracture-angle)) scaleY(.04);
    transform-origin: 50% 0;
    filter: drop-shadow(0 0 8px rgba(255,110,22,.94)) drop-shadow(0 0 24px rgba(255,45,0,.7));
}

.legion-zoom-shell.legion-scene-fractured::before,
#navbar.legion-scene-fractured::before,
.header-info-container.legion-scene-fractured::before,
.footer.legion-scene-fractured::before {
    opacity: .92;
    animation: legion-background-scorch 900ms ease-out both;
}

.legion-zoom-shell.legion-scene-fractured::after,
#navbar.legion-scene-fractured::after,
.header-info-container.legion-scene-fractured::after,
.footer.legion-scene-fractured::after {
    opacity: .96;
    animation: legion-scene-crack-burst 1180ms cubic-bezier(.12,.82,.18,1) both;
}

@keyframes legion-scene-crack-burst {
    0% { opacity: 0; transform: translateX(-50%) rotate(var(--scene-fracture-angle)) scaleY(.04); }
    28% { opacity: 1; transform: translateX(-50%) rotate(var(--scene-fracture-angle)) scaleY(1.08); }
    100% { opacity: .96; transform: translateX(-50%) rotate(var(--scene-fracture-angle)) scaleY(1); }
}

@keyframes legion-container-crack-burst {
    0% { opacity: 0; transform: translateX(-50%) rotate(var(--container-impact-angle)) scaleY(.04); }
    28% { opacity: 1; transform: translateX(-50%) rotate(var(--container-impact-angle)) scaleY(1.1); }
    100% { opacity: .96; transform: translateX(-50%) rotate(var(--container-impact-angle)) scaleY(1); }
}

@keyframes legion-header-crack-burst {
    0% { opacity: 0; transform: translate(-50%, -8%) rotate(var(--header-impact-angle)) scaleY(.08); }
    35% { opacity: 1; transform: translate(-50%, -10%) rotate(var(--header-impact-angle)) scaleY(1.08); }
    100% { opacity: .94; transform: translate(-50%, -12%) rotate(var(--header-impact-angle)) scaleY(1); }
}

@keyframes legion-header-impact-burst {
    0% { filter: blur(7px) brightness(2); opacity: .95; }
    100% { filter: blur(7px) brightness(1); opacity: .78; }
}

@keyframes legion-background-crack-burst {
    0% { opacity: 0; transform: translateX(-50%) rotate(var(--bg-impact-angle)) scaleY(.08); }
    35% { opacity: 1; transform: translateX(-50%) rotate(var(--bg-impact-angle)) scaleY(1.06); }
    100% { opacity: .92; transform: translateX(-50%) rotate(var(--bg-impact-angle)) scaleY(1); }
}

@keyframes legion-background-scorch {
    0% { opacity: 0; transform: scale(.55); }
    25% { opacity: 1; transform: scale(.92); }
    100% { opacity: .88; transform: scale(1); }
}

@keyframes legion-background-rattle {
    0% { transform: translate3d(0,0,0); }
    16% { transform: translate3d(-10px, 5px, 0) rotate(-.18deg); }
    30% { transform: translate3d(11px, -6px, 0) rotate(.16deg); }
    48% { transform: translate3d(-7px, -3px, 0) rotate(-.12deg); }
    66% { transform: translate3d(6px, 4px, 0); }
    82% { transform: translate3d(-3px, 1px, 0); }
    100% { transform: translate3d(0,0,0); }
}

@media (max-width: 900px) {
    .legion-cinematic-layer {
        display: none;
    }

    .legion-hero-character-impact {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .legion-cinematic-layer {
        display: none !important;
    }

    .legion-breakable,
    .legion-fracture-overlay,
    .legion-hero-character-idle,
    .legion-hero-character-impact {
        animation: none !important;
        transition: none !important;
    }
}