/* ─────────────────────────────────────────
   brand-mark.css — Sticky SVG Brand Mark
   KMC+LUCAS · 1297 × 766 reference frame
   ───────────────────────────────────────── */

/*
  Z-index stacking:
  z-1  brand-mark  (sticky, behind cover photo)
  z-2  cover photo (overlaps brand mark → depth)
  z-3  text content (above both)
*/

/* ── Wrapper: tall enough to keep brand sticky during cover-photo scroll ── */
.brand-wrap {
  position: relative;
  z-index: var(--z-brand);
  left: var(--gutter);
  /* Fill gutter-to-gutter so the lockup extends to the right edge on wide screens */
  width: calc(100% - var(--gutter) * 2);
  max-width: 1728px;
  /* Height = brand height + crew-photo overlap zone (keeps full cutout visible).
     Travel = wrap − mark ≈ 554px (uncapped) / 460px (capped) ≥ morph distance. */
  height: calc(65.1vw + 460px);
  max-height: calc(1125px + 460px);
  pointer-events: none;
}

/* ── The sticky brand mark itself ── */
.brand-mark {
  position: sticky;
  top: 0;
  width: 100%;
  /* Maintain 1301:847 aspect ratio (figma node 1117:453 — cover final) */
  aspect-ratio: 1301 / 847;
  max-height: 1125px; /* = max-width 1728 ÷ (1301/847); scales up to fill wide screens */
  overflow: visible;
  pointer-events: auto;

  /* Entry: start invisible, GSAP animates in after 0.8s */
  opacity: 0;
}

.brand-mark.is-visible {
  opacity: 1;
}

/* ── Cream strip at top (above the letterforms) ── */
.bm-cream-strip {
  position: absolute;
  inset: 0 0 86.66% 0; /* top 13.34% of the mark */
  background: var(--cream);
  z-index: 1;
}

/* ── All letter slots ── */
.bm-slot {
  position: absolute;
  /* SVGs use CSS variable for color — inherits from :root */
}

.bm-slot img {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/*
  Positions from Figma node 1117:453 — cover final (1301 × 847px)
  Format: inset: top% right% bottom% left%
*/

/* KMC + */
.bm-k    { inset: 13.34% 82.86% 50.18%  0.77%; }
.bm-m    { inset: 13.34% 57.26% 50.18% 19.22%; }
.bm-c    { inset: 55.61% 57.03%  0.00% 27.82%; }
.bm-plus { inset: 46.60% 40.35% 34.39% 47.27%; }

/* Silicon Valley / Media Production Company subtitle (left of the big C) */
.bm-subtitle { inset: 53.48% 80.86% 41.32% 0.54%; }

.bm-subtitle__text {
  display: block;
  width: 100%;
  height: 100%;
  font-family: var(--font-fustat);
  font-size: 20px;
  font-weight: 400;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: var(--red);
  text-align: right;
  white-space: nowrap;
}

/* UC Berkeley — co-brand line under BETA.
   Left edge is aligned to BETA's "B" glyph at runtime by alignUCBtoBeta() in
   site.js (BETA is centered in its box, so the exact glyph left isn't a fixed %).
   The 69% left here is just a pre-JS fallback. */
.bm-uc {
  top: 73.32%;
  right: auto;        /* box hugs the text, starting at the BETA-aligned left */
  bottom: 9.21%;
  left: 69%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  font-family: var(--font-fustat);
  font-weight: 400;
  font-size: clamp(40px, 6.2vw, 90px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--sand);
  white-space: nowrap;
}

/* ── BETA cluster — Moses Split component ── */

.beta-container {
  position: absolute;
  left:   63.03%; /* figma 1117:463 — cover final */
  top:    55.73%;
  width:  36.97%;
  height: 17.59%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: visible;
}

/* "BETA" text rendered as Kyiv Type Sans, split into BE + TA */
.beta-text {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  pointer-events: none;
  line-height: 1;
}

.part-left,
.part-right {
  font-family: var(--font-kyiv);
  font-weight: 400;
  font-size: clamp(44px, 10.5vw, 150px); /* match LUCAS letter visual height */
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--sand);
  will-change: transform;
  display: block;
  width: 50%;
  user-select: none;
}

.part-left { text-align: right; }
.part-right { text-align: left; }

/* Bear graphic: centered, initially hidden — GSAP controls opacity + scale */
.bear-graphic {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 34%; /* keep the bear around one-third of the BETA letter height */
  object-fit: contain;
  object-position: center;
  z-index: 1;
  opacity: 0;   /* GSAP also sets this; CSS is the no-JS fallback */
  will-change: transform, opacity;
  pointer-events: none;
}

/* ── Mobile (< 1024px): scaled-down brand mark ── */
@media (max-width: 1023px) {
  .brand-wrap {
    left: 0;
    width: 100%;
    /* Height = cover photo top + cover photo height (matches hero-container need) */
    height: calc(clamp(200px, 38vw, 450px) + clamp(200px, 45vw, 400px));
    max-height: none;
  }

  /* Remove sticky on mobile — brand sits statically above cover photo */
  .brand-mark {
    position: static;
    max-height: none;
  }

  .brand-mobile { display: none; }
}

@media (min-width: 1024px) {
  .brand-mobile { display: none; }
}