/* Crystal Clear Customs: immersive scroll layer.
   Full-bleed looping video stages that content scrolls over, satin-textured booking controls and
   image frames, tighter section rhythm. Applies only once cc-immersive.js adds html.cc-immersive. */

:root {
  --cc-satin: url("/media/brand/satin.webp");
  /* Twill weave with forged-style blue chips set into it */
  --cc-carbon: url("/media/brand/carbon-hybrid.png");
  /* Texture layers (image + position/size) for controls and boxes: hybrid carbon site-wide... */
  /* Buttons use a finer, darker cut of the carbon so their labels keep strong contrast */
  --cc-tex: var(--cc-carbon) 30% 50% / 120px 120px repeat;
  --cc-tex-box: var(--cc-carbon) 0 0 / 224px 224px repeat;
  --cc-ink: #030609;
  --cc-edge: rgba(150, 200, 255, .32);
  --cc-glow: rgba(47, 140, 255, .28);
  --cc-ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Smooth scrolling (Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Videos are permanent background loops: no pause buttons */
html.cc-immersive .motion-toggle { display: none !important; }

/* ---------- Scroll progress hairline ---------- */
.cc-progress {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  z-index: 60;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, #2f8cff, #bfe4ff);
  box-shadow: 0 0 12px rgba(47, 140, 255, .8);
  pointer-events: none;
}

/* ...except "Choose your detail", which keeps the obsidian satin */
#bundles {
  --cc-tex: var(--cc-satin) 30% 50% / 260% auto;
  --cc-tex-box: var(--cc-satin) center / cover;
}

/* ---------- Textured booking controls ---------- */
html.cc-immersive :is(.btn, .header-book, .quick-book, .package-select) {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .5)),
    linear-gradient(rgba(3, 6, 10, .38), rgba(3, 6, 10, .38)),
    var(--cc-tex) !important;
  border: 1px solid var(--cc-edge) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 0 rgba(0, 0, 0, .7),
    0 0 0 1px rgba(0, 0, 0, .55),
    0 12px 32px rgba(0, 0, 0, .55),
    0 0 22px rgba(22, 64, 150, .38) !important;
  color: #f4f8fb !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85);
  transition: background-position 1.2s var(--cc-ease), box-shadow .35s ease, border-color .35s ease, transform .2s ease !important;
}

/* The texture drifts on hover, so new blue flakes (or satin folds) catch the light */
html.cc-immersive :is(.btn, .header-book, .quick-book, .package-select):hover { background-position: 0 0, 0 0, 75% 40% !important; }

html.cc-immersive :is(.btn, .header-book, .quick-book):hover {
  border-color: rgba(70, 125, 210, .75) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .4),
    inset 0 -1px 0 rgba(0, 0, 0, .7),
    0 0 0 1px rgba(0, 0, 0, .55),
    0 14px 36px rgba(0, 0, 0, .6),
    0 0 26px rgba(20, 60, 150, .55) !important;
}

html.cc-immersive :is(.btn, .header-book, .quick-book):active { transform: scale(.97); }

/* Booking boxes: textured edge around the card, glass inside */
html.cc-immersive :is(.bundle-card, .booking-controls .service-library, .contact-bar) {
  border: 1px solid transparent !important;
  background:
    linear-gradient(rgba(6, 12, 18, .82), rgba(6, 12, 18, .82)) padding-box,
    linear-gradient(135deg, rgba(150, 210, 255, .55), rgba(255, 255, 255, .05) 40%, rgba(150, 210, 255, .35)) border-box,
    var(--cc-tex-box) border-box !important;
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45) !important;
}

html.cc-immersive .bundle-card { border-width: 2px !important; }
html.cc-immersive .bundle-card.popular {
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 40px rgba(47, 140, 255, .22) !important;
}

/* ---------- Carbon fiber frames around photographs ---------- */
/* Carbon only in the border ring; the inside stays dark where a photo doesn't fill its box */
html.cc-immersive :is(.photo-chapter, .interior-pair figure, .chemistry-card, .about) img {
  box-sizing: border-box;
  border: 5px solid transparent !important;
  background:
    linear-gradient(#05080c, #05080c) padding-box,
    linear-gradient(135deg, rgba(190, 225, 255, .35), rgba(0, 0, 0, 0) 45%, rgba(150, 210, 255, .25)) border-box,
    var(--cc-carbon) 0 0 / 168px 168px repeat border-box;
  box-shadow:
    inset 0 0 0 1px rgba(160, 210, 255, .28),
    0 0 0 1px rgba(0, 0, 0, .6),
    0 18px 50px rgba(0, 0, 0, .5);
}

/* ---------- Hero: full-bleed video stage ---------- */
html.cc-immersive .quiet-landing {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: end;
  padding: calc(var(--cc-header-h, 88px) + 48px) max(24px, 6vw) 14svh !important;
  overflow: hidden;
  isolation: isolate;
  background: var(--cc-ink);
}

html.cc-immersive .quiet-landing .hero-loop {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  z-index: -2;
  transform-origin: 50% 60%;
  opacity: 1 !important;
  -webkit-mask: none !important;
  mask: none !important;
}

html.cc-immersive .quiet-landing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(3, 6, 9, .9) 0%, rgba(3, 6, 9, .6) 38%, rgba(3, 6, 9, .08) 72%),
    linear-gradient(to top, var(--cc-ink) 0%, rgba(3, 6, 9, 0) 34%),
    linear-gradient(to bottom, rgba(3, 6, 9, .7) 0%, rgba(3, 6, 9, 0) 22%);
  pointer-events: none;
}

