/* =========================================================
   BALL MODE™ — FIREBASE SITE
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:wght@600;700;800;900&display=swap');

:root {
  --bm-black: #050505;
  --bm-white: #ffffff;
  --bm-red: #e43b2c;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--bm-black);
  color: var(--bm-white);
}

body {
  font-family: 'Inter', Arial, sans-serif;
  overflow: hidden;
}

.bm-tm-inline {
  display: inline-block;
  position: relative;
  margin-left: .07em;
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: top;
}


/* =========================================================
   INTRO
   ========================================================= */

.bm-intro {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #000;
  opacity: 1;
  visibility: visible;

  transition:
    opacity .45s ease,
    visibility .45s ease;
}

.bm-intro.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.bm-intro-mark {
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: clamp(1.05rem, 2vw, 1.6rem);
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;

  opacity: 0;
  transform: translateY(5px);

  animation: bmIntroMark .7s ease forwards;
}

.bm-intro-mark .bm-tm-inline {
  top: -.09em;
  margin-left: .055em;
  font-size: .27em;
}

@keyframes bmIntroMark {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
   EXPERIENCE
   ========================================================= */

.bm-experience {
  width: 100%;
  height: 100vh;
  height: 100svh;

  overflow-x: hidden;
  overflow-y: auto;

  scroll-snap-type: y proximity;
  overscroll-behavior-y: contain;

  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.bm-experience::-webkit-scrollbar {
  display: none;
}

.bm-screen {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;

  scroll-snap-align: start;
}


/* =========================================================
   HERO
   ========================================================= */

.bm-hero {
  background: #000;
}

.bm-hero-image {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}

.bm-hero::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      rgba(0,0,0,.46) 0%,
      rgba(0,0,0,.20) 35%,
      rgba(0,0,0,.02) 70%
    );

  pointer-events: none;
}

.bm-logo {
  position: absolute;
  z-index: 2;

  top: clamp(28px, 4vw, 55px);
  left: clamp(24px, 5vw, 78px);

  font-family: 'Montserrat', Arial, sans-serif;
  font-size: clamp(.8rem, 1.15vw, 1.05rem);
  font-weight: 800;
  letter-spacing: .055em;

  white-space: nowrap;
}

.bm-logo .bm-tm-inline {
  top: -.08em;
  margin-left: .05em;
  font-size: .28em;
}

