/* =========================================================
   HANGMAN RESCUE - SIX-STAGE WRONG GUESS ANIMATION
   ========================================================= */

#scene {
    --hr-pirate-x: 0px;
    --hr-kraken-x: 0px;
    --hr-kraken-y: 0px;
    --hr-kraken-scale: 1;
}

/* ---------------------------------------------------------
   PIRATE MOVEMENT
   Uses CSS translate separately from the existing transform,
   preserving the current desktop and mobile plank alignment.
   --------------------------------------------------------- */

#scene .hr-premium-pirate-art {
    translate: var(--hr-pirate-x) 0;

    transition:
        translate 680ms cubic-bezier(0.22, 0.76, 0.25, 1),
        filter 300ms ease,
        opacity 300ms ease;

    will-change:
        translate,
        rotate,
        filter,
        opacity;
}

#scene .hr-premium-pirate-fallback {
    translate: var(--hr-pirate-x) 0;

    transition:
        translate 680ms cubic-bezier(0.22, 0.76, 0.25, 1);
}

/* Stage 1: pirate nervously shakes. */

#scene.hr-effect-pirate-shake
.hr-premium-pirate-art {
    animation:
        hrPirateNervousShake 720ms ease-in-out;
}

/* Stage 2 and later: small stepping bounce. */

#scene.hr-effect-pirate-step
.hr-premium-pirate-art {
    animation:
        hrPirateStepBounce 620ms ease-out;
}

/* ---------------------------------------------------------
   KRAKEN MOVEMENT
   Applied to the Kraken host, leaving the transparent image
   sizing and existing pseudo-element transform untouched.
   --------------------------------------------------------- */

#scene #kraken,
#scene .kraken {
    translate:
        var(--hr-kraken-x)
        var(--hr-kraken-y);

    scale:
        var(--hr-kraken-scale);

    transition:
        translate 760ms cubic-bezier(0.18, 0.78, 0.22, 1),
        scale 760ms cubic-bezier(0.18, 0.78, 0.22, 1),
        filter 350ms ease;

    transform-origin:
        center bottom !important;

    will-change:
        translate,
        scale,
        rotate,
        filter;
}

/* Stage 3: Kraken pushes upward through the water. */

#scene.hr-effect-kraken-rise
#kraken,
#scene.hr-effect-kraken-rise
.kraken {
    animation:
        hrKrakenRiseSurge 820ms ease-out;
}

/* Stage 4: tentacles appear to reach closer to the plank. */

#scene.hr-effect-tentacle-reach
#kraken,
#scene.hr-effect-tentacle-reach
.kraken {
    animation:
        hrKrakenTentacleReach 900ms ease-in-out;
}

/* Stage 5 and 6: stronger monster glow. */

#scene[data-wrong-stage="5"]
#kraken::before,
#scene[data-wrong-stage="5"]
.kraken::before,
#scene[data-wrong-stage="6"]
#kraken::before,
#scene[data-wrong-stage="6"]
.kraken::before {
    filter:
        drop-shadow(
            0 10px 9px
            rgba(0, 4, 20, 0.62)
        )
        drop-shadow(
            0 0 15px
            rgba(135, 76, 255, 0.62)
        )
        saturate(1.12)
        contrast(1.05) !important;
}

/* ---------------------------------------------------------
   KRAKEN EYE GLOW
   --------------------------------------------------------- */

#kraken .hr-kraken-eye-layer,
.kraken .hr-kraken-eye-layer {
    position: absolute !important;
    inset: 0 !important;

    pointer-events: none !important;

    opacity: 0;

    z-index: 9 !important;

    transition:
        opacity 300ms ease;
}

#kraken .hr-kraken-eye,
.kraken .hr-kraken-eye {
    position: absolute !important;

    top: 31% !important;

    width: 11% !important;
    height: 6.5% !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 245, 255, 1) 0%,
            rgba(218, 125, 255, 0.98) 18%,
            rgba(131, 40, 255, 0.78) 45%,
            rgba(76, 12, 180, 0.20) 72%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 7px rgba(255, 221, 255, 0.98),
        0 0 16px rgba(173, 79, 255, 0.95),
        0 0 29px rgba(103, 37, 255, 0.78) !important;

    filter:
        blur(1px) !important;

    transform:
        translate(-50%, -50%) !important;
}

#kraken .hr-kraken-eye-left,
.kraken .hr-kraken-eye-left {
    left: 41.5% !important;
}

#kraken .hr-kraken-eye-right,
.kraken .hr-kraken-eye-right {
    left: 58.5% !important;
}