html.cc-immersive .quiet-landing .quiet-copy {
  max-width: 720px;
  margin: 0 !important;
  justify-self: start;
  position: relative;
  z-index: 1;
}

/* ---------- Video runs: one looping video behind several sections ---------- */
.cc-run {
  position: relative;
  isolation: isolate;
}

.cc-run-media {
  position: sticky;
  top: 0;
  height: 100svh;
  margin-bottom: -100svh;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.cc-run-media video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  transform-origin: 50% 50%;
}

.cc-run-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 45%, rgba(3, 6, 9, .35), rgba(3, 6, 9, .9)),
    linear-gradient(rgba(3, 6, 9, .3), rgba(3, 6, 9, .3));
  opacity: .55;
}

.cc-run--after .cc-run-media video { filter: saturate(.85); }
.cc-run--after .cc-run-shade { opacity: .78; }

/* Blurred still of each clip behind it: shows instantly while the video loads */
.cc-ambient {
  position: absolute;
  inset: -8%;
  background: var(--cc-ink) center / cover no-repeat;
  filter: blur(36px) brightness(.5) saturate(1.1);
  z-index: -3;
  pointer-events: none;
}

/* Stack: blurred still, then the sharp video, then the shade (the site's own CSS pushes
   .interior-backdrop behind, so set it explicitly) */
.cc-run-media .cc-ambient { z-index: 0; }
.cc-run-media video { z-index: 1 !important; opacity: 1 !important; }
.cc-run-media .cc-run-shade { z-index: 2; }

/* The footage is portrait, so on landscape screens frame the part of each clip that matters */
html.cc-immersive .quiet-landing .hero-loop { object-position: 50% 58% !important; }
.cc-run--inside .cc-run-media video { object-position: 50% 45% !important; }

/* Sections inside a run let the video show through */
html.cc-immersive .cc-run > section,
html.cc-immersive .cc-run .interior-cinematic,
html.cc-immersive .cc-run .faq {
  background: transparent !important;
}

html.cc-immersive .cc-run .interior-cinematic {
  min-height: 92svh;
  display: grid;
  align-content: center;
}

/* Text sitting on video gets a little lift for legibility */
html.cc-immersive .cc-run :is(h2, h3, p, li, summary, span, small, strong) {
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}

/* ---------- Rhythm: less dead space ---------- */
html.cc-immersive main > section:not(.cc-intro):not(.quiet-landing),
html.cc-immersive .cc-run > section {
  padding-top: clamp(56px, 7vw, 104px) !important;
  padding-bottom: clamp(56px, 7vw, 104px) !important;
}

html.cc-immersive .section-top { margin-bottom: clamp(24px, 3vw, 40px) !important; }
html.cc-immersive .cc-run .interior-cinematic + .media-context { margin-top: 0 !important; }

/* ---------- Tactile buttons: a light sheen follows the pointer across the satin ---------- */
/* Only plain buttons get position: relative; the nav and floating Book buttons are already positioned */
html.cc-immersive .btn.cc-tactile { position: relative; }

html.cc-immersive .cc-tactile {
  overflow: hidden;
  isolation: isolate;
  will-change: transform;
}

html.cc-immersive .cc-tactile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120px 60px at var(--sx, 50%) 0%, rgba(45, 95, 185, .42), transparent 72%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 1;
}

html.cc-immersive .cc-tactile:hover::after { opacity: 1; }

/* ---------- Cards tilt with a moving glare (desktop pointers) ---------- */
html.cc-immersive .cc-tilt {
  position: relative;
  /* !important so it composes with GSAP's inline transforms instead of being reset by them */
  rotate: var(--tilt, 0 0 1 0deg) !important;
  transition: rotate .7s var(--cc-ease);
  transform-style: preserve-3d;
}

html.cc-immersive .cc-tilt.cc-tilt-on { transition: rotate .15s linear; }

.cc-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(190, 228, 255, .16), transparent 55%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .5s ease;
  z-index: 2;
}

.cc-tilt-on > .cc-glare { opacity: 1; }

/* ---------- Smooth details ---------- */
.cc-details-body { overflow: hidden; }

/* ---------- Photos breathe in their frames on hover ---------- */
@media (hover: hover) and (pointer: fine) {
  html.cc-immersive :is(.photo-chapter, .interior-pair figure, .chemistry-card) { overflow: hidden; }
  html.cc-immersive :is(.photo-chapter, .interior-pair figure, .chemistry-card) img {
    transition: filter .8s var(--cc-ease);
  }
  html.cc-immersive :is(.photo-chapter, .interior-pair figure, .chemistry-card):hover img {
    filter: brightness(1.08) contrast(1.04);
  }
}

/* PROTECT slides fully out of frame; keep it from widening the page */
html.cc-immersive #products { overflow-x: clip; }
/* Likewise the gallery photos waiting off to the right before they slide in */
html.cc-immersive #our-work { overflow-x: clip; }

/* ---------- Split-line headlines ---------- */
.cc-line-mask { overflow: clip; padding-bottom: .06em; margin-bottom: -.06em; }

/* ---------- Work gallery (pinned, desktop) ---------- */
html.cc-immersive .work-grid > * { will-change: transform, filter; }

