/* Brand OS home page: layout fixes on top of the base styles. */

/* hero title sits in the true centre (it was placed inside a few grid columns, so it drifted right) */
#hero-title {
  grid-column: 1 / -1 !important;
}
/* no decoration strip around the video */
.run-video-container-svgs {
  display: none !important;
}
#bos-nav a:focus-visible,
#bos-nav button:focus-visible,
#mast-right-sound-btn:focus-visible,
#bos-footer a:focus-visible,
#bos-footer button:focus-visible,
#bos-pricing a:focus-visible,
#bos-pricing button:focus-visible {
  outline: 2px solid #17ead9;
  outline-offset: 3px;
}

/* phones */
@media (max-width: 812px) {
  #hero-title {
    width: 90vw !important;
    font-size: 9.4vw !important;
  }
  #hero-title::before {
    font-size: 0.31em !important;
    letter-spacing: 0.16em !important;
    opacity: 0.8 !important;
    margin-bottom: 1.1em !important;
  }
  #masthead {
    padding: 10px 16px !important;
    background: rgba(240, 241, 250, 0.8);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    transition: background 0.3s;
  }
  html.bos-on-dark #masthead {
    background: rgba(6, 10, 28, 0.6);
  }
  .bos-logo {
    height: 22px !important;
  }
  #bos-pre-stages {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
    padding: 0 24px;
  }
}

/* scroll slider (desktop and phone): our colours, slowly flowing */
#progress-rail-bar,
html.is-blue-bg #progress-rail-bar {
  background: linear-gradient(180deg, #6078ea, #17ead9, #b69cff, #6078ea) 0 0 / 100% 300% !important;
  animation: bos-rail 4s linear infinite;
}
@keyframes bos-rail {
  to {
    background-position: 0 -300%;
  }
}
@media (prefers-reduced-motion: reduce) {
  #progress-rail-bar {
    animation: none;
  }
}

/* phones play the promo as a plain video in the page */
.bos-run-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 4.5vw;
  background: #060a1c;
}
/* phones: no live blur behind the header (it is redrawn on every frame of the canvas under it) */
@media (max-width: 812px) {
  #masthead {
    background: rgba(240, 241, 250, 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html.bos-on-dark #masthead {
    background: rgba(6, 10, 28, 0.92);
  }
  #bos-nav,
  #mast-right-sound-btn {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* the party: with the music on, light plays across the page in time with the track (app/bos-lights.js); blocks do not bounce.
   --beat and --lvl are set per element by the page script. */
/* --beat belongs to the element it is set on and is not handed down: a change restyles that one element, not everything inside it
   (inner parts that dance get their own value from the page script) */
@property --beat {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}
#hero-title::before {
  --beat: inherit;
}
#progress-rail-bar {
  filter: brightness(calc(1 + var(--beat, 0) * 0.5)) saturate(calc(1 + var(--lvl, 0) * 0.5));
}
#bos-nav .bn-up {
  box-shadow: 0 0 calc(var(--beat, 0) * 22px) rgba(23, 234, 217, calc(var(--beat, 0) * 0.7));
}
#bos-footer .bf-btn i {
  box-shadow: 0 0 calc(var(--beat, 0) * 26px) rgba(23, 234, 217, calc(var(--beat, 0) * 0.8));
}
#bos-footer .bf-word {
  opacity: calc(0.82 + var(--beat, 0) * 0.18);
}
#bos-footer .bf-aura {
  opacity: calc(0.75 + var(--lvl, 0) * 0.1 + var(--beat, 0) * 0.25);
}

