/* Monster theme — graphite surfaces, burgundy accents.
   The original stylesheet colours are re-pointed at these tokens by role (see build/cssmap.py). */
:root {
  --m-bg: #1c1b1d;
  --m-s1: #222124;
  --m-s2: #29282c;
  --m-s3: #333136;
  --m-deep: #151416;
  --m-deeper: #0f0e10;
  --m-line: #38363b;
  --m-line-2: #4a474d;
  --m-text: #ece8e4;
  --m-text-2: #cfcacc;
  --m-muted: #a29ea3;

  --m-acc: #8b1e32;
  --m-acc-hi: #a8283f;
  --m-acc-deep: #4a1221;
  --m-acc-text: #e0566b;
  --m-wash: #2a1d21;
  --m-mist: #2d2326;
  --m-mist-2: #262023;
  --m-warm: #242224;
  --m-alert: #ff5d6c;

  /* original tokens, for anything that still reads them directly (inline styles, scripts) */
  --white: var(--m-bg);
  --black: var(--m-deeper);
  --dark-green: var(--m-text);
  --mid-green: var(--m-acc-text);
  --interface-green: var(--m-acc);
  --bright-green: var(--m-acc);
  --light-interface-green: var(--m-wash);
  --mist-green: var(--m-mist);
  --mist-green-light: var(--m-mist-2);
  --grey: var(--m-s2);
  --very-light-grey: var(--m-s1);
  --light-grey: var(--m-s3);
  --bright-grey: var(--m-line-2);
  --mid-grey: var(--m-muted);
  --dark-grey: var(--m-deep);
  --paperbark: var(--m-warm);
  --paperbark-light: var(--m-warm);
  --paperbark-very-light: var(--m-warm);
  --alert: var(--m-alert);
  --swiper-theme-color: var(--m-acc-text);
  color-scheme: dark;
}

html, body { background: var(--m-bg); color: var(--m-text); }
::selection { background: var(--m-acc); color: #fff; }
:focus-visible { outline: 2px solid var(--m-acc-text); outline-offset: 2px; }
html { scrollbar-color: var(--m-line-2) var(--m-bg); }

/* inline icons drawn in black by the original markup */
svg path[fill="#000000"], svg path[fill="black"] { fill: currentColor; }
svg path[stroke="#000000"], svg path[stroke="black"] { stroke: currentColor; }

/* wordmark: red claw + "monster" */
.Header-module-scss-module__wS1-Va__Logo svg { width: 153px; }
.Header-module-scss-module__wS1-Va__Logo svg path,
.Footer-module-scss-module__wcgw9G__Logo svg path { fill: var(--m-text); }
.Header-module-scss-module__wS1-Va__Logo svg path.mx-claw,
.Footer-module-scss-module__wcgw9G__Logo svg path.mx-claw { fill: #fc121c; }

/* hero: graphite field lit by a burgundy bloom */
.Hero-module-scss-module__hGO3iW__Main {
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(139, 30, 50, .55) 0%, rgba(139, 30, 50, 0) 60%),
    linear-gradient(135deg, #2a2427 0%, #201f22 100%);
}
.Hero-module-scss-module__hGO3iW__Main.Hero-module-scss-module__hGO3iW__MistGreen {
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(139, 30, 50, .32) 0%, rgba(139, 30, 50, 0) 60%),
    linear-gradient(135deg, #262326 0%, #1f1e21 100%);
}

/* the eyes — replace the 3D caterpillar, drawn straight onto the hero field */
.Hero-module-scss-module__hGO3iW__Animation:has(.MonsterEyes) {
  grid-area: 1 / 2 / 2 / 4;
  aspect-ratio: auto;
  scale: 1;
  margin: 0;
  padding: 0 20px 0 10px;
  align-self: center;
}
/* the eyes own the right two thirds, so the supporting copy sits under the headline */
.Hero-module-scss-module__hGO3iW__Outer:has(.MonsterEyes) .Hero-module-scss-module__hGO3iW__Copy {
  grid-column: 1 / 2;
  grid-row: 2;
  justify-self: start;
  align-self: start;
  max-width: 360px;
  margin: 0;
}
.MonsterEyes { width: 100%; }
.MonsterEyes .mx-eyes { display: block; width: 100%; height: auto; overflow: visible; }
.MonsterEyes .mx-lid {
  transform-box: fill-box;
  transform-origin: 50% 82%;
  animation: mx-blink 2.5s infinite;
}
.MonsterEyes .mx-halo { opacity: .6; animation: mx-halo 2.5s infinite; }
@keyframes mx-blink {
  0%, 86%, 100% { transform: scaleY(1); }
  90.5% { transform: scaleY(.05); }
  95% { transform: scaleY(1); }
}
@keyframes mx-halo {
  0%, 86%, 100% { opacity: .6; }
  90.5% { opacity: .08; }
  95% { opacity: .6; }
}
@media (max-width: 1024px) {
  .Hero-module-scss-module__hGO3iW__Animation:has(.MonsterEyes) { grid-area: auto; padding: 0 24px 24px; }
}

/* 3D scenes were modelled in lime; a burgundy duotone (filter defined by the shim) recasts them */
.Animation-module-scss-module__VbiEVq__Animation canvas { filter: url(#mx-duo); }

/* award / partner marks are dark artwork; show them as light silhouettes on the graphite tiles */
[class*="Awards-module-scss-module__iRYToa"] img { filter: brightness(0) invert(.9); opacity: .85; }

/* AI Cloud menu: the two lime 3D tiles become the monster's eyes, looking out across the gap */
.SubNavChild-module-scss-module__VP1UDa__Outer:has(> img[src*="eb976824cccb8787"]) > img,
.SubNavChild-module-scss-module__VP1UDa__Outer:has(> img[src*="24c9b7f34e8308ca"]) > img { visibility: hidden; }
.SubNavChild-module-scss-module__VP1UDa__Outer:has(> img[src*="eb976824cccb8787"])::after,
.SubNavChild-module-scss-module__VP1UDa__Outer:has(> img[src*="24c9b7f34e8308ca"])::after {
  content: "";
  position: absolute;
  bottom: 14px;
  width: 78%;
  aspect-ratio: 900 / 560;
  background: center / contain no-repeat;
  pointer-events: none;
  z-index: 1;
}
.SubNavChild-module-scss-module__VP1UDa__Outer:has(> img[src*="eb976824cccb8787"])::after { right: 0; background-image: url(/monster/eye-left.svg); }
.SubNavChild-module-scss-module__VP1UDa__Outer:has(> img[src*="24c9b7f34e8308ca"])::after { left: 0; background-image: url(/monster/eye-right.svg); }

/* non-custodial section: the puzzle window is the red pack's own outline (pack-mask.svg, built with the pile video).
   mask-size: cover + centre matches the video's object-fit: cover, so the cut-out stays on the pack at any width.
   !important because the section's script scrubs mask-size inline on scroll, which would slide the cut-out off the pack. */
.VideoAnimation-module-scss-module__VAiQvW__Image.VideoAnimation-module-scss-module__VAiQvW__Image {
  -webkit-mask-image: url(/monster/pack-mask.svg) !important; mask-image: url(/monster/pack-mask.svg) !important;
  -webkit-mask-size: cover !important; mask-size: cover !important;
  -webkit-mask-position: 50% 50% !important; mask-position: 50% 50% !important;
}