#scene[data-wrong-stage="5"]
.hr-kraken-eye-layer,
#scene[data-wrong-stage="6"]
.hr-kraken-eye-layer {
    opacity: 1;

    animation:
        hrKrakenEyePulse 760ms ease-in-out infinite;
}

/* ---------------------------------------------------------
   WATER WARNING RINGS
   --------------------------------------------------------- */

#scene > .hr-kraken-ripple {
    position: absolute !important;

    right: 5% !important;
    bottom: 10% !important;

    width: 34% !important;
    height: 18% !important;

    pointer-events: none !important;

    opacity: 0;

    z-index: 24 !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            ellipse at center,
            transparent 0%,
            transparent 38%,
            rgba(133, 232, 255, 0.65) 41%,
            rgba(255, 255, 255, 0.16) 45%,
            transparent 49%,
            transparent 58%,
            rgba(79, 185, 255, 0.42) 61%,
            transparent 66%
        ) !important;

    filter:
        blur(0.4px) !important;

    transform:
        scale(0.72) !important;

    transition:
        opacity 300ms ease,
        transform 620ms ease;
}

#scene[data-wrong-stage="3"]
.hr-kraken-ripple,
#scene[data-wrong-stage="4"]
.hr-kraken-ripple,
#scene[data-wrong-stage="5"]
.hr-kraken-ripple {
    opacity: 0.72;

    transform:
        scale(1) !important;

    animation:
        hrWaterWarningPulse 1350ms ease-in-out infinite;
}

#scene[data-wrong-stage="6"]
.hr-kraken-ripple {
    opacity: 0.95;

    transform:
        scale(1.24) !important;

    animation:
        hrWaterWarningPulse 520ms ease-in-out infinite;
}

/* ---------------------------------------------------------
   STAGE 5 SCENE SHAKE
   --------------------------------------------------------- */

#scene.hr-effect-scene-shake {
    animation:
        hrSceneDangerShake 680ms ease-in-out;
}

/* ---------------------------------------------------------
   STAGE 6 DEFEAT
   --------------------------------------------------------- */

#scene.hr-effect-defeat
#kraken,
#scene.hr-effect-defeat
.kraken {
    transition:
        translate 380ms cubic-bezier(0.12, 0.84, 0.16, 1),
        scale 380ms cubic-bezier(0.12, 0.84, 0.16, 1) !important;

    animation:
        hrKrakenDefeatLunge 1150ms ease-in-out;
}

#scene.hr-effect-defeat
.hr-premium-pirate-art {
    animation:
        hrPirateDefeat 1250ms ease-in forwards;
}

#scene.hr-effect-defeat {
    animation:
        hrDefeatSceneImpact 1000ms ease-in-out;
}

/* Existing flash element. */

#scene #chompFlash.hr-active {
    position: absolute !important;
    inset: 0 !important;

    display: block !important;

    pointer-events: none !important;

    opacity: 0;

    z-index: 85 !important;

    background:
        radial-gradient(
            circle at 64% 58%,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(191, 117, 255, 0.76) 12%,
            rgba(64, 24, 134, 0.28) 34%,
            transparent 64%
        ) !important;

    animation:
        hrChompFlash 900ms ease-out forwards;
}

/* Existing defeat splash element. */

#scene #defeatSplash.hr-active {
    position: absolute !important;

    right: 6% !important;
    bottom: 0 !important;

    width: 50% !important;
    height: 60% !important;

    display: block !important;

    pointer-events: none !important;

    opacity: 0;

    z-index: 82 !important;

    background:
        radial-gradient(
            ellipse at 58% 82%,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(147, 226, 255, 0.88) 11%,
            rgba(48, 155, 222, 0.52) 24%,
            rgba(18, 85, 147, 0.16) 43%,
            transparent 67%
        ),
        repeating-conic-gradient(
            from 5deg at 58% 82%,
            rgba(223, 251, 255, 0.78) 0deg 3deg,
            transparent 3deg 17deg
        ) !important;

    clip-path:
        polygon(
            0 100%,
            8% 70%,
            18% 84%,
            27% 50%,
            37% 78%,
            47% 31%,
            55% 72%,
            65% 18%,
            72% 70%,
            84% 38%,
            89% 80%,
            100% 58%,
            100% 100%
        ) !important;

    filter:
        blur(0.3px)
        drop-shadow(
            0 0 10px
            rgba(126, 222, 255, 0.58)
        ) !important;

    animation:
        hrDefeatSplash 1300ms ease-out forwards;
}

