/* ============================================================
   MTB Frame — Mountain Baker DS utility layer.
   Imports the Geist/Geist Mono/Inter webfonts and exposes the
   semantic classes the DS-aligned blocks reference:
   .mb-eyebrow, .mb-display-*, .mb-lead, .mb-body, .mb-card-title,
   .mb-ui, .mb-nav-label, .mb-numeric, .mb-flow, .mb-orb, .mb-glow,
   .mb-surface-deep/teal/blaze/night, .mb-topo-divider.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Inter:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* animatable angle for the moving gradient */
@property --mb-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ============================================================
   SEMANTIC TYPE
   ============================================================ */
.mb-eyebrow {
  font-family: var(--frame-type-eyebrow);
  font-weight: 500;
  font-size: var(--frame-type-eyebrow-size, 0.78rem);
  letter-spacing: var(--frame-type-eyebrow-track, 0.22em);
  text-transform: uppercase;
  line-height: 1;
  color: var(--frame-eyebrow-color, var(--frame-accent, #FF5B04));
}

.mb-display-hero,
.mb-display-1,
.mb-display-2,
.mb-display-3 {
  font-family: var(--frame-type-display);
  font-weight: 500;
  line-height: var(--frame-type-leading-tight, 1.04);
  letter-spacing: -0.02em;
  color: var(--frame-fg1, var(--frame-light));
  text-wrap: balance;
  margin: 0;
}
.mb-display-hero { font-size: var(--frame-type-display-hero); font-weight: 500; }
.mb-display-1    { font-size: var(--frame-type-display-1); font-weight: 500; }
.mb-display-2    { font-size: var(--frame-type-display-2); font-weight: 600; }
.mb-display-3    { font-size: var(--frame-type-display-3); font-weight: 600; letter-spacing: -0.015em; }

/* italic emphasis inside a display headline — blaze + non-italic */
.mb-display-hero em,
.mb-display-1 em,
.mb-display-2 em,
.mb-display-3 em {
  font-style: normal;
  font-weight: 600;
  color: var(--frame-accent, #FF5B04);
}

.mb-lead {
  font-family: var(--frame-type-body);
  font-size: var(--frame-type-size-lg);
  line-height: var(--frame-type-leading-snug, 1.22);
  color: var(--frame-fg2, rgba(228,238,240,0.72));
  font-weight: 400;
}

.mb-body {
  font-family: var(--frame-type-body);
  font-size: var(--frame-type-size-md);
  line-height: var(--frame-type-leading-body, 1.6);
  color: var(--frame-fg2, rgba(228,238,240,0.72));
  text-wrap: pretty;
}

.mb-card-title {
  font-family: var(--frame-type-body);
  font-weight: 700;
  font-size: var(--frame-type-size-lg);
  line-height: var(--frame-type-leading-snug, 1.22);
  color: var(--frame-fg1, var(--frame-light));
  letter-spacing: -0.01em;
}

.mb-ui {
  font-family: var(--frame-type-body);
  font-weight: 500;
  font-size: var(--frame-type-size-sm);
  letter-spacing: 0;
  color: var(--frame-fg1, var(--frame-light));
}

/* lowercase nav labels — defining feature of MB voice */
.mb-nav-label {
  font-family: var(--frame-type-body);
  font-weight: 500;
  font-size: var(--frame-type-size-sm);
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--frame-fg1, var(--frame-light));
}

/* numeric overlays / map labels */
.mb-numeric {
  font-family: var(--frame-type-eyebrow);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--frame-fg1, var(--frame-light));
}

/* ============================================================
   DARK GRADIENT SURFACES
   ============================================================ */
.mb-surface-deep   { background: var(--frame-grad-deep); }
.mb-surface-teal   { background: var(--frame-grad-deep-teal); }
.mb-surface-blaze  { background: var(--frame-grad-deep-blaze); }
.mb-surface-night  { background: var(--frame-grad-deep-night); }

/* ambient orbs */
.mb-orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(40px);
  pointer-events: none;
  opacity: 0.9;
}
.mb-orb--teal   { background: var(--frame-orb-teal); }
.mb-orb--blaze  { background: var(--frame-orb-blaze); }
.mb-orb--violet { background: var(--frame-orb-violet); }
.mb-orb--drift  { animation: mb-drift 18s var(--frame-motion-ease-in-out, ease-in-out) infinite alternate; }
@keyframes mb-drift {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(24px, -18px) scale(1.12); }
}

/* ============================================================
   MOVING GRADIENT GLOW (signature hover)
   ============================================================ */
.mb-flow {
  position: relative;
  border-radius: var(--frame-radius-lg, 16px);
  isolation: isolate;
}
.mb-flow::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: conic-gradient(from var(--mb-angle),
      transparent 0deg,
      var(--flow-c1, #00E5FF) 90deg,
      var(--flow-c2, #FF5B04) 180deg,
      transparent 290deg);
  filter: blur(13px);
  opacity: 0;
  transition: opacity var(--frame-motion-dur-med, 260ms) var(--frame-motion-ease-out, ease);
}
.mb-flow::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: var(--frame-grad-deep-night);
  border: 1px solid var(--frame-border, rgba(228,238,240,0.14));
  transition: border-color var(--frame-motion-dur-med, 260ms) var(--frame-motion-ease-out, ease);
}
.mb-flow > * { position: relative; z-index: 2; }
.mb-flow:hover::before,
.mb-flow:focus-within::before {
  opacity: 0.7;
  animation: mb-spin 5s linear infinite;
}
.mb-flow:hover::after,
.mb-flow:focus-within::after {
  border-color: color-mix(in srgb, var(--flow-c1, #00E5FF) 30%, var(--frame-border, rgba(228,238,240,0.14)));
}
@keyframes mb-spin { to { --mb-angle: 360deg; } }

/* ============================================================
   SOFT DARK GLOW on hover
   ============================================================ */
.mb-glow {
  transition: box-shadow var(--frame-motion-dur-med, 260ms) var(--frame-motion-ease-out, ease),
              transform var(--frame-motion-dur-med, 260ms) var(--frame-motion-ease-out, ease),
              border-color var(--frame-motion-dur-med, 260ms) var(--frame-motion-ease-out, ease);
  box-shadow: var(--frame-glow-soft);
}
.mb-glow:hover {
  transform: translateY(-3px);
  box-shadow: var(--frame-glow-soft),
              0 0 28px -4px color-mix(in srgb, var(--glow-c, #00E5FF) 38%, transparent);
}

/* ============================================================
   GLASS surface
   ============================================================ */
.mb-glass {
  background: var(--frame-glass-bg);
  backdrop-filter: var(--frame-glass-filter);
  -webkit-backdrop-filter: var(--frame-glass-filter);
  border: 1px solid var(--frame-border);
}

/* selection */
::selection { background: var(--frame-accent, #FF5B04); color: #fff; }

/* Smooth scroll for in-page anchor links (frame/section anchor IDs). */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Reveal-mask wipe animation — usable on any block via class .mb-mask. */
.mb-mask {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 900ms cubic-bezier(.2,.7,.2,1);
}
.mb-mask.is-in { clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .mb-orb--drift,
  .mb-flow:hover::before,
  .mb-flow:focus-within::before { animation: none; }
}