/* stage lights: soft colour that only shows on the light parts of the page (multiply) and a faint glow on the dark parts (screen) */
#bos-lights,
#bos-lights-d {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s;
  contain: strict;
}
/* plain blending on purpose: blend modes over the live canvas made the browser drop frames of the page (flicker) */
#bos-lights.on {
  opacity: 0.62;
}
/* the footer is a solid block above the page lights, so it carries its own set */
#bos-lights-f {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s;
}
#bos-lights-f.on {
  opacity: 0.6;
}
/* lasers */
.lz-wrap {
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
}
.lz-l {
  left: -3vw;
}
.lz-r {
  left: 103vw;
}
#bos-lights .lz-wrap,
#bos-lights-d .lz-wrap,
#bos-lasers .bl,
#bos-lasers .bl-beam {
  display: none;
}
#bos-lasers {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s;
  contain: strict;
}
#bos-lasers.on {
  opacity: 0.75;
}
.lz {
  position: absolute;
  left: -1.5px;
  top: 0;
  width: 3px;
  height: 190vmax;
  opacity: 0;
  transform-origin: 50% 0;
  background: linear-gradient(to bottom, var(--lc), var(--lc) 35%, transparent 92%);
  box-shadow: 0 0 14px 1px var(--lc);
  will-change: transform, opacity;
}
.bl {
  position: absolute;
  left: 0;
  top: 0;
  width: 22vmax;
  height: 22vmax;
  margin: -11vmax 0 0 -11vmax;
  border-radius: 50%;
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 0.45s cubic-bezier(0.45, 0, 0.2, 1);
}
/* one pure colour each, bright enough that white turns into a clean tint, never grey */
.bl0 { background: radial-gradient(closest-side, rgba(96, 116, 255, 1), rgba(96, 116, 255, 0.55) 55%, rgba(110, 130, 255, 0)); }
.bl1 { background: radial-gradient(closest-side, rgba(20, 240, 222, 1), rgba(20, 240, 222, 0.5) 55%, rgba(40, 240, 225, 0)); }
.bl2 { background: radial-gradient(closest-side, rgba(186, 140, 255, 1), rgba(186, 140, 255, 0.55) 55%, rgba(196, 160, 255, 0)); }
.bl3 { background: radial-gradient(closest-side, rgba(90, 190, 255, 1), rgba(90, 190, 255, 0.55) 55%, rgba(120, 200, 255, 0)); }
.bl-beam {
  position: absolute;
  top: -20%;
  left: 0;
  width: 40vw;
  height: 140%;
  opacity: 0;
  background: linear-gradient(90deg, rgba(40, 240, 225, 0), rgba(40, 240, 225, 0.7) 50%, rgba(40, 240, 225, 0));
  transform: translateX(-60vw) skewX(-18deg);
  will-change: transform, opacity;
}
/* neon: a strip of light that runs around a container; angle and strength come from the track clock */
.bos-neon {
  display: block;
  position: absolute;
  inset: -2px;
  z-index: 4;
  border-radius: inherit;
  padding: 5px;
  pointer-events: none;
  opacity: var(--no, 0);
  overflow: hidden;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* the light itself: drawn once on a square big enough to cover the box at any angle, then only turned (no redraw per frame) */
.bos-neon > b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--nd, 150%);
  height: var(--nd, 150%);
  margin: calc(var(--nd, 150%) / -2) 0 0 calc(var(--nd, 150%) / -2);
  background: conic-gradient(from 0deg, rgba(96, 120, 234, 0) 0 58%, #6078ea 76%, #17ead9 90%, #eafffd 97%, rgba(23, 234, 217, 0) 100%);
}
.bos-neon.live > b {
  will-change: transform;
}
/* dark cards: the strip sits just outside the card, is wider, and two runners chase each other, so it reads against the dark face */
.channel-card-image .bos-neon,
#bos-pricing .bp-pro .bos-neon {
  inset: -7px;
  padding: 7px;
  border-radius: 22px;
}
.channel-card-image .bos-neon > b,
#bos-pricing .bp-pro .bos-neon > b {
  background: conic-gradient(
    from 0deg,
    rgba(96, 120, 234, 0) 0 12%,
    #6078ea 26%,
    #17ead9 40%,
    #ffffff 48%,
    rgba(23, 234, 217, 0) 50% 62%,
    #b69cff 76%,
    #17ead9 90%,
    #ffffff 98%,
    rgba(23, 234, 217, 0) 100%
  );
}
#bos-pricing .bp-pro .bos-neon {
  inset: 0;
  padding: 6px;
  border-radius: 26px;
}
#bos-pricing .bp-card:not(.bp-pro) .bos-neon {
  border-radius: 26px;
  inset: 0;
}
#mast-right-sound-btn .bos-neon {
  inset: 0;
  border-radius: 50%;
}
/* texts dance, each with its own figure */
#hero-title .word {
  scale: calc(1 + var(--beat, 0) * 0.045);
}
#run-title .word {
  translate: 0 calc(var(--beat, 0) * -0.06em);
}
#channels-title .char {
  translate: 0 calc(var(--beat, 0) * -0.14em);
}
.bp-head h2 {
  transform: skewX(calc(var(--beat, 0) * -5deg));
}
.channel-card-line-2 {
  translate: calc(var(--beat, 0) * 10px) 0;
}
.bp-amt {
  display: inline-block;
  translate: 0 calc(var(--beat, 0) * -5px);
}
#bos-pricing .bp-card li i {
  scale: calc(1 + var(--beat, 0) * 0.9);
}
.bp-badge {
  rotate: calc(var(--beat, 0) * -5deg);
}
#bos-footer .bf-w {
  translate: 0 calc(var(--beat, 0) * -0.05em);
}
#bos-nav [data-go],
#bos-nav .bn-in,
#bos-nav .bn-up {
  translate: 0 calc(var(--beat, 0) * -4px);
}
#mast-right-sound-btn {
  rotate: calc(var(--beat, 0) * 10deg);
}
/* phones: light only on the light parts, and no per-frame filters */
@media (max-width: 812px) {
  #bos-lights-d {
    display: none;
  }
  #hero-title,
  #mast-logo,
  #mast-right-sound-btn,
  #progress-rail-bar,
  .channel-card .bos-stage,
  #bos-footer .bf-word,
  #bos-footer .bf-aura {
    filter: none !important;
  }
  #bos-nav .bn-up,
  #bos-footer .bf-btn i {
    box-shadow: none;
  }
  .bos-neon {
    filter: none;
    padding: 4px;
  }
  .lz {
    box-shadow: none;
    width: 2px;
  }
  #mast-logo {
    scale: calc(1 + var(--beat, 0) * 0.05);
  }
}
@media (prefers-reduced-motion: reduce) {
  #bos-lights,
  #bos-lights-d {
    display: none;
  }
}
/* sound button: the focus ring sits inside the button, so nothing can crop it */
#mast-right-sound-btn:focus,
#mast-right-sound-btn:focus-visible {
  outline: none !important;
}
#mast-right-sound-btn:focus-visible {
  border-color: #17ead9 !important;
}
/* no light strips inside the footer */
#bos-footer .bos-neon {
  display: none;
}

