/**
 * BBI Atmosphere — neon network + metallic phoenix sheen (on-art, not screen-wide)
 */

:root {

  --bbi-atm-black: #050304;

  --bbi-atm-charcoal: #0c090a;

  /* Fallbacks if design-system tokens are not loaded */

  --bbi-neon: #dc3558;

  --bbi-neon-rgb: 220, 53, 88;

  --bbi-neon-hot: #f25282;

  --bbi-neon-hot-rgb: 242, 82, 130;

  --bbi-neon-brick: #a83a2c;

  --bbi-neon-brick-rgb: 168, 58, 44;

  --bbi-neon-ember: #b64733;

  --bbi-neon-ember-rgb: 182, 71, 51;

  --bbi-neon-bolt: #e63c60;

  --bbi-neon-bolt-rgb: 230, 60, 96;

  --bbi-neon-core: #f7eee4;

  --bbi-neon-core-rgb: 247, 238, 228;

  --bbi-neon-soft: rgba(220, 53, 88, 0.18);

  --bbi-neon-glow: rgba(242, 82, 130, 0.32);

  --bbi-cobalt: #2da5e8;

  --bbi-cobalt-rgb: 45, 165, 232;

  --bbi-cobalt-deep: #1b7fbf;

  --bbi-cobalt-deep-rgb: 27, 127, 191;

  --bbi-cobalt-soft: rgba(45, 165, 232, 0.16);

  --bbi-cobalt-glow: rgba(45, 165, 232, 0.28);

  --bbi-teal: #2eb8a6;

  --bbi-teal-rgb: 46, 184, 166;

  --bbi-sea: #1f8f9a;

  --bbi-sea-rgb: 31, 143, 154;

  --bbi-green: #3d9a6a;

  --bbi-green-rgb: 61, 154, 106;

  --bbi-teal-soft: rgba(46, 184, 166, 0.16);

  --bbi-teal-glow: rgba(46, 184, 166, 0.28);

  --bbi-green-soft: rgba(61, 154, 106, 0.14);

  --bbi-ice: var(--bbi-cobalt);

  --bbi-ice-soft: var(--bbi-cobalt-soft);

  --bbi-phoenix-src: url("/assets/brand/bbi-phoenix-watermark.png?v=20260802ad");
}

html:has(body.has-bbi-atmosphere),
body.has-bbi-atmosphere {
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body.has-bbi-atmosphere {
  background: transparent;
  --bg: rgba(5, 3, 4, 0.82);
  --bg-2: rgba(14, 10, 12, 0.86);
  --panel: rgba(22, 16, 20, 0.92);
  --glass: rgba(14, 10, 12, 0.78);
}

.bbi-atmosphere {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 80% 55% at 72% 16%, color-mix(in srgb, var(--bbi-neon) 28%, transparent), transparent 56%),
    radial-gradient(ellipse 55% 45% at 14% 78%, color-mix(in srgb, var(--bbi-cobalt) 22%, transparent), transparent 52%),
    radial-gradient(ellipse 40% 35% at 88% 72%, color-mix(in srgb, var(--bbi-teal) 12%, transparent), transparent 55%),
    radial-gradient(ellipse 36% 30% at 62% 84%, color-mix(in srgb, var(--bbi-green) 12%, transparent), transparent 55%),
    radial-gradient(ellipse 45% 35% at 40% 40%, color-mix(in srgb, var(--bbi-neon-ember) 12%, transparent), transparent 50%),
    linear-gradient(165deg, var(--bbi-atm-black) 0%, #0a0c0e 48%, #080508 100%);
}

.bbi-atmosphere__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 1;
  pointer-events: none;
  filter: saturate(1.22) brightness(1.1) contrast(1.05);
}

body.bbi-landing-experience .bbi-atmosphere__canvas,
body.bbi-xp-page .bbi-atmosphere__canvas {
  opacity: 1;
  filter: saturate(1.28) brightness(1.14) contrast(1.06);
}

/* Sacred geometry — galaxy sprinkle on catalog/service subpages */
.bbi-atmosphere::before,
.bbi-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: url("/assets/brand/bbi-sacred-geometry.svg?v=20260803ak");
  background-repeat: repeat;
  mix-blend-mode: screen;
}

