/* Shared CtrlBox light: the official cube, section sweeps and card glints. */
.has-brand-atmosphere,
.has-brand-art {
  position: relative;
  isolation: isolate;
}

.brand-atmosphere-layer {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
  contain: paint;
}

.brand-atmosphere-art {
  --brand-cube-size: clamp(440px, 58vw, 800px);
  position: absolute;
  width: var(--brand-cube-size);
  height: var(--brand-cube-size);
  right: -6%;
  top: 50%;
  translate: 0 -50%;
  background: url('../img/ctrlbox-cube-brand.png') center / contain no-repeat;
  opacity: .1;
  transform: rotate(-5deg);
  transition: opacity 280ms ease, transform 420ms cubic-bezier(.2, .8, .2, 1);
}

.brand-atmosphere-layer::after {
  content: '';
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: -38%;
  width: 36%;
  background: linear-gradient(108deg, transparent 9%, rgba(8, 71, 52, .04) 32%, rgba(200, 243, 110, .22) 43%, rgba(255, 255, 255, .52) 49%, rgba(200, 243, 110, .18) 57%, transparent 86%);
  opacity: 0;
  transform: translate3d(0, 0, 0) skewX(-18deg);
  animation: brandLightSweep 6.4s linear infinite;
  animation-delay: var(--brand-light-delay, 0s);
  animation-play-state: paused;
}

.has-brand-atmosphere.is-brand-dark > .brand-atmosphere-layer .brand-atmosphere-art {
  opacity: .14;
}

.has-brand-atmosphere.is-brand-dark > .brand-atmosphere-layer::after {
  background: linear-gradient(108deg, transparent 9%, rgba(200, 243, 110, .12) 35%, rgba(247, 255, 242, .3) 48%, rgba(200, 243, 110, .2) 58%, transparent 86%);
}

/* A quiet, continuous light pass. Content remains above the section lighting. */
.has-brand-atmosphere > .section-glare {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  border-radius: inherit;
}

/* The opaque hero film is at layer 1; keep its light above it and below the CTA. */
.hero-film.has-brand-atmosphere > .section-glare {
  z-index: 2;
  pointer-events: none;
}

.has-brand-atmosphere > .section-glare::before,
.has-brand-atmosphere.is-glare-visible > .section-glare::before {
  content: '';
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: -38%;
  width: 36%;
  filter: none;
  background: linear-gradient(108deg, transparent 9%, rgba(8, 71, 52, .04) 32%, rgba(200, 243, 110, .22) 43%, rgba(255, 255, 255, .52) 49%, rgba(200, 243, 110, .18) 57%, transparent 86%);
  animation: brandLightSweep 6.4s linear infinite;
  animation-delay: var(--brand-light-delay, 0s);
  animation-play-state: paused;
}

.has-brand-atmosphere.is-brand-dark > .section-glare::before {
  background: linear-gradient(108deg, transparent 9%, rgba(200, 243, 110, .12) 35%, rgba(247, 255, 242, .3) 48%, rgba(200, 243, 110, .2) 58%, transparent 86%);
}

.has-brand-atmosphere:has(> .section-glare) > .brand-atmosphere-layer::after {
  display: none;
}

.atmosphere-enabled .is-atmosphere-visible > .brand-atmosphere-layer::after,
.atmosphere-enabled .is-atmosphere-visible > .section-glare::before {
  animation-play-state: running;
}

/* The large brand mark floats slowly behind each visible section. */
.has-brand-atmosphere > .brand-atmosphere-layer .brand-atmosphere-art {
  animation: brandAtmosphereCubeDrift 15s ease-in-out infinite alternate;
  animation-delay: var(--brand-light-delay, 0s);
  animation-play-state: paused;
}

.atmosphere-enabled .is-atmosphere-visible > .brand-atmosphere-layer .brand-atmosphere-art {
  animation-play-state: running;
}

.has-brand-atmosphere:focus-within > .brand-atmosphere-layer .brand-atmosphere-art {
  opacity: .15;
}

.has-brand-atmosphere.is-brand-dark:focus-within > .brand-atmosphere-layer .brand-atmosphere-art {
  opacity: .2;
}

.has-brand-art > .brand-atmosphere-layer .brand-atmosphere-art {
  width: 70%;
  height: 100%;
  right: 2%;
  opacity: 0;
  background-size: contain;
}

.has-brand-art > .brand-atmosphere-layer::after {
  display: block;
  animation-duration: 6s;
  background: linear-gradient(108deg, transparent 18%, rgba(200, 243, 110, .12) 40%, rgba(255, 255, 255, .56) 49%, rgba(200, 243, 110, .18) 57%, transparent 82%);
}

.section-dark .has-brand-art > .brand-atmosphere-layer::after,
.has-brand-art.is-featured > .brand-atmosphere-layer::after {
  background: linear-gradient(108deg, transparent 18%, rgba(200, 243, 110, .08) 40%, rgba(247, 255, 242, .2) 49%, rgba(200, 243, 110, .12) 57%, transparent 82%);
}

.has-brand-art:focus-within > .brand-atmosphere-layer .brand-atmosphere-art {
  opacity: .1;
  transform: translate3d(0, 0, 0) scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .has-brand-atmosphere:hover > .brand-atmosphere-layer .brand-atmosphere-art {
    opacity: .15;
  }

  .has-brand-atmosphere.is-brand-dark:hover > .brand-atmosphere-layer .brand-atmosphere-art {
    opacity: .2;
  }

  .has-brand-art:hover > .brand-atmosphere-layer .brand-atmosphere-art {
    opacity: .1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

.atmosphere-paused .brand-atmosphere-layer::after,
.atmosphere-backgrounded .brand-atmosphere-layer::after,
.atmosphere-paused .has-brand-atmosphere > .section-glare::before,
.atmosphere-backgrounded .has-brand-atmosphere > .section-glare::before,
.atmosphere-paused .has-brand-atmosphere > .brand-atmosphere-layer .brand-atmosphere-art,
.atmosphere-backgrounded .has-brand-atmosphere > .brand-atmosphere-layer .brand-atmosphere-art {
  animation-play-state: paused;
}

.atmosphere-paused .brand-atmosphere-layer::after,
.atmosphere-paused .has-brand-atmosphere > .section-glare::before {
  opacity: 0 !important;
}

.atmosphere-paused .brand-atmosphere-art {
  transform: none !important;
  transition: none;
}

@keyframes brandLightSweep {
  0% { opacity: 0; transform: translate3d(0, 0, 0) skewX(-18deg); }
  12%, 84% { opacity: .44; }
  100% { opacity: 0; transform: translate3d(410%, 0, 0) skewX(-18deg); }
}

@keyframes brandAtmosphereCubeDrift {
  from { transform: translate3d(0, 7px, 0) rotate(-5deg); }
  to { transform: translate3d(-12px, -9px, 0) rotate(-1deg) scale(1.025); }
}

@media (max-width: 600px) {
  .brand-atmosphere-art { --brand-cube-size: clamp(350px, 105vw, 560px); right: -38%; opacity: .085; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-atmosphere-layer::after,
  .has-brand-atmosphere > .section-glare::before { animation: none !important; opacity: 0 !important; }
  .brand-atmosphere-art { animation: none !important; transform: none !important; transition: none !important; }
}

@media print {
  .brand-atmosphere-layer,
  .has-brand-atmosphere > .section-glare { display: none !important; }
}