/* Scroll reveal, parallax, reduced-motion, and keyframe rules. */

@media (prefers-reduced-motion: reduce) {
  .nav-drawer {
    transition-duration: 0.01ms;
  }

  .heros-carousel .hero-carousel-item__overlay,
  .heros-carousel .hero-carousel-item img,
  .header-slider__slide,
  .header-slider__feature,
  .header-slider__dot {
    transition-duration: 0.01ms;
  }
}

body.motion-ready .header-slider,
body.motion-ready .hero,
body.motion-ready .battle,
body.motion-ready .section-text-media,
body.motion-ready .section-video-media,
body.motion-ready .heros-carousel,
body.motion-ready .coop-promo-shell,
body.motion-ready .discover-more,
body.motion-ready .parallax-dice-right,
body.motion-ready .parallax-dice-left {
  --scene-progress: 0;
}

body.motion-ready .parallax-dice-right,
body.motion-ready .parallax-dice-left {
  --dice-depth: 1;
  --dice-parallax-y: 0;
  perspective: 70rem;
  transform-style: preserve-3d;
}

body.motion-ready .hero {
  position: relative;
}

body.motion-ready .hero::after {
  opacity: calc(0.14 + var(--scene-progress) * 0.24);
}

body.motion-ready .hero .hero__video-bg {
  transform: translate(-50%, calc(-50% + (0.5 - var(--scene-progress)) * 3.5rem)) scale(calc(1.08 + var(--scene-progress) * 0.08));
  filter: saturate(calc(0.88 + var(--scene-progress) * 0.24)) contrast(calc(0.94 + var(--scene-progress) * 0.08));
  will-change: transform, filter;
}

body.motion-ready .hero .hero__content {
  opacity: calc(0.16 + var(--scene-progress) * 0.84);
  transform: translate3d(0, calc((1 - var(--scene-progress)) * 3.25rem), 0) scale(calc(0.94 + var(--scene-progress) * 0.06));
  filter: blur(calc((1 - var(--scene-progress)) * 6px));
  will-change: transform, opacity, filter;
}

body.motion-ready .battle {
  --battle-progress: 0;
  --battle-mat-progress: 0;
  --battle-copy-progress: 0;
  --battle-dice-progress: 0;
}

body.motion-ready .battle::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: calc(0.18 + var(--battle-progress) * 0.4);
  pointer-events: none;
  z-index: 0;
}

body.motion-ready .battle .battle-left .base,
body.motion-ready .battle .battle-right .base,
body.motion-ready .battle .battle-left .charactor,
body.motion-ready .battle .battle-right .charactor,
body.motion-ready .battle .battle-center-content,
body.motion-ready .battle .floating-dice,
body.motion-ready .header-slider__copy,
body.motion-ready .header-slider__feature,
body.motion-ready .hero .hero__content h1,
body.motion-ready .hero .hero__content p,
body.motion-ready .hero .hero__content .button,
body.motion-ready .section-text-media .section-text-media-content,
body.motion-ready .section-text-media .section-text-media-image,
body.motion-ready .section-video-media .section-video-media-content,
body.motion-ready .heros-carousel h2,
body.motion-ready .heros-carousel .heros-carousel-viewport,
body.motion-ready .heros-carousel .heros-carousel-nav,
body.motion-ready .coop-promo,
body.motion-ready .coop-promo__content,
body.motion-ready .coop-promo__character,
body.motion-ready .discover-more h2,
body.motion-ready .discover-card,
body.motion-ready .parallax-dice-right img,
body.motion-ready .parallax-dice-left img {
  will-change: transform, opacity, filter;
  z-index: 2;
}