@media (max-width: 760px) {
  html.cc-immersive .quiet-landing {
    align-content: end;
    padding-bottom: 18svh !important;
  }
  html.cc-immersive .quiet-landing::before {
    background:
      linear-gradient(to top, var(--cc-ink) 0%, rgba(3, 6, 9, .75) 40%, rgba(3, 6, 9, .2) 75%),
      linear-gradient(to bottom, rgba(3, 6, 9, .6) 0%, rgba(3, 6, 9, 0) 25%);
  }
  html.cc-immersive :is(.photo-chapter, .interior-pair figure, .chemistry-card, .about) img { border-width: 4px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-progress { display: none; }
}

/* =====================================================================
   Round 3: smoother scrolling, particles, interior slide-in, readability,
   nav focus blur, wheel cursor
   ===================================================================== */

/* ---------- Smoothness: no live blur over moving content ----------
   Each backdrop-filter re-blurs whatever moves behind it on every frame (video, scrolling page).
   Buttons and cards already have solid textured/glass backgrounds, so drop the live blur. */
html.cc-immersive :is(.btn, .header-book, .quick-book, .package-select, .review-glass, .customer-review,
  .bundle-card, .booking-controls .service-library, .contact-bar, .nav-menu > div) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.cc-immersive :is(.review-glass, .customer-review) { background-color: rgba(8, 14, 20, .88) !important; }
html.cc-immersive :is(.bundle-card, .booking-controls .service-library, .contact-bar) {
  background:
    linear-gradient(rgba(6, 12, 18, .93), rgba(6, 12, 18, .93)) padding-box,
    linear-gradient(135deg, rgba(150, 210, 255, .55), rgba(255, 255, 255, .05) 40%, rgba(150, 210, 255, .35)) border-box,
    var(--cc-tex-box) border-box !important;
}
/* One small header blur is fine; keep it light */
header { backdrop-filter: blur(10px) saturate(130%) !important; -webkit-backdrop-filter: blur(10px) saturate(130%) !important; }
/* Wide soft text shadows over video were expensive to repaint; a tight one reads just as well */
html.cc-immersive .cc-run :is(h2, h3, p, li, summary, span, small, strong) { text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }

/* Section veil (darkens a panel as the next one covers it) */
html.cc-immersive :is(#products, #product-range) { position: relative; }
.cc-veil { position: absolute; inset: 0; background: #030609; opacity: 0; pointer-events: none; z-index: 6; }

/* ---------- PROTECT particles ---------- */
html.cc-immersive #products { position: relative; }
/* At rest the real section shows. Once the cursor touches it, an identical image takes over the
   kicker, heading, PROTECT and bottle (only touched areas break into pixels). The bottom text and
   buttons always stay real. The swap is instant so it can't be seen. */
.cc-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; opacity: 0; }
#products.cc-stirred .cc-particles { opacity: 1; }
html.cc-particles-on #products.cc-stirred > :is(.kicker, h2, .product-stage) { opacity: 0 !important; }

/* Bottom text in the same chrome style as PROTECT (a lighter cut so small text stays readable) */
html.cc-immersive #products :is(.product-description, .product-benefits span) {
  background: linear-gradient(175deg, #ffffff 0%, #aeb9c3 30%, #f6f9fb 46%, #7d8892 62%, #e3edf4 88%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;
}
html.cc-immersive #products .product-description { font-weight: 500; }
html.cc-immersive #products .product-benefits span { font-weight: 700; letter-spacing: .08em; }
/* Hold the word and bottle still (the original scroll drift would misalign the particle copy) */
html.cc-particles-on #products .product-word { transform: translate(-50%, -50%) !important; }
html.cc-particles-on #products .product-stage img { transform: none !important; }
html.cc-particles-on #products > :not(.cc-particles):not(.cc-veil) { position: relative; z-index: 1; }

/* ---------- Interior photos slide in from both sides ---------- */
html.cc-immersive #interior-finish { overflow-x: clip; }
html.cc-immersive .interior-pair { position: relative; overflow: visible; }
html.cc-immersive .interior-pair figure { position: relative; z-index: 1; will-change: transform; }
.cc-ribbon {
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -.55em;
  z-index: 0;
  white-space: nowrap;
  pointer-events: none;
  font: 800 clamp(80px, 13vw, 230px)/1 SpaceGrotesk, Arial, sans-serif;
  letter-spacing: -.035em;
  -webkit-text-stroke: 1.5px rgba(195, 230, 255, .6);
  color: rgba(190, 225, 255, .07);
  text-shadow: none !important; /* a shadow behind the faint fill reads as dark letters */
  will-change: transform;
}
/* A light streak trailing each photo as it travels in */
.cc-trail {
  position: absolute;
  top: 12%;
  bottom: 12%;
  width: 70%;
  pointer-events: none;
  filter: blur(16px);
  will-change: transform, opacity;
}
.interior-pair figure:first-of-type .cc-trail { right: 96%; transform-origin: 100% 50%; background: linear-gradient(to left, rgba(80, 170, 255, .55), rgba(80, 170, 255, 0)); }
.interior-pair figure:last-of-type .cc-trail { left: 96%; transform-origin: 0 50%; background: linear-gradient(to right, rgba(80, 170, 255, .55), rgba(80, 170, 255, 0)); }

/* ---------- Readability: dim grey text brought up, key text emphasized ---------- */
html.cc-immersive main :is(p, li, dd, figcaption, .lead, .quiet-description, .product-description) { color: #dbe6ee !important; }
html.cc-immersive main :is(.lead, .quiet-description, .product-description, .section-top > p) { color: #eef4f8 !important; }
html.cc-immersive main :is(h1, h2, h3, strong, b) { color: #ffffff; }
html.cc-immersive :is(.kicker, .chapter-number, .media-context, .mega-heading) {
  color: #a9dcff !important;
  text-shadow: 0 0 14px rgba(47, 140, 255, .45);
}
html.cc-immersive :is(.quiet-location, .scroll-invitation, small, .product-benefits span) { color: #c9d7e2 !important; }
html.cc-immersive :is(.bundle-card b, .row-price, .bundle-card strong) { color: #ffffff !important; text-shadow: 0 0 18px rgba(47, 140, 255, .35); }
html.cc-immersive .nav-menu > div :is(p, a) { color: #e3edf4; }

/* ---------- Nav: labels rest softly blurred, sharpen on hover or focus ---------- */
@media (hover: hover) and (pointer: fine) {
  header .nav-menu > summary {
    filter: blur(1.5px);
    opacity: .66;
    transition: filter .5s var(--cc-ease), opacity .5s var(--cc-ease), color .25s ease, text-shadow .5s ease !important;
  }
  /* Entering the bar brings everything partly into focus; the hovered label snaps fully clear */
  header .navlinks:hover .nav-menu > summary { filter: blur(.9px); opacity: .8; }
  /* Same specificity as the bar-hover rule above (and later), so the hovered label always wins */
  header .navlinks .nav-menu > summary:hover,
  header .navlinks .nav-menu > summary:focus-visible,
  header .navlinks .nav-menu[open] > summary {
    filter: none !important;
    opacity: 1 !important;
    color: #ffffff !important;
    text-shadow: 0 0 14px rgba(80, 170, 255, .75), 0 0 2px rgba(200, 235, 255, .6);
  }
}

/* ---------- Wheel cursor ---------- */
html.cc-cursor-on, html.cc-cursor-on * { cursor: none !important; }
html.cc-cursor-on :is(input:not([type="checkbox"]):not([type="radio"]), textarea) { cursor: text !important; }
.cc-cursor {
  position: fixed;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  pointer-events: none;
  z-index: 2147483000;
  transition: opacity .2s ease;
  will-change: transform;
}
.cc-cursor svg { display: block; width: 36px; height: 36px; filter: drop-shadow(0 0 3px rgba(47, 140, 255, .6)) drop-shadow(0 1px 1.5px rgba(0, 0, 0, .85)); will-change: transform; }
.cc-cursor.is-link svg { filter: drop-shadow(0 0 6px rgba(80, 170, 255, .95)) drop-shadow(0 1px 1.5px rgba(0, 0, 0, .85)); }
.cc-cursor.is-hidden { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .cc-ribbon, .cc-trail { display: none; }
}

/* ---------- "Choose your detail": live, slowly drifting satin ----------
   The satin sits on an oversized layer behind each card and drifts, turns and breathes on its own
   (transform-only, so the GPU moves it without repainting). A dark inner panel covers all but a
   5px ring, so the texture reads as a living frame. Each card drifts on its own timing. */
html.cc-immersive #bundles :is(.bundle-card, .service-library) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0 !important;
  background: transparent !important;
}
html.cc-immersive #bundles :is(.bundle-card, .service-library)::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: -2;
  background:
    radial-gradient(ellipse 40% 30% at 30% 30%, rgba(160, 215, 255, .35), transparent 70%),
    var(--cc-satin) center / cover no-repeat;
  /* Static filter: rasterized once, then only the transform animates */
  filter: brightness(2.1) contrast(1.2);
  animation: cc-satin-drift 19s ease-in-out infinite;
  will-change: transform;
  pointer-events: none;
}
html.cc-immersive #bundles :is(.bundle-card, .service-library)::after {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(160deg, rgba(150, 210, 255, .07), transparent 35%),
    rgba(6, 12, 18, .94);
  pointer-events: none;
}
html.cc-immersive #bundles .bundle-card:nth-child(2)::before { animation-duration: 23s; animation-delay: -7s; }
html.cc-immersive #bundles .bundle-card:nth-child(3)::before { animation-duration: 21s; animation-delay: -13s; animation-direction: reverse; }
html.cc-immersive #bundles .service-library::before { animation-duration: 27s; animation-delay: -4s; }

@keyframes cc-satin-drift {
  0%   { transform: translate(-6%, -4%) rotate(0deg) scale(1.05); }
  25%  { transform: translate(5%, -7%) rotate(7deg) scale(1.14); }
  50%  { transform: translate(7%, 5%) rotate(2deg) scale(1.08); }
  75%  { transform: translate(-4%, 7%) rotate(-6deg) scale(1.16); }
  100% { transform: translate(-6%, -4%) rotate(0deg) scale(1.05); }
}

/* The small satin buttons in this section shimmer slowly too */
html.cc-immersive #bundles :is(.btn, .package-select) {
  background-size: 100% 100%, 360% auto !important;
  animation: cc-satin-slide 14s ease-in-out infinite alternate;
}
@keyframes cc-satin-slide {
  from { background-position: 0 0, 0% 30%; }
  to   { background-position: 0 0, 100% 70%; }
}

@media (prefers-reduced-motion: reduce) {
  html.cc-immersive #bundles :is(.bundle-card, .service-library)::before,
  html.cc-immersive #bundles :is(.btn, .package-select) { animation: none; }
}

/* ---------- "Choose your detail": molten obsidian (cc-molten.js) ----------
   The section's background becomes the live molten-obsidian surface. Cards are dark glass panels
   whose 5px ring is left clear, so the glowing cracks run around their edges and between them.
   (Replaces the drifting satin when the shader is available.) */
html.cc-molten-on #bundles { position: relative; isolation: isolate; }
.cc-molten { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
html.cc-molten-on #bundles > .wrap { position: relative; z-index: 1; }
html.cc-molten-on #bundles :is(.bundle-card, .service-library)::before { content: none; animation: none; }
html.cc-molten-on #bundles :is(.bundle-card, .service-library)::after {
  background:
    linear-gradient(160deg, rgba(150, 210, 255, .10), transparent 40%),
    rgba(4, 7, 11, .9);
  box-shadow: inset 0 1px 0 rgba(200, 230, 255, .12);
}
/* A faint outline keeps each card's shape crisp against the glow */
html.cc-molten-on #bundles :is(.bundle-card, .service-library) { box-shadow: 0 0 0 1px rgba(120, 190, 255, .18), 0 24px 60px rgba(0, 0, 0, .55) !important; }
/* Buttons here become obsidian glass with a blue edge, matching the surface */
html.cc-molten-on #bundles :is(.btn, .package-select) {
  animation: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .4)), #05080d !important;
  border-color: rgba(90, 170, 255, .55) !important;
}

/* ---------- Dropdown menus: alive, glowing, staggered ---------- */
header .nav-menu > div {
  background:
    radial-gradient(600px 220px at var(--mx, 30%) var(--my, 0%), rgba(47, 140, 255, .10), transparent 70%),
    linear-gradient(180deg, rgba(7, 12, 19, .985), rgba(3, 6, 10, .99)) !important;
  border-top: 1px solid rgba(120, 190, 255, .28) !important;
  border-bottom: 1px solid rgba(120, 190, 255, .14) !important;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .65), inset 0 1px 0 rgba(170, 220, 255, .10) !important;
  overflow-x: hidden; /* vertical scrolling stays on for tall panels like Service Areas */
  animation: cc-menu-drop .5s var(--cc-ease) both !important;
}
/* A light that keeps sweeping along the panel's top edge */
header .nav-menu > div::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 38%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #9fd6ff, #2f8cff, transparent);
  box-shadow: 0 0 14px rgba(47, 140, 255, .9);
  animation: cc-menu-sweep 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cc-menu-drop {
  from { opacity: 0; transform: translateY(-14px); clip-path: inset(0 0 100% 0); }
  to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
}
@keyframes cc-menu-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(265%); }
}
/* Items cascade in */
header .nav-menu[open] .mega-links > *,
header .nav-menu[open] .mega-note { animation: cc-menu-item .55s var(--cc-ease) both; }
header .nav-menu[open] .mega-links > :nth-child(1) { animation-delay: .04s; }
header .nav-menu[open] .mega-links > :nth-child(2) { animation-delay: .08s; }
header .nav-menu[open] .mega-links > :nth-child(3) { animation-delay: .12s; }
header .nav-menu[open] .mega-links > :nth-child(4) { animation-delay: .16s; }
header .nav-menu[open] .mega-links > :nth-child(5) { animation-delay: .20s; }
header .nav-menu[open] .mega-links > :nth-child(n+6) { animation-delay: .24s; }
header .nav-menu[open] .mega-note { animation-delay: .18s; }
@keyframes cc-menu-item {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
header .mega-heading { color: #a9dcff !important; text-shadow: 0 0 12px rgba(47, 140, 255, .5); }
/* Links: glide right, light up, and grow an arrow and a glowing underline */
header .mega-links > a {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 14px;
  width: fit-content;
  color: #e6eff6 !important;
  transition: color .3s ease, transform .45s var(--cc-ease), text-shadow .35s ease !important;
}
header .mega-links > a::after {
  content: "→";
  font-size: .7em;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .35s ease, transform .45s var(--cc-ease);
  color: #8fd0ff;
}
header .mega-links > a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 1.2em;
  bottom: 4px;
  height: 1px;
  background: linear-gradient(90deg, #2f8cff, #bfe4ff);
  box-shadow: 0 0 10px rgba(47, 140, 255, .9);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .5s var(--cc-ease);
}
header .mega-links > a:hover,
header .mega-links > a:focus-visible {
  color: #ffffff !important;
  transform: translateX(8px);
  text-shadow: 0 0 18px rgba(80, 170, 255, .55);
  background: none !important;
}
header .mega-links > a:hover::after, header .mega-links > a:focus-visible::after { opacity: 1; transform: none; }
header .mega-links > a:hover::before, header .mega-links > a:focus-visible::before { transform: scaleX(1); }
/* Side note becomes a small glowing glass card with a carbon edge */
header .mega-note {
  border: 1px solid transparent !important;
  border-radius: 16px;
  padding: 22px 24px !important;
  background:
    linear-gradient(rgba(6, 11, 17, .96), rgba(6, 11, 17, .96)) padding-box,
    linear-gradient(135deg, rgba(150, 210, 255, .55), rgba(255, 255, 255, .04) 45%, rgba(150, 210, 255, .3)) border-box,
    var(--cc-carbon) 0 0 / 224px 224px border-box !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .5), 0 0 30px rgba(47, 140, 255, .12);
  color: #d5e2ec !important;
}
header .mega-note strong { color: #ffffff !important; }
header .mega-note a { color: #9fd6ff !important; }

@media (prefers-reduced-motion: reduce) {
  header .nav-menu > div, header .nav-menu > div::before,
  header .nav-menu[open] .mega-links > *, header .nav-menu[open] .mega-note { animation: none !important; }
}

/* ---------- Things light up as the cursor approaches (--near: 0 far .. 1 on top, set in JS) ---------- */
@media (hover: hover) and (pointer: fine) {
  html.cc-immersive :is(.bundle-card, .service-row, .chemistry-card, .photo-chapter, .interior-pair figure,
    .customer-review, .review-glass, .faq details, #why-us .wrap > div:not(.section-top) > *) {
    outline: 1px solid rgba(140, 205, 255, calc(var(--near, 0) * .75));
    outline-offset: calc(2px + var(--near, 0) * 4px);
    transition: outline-color .25s ease, outline-offset .35s var(--cc-ease);
  }
  html.cc-immersive :is(.btn, .header-book, .quick-book) {
    outline: 1px solid rgba(150, 210, 255, calc(var(--near, 0) * .85));
    outline-offset: calc(3px + var(--near, 0) * 3px);
  }
  html.cc-immersive main h2,
  html.cc-immersive .cc-run h2 {
    text-shadow: 0 0 calc(var(--near, 0) * 28px) rgba(80, 170, 255, calc(var(--near, 0) * .6)), 0 1px 6px rgba(0, 0, 0, .6);
    transition: text-shadow .3s ease;
  }
}

/* ---------- Cursor light on cards (base layer; the breathing carbon below sits on top) ---------- */
html.cc-immersive :is(.photo-chapter, .why-notes p, .customer-review, .review-glass) {
  background:
    radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(110, 190, 255, calc(.15 + var(--near, 0) * .75)), transparent 70%),
    linear-gradient(160deg, rgba(120, 170, 220, .22), rgba(40, 60, 80, .16) 50%, rgba(120, 170, 220, .12)) !important;
  background-color: #0a1016 !important;
  border: 1px solid rgba(150, 205, 255, .2) !important;
}
/* A soft sheen over the cells, brightest right under the cursor */
html.cc-immersive :is(.why-notes p, .customer-review, .review-glass) { position: relative; isolation: isolate; }
html.cc-immersive :is(.why-notes p, .customer-review, .review-glass)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(180px circle at var(--mx, 50%) var(--my, 50%), rgba(200, 235, 255, calc(var(--near, 0) * .12)), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
html.cc-immersive .photo-chapter figcaption { background: linear-gradient(180deg, rgba(5, 9, 14, .1), rgba(5, 9, 14, .55)); }

/* ---------- Google reviews: a living carbon panel behind the cards ----------
   The same carbon as the cards and buttons, at a larger scale: it breathes slowly, drifts against
   the cursor, and the weave lights up in a wide pool where you point. Its veil is darker than the
   cards', so the review cards and the "Leave a Google review" button stay in front. */
html.cc-immersive #reviews { position: relative; isolation: isolate; overflow: hidden; }
html.cc-immersive #reviews::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -2;
  background: var(--cc-carbon) 0 0 / 260px 260px repeat;
  filter: brightness(.75) saturate(1.1);
  translate: calc(var(--mx, 50%) * -0.03) calc(var(--my, 50%) * -0.03);
  transition: translate 1.4s cubic-bezier(.22, 1, .36, 1);
  animation: cc-carbon-breathe 9s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}
html.cc-immersive #reviews::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, 40%),
      rgba(3, 6, 9, calc(.7 - var(--near, 0) * .4)),
      rgba(3, 6, 9, .88) 75%),
    radial-gradient(ellipse 120% 80% at 50% 50%, transparent 40%, rgba(3, 6, 9, .9) 100%);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { html.cc-immersive #reviews::before { animation: none; transition: none; } }
/* The stage fits the bottle at every width (the original fixed height was shorter than the bottle on narrower screens) */
html.cc-immersive #products .product-stage { height: auto !important; min-height: 0; padding: 8px 0; }

/* ---------- Element tiles: Gs / Po / Pw ----------
   A periodic-table cell in Crystal Clear's language: breathing carbon behind glass, a chrome
   symbol, its order number and product name, and a small accent from the real product's colour.
   A light sweep passes over them on its own; they glow toward the cursor (--near). */
.cc-el {
  --accent: 61, 220, 132;
  position: relative;
  display: inline-grid;
  grid-template-rows: auto 1fr auto auto;
  width: 78px;
  height: 84px;
  padding: 7px 8px 6px;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate;
  vertical-align: top;
  margin: 0 0 14px;
  border: 1px solid rgba(var(--accent), calc(.35 + var(--near, 0) * .5));
  background:
    radial-gradient(70px circle at 30% 20%, rgba(var(--accent), calc(.22 + var(--near, 0) * .3)), transparent 70%),
    #070b10;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 10px 26px rgba(0, 0, 0, .5),
    0 0 calc(10px + var(--near, 0) * 22px) rgba(var(--accent), calc(.18 + var(--near, 0) * .35));
  transition: border-color .3s ease, box-shadow .35s ease;
  font-family: SpaceGrotesk, Arial, sans-serif;
  line-height: 1;
  text-align: left;
}
.cc-el[data-el="po"] { --accent: 190, 140, 255; }
.cc-el[data-el="pw"] { --accent: 255, 138, 61; }
.cc-el::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(105deg, transparent 42%, rgba(230, 245, 255, .28) 50%, transparent 58%);
  transform: translateX(-60%);
  animation: cc-el-sweep 5.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
.cc-el[data-el="po"]::after { animation-delay: -1.8s; }
.cc-el[data-el="pw"]::after { animation-delay: -3.6s; }
@keyframes cc-el-sweep {
  0%, 55% { transform: translateX(-60%); }
  85%, 100% { transform: translateX(60%); }
}
.cc-el-n { font: 600 10px/1 ui-monospace, Consolas, monospace; color: rgb(var(--accent)) !important; letter-spacing: .06em; text-shadow: 0 0 8px rgba(var(--accent), .6); }
.cc-el-sym {
  align-self: center;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.04em;
  background: linear-gradient(175deg, #ffffff 0%, #9aa7b2 35%, #f4f8fb 52%, #6a7682 70%, #e6eff6 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  text-shadow: none !important;
}
.cc-el-name { font-size: 9px; font-weight: 600; color: #e8f0f6 !important; white-space: nowrap; }
.cc-el-role { margin-top: 3px; font: 600 8px/1 ui-monospace, Consolas, monospace; letter-spacing: .14em; color: rgba(var(--accent), .95) !important; }
.cc-el-row { display: flex; justify-content: center; margin-bottom: 6px; }
.cc-el-row .cc-el { margin: 0; }
@media (prefers-reduced-motion: reduce) { .cc-el::after { animation: none; display: none; } }

/* ---------- Carbon cards (replaces the honeycomb "scales") ----------
   The same blue-chip carbon as the "Choose your detail" buttons, as a living surface on the cards:
   it slowly breathes (scales in and out) and drifts against the cursor, and the weave brightens
   in a soft pool under the pointer. It's kept deliberately dimmer than the buttons, so the
   buttons, which glow a deeper blue, stay the focal point. */
html.cc-immersive :is(.photo-chapter, .why-notes p, .customer-review, .review-glass,
  .checkout-selection, .extras-collapse, .booking-form, .review-panel,
  .vehicle-card, .tier-card, .condition-card, .upgrade-card) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #06090d !important;
  border: 1px solid rgba(140, 195, 245, calc(.16 + var(--near, 0) * .34)) !important;
}
html.cc-immersive :is(.photo-chapter, .why-notes p, .customer-review, .review-glass,
  .checkout-selection, .extras-collapse, .booking-form, .review-panel,
  .vehicle-card, .tier-card, .condition-card, .upgrade-card)::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -2;
  border-radius: 0;
  background: var(--cc-carbon) 0 0 / 180px 180px repeat;
  filter: brightness(.7) saturate(1.1);
  /* drifts gently away from the cursor; breathing runs on a separate property so both combine */
  translate: calc(var(--mx, 50%) * -0.04) calc(var(--my, 50%) * -0.04);
  transition: translate 1.2s cubic-bezier(.22, 1, .36, 1);
  animation: cc-carbon-breathe 7s ease-in-out infinite alternate;
  will-change: transform;
  pointer-events: none;
}
/* Dark veil with a clear pool under the cursor, so the weave lights up where you point */
html.cc-immersive :is(.photo-chapter, .why-notes p, .customer-review, .review-glass,
  .checkout-selection, .extras-collapse, .booking-form, .review-panel,
  .vehicle-card, .tier-card, .condition-card, .upgrade-card)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
      rgba(4, 7, 11, calc(.62 - var(--near, 0) * .42)),
      rgba(4, 7, 11, .8) 75%),
    linear-gradient(160deg, rgba(150, 210, 255, .06), transparent 45%);
  pointer-events: none;
}
@keyframes cc-carbon-breathe {
  from { scale: 1; opacity: .85; }
  to { scale: 1.08; opacity: 1; }
}
/* Stagger the breathing so cards side by side don't pulse in unison */
html.cc-immersive :is(.photo-chapter, .why-notes p, .customer-review, .vehicle-card, .tier-card, .condition-card, .upgrade-card):nth-child(2n)::before { animation-delay: -2.4s; }
html.cc-immersive :is(.photo-chapter, .why-notes p, .customer-review, .vehicle-card, .tier-card, .condition-card, .upgrade-card):nth-child(3n)::before { animation-delay: -4.6s; }
/* Selected choices on checkout keep their blue glow over the carbon */
html.cc-immersive :is(.vehicle-card, .tier-card, .condition-card)[aria-pressed="true"],
html.cc-immersive .upgrade-card:has(input:checked) { border-color: rgba(120, 200, 255, .95) !important; }

