/* =========================================================
   HANGMAN RESCUE - OCEAN MOTION + AMBIENT SOUND
   ========================================================= */

/* Motion accessibility */
@media (prefers-reduced-motion: reduce) {
  .scene .hr-ambient-ocean-sheen,
  .scene .hr-ambient-ocean-waveband,
  .scene .hr-premium-whole-ship,
  .scene .hr-premium-pirate-art,
  .scene .hr-premium-pirate {
    animation: none !important;
  }
}

body.hr-reduce-motion .scene .hr-ambient-ocean-sheen,
body.hr-reduce-motion .scene .hr-ambient-ocean-waveband,
body.hr-reduce-motion .scene .hr-premium-whole-ship,
body.hr-reduce-motion .scene .hr-premium-pirate-art,
body.hr-reduce-motion .scene .hr-premium-pirate {
  animation: none !important;
}

/* Make sure the scene can hold extra ambient layers */
.scene {
  overflow: hidden;
}

/* Ambient overlay layers */
.scene .hr-ambient-ocean-sheen,
.scene .hr-ambient-ocean-waveband {
  position: absolute;
  inset: auto 0 0 0;
  pointer-events: none;
  user-select: none;
}

/* Soft moving light on the water */
.scene .hr-ambient-ocean-sheen {
  left: -10%;
  right: -10%;
  bottom: 3%;
  height: 42%;
  z-index: 1;
  opacity: 0.34;
  mix-blend-mode: screen;
  background:
    linear-gradient(
      115deg,
      rgba(255,255,255,0.00) 0%,
      rgba(132,212,255,0.08) 18%,
      rgba(255,222,168,0.17) 28%,
      rgba(255,255,255,0.04) 38%,
      rgba(122,198,255,0.10) 54%,
      rgba(255,255,255,0.00) 72%
    );
  transform: skewX(-10deg);
  filter: blur(1.4px);
  animation: hrAmbientSheen 10s linear infinite;
}

/* Rolling wave band near the front water */
.scene .hr-ambient-ocean-waveband {
  left: -8%;
  right: -8%;
  bottom: 1%;
  height: 26%;
  z-index: 2;
  opacity: 0.28;
  background:
    radial-gradient(
      ellipse at 10% 60%,
      rgba(255,255,255,0.30) 0 7%,
      transparent 8%
    ),
    radial-gradient(
      ellipse at 28% 68%,
      rgba(255,255,255,0.18) 0 6%,
      transparent 7%
    ),
    radial-gradient(
      ellipse at 48% 58%,
      rgba(255,255,255,0.25) 0 7%,
      transparent 8%
    ),
    radial-gradient(
      ellipse at 67% 70%,
      rgba(255,255,255,0.17) 0 6%,
      transparent 7%
    ),
    radial-gradient(
      ellipse at 85% 62%,
      rgba(255,255,255,0.24) 0 7%,
      transparent 8%
    );
  background-size:
    280px 110px,
    250px 95px,
    320px 120px,
    240px 100px,
    280px 110px;
  background-repeat: repeat-x;
  filter: blur(1.2px);
  animation: hrAmbientWaveband 7.5s linear infinite;
}

/* Keep the ship and pirate above the shimmer */
.scene .hr-premium-whole-ship,
.scene .hr-premium-pirate-art,
.scene .hr-premium-pirate {
  position: absolute;
  z-index: 4;
  will-change: translate;
}

/* Gentle ship bob */
.scene .hr-premium-whole-ship {
  animation: hrShipBob 4.4s ease-in-out infinite;
}

/* Pirate keeps alignment with the ship */
@media (min-width: 901px) {
  .scene .hr-premium-pirate-art,
  .scene .hr-premium-pirate {
    translate: 0 -16px !important;
    animation: hrPirateBobDesktop 4.4s ease-in-out infinite;
  }
}

@media (max-width: 900px) {
  .scene .hr-premium-pirate-art,
  .scene .hr-premium-pirate {
    animation: hrPirateBobMobile 4.4s ease-in-out infinite;
  }
}

/* Optional subtle ambient speaker state */
body.hr-ambient-muted [data-ambient-indicator="speaker"] {
  opacity: 0.75;
  filter: grayscale(0.15);
}

@keyframes hrAmbientSheen {
  0% {
    transform: translateX(-12%) skewX(-10deg);
    opacity: 0.22;
  }
  50% {
    transform: translateX(8%) skewX(-10deg);
    opacity: 0.34;
  }
  100% {
    transform: translateX(24%) skewX(-10deg);
    opacity: 0.22;
  }
}