body.motion-ready .hero .hero__content h1,
body.motion-ready .battle .battle-center-content h2,
body.motion-ready .section-text-media .section-text-media-content h2,
body.motion-ready .section-video-media .section-video-media-content h2,
body.motion-ready .coop-promo__content h2,
body.motion-ready .discover-more h2,
body.motion-ready .discover-card__body h3 {
  --title-progress: var(--scene-progress);
  background-image: linear-gradient(115deg, #ffffff 8%, #ffdcca 28%, #ffffff 48%, #b7dcff 82%, #ffffff 100%);
  background-size: 220% auto;
  background-position: calc((1 - var(--title-progress)) * 100%) 50%;
  letter-spacing: calc(0.015em + (1 - var(--title-progress)) * 0.06em);
  text-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.34), 0 0 calc(var(--title-progress) * 1.2rem) rgba(242, 107, 43, 0.22);
  transform: translate3d(0, calc((1 - var(--title-progress)) * 1.5rem), 0) scale(calc(0.95 + var(--title-progress) * 0.05));
  opacity: calc(0.14 + var(--title-progress) * 0.86);
}

body.motion-ready .battle .battle-center-content h2 {
  --title-progress: var(--battle-copy-progress);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {

  body.motion-ready .hero .hero__content h1,
  body.motion-ready .battle .battle-center-content h2,
  body.motion-ready .section-text-media .section-text-media-content h2,
  body.motion-ready .section-video-media .section-video-media-content h2,
  body.motion-ready .coop-promo__content h2,
  body.motion-ready .discover-more h2,
  body.motion-ready .discover-card__body h3 {
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

body.motion-ready .hero.is-active .hero__content h1,
body.motion-ready .battle.is-active .battle-center-content h2,
body.motion-ready .section-text-media.is-active .section-text-media-content h2,
body.motion-ready .section-video-media.is-active .section-video-media-content h2,
body.motion-ready .coop-promo-shell.is-active .coop-promo__content h2,
body.motion-ready .discover-more.is-active h2,
body.motion-ready .discover-more.is-active .discover-card__body h3 {
  animation: title-sheen 8s linear infinite;
}

body.motion-ready .hero .hero__content p,
body.motion-ready .hero .hero__content .button {
  opacity: calc(0.16 + var(--scene-progress) * 0.84);
  transform: translate3d(0, calc((1 - var(--scene-progress)) * 2rem), 0);
  filter: blur(calc((1 - var(--scene-progress)) * 5px));
}

body.motion-ready .hero .hero__content .button,
body.motion-ready .battle .battle-center-content .button,
body.motion-ready .section-text-media .section-text-media-content .button,
body.motion-ready .coop-promo__content .button {
  box-shadow: 0 1rem 1.8rem rgba(0, 0, 0, 0.24), 0 0 calc(var(--scene-progress) * 1.25rem) rgba(242, 107, 43, 0.2);
}

body.motion-ready .battle .battle-left .base {
  opacity: calc(0.02 + var(--battle-mat-progress) * 0.98);
  transform: translate3d(calc((1 - var(--battle-mat-progress)) * max(-36vw, -52dvh)), calc((1 - var(--battle-mat-progress)) * min(18vw, 24dvh)), 0) rotate(calc((1 - var(--battle-mat-progress)) * -10deg)) scale(calc(0.68 + var(--battle-mat-progress) * 0.36));
  filter: blur(calc((1 - var(--battle-mat-progress)) * 9px)) saturate(calc(0.62 + var(--battle-mat-progress) * 0.38));
}

body.motion-ready .battle .battle-right .base {
  opacity: calc(0.02 + var(--battle-mat-progress) * 0.98);
  transform: translate3d(calc((1 - var(--battle-mat-progress)) * min(36vw, 52dvh)), calc((1 - var(--battle-mat-progress)) * min(18vw, 24dvh)), 0) rotate(calc((1 - var(--battle-mat-progress)) * 10deg)) scale(calc(0.68 + var(--battle-mat-progress) * 0.36));
  filter: blur(calc((1 - var(--battle-mat-progress)) * 9px)) saturate(calc(0.62 + var(--battle-mat-progress) * 0.38));
}

body.motion-ready .battle .battle-left .charactor {
  opacity: calc(0.1 + var(--battle-progress) * 0.9);
  transform: translate3d(calc((1 - var(--battle-progress)) * max(-20vw, -24dvh)), calc((1 - var(--battle-progress)) * min(2vw, 3dvh)), 0) rotate(calc((1 - var(--battle-progress)) * -6deg)) scale(calc(0.8 + var(--battle-progress) * 0.2));
  filter: blur(calc((1 - var(--battle-progress)) * 10px)) saturate(calc(0.68 + var(--battle-progress) * 0.32)) drop-shadow(0 1.4rem 2rem rgba(0, 0, 0, 0.35));
}

body.motion-ready .battle .battle-right .charactor {
  opacity: calc(0.1 + var(--battle-progress) * 0.9);
  transform: translate3d(calc((1 - var(--battle-progress)) * min(20vw, 24dvh)), calc((1 - var(--battle-progress)) * min(2vw, 3dvh)), 0) rotate(calc((1 - var(--battle-progress)) * 6deg)) scale(calc(0.8 + var(--battle-progress) * 0.2));
  filter: blur(calc((1 - var(--battle-progress)) * 10px)) saturate(calc(0.68 + var(--battle-progress) * 0.32)) drop-shadow(0 1.4rem 2rem rgba(0, 0, 0, 0.35));
}

body.motion-ready .battle .battle-center-content {
  opacity: calc(0.12 + var(--battle-copy-progress) * 0.88);
  transform: translate3d(0, calc((1 - var(--battle-copy-progress)) * 3.5rem), 0) scale(calc(0.9 + var(--battle-copy-progress) * 0.1));
  filter: blur(calc((1 - var(--battle-copy-progress)) * 6px));
}

body.motion-ready .battle .floating-dice {
  opacity: var(--battle-dice-progress);
  transform: translateX(-50%) translateY(calc((1 - var(--battle-dice-progress)) * 5rem)) scale(calc(0.72 + var(--battle-dice-progress) * 0.48));
  filter: blur(calc((1 - var(--battle-dice-progress)) * 8px)) drop-shadow(0 1.5rem 2.5rem rgba(0, 0, 0, 0.45));
}

@supports (translate: 0) and (scale: 1) {
  body.motion-ready .battle .floating-dice {
    transform: none;
    translate: -50% calc((1 - var(--battle-dice-progress)) * 5rem);
    scale: calc(0.72 + var(--battle-dice-progress) * 0.48);
  }
}

body.motion-ready .battle .floating-dice img:nth-child(1),
body.motion-ready .battle .floating-dice img:nth-child(2) {
  animation-duration: 5.6s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-play-state: paused;
}

body.motion-ready .battle .floating-dice img:nth-child(1) {
  animation-name: battle-dice-float-left;
}

body.motion-ready .battle .floating-dice img:nth-child(2) {
  animation-name: battle-dice-float-right;
  animation-delay: -1.4s;
}

body.motion-ready .battle.is-active .floating-dice img:nth-child(1),
body.motion-ready .battle.is-active .floating-dice img:nth-child(2) {
  animation-play-state: running;
}

body.motion-ready .section-text-media {
  background-position: center calc(50% + (0.5 - var(--scene-progress)) * 70px);
}

body.motion-ready .section-text-media .section-text-media-content {
  opacity: calc(0.16 + var(--scene-progress) * 0.84);
  transform: translate3d(calc((1 - var(--scene-progress)) * -4rem), calc((1 - var(--scene-progress)) * 1rem), 0) scale(calc(0.94 + var(--scene-progress) * 0.06));
  filter: blur(calc((1 - var(--scene-progress)) * 5px));
}

body.motion-ready .section-text-media .section-text-media-image {
  opacity: calc(0.08 + var(--scene-progress) * 0.92);
  transform: translate3d(calc((1 - var(--scene-progress)) * 5rem), calc((1 - var(--scene-progress)) * -1rem), 0) rotate(calc((1 - var(--scene-progress)) * 5deg)) scale(calc(0.88 + var(--scene-progress) * 0.12));
  filter: blur(calc((1 - var(--scene-progress)) * 6px)) drop-shadow(0 1.5rem 2rem rgba(0, 0, 0, 0.26));
}

body.motion-ready .section-text-media .section-text-media-image img {
  animation: media-hover 6.5s ease-in-out infinite;
  animation-play-state: paused;
}

body.motion-ready .section-text-media.is-active .section-text-media-image img {
  animation-play-state: running;
}

body.motion-ready .section-video-media .section-video-media-content {
  opacity: calc(0.12 + var(--scene-progress) * 0.88);
  transform: translate3d(0, calc((1 - var(--scene-progress)) * 3rem), 0) scale(calc(0.94 + var(--scene-progress) * 0.06));
  filter: blur(calc((1 - var(--scene-progress)) * 5px));
}

body.motion-ready .section-video-media {
  position: relative;
}

body.motion-ready .section-video-media::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 18%, rgba(242, 107, 43, 0.12), transparent 18%), linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.025) 50%, transparent 100%);
  opacity: calc(0.12 + var(--scene-progress) * 0.22);
  pointer-events: none;
}