/* second section: no button under the copy */
#run-cta {
  display: none !important;
}

/* with the music on, each pricing card is its own layer: its hop moves the layer, the card is not redrawn */
html.bos-audio-on #bos-pricing .bp-card {
  will-change: translate, rotate;
}

/* more of the page joins the dance (each with its own figure and its own part of the bar) */
#hero-title::before {
  scale: calc(1 + var(--beat, 0) * 0.1);
}
#mast-logo {
  scale: calc(1 + var(--beat, 0) * 0.08);
  rotate: calc(var(--beat, 0) * -3deg);
}
#run-desc {
  translate: calc(var(--beat, 0) * 8px) 0;
}
#run-desc .line {
  translate: 0 calc(var(--beat, 0) * -5px);
}
#channels-disclaimer {
  translate: calc(var(--beat, 0) * -6px) 0;
}
.bp-head h2 {
  transform: skewX(calc(var(--beat, 0) * -9deg)) scale(calc(1 + var(--beat, 0) * 0.04));
}
.bp-head p,
.bp-foot {
  translate: 0 calc(var(--beat, 0) * -6px);
}
.bp-toggle button {
  translate: 0 calc(var(--beat, 0) * -5px);
}
#bos-pricing .bp-card {
  translate: 0 calc(var(--beat, 0) * -14px);
}
#bos-pricing .bp-card:nth-child(odd) {
  rotate: calc(var(--beat, 0) * -0.8deg);
}
#bos-pricing .bp-card:nth-child(even) {
  rotate: calc(var(--beat, 0) * 0.8deg);
}
#bos-pricing .bp-cta {
  scale: calc(1 + var(--beat, 0) * 0.05);
}
/* footer */
#bos-footer .bf-btn,
#bos-footer .bf-ghost {
  scale: calc(1 + var(--beat, 0) * 0.06);
}
#bos-footer .bf-small {
  translate: 0 calc(var(--beat, 0) * 4px);
}
#bos-footer .bf-brand img {
  scale: calc(1 + var(--beat, 0) * 0.1);
  transform-origin: 0 50%;
}
#bos-footer .bf-brand p {
  translate: calc(var(--beat, 0) * 8px) 0;
  color: color-mix(in srgb, #e9ebf5, #b69cff calc(var(--beat, 0) * 90%));
}
#bos-footer .bf-col h4 {
  opacity: calc(0.5 + var(--beat, 0) * 0.5);
  color: color-mix(in srgb, #e9ebf5, #17ead9 calc(var(--beat, 0) * 100%));
}
/* a wave of colour runs down the links once a bar */
#bos-footer .bf-l {
  translate: calc(var(--beat, 0) * 8px) 0;
  color: color-mix(in srgb, #e9ebf5, #17ead9 calc(var(--beat, 0) * 100%));
}
html.bos-audio-on #bos-footer .bf-l {
  transition: none;
}
#bos-footer .bf-bottom span {
  color: color-mix(in srgb, #e9ebf5, #6f86ff calc(var(--beat, 0) * 100%));
  opacity: calc(0.72 + var(--beat, 0) * 0.28);
}
#bos-footer .bf-up {
  translate: 0 calc(var(--beat, 0) * -7px);
  border-color: color-mix(in srgb, rgba(233, 235, 245, 0.22), #17ead9 calc(var(--beat, 0) * 100%)) !important;
}
#bos-footer .bf-up i {
  scale: calc(1 + var(--beat, 0) * 0.18);
}
@media (max-width: 812px) {
  #bos-footer .bf-brand img,
  #bos-footer .bf-l {
    filter: none;
    text-shadow: none;
  }
}