.bbi-atmosphere::before {
  background-position: 0 0;
  background-size: min(1200px, 140vw) auto;
  opacity: 0.62;
  /* Include --bbi-px/--bbi-py in keyframes so drift + pointer coexist */
  animation: bbiAtmGalaxyDriftPointer 52s linear infinite;
  will-change: transform, background-position, opacity;
}

.bbi-atmosphere::after {
  background-position: 55% 40%;
  background-size: min(860px, 105vw) auto;
  opacity: 0.42;
  animation: bbiAtmGalaxyDriftAltPointer 70s linear infinite;
  will-change: transform, background-position, opacity;
}

/* Landing gate: keep atmosphere above body paint, below emblem/UI */
body.bbi-landing-experience.has-bbi-atmosphere > .bbi-atmosphere {
  z-index: 0;
}

body.bbi-landing-experience.has-bbi-atmosphere > .bbi-entry-gate {
  background:
    radial-gradient(circle at 50% 42%, rgba(242, 82, 130, 0.07), transparent 36%),
    radial-gradient(circle at 50% 78%, rgba(45, 165, 232, 0.05), transparent 40%),
    linear-gradient(180deg, rgba(5, 3, 4, 0.05) 0%, rgba(5, 3, 4, 0.16) 100%);
}

@keyframes bbiAtmGalaxyDrift {
  0% { background-position: 0 0; opacity: 0.42; }
  50% { opacity: 0.58; }
  100% { background-position: -640px -240px; opacity: 0.42; }
}

@keyframes bbiAtmGalaxyDriftAlt {
  0% { background-position: 55% 40%; opacity: 0.26; }
  50% { opacity: 0.4; }
  100% { background-position: -15% 5%; opacity: 0.26; }
}

@keyframes bbiAtmGalaxyDriftPointer {
  0% {
    background-position: 0 0;
    opacity: 0.5;
    transform: translate3d(
      calc(var(--bbi-px, 0) * -48px),
      calc(var(--bbi-py, 0) * -32px),
      0
    );
  }
  50% {
    opacity: 0.66;
    transform: translate3d(
      calc(var(--bbi-px, 0) * -48px),
      calc(var(--bbi-py, 0) * -32px),
      0
    );
  }
  100% {
    background-position: -640px -240px;
    opacity: 0.5;
    transform: translate3d(
      calc(var(--bbi-px, 0) * -48px),
      calc(var(--bbi-py, 0) * -32px),
      0
    );
  }
}

@keyframes bbiAtmGalaxyDriftAltPointer {
  0% {
    background-position: 55% 40%;
    opacity: 0.3;
    transform: scaleX(-1) translate3d(
      calc(var(--bbi-px, 0) * 64px),
      calc(var(--bbi-py, 0) * 40px),
      0
    );
  }
  50% {
    opacity: 0.46;
    transform: scaleX(-1) translate3d(
      calc(var(--bbi-px, 0) * 64px),
      calc(var(--bbi-py, 0) * 40px),
      0
    );
  }
  100% {
    background-position: -15% 5%;
    opacity: 0.3;
    transform: scaleX(-1) translate3d(
      calc(var(--bbi-px, 0) * 64px),
      calc(var(--bbi-py, 0) * 40px),
      0
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .bbi-atmosphere::before,
  .bbi-atmosphere::after {
    animation: none;
  }

  .bbi-atmosphere::before {
    opacity: 0.48;
    transform: translate3d(
      calc(var(--bbi-px, 0) * -48px),
      calc(var(--bbi-py, 0) * -32px),
      0
    );
  }
  .bbi-atmosphere::after {
    opacity: 0.3;
    transform: scaleX(-1) translate3d(
      calc(var(--bbi-px, 0) * 64px),
      calc(var(--bbi-py, 0) * 40px),
      0
    );
  }
}

body.has-bbi-atmosphere > *:not(.bbi-atmosphere):not(.fit-finder-panel):not(.fit-finder-launcher) {
  position: relative;
  z-index: 1;
}

body.has-bbi-atmosphere > #bbi-site-header {
  z-index: 50;
}

body.has-bbi-atmosphere > #bbi-persistent-cta {
  z-index: 90;
}

