/* Splash Screen Root & Responsive Logo Sizing */
:root {
  --splash-logo-width: clamp(260px, 75vw, 880px);
  --splash-logo-bg-opacity: 0.18;
  --splash-reveal-gap: clamp(18px, 3.5vw, 36px);
  --splash-line-extend: clamp(14px, 2.4vw, 24px);
}

/* Extra small mobile (e.g. 320px - 360px) */
@media (max-width: 360px) {
  :root {
    --splash-logo-width: clamp(230px, 86vw, 290px);
    --splash-reveal-gap: 14px;
    --splash-line-extend: 10px;
  }
}

/* Standard Mobile (361px - 480px) */
@media (min-width: 361px) and (max-width: 480px) {
  :root {
    --splash-logo-width: clamp(270px, 82vw, 380px);
    --splash-reveal-gap: 18px;
    --splash-line-extend: 12px;
  }
}

/* Tablets / Phablets (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --splash-logo-width: clamp(380px, 76vw, 560px);
    --splash-reveal-gap: 24px;
    --splash-line-extend: 16px;
  }
}

/* Laptops / Desktops (769px - 1200px) */
@media (min-width: 769px) and (max-width: 1200px) {
  :root {
    --splash-logo-width: clamp(560px, 62vw, 760px);
    --splash-reveal-gap: 32px;
    --splash-line-extend: 20px;
  }
}

/* Wide screens (1201px - 1600px) */
@media (min-width: 1201px) and (max-width: 1600px) {
  :root {
    --splash-logo-width: clamp(740px, 52vw, 860px);
    --splash-reveal-gap: 36px;
    --splash-line-extend: 24px;
  }
}

/* Ultrawide & 4K (1601px+) */
@media (min-width: 1601px) {
  :root {
    --splash-logo-width: clamp(860px, 42vw, 940px);
    --splash-reveal-gap: 40px;
    --splash-line-extend: 26px;
  }
}

/* Mobile landscape orientation guard */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --splash-logo-width: clamp(240px, 50vw, 460px);
    --splash-reveal-gap: 16px;
    --splash-line-extend: 10px;
  }
}

/* Initially hide page wrapper to prevent any flickering or shifts - scoped to when splash is active */
body.splash-active #page {
  opacity: 0;
}

body.splash-complete #page {
  opacity: 1 !important;
}

/* Locking scroll on body while splash is active */
body.splash-active {
  pointer-events: none !important;
}

body.splash-complete {
  pointer-events: auto !important;
}

/* Brand Splash Main Container */
.brand-splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f7f6f4; /* Clean light/off-white background */
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box;
  pointer-events: auto;
}

/* Logo Reveal Container & Responsive Bar Layout */
.brand-splash__logo-container,
.brand-splash__text-container {
  display: flex;
  opacity: 1;
  width: 100%;
  padding: 0 20px;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.brand-splash__logo-bar,
.brand-splash__text-bar {
  position: relative;
  width: var(--splash-logo-width);
  max-width: calc(100vw - 32px);
  margin: 0 auto;
  padding: var(--splash-line-extend) var(--splash-reveal-gap);
  display: block;
  box-sizing: border-box;
  container-type: inline-size;
  container-name: splashbar;
}

/* Shared image styles */
.brand-splash__logo-img {
  width: 100%;
  height: auto;
  aspect-ratio: 1677 / 205;
  display: block;
  user-select: none;
  pointer-events: none;
  box-sizing: border-box;
}

/* Bottom Layer: Invisible layout spacer driving bar dimensions (eliminates shadow/ghosting) */
.brand-splash__logo--bg,
.brand-splash__text--bg {
  position: relative;
  width: 100%;
  display: block;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none;
  box-sizing: border-box;
}

/* Top Layer: Clipping Mask Container with moving reveal border */
.brand-splash__logo-mask,
.brand-splash__text-mask {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%; /* GSAP animates this from 0% to 100% */
  overflow: hidden;
  border-right: 2px solid #1c1a17; /* Moving reveal vertical boundary edge */
  box-sizing: border-box;
  will-change: width;
}

/* Top Layer: Full-color dark/orange revealed logo */
.brand-splash__logo--fg,
.brand-splash__text--fg {
  position: absolute;
  left: var(--splash-reveal-gap);
  top: var(--splash-line-extend);
  width: calc(100cqw - (2 * var(--splash-reveal-gap)));
  height: auto;
  max-width: none;
  display: block;
  box-sizing: border-box;
}

.brand-splash__logo--fg .brand-splash__logo-img {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  max-width: none;
  display: block;
}

/* Initial hidden state for header before splash completed */
.site-header--initial-hidden {
  transform: translateY(-150%) !important;
  opacity: 0 !important;
}