/* Element tiles: the same carbon, finer */
.cc-el {
  background:
    radial-gradient(70px circle at 30% 20%, rgba(var(--accent), calc(.22 + var(--near, 0) * .3)), transparent 70%),
    linear-gradient(rgba(5, 8, 12, .55), rgba(5, 8, 12, .55)),
    var(--cc-carbon) 0 0 / 120px 120px repeat !important;
}

@media (prefers-reduced-motion: reduce) {
  html.cc-immersive :is(.photo-chapter, .why-notes p, .customer-review, .review-glass,
    .checkout-selection, .extras-collapse, .booking-form, .review-panel,
    .vehicle-card, .tier-card, .condition-card, .upgrade-card)::before { animation: none; transition: none; }
}

/* =====================================================================
   The breath: every carbon surface inhales and exhales.
   Low in the breath the weave dims right down; rising, it brightens and gains contrast and
   saturation, so the blue chips flare and shine while the grey weave stays calm. Throughout,
   the texture swells, drifts and turns a little. Transform + filter on its own layer only
   (no repaints), so scrolling stays smooth. The cursor drift (the separate "translate" property)
   rides on top of it.
   ===================================================================== */
@keyframes cc-breath {
  0%, 100% { transform: translate3d(-1.6%, 1.1%, 0) scale(1) rotate(-.6deg); filter: brightness(.4) saturate(.85) contrast(1); }
  50% { transform: translate3d(1.6%, -1.3%, 0) scale(1.075) rotate(.6deg); filter: brightness(1.1) saturate(2.2) contrast(1.32); }
}
/* Buttons breathe more gently and stay in a deeper hue, so they read calm and their labels stay crisp */
@keyframes cc-breath-soft {
  0%, 100% { transform: translate3d(-3%, 2%, 0) scale(1); filter: brightness(.55) saturate(1) contrast(1); }
  50% { transform: translate3d(3%, -2%, 0) scale(1.08); filter: brightness(.9) saturate(1.9) contrast(1.2); }
}