/* Fit Finder dialog must stay viewport-fixed above the sticky CTA bar */
body.has-bbi-atmosphere > .fit-finder-panel {
  position: fixed;
  z-index: 120;
}

body.has-bbi-atmosphere .bbi-header {
  background: rgba(8, 6, 7, 0.92);
}

/* Hero — full-bleed phoenix */
.hero.has-bbi-phoenix,
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: min(92vh, 920px);
  background: transparent !important;
}

.bbi-phoenix {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bbi-phoenix-stage {
  position: relative;
  width: min(96vw, 1280px);
  max-width: 100%;
  line-height: 0;
  overflow: hidden;
  /* Clip sheen to phoenix silhouette */
  -webkit-mask-image: var(--bbi-phoenix-src);
  mask-image: var(--bbi-phoenix-src);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.bbi-phoenix-watermark {

  display: block;

  width: 100%;

  height: auto;

  max-width: none;

  object-fit: contain;

  opacity: 0.96;

  pointer-events: none;

  mix-blend-mode: screen;

  /* Match neon magenta / hot-red network */

  /* Hot rose + brick — mid energy between neon and wine */
  filter: brightness(1.05) contrast(1.2) sepia(0.46) hue-rotate(318deg) saturate(1.7) brightness(1.06);
}

/*
 * Specular glint — a thin band that walks across the phoenix surface only.
 * Transform is relative to the stage (the bird), not the viewport.
 */
.bbi-phoenix-stage::after {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 28%;
  pointer-events: none;
  background: linear-gradient(

    100deg,

    transparent 0%,

    rgba(255, 180, 210, 0.06) 28%,

    rgba(255, 120, 160, 0.35) 46%,

    rgba(255, 230, 240, 0.7) 50%,

    rgba(255, 80, 120, 0.32) 54%,

    rgba(255, 40, 90, 0.08) 68%,

    transparent 100%

  );
  mix-blend-mode: soft-light;
  transform: translateX(-160%) skewX(-18deg);
  transform-origin: center;
  will-change: transform, opacity;
  animation: bbi-phoenix-sheen 14s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes bbi-phoenix-sheen {
  /* Rest off-stage left */
  0%,
  18% {
    transform: translateX(-160%) skewX(-18deg);
    opacity: 0;
  }
  /* Ease onto the bird */
  28% {
    opacity: 0.85;
  }
  /* Slow crawl across the phoenix */
  78% {
    transform: translateX(420%) skewX(-18deg);
    opacity: 0.9;
  }
  /* Exit and rest */
  88%,
  100% {
    transform: translateX(460%) skewX(-18deg);
    opacity: 0;
  }
}

.hero > .hero-media {
  z-index: 3;
  pointer-events: none;
}

.hero > .wrap,
.hero > .hero-content {
  position: relative;
  z-index: 10;
}

/* ---- Mobile — larger, brighter phoenix so the brand mark reads ---- */
@media (max-width: 768px) {
  .bbi-atmosphere__canvas {
    opacity: 0.9;
  }

  .hero.has-bbi-phoenix,
  .hero {
    min-height: min(84vh, 780px);
  }

  .bbi-phoenix {
    align-items: center;
    justify-content: center;
    padding-top: 2%;
  }

  .bbi-phoenix-stage {
    width: min(148vw, 820px);
    max-width: none;
    margin-left: 4%;
    margin-right: -12%;
  }

  .bbi-phoenix-watermark {
    opacity: 1;
    filter: brightness(1.12) contrast(1.24) sepia(0.46) hue-rotate(318deg) saturate(1.85) brightness(1.1);
  }

  .bbi-phoenix-stage::after {
    width: 38%;
    animation-duration: 12s;
  }
}

@media (max-width: 480px) {
  .bbi-phoenix-stage {
    width: min(168vw, 720px);
    margin-left: 0;
    margin-right: -18%;
  }

  .bbi-phoenix-watermark {
    opacity: 1;
  }
}

/* Keep phoenix sheen alive even when OS reduce-motion is on (brand signal). */
@media (prefers-reduced-motion: reduce) {
  .bbi-phoenix-stage::after {
    animation-duration: 22s;
    opacity: 0.7;
  }
}