.bm-mindset-message {
  position: absolute;
  z-index: 2;

  left: clamp(24px, 5vw, 78px);
  bottom: clamp(42px, 8vh, 90px);

  margin: 0;

  font-family: 'Montserrat', Arial, sans-serif;
  font-size: clamp(2.8rem, 7vw, 7rem);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.bm-mindset-message > span {
  display: block;
}


/* =========================================================
   SCREEN TWO
   ========================================================= */

.bm-lock-screen {
  display: flex;
  align-items: center;

  background: #050505;
}

.bm-lock-content {
  width: 100%;
  padding:
    clamp(50px, 8vh, 100px)
    clamp(24px, 6vw, 90px);
}

.bm-always {
  margin: 0 0 clamp(24px, 4vh, 48px);

  font-family: 'Montserrat', Arial, sans-serif;
  font-size: clamp(.72rem, 1.1vw, 1rem);
  font-weight: 700;
  letter-spacing: .12em;

  text-transform: uppercase;
}

.bm-always .bm-tm-inline {
  top: -.06em;
  margin-left: .075em;
  font-size: .43em;
}

.bm-lock-message {
  margin: 0;

  font-family: 'Montserrat', Arial, sans-serif;
  font-size: clamp(4rem, 10.5vw, 11rem);
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.065em;
  text-transform: uppercase;
}

.bm-lock-message > span {
  display: block;
}

.bm-switch-line {
  white-space: nowrap;
}

.bm-switch-tm {
  display: inline-block;
  position: relative;

  top: -1.05em;
  left: -.03em;

  margin-left: .02em;

  font-family: 'Montserrat', Arial, sans-serif;
  font-size: .09em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;

  vertical-align: baseline;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .bm-hero-image {
    object-position: 56% center;
  }

  .bm-hero::after {
    background:
      linear-gradient(
        180deg,
        rgba(0,0,0,.12) 0%,
        rgba(0,0,0,.02) 45%,
        rgba(0,0,0,.42) 100%
      );
  }

  .bm-logo {
    top: 28px;
    left: 22px;
  }

  .bm-mindset-message {
    left: 22px;
    bottom: 38px;

    font-size: clamp(2.65rem, 14vw, 4.8rem);
    line-height: .89;
  }

  .bm-lock-content {
    padding-left: 22px;
    padding-right: 22px;
  }

  .bm-lock-message {
    font-size: clamp(3.6rem, 18vw, 6.2rem);
    line-height: .84;
  }

  .bm-switch-line {
    white-space: normal;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* iOS interaction lock — preserve vertical scrolling, disable gesture zoom */
html,
body,
.bm-experience {
  touch-action: pan-y;
}

/* NO OFF SWITCH trademark — final positioning */
.bm-switch-tm {
  display: inline-block;
  position: relative;
  top: auto;
  left: auto;
  margin-left: .035em;
  font-family: 'Montserrat', Arial, sans-serif;
  font-size: .11em;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  vertical-align: super;
}

/* Final trademark tuck */
.bm-switch-tm {
  left: -.18em;
}

/* Final trademark micro-adjustment */
.bm-switch-tm {
  left: -.55em;
}

/* Trademark final horizontal alignment */
.bm-switch-tm {
  transform: translateX(-10px);
}

/* Trademark final vertical alignment */
.bm-switch-tm {
  transform: translate(-10px, -18px);
}

/* Trademark responsive vertical lock */
.bm-switch-tm {
  transform: translate(-10px, clamp(-52px, -3.5vw, -28px));
}

/* Trademark final responsive rise */
.bm-switch-tm {
  transform: translate(-10px, clamp(-90px, -6vw, -48px));
}

/* Trademark final downward correction */
.bm-switch-tm {
  transform: translate(-10px, -44px);
}

/* Trademark major downward move */
.bm-switch-tm {
  transform: translate(-10px, 40px);
}

/* BALL MODE — protected artwork */
.bm-protected-art {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

/* BALL MODE — NO OFF SWITCH trademark final position */
.bm-switch-tm{
  display:inline-block !important;
  position:relative !important;
  top:-.9em !important;
  left:0 !important;
  margin-left:.03em !important;
  font-family:'Montserrat',Arial,sans-serif !important;
  font-size:.10em !important;
  font-weight:700 !important;
  line-height:1 !important;
  letter-spacing:0 !important;
  vertical-align:baseline !important;
  transform:none !important;
}


/* Correct NO OFF SWITCH trademark alignment */
.bm-switch-tm {
  display: inline-block;
  position: relative;
  top: -0.85em;
  margin-left: 0.04em;
  font-size: 0.12em;
  font-weight: 700;
  line-height: 1;
  vertical-align: baseline;
}

/* Raise NO OFF SWITCH trademark significantly */
.bm-switch-tm {
  top: -6em !important;
}

/* BALL MODE — Mobile Screen 2 refinement */
@media (max-width: 767px) {
  .bm-lock-message,
  .bm-state-message {
    font-size: clamp(2.8rem, 14vw, 4.5rem);
    line-height: .88;
  }

  .bm-lock-message > span:first-child,
  .bm-state-message > span:first-child {
    white-space: nowrap;
  }

  .bm-switch-line {
    white-space: normal;
  }
}

/* ==========================================
   BALL MODE — SITE NAVIGATION
   ========================================== */

.bm-site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  padding: clamp(28px, 4vw, 55px) clamp(24px, 5vw, 78px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 100;
  font-family: 'Montserrat', Arial, sans-serif;
}

.bm-header-brand {
  color: #fff;
  text-decoration: none;
  font-size: clamp(.8rem, 1.15vw, 1.05rem);
  font-weight: 800;
  letter-spacing: .055em;
  white-space: nowrap;
}

.bm-header-brand .bm-tm-inline {
  position: relative;
  top: -.08em;
  margin-left: .05em;
  font-size: .28em;
}

.bm-desktop-nav {
  display: flex;
  align-items: center;
  gap: 36px;
}

.bm-desktop-nav a {
  color: #fff;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
}

.bm-desktop-nav a:hover {
  opacity: .6;
}

.bm-mobile-nav {
  display: none;
}

/* Prevent duplicate wordmark */
.bm-hero .bm-logo {
  display: none;
}

@media (max-width: 767px) {

  .bm-site-header {
    padding: 28px 24px;
  }

  .bm-desktop-nav {
    display: none;
  }

  .bm-mobile-nav {
    display: block;
    position: relative;
  }

  .bm-mobile-nav summary {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    cursor: pointer;
    list-style: none;
  }

  .bm-mobile-nav summary::-webkit-details-marker {
    display: none;
  }

  .bm-menu-icon {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .bm-menu-icon span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    transition: transform .25s ease;
  }

  .bm-mobile-nav[open] .bm-menu-icon span:first-child {
    transform: translateY(4px) rotate(45deg);
  }

  .bm-mobile-nav[open] .bm-menu-icon span:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }

  .bm-mobile-nav nav {
    position: absolute;
    right: 0;
    top: 54px;
    min-width: 220px;
    padding: 28px;
    background: #000;
    border: 1px solid #222;
    display: flex;
    flex-direction: column;
    gap: 25px;
  }

  .bm-mobile-nav nav a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .12em;
  }
}