body.motion-ready .section-video-media video {
  transform: scale(calc(0.94 + var(--scene-progress) * 0.06));
}

body.motion-ready .heros-carousel h2,
body.motion-ready .heros-carousel .heros-carousel-nav {
  opacity: calc(0.14 + var(--scene-progress) * 0.86);
  transform: translate3d(0, calc((1 - var(--scene-progress)) * 2rem), 0);
  filter: blur(calc((1 - var(--scene-progress)) * 5px));
}

body.motion-ready .heros-carousel .heros-carousel-viewport {
  opacity: calc(0.2 + var(--scene-progress) * 0.8);
  transform: translate3d(0, calc((1 - var(--scene-progress)) * 2.75rem), 0);
  filter: blur(calc((1 - var(--scene-progress)) * 4px));
}

body.motion-ready .heros-carousel .hero-carousel-item {
  opacity: 0;
  transform: translate3d(0, 3rem, 0) scale(0.9);
  filter: blur(8px);
  transition:
    opacity 0.6s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.8s ease,
    box-shadow 0.38s ease;
  transition-delay: calc(var(--stagger-index, 0) * 45ms);
}

body.motion-ready .heros-carousel.is-visible .hero-carousel-item {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

body.motion-ready .coop-promo {
  opacity: calc(0.14 + var(--scene-progress) * 0.86);
  transform: translate3d(0, calc((1 - var(--scene-progress)) * 2.5rem), 0) scale(calc(0.96 + var(--scene-progress) * 0.04));
  filter: blur(calc((1 - var(--scene-progress)) * 5px));
}

body.motion-ready .coop-promo__content {
  transform: translate3d(calc((1 - var(--scene-progress)) * -3rem), 0, 0);
}

body.motion-ready .coop-promo__character {
  opacity: calc(0.1 + var(--scene-progress) * 0.9);
  transform: translate3d(calc(-50% + (1 - var(--scene-progress)) * 4rem), -50%, 0) scale(calc((0.9 + var(--scene-progress) * 0.1) * 1.14));
  filter: drop-shadow(0 1.4rem 2rem rgba(0, 0, 0, 0.35)) saturate(calc(0.82 + var(--scene-progress) * 0.18));
}

/* When the Adventures Promo is configured with left-aligned art, use the Digital-style placement. */
body.motion-ready .coop-promo.coop-promo--image-left .coop-promo__character {
  position: absolute;
  bottom: 0%;
  left: -135%;
  transform: scale(3.5);
}

body.motion-ready .discover-more h2 {
  opacity: calc(0.18 + var(--scene-progress) * 0.82);
  transform: translate3d(0, calc((1 - var(--scene-progress)) * 2rem), 0);
  filter: blur(calc((1 - var(--scene-progress)) * 5px));
}

body.motion-ready .discover-card {
  opacity: 0;
  transform: translate3d(0, 4rem, 0) scale(0.92);
  filter: blur(10px);
  transition: opacity 0.7s ease, transform 0.95s cubic-bezier(0.22, 1, 0.36, 1), filter 0.8s ease;
  transition-delay: calc(var(--stagger-index, 0) * 120ms);
}

body.motion-ready .discover-more.is-visible .discover-card {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

body.motion-ready .parallax-dice-right img {
  opacity: calc(0.18 + var(--scene-progress) * 0.82);
  transform:
    translate3d(calc((0.5 - var(--scene-progress)) * -5rem),
      calc(((0.5 - var(--scene-progress)) * 6rem) + (var(--dice-parallax-y) * 11rem)),
      calc((var(--dice-depth) - 1) * 12rem)) rotateX(calc(var(--dice-parallax-y) * -6deg)) rotateY(calc(var(--dice-parallax-y) * 7deg)) rotate(calc((var(--scene-progress) - 0.5) * 14deg)) scale(calc(0.92 + var(--dice-depth) * 0.08));
  filter: drop-shadow(0 1.6rem 2.5rem rgba(0, 0, 0, 0.38));
}

body.motion-ready .parallax-dice-left img {
  opacity: calc(0.18 + var(--scene-progress) * 0.82);
  transform:
    translate3d(calc((0.5 - var(--scene-progress)) * 5rem),
      calc(((0.5 - var(--scene-progress)) * -6rem) + (var(--dice-parallax-y) * 13rem)),
      calc((var(--dice-depth) - 1) * 14rem)) rotateX(calc(var(--dice-parallax-y) * -7deg)) rotateY(calc(var(--dice-parallax-y) * -8deg)) rotate(calc((0.5 - var(--scene-progress)) * 14deg)) scale(calc(0.92 + var(--dice-depth) * 0.08));
  filter: drop-shadow(0 1.6rem 2.5rem rgba(0, 0, 0, 0.38));
}

@keyframes title-sheen {
  0% {
    background-position: 120% 50%;
  }

  100% {
    background-position: -120% 50%;
  }
}

@keyframes battle-dice-float-left {

  0%,
  100% {
    transform: translateY(0) rotate(-8deg);
  }

  50% {
    transform: translateY(-1rem) rotate(6deg);
  }
}

@keyframes battle-dice-float-right {

  0%,
  100% {
    transform: translateY(-0.25rem) rotate(7deg);
  }

  50% {
    transform: translateY(0.75rem) rotate(-5deg);
  }
}

@keyframes media-hover {

  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-0.9rem) rotate(1.75deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer {
    transition-duration: 0.01ms;
  }

  body.motion-ready .hero .hero__video-bg,
  body.motion-ready .hero .hero__content,
  body.motion-ready .hero .hero__content h1,
  body.motion-ready .hero .hero__content p,
  body.motion-ready .hero .hero__content .button,
  body.motion-ready .battle .battle-left .base,
  body.motion-ready .battle .battle-right .base,
  body.motion-ready .battle .battle-left .charactor,
  body.motion-ready .battle .battle-right .charactor,
  body.motion-ready .battle .battle-center-content,
  body.motion-ready .battle .floating-dice,
  body.motion-ready .header-slider__copy,
  body.motion-ready .header-slider__feature,
  body.motion-ready .section-text-media .section-text-media-content,
  body.motion-ready .section-text-media .section-text-media-image,
  body.motion-ready .section-video-media .section-video-media-content,
  body.motion-ready .heros-carousel h2,
  body.motion-ready .heros-carousel .heros-carousel-viewport,
  body.motion-ready .heros-carousel .heros-carousel-nav,
  body.motion-ready .heros-carousel .hero-carousel-item,
  body.motion-ready .coop-promo,
  body.motion-ready .coop-promo__content,
  body.motion-ready .coop-promo__character,
  body.motion-ready .discover-more h2,
  body.motion-ready .discover-card,
  body.motion-ready .parallax-dice-right img,
  body.motion-ready .parallax-dice-left img {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    animation: none;
  }

  body.motion-ready .coop-promo__character {
    transform: translate(-50%, -50%) scale(1.14);
  }
}