@keyframes hrAmbientWaveband {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-120px);
  }
}

@keyframes hrShipBob {
  0%,
  100% {
    translate: 0 0;
  }
  25% {
    translate: 0 -1px;
  }
  50% {
    translate: 0 -3px;
  }
  75% {
    translate: 0 -1px;
  }
}

@keyframes hrPirateBobDesktop {
  0%,
  100% {
    translate: 0 -16px;
  }
  25% {
    translate: 0 -17px;
  }
  50% {
    translate: 0 -19px;
  }
  75% {
    translate: 0 -17px;
  }
}

@keyframes hrPirateBobMobile {
  0%,
  100% {
    translate: 0 0;
  }
  25% {
    translate: 0 -1px;
  }
  50% {
    translate: 0 -3px;
  }
  75% {
    translate: 0 -1px;
  }
}

/* === VISIBLE MOVING WAVES FIX START === */

/*
  Raise the pirate slightly more on desktop only.
  The previous value was -16px. This final adjustment uses -21px.
*/
@media (min-width: 901px) {
    .scene .hr-premium-pirate-art,
    .scene .hr-premium-pirate {
        translate: 0 -21px !important;
        animation:
            hrPirateBobDesktopVisibleWaves
            4.4s ease-in-out infinite !important;
    }
}

/*
  Put the moving water overlays over the background image while
  keeping them underneath the foreground characters and ship.
*/
.scene .hr-ambient-ocean-sheen {
    position: absolute !important;

    left: -20% !important;
    right: -20% !important;
    bottom: 0 !important;

    width: 140% !important;
    height: 43% !important;

    z-index: 3 !important;

    display: block !important;

    opacity: 0.62 !important;

    pointer-events: none !important;

    mix-blend-mode: screen;

    background:
        repeating-linear-gradient(
            171deg,
            transparent 0 20px,
            rgba(91, 190, 239, 0.10) 21px 24px,
            transparent 25px 42px
        ),
        repeating-linear-gradient(
            8deg,
            transparent 0 34px,
            rgba(255, 222, 156, 0.18) 35px 38px,
            transparent 39px 72px
        ) !important;

    background-size:
        240px 95px,
        310px 120px !important;

    filter:
        blur(0.35px)
        drop-shadow(
            0 0 3px
            rgba(108, 205, 255, 0.40)
        ) !important;

    animation:
        hrVisibleWaterShimmer
        7s linear infinite !important;

    will-change:
        transform,
        background-position;
}

/*
  Stronger foreground foam lines. These are intentionally brighter
  than the original wave band so the movement is visible.
*/
.scene .hr-ambient-ocean-waveband {
    position: absolute !important;

    left: -18% !important;
    right: -18% !important;
    bottom: -2% !important;

    width: 136% !important;
    height: 35% !important;

    z-index: 3 !important;

    display: block !important;

    opacity: 0.82 !important;

    pointer-events: none !important;

    background:
        radial-gradient(
            ellipse 55px 8px at 25px 32px,
            rgba(255, 255, 255, 0.72) 0 18%,
            rgba(154, 221, 255, 0.42) 20% 30%,
            transparent 34%
        ),
        radial-gradient(
            ellipse 72px 10px at 95px 62px,
            rgba(255, 241, 204, 0.52) 0 14%,
            rgba(130, 207, 247, 0.32) 18% 28%,
            transparent 33%
        ),
        radial-gradient(
            ellipse 46px 7px at 170px 20px,
            rgba(255, 255, 255, 0.58) 0 17%,
            transparent 34%
        ) !important;

    background-size:
        210px 88px,
        290px 105px,
        250px 94px !important;

    background-repeat:
        repeat !important;

    filter:
        blur(0.45px)
        drop-shadow(
            0 0 4px
            rgba(105, 205, 255, 0.52)
        ) !important;

    animation:
        hrVisibleFoamTravel
        5.5s linear infinite !important;

    will-change:
        transform,
        background-position;
}

/* Foreground game artwork remains above the water animation. */
.scene .hr-premium-whole-ship,
.scene .hr-premium-pirate-art,
.scene .hr-premium-pirate,
.scene .hr-premium-kraken,
.scene .hr-kraken-stage,
.scene [class*="kraken"] {
    z-index: 5;
}