/* Cards, checkout panels and choices */
html.cc-immersive :is(.photo-chapter, .why-notes p, .customer-review, .review-glass,
  .checkout-selection, .extras-collapse, .booking-form, .review-panel,
  .vehicle-card, .tier-card, .condition-card, .upgrade-card)::before {
  filter: none;
  animation: cc-breath 6.5s cubic-bezier(.45, 0, .55, 1) infinite;
  will-change: transform, filter;
}

/* The review section's carbon panel: a slower, deeper breath */
html.cc-immersive #reviews::before {
  filter: none;
  animation: cc-breath 8.5s cubic-bezier(.45, 0, .55, 1) infinite;
  will-change: transform, filter;
}

/* Element tiles: the carbon moves onto its own breathing layer */
.cc-el { background: #070b10 !important; }
.cc-el::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -1;
  background:
    radial-gradient(70px circle at 34% 24%, rgba(var(--accent), calc(.22 + var(--near, 0) * .3)), transparent 70%),
    linear-gradient(rgba(5, 8, 12, .45), rgba(5, 8, 12, .45)),
    var(--cc-carbon) 0 0 / 120px 120px repeat;
  animation: cc-breath 6.5s cubic-bezier(.45, 0, .55, 1) infinite;
  will-change: transform, filter;
  pointer-events: none;
}
.cc-el[data-el="po"]::before { animation-delay: -2.1s; }
.cc-el[data-el="pw"]::before { animation-delay: -4.3s; }

