/* Homepage hero dice — isolated adaptation of the CSS-only prototype in /dice. */
body.home .hero {
  overflow: visible !important;
  /* The hero used to sit in its own z-index:1 stacking context. That kept the
     dice underneath the offer/subheader shell even though every local
     overflow was visible, producing a clean horizontal cut at the toolbar.
     Lift the whole context above the banner background, while the masthead
     (1000) and the actual subheader controls (1001) remain interactive above. */
  z-index: 101 !important;
}

.mad-hero-dice-layer {
  --mad-die-size: clamp(68px, 8.5vw, 126px);
  --mad-die-face: #ff4029;
  --mad-die-edge: var(--mad-bg-light, #F5F5F5);
  --mad-die-pip: var(--mad-bg-light, #F5F5F5);
  --mad-brand-red: #ff4029;
  --mad-brand-yellow: #ffd51f;
  --mad-brand-green: #00a651;
  --mad-brand-blue: #0066ff;
  --mad-die-depth: calc(var(--mad-die-size) / 2);
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  /* The dice rotate beyond the hero layer's box; clipping creates a hard
     horizontal "disappearance" line through the lower dice. */
  overflow: visible;
  pointer-events: none;
  transform: translateY(clamp(-240px, -18vh, -110px));
  perspective: 1100px;
}

.dark-scheme .mad-hero-dice-layer,
.dark .mad-hero-dice-layer {
  --mad-die-face: #ff4029;
  --mad-die-edge: var(--mad-bg, #141414);
  --mad-die-pip: #171717;
}

.mad-hero-dice {
  position: relative;
  isolation: isolate;
  width: calc(var(--mad-die-size) * 4);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  animation: mad-dice-orbit 60s linear infinite;
}

.mad-hero-die-wrap {
  position: absolute;
  width: var(--mad-die-size);
  height: var(--mad-die-size);
  margin: calc(var(--mad-die-size) / 2);
  z-index: 2;
  transform: translate3d(var(--mad-parallax-x, 0), var(--mad-parallax-y, 0), 0);
  will-change: transform;
}

.mad-hero-die {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: mad-die-spin-a 20s linear infinite;
}

.mad-hero-die-wrap--1 {
  top: 0;
  left: 50%;
  margin-left: calc(var(--mad-die-size) / -2);
}

.mad-hero-die--1 {
  --mad-face-color: var(--mad-brand-red);
  animation-name: mad-die-spin-b;
  animation-duration: 24s;
}

.mad-hero-die-wrap--2 {
  left: 0;
  bottom: 0;
}

.mad-hero-die--2 {
  --mad-face-color: var(--mad-brand-yellow);
  animation-name: mad-die-spin-c;
  animation-duration: 28s;
}

.mad-hero-die-wrap--3 {
  right: 0;
  bottom: 0;
}

.mad-hero-die--3 {
  --mad-face-color: var(--mad-brand-green);
  animation-duration: 22s;
}

.mad-hero-die-wrap--4 {
  z-index: 0;
  top: 22%;
  left: -8%;
  scale: .65;
}

.mad-hero-die--4 {
  --mad-face-color: var(--mad-brand-blue);
  animation-name: mad-die-spin-b;
  animation-duration: 30.5s;
  animation-direction: reverse;
}

.mad-hero-die__face {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  transform-style: preserve-3d;
  transform-origin: center;
  background: var(--mad-die-edge);
  backface-visibility: hidden;
}

.mad-hero-die__face::before,
.mad-hero-die__face::after {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 0;
}

.mad-hero-die__face::before {
  background: var(--mad-face-color, var(--mad-die-face));
}

.mad-hero-die__face::after {
  background-repeat: no-repeat;
}

.mad-hero-die__face.is-one   { transform: translateY(var(--mad-die-depth)) rotateX(-90deg); }
.mad-hero-die__face.is-two   { transform: translateX(var(--mad-die-depth)) rotateY(90deg); }
.mad-hero-die__face.is-three { transform: translateZ(calc(var(--mad-die-depth) * -1)) rotateY(180deg); }
.mad-hero-die__face.is-four  { transform: translateZ(var(--mad-die-depth)); }
.mad-hero-die__face.is-five  { transform: translateX(calc(var(--mad-die-depth) * -1)) rotateY(-90deg); }
.mad-hero-die__face.is-six   { transform: translateY(calc(var(--mad-die-depth) * -1)) rotateX(90deg); }

/* Each die is monochrome and maps directly to one exact MAD brand color. */

.mad-hero-die__face.is-one::after {
  background-image: linear-gradient(var(--mad-die-pip) 0 0);
  background-position: 50% 50%;
  background-size: 20% 20%;
}

.mad-hero-die__face.is-two::after {
  background-image:
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0);
  background-position: 24% 24%, 76% 76%;
  background-size: 20% 20%;
}

.mad-hero-die__face.is-three::after {
  background-image:
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0);
  background-position: 24% 24%, 50% 50%, 76% 76%;
  background-size: 20% 20%;
}

.mad-hero-die__face.is-four::after {
  background-image:
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0);
  background-position: 24% 24%, 76% 24%, 24% 76%, 76% 76%;
  background-size: 20% 20%;
}

.mad-hero-die__face.is-five::after {
  background-image:
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0);
  background-position: 24% 24%, 76% 24%, 50% 50%, 24% 76%, 76% 76%;
  background-size: 20% 20%;
}

.mad-hero-die__face.is-six::after {
  background-image:
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0),
    linear-gradient(var(--mad-die-pip) 0 0);
  background-position: 24% 22%, 76% 22%, 24% 50%, 76% 50%, 24% 78%, 76% 78%;
  background-size: 18% 18%;
}

/* Leave the mobile composition centred; desktop has room to move the dice
   into the open right side of the hero. */
@media (min-width: 1025px) {
  .mad-hero-dice-layer {
    transform: translateX(clamp(160px, 20vw, 288px)) translateY(clamp(-240px, -18vh, -110px));
  }
}

@keyframes mad-dice-orbit {
  to { transform: rotate(360deg); }
}

@keyframes mad-die-spin-a {
  from { transform: rotate3d(1, 1, .7, 18deg); }
  to   { transform: rotate3d(1, 1, .7, 378deg); }
}

@keyframes mad-die-spin-b {
  from { transform: rotate3d(.65, 1, 1, 42deg); }
  to   { transform: rotate3d(.65, 1, 1, 402deg); }
}

@keyframes mad-die-spin-c {
  from { transform: rotate3d(1, .55, 1, -24deg); }
  to   { transform: rotate3d(1, .55, 1, 336deg); }
}

@media (max-width: 767px) {
  .mad-hero-dice-layer {
    --mad-die-size: clamp(42px, 15vw, 68px);
    transform: translateY(clamp(-150px, -16vh, -84px));
    perspective: 800px;
  }

  .mad-hero-dice {
    width: calc(var(--mad-die-size) * 3.65);
  }

  .mad-hero-die-wrap--4 {
    top: 26%;
    left: -4%;
    scale: .58;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mad-hero-dice,
  .mad-hero-die {
    animation: none !important;
  }

  .mad-hero-dice { transform: rotate(7deg); }
  .mad-hero-die--1 { transform: rotateX(-18deg) rotateY(28deg); }
  .mad-hero-die--2 { transform: rotateX(22deg) rotateY(-32deg); }
  .mad-hero-die--3 { transform: rotateX(-24deg) rotateY(-20deg); }
  .mad-hero-die--4 { transform: rotateX(20deg) rotateY(34deg); }
}