/*
  The background artwork should remain behind the animated water.
*/
.scene .scene-sky,
.scene .scene-water,
.scene .premium-sky-backdrop,
.scene .premium-water-backdrop {
    z-index: 0;
}

@keyframes hrVisibleWaterShimmer {
    0% {
        transform:
            translate3d(-5%, 0, 0)
            skewX(-4deg);

        background-position:
            0 0,
            0 0;
    }

    50% {
        transform:
            translate3d(1%, -2px, 0)
            skewX(-4deg);

        background-position:
            120px 12px,
            -95px 8px;
    }

    100% {
        transform:
            translate3d(7%, 0, 0)
            skewX(-4deg);

        background-position:
            240px 24px,
            -190px 16px;
    }
}

@keyframes hrVisibleFoamTravel {
    0% {
        transform:
            translate3d(0, 0, 0);

        background-position:
            0 0,
            0 0,
            0 0;
    }

    50% {
        transform:
            translate3d(-55px, -3px, 0);

        background-position:
            -105px 5px,
            145px -5px,
            -65px 4px;
    }

    100% {
        transform:
            translate3d(-110px, 0, 0);

        background-position:
            -210px 10px,
            290px -10px,
            -130px 8px;
    }
}

@keyframes hrPirateBobDesktopVisibleWaves {
    0%,
    100% {
        translate:
            0 -21px;
    }

    25% {
        translate:
            0 -22px;
    }

    50% {
        translate:
            0 -24px;
    }

    75% {
        translate:
            0 -22px;
    }
}

/*
  Mobile positioning remains exactly where it was.
*/
@media (max-width: 900px) {
    .scene .hr-premium-pirate-art,
    .scene .hr-premium-pirate {
        translate:
            0 0 !important;

        animation:
            hrPirateBobMobile
            4.4s ease-in-out infinite !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .scene .hr-ambient-ocean-sheen,
    .scene .hr-ambient-ocean-waveband {
        animation:
            none !important;
    }
}

/* === VISIBLE MOVING WAVES FIX END === */

/* === DESKTOP PIRATE LIFT BOB FIX START === */

/*
  Desktop only:
  - raise pirate more
  - make pirate bob clearly with the ship
  - mobile remains unchanged
*/
@media (min-width: 901px) {
  .scene .hr-premium-pirate-art,
  .scene .hr-premium-pirate {
    translate: none !important;
    transform: translateY(-30px) !important;
    transform-origin: center bottom !important;
    animation: hrPirateDesktopLiftBob 4.4s ease-in-out infinite !important;
    will-change: transform !important;
    z-index: 6 !important;
  }
}

/*
  Mobile stays exactly as it is now.
*/
@media (max-width: 900px) {
  .scene .hr-premium-pirate-art,
  .scene .hr-premium-pirate {
    will-change: transform !important;
  }
}

@keyframes hrPirateDesktopLiftBob {
  0%, 100% {
    transform: translateY(-30px);
  }
  25% {
    transform: translateY(-32px);
  }
  50% {
    transform: translateY(-35px);
  }
  75% {
    transform: translateY(-32px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene .hr-premium-pirate-art,
  .scene .hr-premium-pirate {
    animation: none !important;
    transform: translateY(-30px) !important;
  }
}

/* === DESKTOP PIRATE LIFT BOB FIX END === */

/* === DESKTOP PIRATE RAISE MORE AGAIN START === */

/*
  Desktop only:
  Raise pirate more than the last patch.
  Mobile remains exactly unchanged.
*/
@media (min-width: 901px) {
  .scene .hr-premium-pirate-art,
  .scene .hr-premium-pirate {
    translate: none !important;
    transform: translateY(-40px) !important;
    transform-origin: center bottom !important;
    animation: hrPirateDesktopLiftBobMoreAgain 4.4s ease-in-out infinite !important;
    will-change: transform !important;
    z-index: 6 !important;
  }
}

@keyframes hrPirateDesktopLiftBobMoreAgain {
  0%, 100% {
    transform: translateY(-40px);
  }
  25% {
    transform: translateY(-42px);
  }
  50% {
    transform: translateY(-45px);
  }
  75% {
    transform: translateY(-42px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene .hr-premium-pirate-art,
  .scene .hr-premium-pirate {
    animation: none !important;
  }

  @media (min-width: 901px) {
    .scene .hr-premium-pirate-art,
    .scene .hr-premium-pirate {
      transform: translateY(-40px) !important;
    }
  }
}

/* === DESKTOP PIRATE RAISE MORE AGAIN END === */