/* Carbon buttons: same idea, on their own layer behind the label */
html.cc-immersive :is(.btn, .header-book, .quick-book) { background: #05080c !important; }
html.cc-immersive :is(.btn, .header-book, .quick-book)::before {
  content: "";
  position: absolute;
  inset: -25%;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .5)),
    linear-gradient(rgba(3, 6, 10, .3), rgba(3, 6, 10, .3)),
    var(--cc-carbon) 0 0 / 120px 120px repeat;
  animation: cc-breath-soft 5.5s cubic-bezier(.45, 0, .55, 1) infinite;
  will-change: transform, filter;
  pointer-events: none;
}
html.cc-immersive .quick-book::before { animation-delay: -1.7s; }
html.cc-immersive .header-book::before { animation-delay: -3.2s; }
/* "Choose your detail" keeps its obsidian buttons over the molten surface */
html.cc-molten-on #bundles .btn::before { content: none; }

@media (prefers-reduced-motion: reduce) {
  html.cc-immersive :is(.photo-chapter, .why-notes p, .customer-review, .review-glass,
    .checkout-selection, .extras-collapse, .booking-form, .review-panel,
    .vehicle-card, .tier-card, .condition-card, .upgrade-card, #reviews)::before,
  .cc-el::before,
  html.cc-immersive :is(.btn, .header-book, .quick-book)::before { animation: none; filter: brightness(.75); }
}

/* =====================================================================
   Breathing carbon everywhere (.cc-carbon, tagged by cc-immersive.js)
   Faster breath; the same living surface on every card, panel, photo frame, product tile,
   contact bar and dropdown note, on every page.
   ===================================================================== */
html.cc-immersive .cc-carbon.cc-carbon {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #06090d !important;
  border: 1px solid rgba(140, 195, 245, calc(.16 + var(--near, 0) * .34)) !important;
}
html.cc-immersive .cc-carbon.cc-carbon::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -2;
  background: var(--cc-carbon) 0 0 / 180px 180px repeat;
  translate: calc(var(--mx, 50%) * -0.04) calc(var(--my, 50%) * -0.04);
  transition: translate 1.2s cubic-bezier(.22, 1, .36, 1);
  animation: cc-breath 3.6s cubic-bezier(.45, 0, .55, 1) infinite;
  will-change: transform, filter;
  pointer-events: none;
}
html.cc-immersive .cc-carbon.cc-carbon::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%),
      rgba(4, 7, 11, calc(.62 - var(--near, 0) * .42)),
      rgba(4, 7, 11, .8) 75%),
    linear-gradient(160deg, rgba(150, 210, 255, .06), transparent 45%);
  pointer-events: none;
}
html.cc-immersive .cc-carbon.cc-carbon:nth-child(2n)::before { animation-delay: -1.2s; }
html.cc-immersive .cc-carbon.cc-carbon:nth-child(3n)::before { animation-delay: -2.4s; }
/* Photo frames: the ring is a window onto the card's own breathing carbon */
html.cc-immersive .cc-carbon img {
  background: linear-gradient(#05080c, #05080c) padding-box !important;
  border-color: transparent !important;
}
/* Chemistry cards keep their photo filling the top; the carbon shows around and below it */
html.cc-immersive .chemistry-card.cc-carbon > div { position: relative; }

/* Faster breath on the other carbon surfaces too */
html.cc-immersive #reviews::before { animation-duration: 4.6s; }
.cc-el::before { animation-duration: 3.6s; }
html.cc-immersive :is(.btn, .header-book, .quick-book)::before { animation-duration: 3.2s; }

/* The intro's carbon backdrop breathes behind the crystal */
html.cc-immersive .cc-atmos::after {
  animation: cc-breath 4.2s cubic-bezier(.45, 0, .55, 1) infinite;
  will-change: transform, filter;
}

@media (prefers-reduced-motion: reduce) {
  html.cc-immersive .cc-carbon.cc-carbon::before, html.cc-immersive .cc-atmos::after { animation: none; filter: brightness(.75); }
}