/* ---------------------------------------------------------
   KEYFRAMES
   --------------------------------------------------------- */

@keyframes hrPirateNervousShake {
    0%,
    100% {
        rotate: 0deg;
    }

    12% {
        rotate: -4deg;
    }

    24% {
        rotate: 4deg;
    }

    38% {
        rotate: -3deg;
    }

    52% {
        rotate: 3deg;
    }

    68% {
        rotate: -2deg;
    }

    84% {
        rotate: 1deg;
    }
}

@keyframes hrPirateStepBounce {
    0% {
        rotate: 0deg;
    }

    38% {
        rotate: 3deg;
    }

    62% {
        rotate: -2deg;
    }

    100% {
        rotate: 0deg;
    }
}

@keyframes hrKrakenRiseSurge {
    0% {
        rotate: 0deg;
    }

    40% {
        rotate: -1.5deg;
    }

    70% {
        rotate: 1deg;
    }

    100% {
        rotate: 0deg;
    }
}

@keyframes hrKrakenTentacleReach {
    0%,
    100% {
        rotate: 0deg;
    }

    30% {
        rotate: -1.4deg;
    }

    62% {
        rotate: 1.1deg;
    }
}

@keyframes hrKrakenEyePulse {
    0%,
    100% {
        filter:
            brightness(0.90)
            blur(1px);
    }

    50% {
        filter:
            brightness(1.45)
            blur(1.5px);
    }
}

@keyframes hrWaterWarningPulse {
    0%,
    100% {
        opacity: 0.42;
    }

    50% {
        opacity: 0.92;
    }
}

@keyframes hrSceneDangerShake {
    0%,
    100% {
        transform: translate(0, 0);
    }

    15% {
        transform: translate(-3px, 1px);
    }

    30% {
        transform: translate(3px, -1px);
    }

    45% {
        transform: translate(-2px, -1px);
    }

    60% {
        transform: translate(2px, 1px);
    }

    75% {
        transform: translate(-1px, 0);
    }
}

@keyframes hrKrakenDefeatLunge {
    0% {
        rotate: 0deg;
    }

    28% {
        rotate: 2deg;
    }

    54% {
        rotate: -3deg;
    }

    72% {
        rotate: 1deg;
    }

    100% {
        rotate: 0deg;
    }
}

@keyframes hrPirateDefeat {
    0% {
        rotate: 0deg;
        opacity: 1;
    }

    38% {
        rotate: -8deg;
        opacity: 1;
    }

    67% {
        rotate: 11deg;
        opacity: 0.92;
    }

    82% {
        rotate: -14deg;
        opacity: 0.42;
    }

    100% {
        rotate: -17deg;
        opacity: 0.08;
    }
}

@keyframes hrDefeatSceneImpact {
    0%,
    100% {
        filter: none;
    }

    48% {
        filter:
            brightness(1.20)
            contrast(1.10);
    }

    60% {
        filter:
            brightness(0.84)
            contrast(1.14);
    }
}

@keyframes hrChompFlash {
    0% {
        opacity: 0;
        transform: scale(0.45);
    }

    34% {
        opacity: 0.96;
        transform: scale(1.10);
    }

    58% {
        opacity: 0.68;
        transform: scale(1.22);
    }

    100% {
        opacity: 0;
        transform: scale(1.34);
    }
}

@keyframes hrDefeatSplash {
    0% {
        opacity: 0;
        transform:
            translateY(32%)
            scale(0.52);
    }

    35% {
        opacity: 1;
        transform:
            translateY(-4%)
            scale(1.08);
    }

    68% {
        opacity: 0.90;
        transform:
            translateY(2%)
            scale(1);
    }

    100% {
        opacity: 0;
        transform:
            translateY(17%)
            scale(1.13);
    }
}

@media (max-width: 560px) {
    #scene > .hr-kraken-ripple {
        right: 1% !important;
        bottom: 13% !important;

        width: 42% !important;
        height: 17% !important;
    }

    #kraken .hr-kraken-eye,
    .kraken .hr-kraken-eye {
        top: 31.5% !important;
    }

    #scene #defeatSplash.hr-active {
        right: 0 !important;

        width: 58% !important;
        height: 57% !important;
    }
}

/*
  Respect reduced-motion accessibility settings while still updating
  the permanent stage positions.
*/
@media (prefers-reduced-motion: reduce) {
    #scene,
    #scene *,
    #scene *::before,
    #scene *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
    }
}