/* titles that are clipped for their reveal get room for descenders (y, g, p) and for the hop of the dance */
#channels-title {
  padding-bottom: 0.26em;
  margin-bottom: -0.26em;
}
#run-title-inner > div {
  padding-top: 0.12em;
  padding-bottom: 0.2em;
  margin-top: -0.12em;
  margin-bottom: -0.2em;
}

/* While the music is on, nothing is re-blurred or re-filtered on every frame: that work, on top of the live canvas,
   made the browser drop whole frames of the page (white or black flicker). Movement, colour and opacity only. */
html.bos-audio-on #bos-nav,
html.bos-audio-on #mast-right-sound-btn,
html.bos-audio-on #bos-footer .bf-up,
html.bos-audio-on #masthead {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html.bos-audio-on #bos-nav,
html.bos-audio-on #mast-right-sound-btn {
  background: rgba(8, 12, 30, 0.94) !important;
}
html.bos-audio-on #hero-title,
html.bos-audio-on #mast-logo,
html.bos-audio-on #mast-right-sound-btn,
html.bos-audio-on #progress-rail-bar {
  filter: none !important;
}

/* far off the screen (app/bos-idle.js): not painted, animations paused. Layout stays, so nothing shifts. */
.bos-far {
  visibility: hidden !important;
}
.bos-far,
.bos-far *,
.bos-far::before,
.bos-far::after,
.bos-far *::before,
.bos-far *::after {
  animation-play-state: paused !important;
}

/* the scroll bar's flowing colour is moved by the graphics card (a strip sliding inside the bar), not repainted every frame */
#progress-rail-bar,
html.is-blue-bg #progress-rail-bar {
  background: none !important;
  animation: none;
  overflow: hidden;
}
#progress-rail-bar::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 600%;
  background: linear-gradient(180deg, #6078ea, #17ead9, #b69cff, #6078ea) 0 0 / 100% 50% repeat-y;
  transform: translateY(-50%);
  animation: bos-rail2 2s linear infinite;
  will-change: transform;
}
@keyframes bos-rail2 {
  to {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  #progress-rail-bar::after {
    animation: none;
  }
}