/* ============================================================
   00b-design-system.css — Next-gen design tokens + utilities
   Big Bear Marketing Website
   ============================================================
   Loaded AFTER 00-base.css. Additive only. Extends the existing
   token set with the patterns the next-gen brief calls for:
     - Glassmorphism (.glass, .glass-strong)
     - Animated gradient backgrounds (.gradient-shift)
     - Gradient text utility (.gradient-text)
     - Counter animation styling (.counter)
     - Scroll progress bar (#scroll-progress)
     - Stagger automation (.stagger > *:nth-child(n))
     - Magnetic hover hook (data-magnetic, handled in animations.js)
     - Extended typography scale (.text-xs ... .text-6xl)
     - Extended radius + shadow scales
     - Reduced-motion guards for everything kinetic
   Nothing in here REPLACES existing tokens — it supplements them.
   ============================================================ */

:root {
  /* === Extended radius scale === */
  --r-sm:    6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   32px;
  --r-2xl:  40px;
  --r-full: 9999px;

  /* === Extended shadow scale === */
  /* Designed to layer: -xl is for hero floats + popovers, inset for pressed states */
  --sh-xs:    0 1px 2px rgba(0, 0, 0, 0.06);
  --sh-sm:    0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --sh-md:    0 4px 16px rgba(0, 0, 0, 0.10), 0 2px 6px rgba(0, 0, 0, 0.06);
  --sh-lg:    0 10px 40px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08);
  --sh-xl:    0 20px 60px rgba(0, 0, 0, 0.20), 0 8px 20px rgba(0, 0, 0, 0.12);
  --sh-2xl:   0 30px 80px rgba(0, 0, 0, 0.28), 0 12px 28px rgba(0, 0, 0, 0.18);
  --sh-inset: inset 0 2px 4px rgba(0, 0, 0, 0.06);

  /* === Brand-tinted glow shadows (for dark sections + accent cards) === */
  --glow-yellow: 0 0 40px rgba(255, 215, 0, 0.20), 0 16px 40px rgba(255, 215, 0, 0.12);
  --glow-navy:   0 0 40px rgba(15, 59, 95, 0.25),  0 16px 40px rgba(15, 59, 95, 0.18);
  --glow-green:  0 0 40px rgba(21, 97, 45, 0.22),  0 16px 40px rgba(21, 97, 45, 0.14);

  /* === Typography size scale (rem-based) === */
  --t-xs:   0.75rem;
  --t-sm:   0.875rem;
  --t-base: 1rem;
  --t-lg:   1.125rem;
  --t-xl:   1.25rem;
  --t-2xl:  1.5rem;
  --t-3xl:  1.875rem;
  --t-4xl:  2.25rem;
  --t-5xl:  3rem;
  --t-6xl:  3.75rem;
  --t-7xl:  4.5rem;

  /* === Motion === */
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --t-fast:  150ms;
  --t-base:  250ms;
  --t-slow:  400ms;
  --t-slower: 700ms;

  /* === Glass surfaces === */
  /* Tuned for both light AND dark backgrounds — uses brand-tinted whites */
  --glass-bg:        rgba(255, 255, 255, 0.08);
  --glass-bg-strong: rgba(255, 255, 255, 0.14);
  --glass-bg-dark:   rgba(15, 59, 95, 0.30);
  --glass-border:    rgba(255, 255, 255, 0.16);
  --glass-border-strong: rgba(255, 255, 255, 0.28);
  --glass-blur:      20px;
}

/* ============================================================
   GLASSMORPHISM
   Use these on dark hero sections, premium pricing cards,
   and floating overlays. Avoid on light backgrounds (they
   look washed out — use --glass-bg-dark if you must).
   ============================================================ */

.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--r-lg);
}
.glass-strong {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 1.4));
  backdrop-filter: blur(calc(var(--glass-blur) * 1.4));
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
}
.glass-dark {
  background: var(--glass-bg-dark);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  border: 1px solid rgba(255, 215, 0, 0.18);
  border-radius: var(--r-lg);
}

/* Defensive fallback: if the browser doesn't support backdrop-filter,
   bump the background opacity so the card is still legible. */
@supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) {
  .glass        { background: rgba(15, 59, 95, 0.85); }
  .glass-strong { background: rgba(15, 59, 95, 0.92); }
  .glass-dark   { background: rgba(15, 59, 95, 0.92); }
}

/* ============================================================
   ANIMATED GRADIENT BACKGROUNDS
   Add .gradient-shift to a section background for a 12s slow drift.
   Pair with .gradient-bbm for the brand-coloured version.
   ============================================================ */

.gradient-shift {
  background-size: 300% 300%;
  animation: bbm-gradient-shift 18s ease-in-out infinite;
}
.gradient-bbm {
  background-image: linear-gradient(
    -45deg,
    var(--c-navy-dark) 0%,
    var(--c-navy) 25%,
    var(--c-green-dark) 60%,
    var(--c-navy) 100%
  );
}
.gradient-bbm-warm {
  background-image: linear-gradient(
    135deg,
    var(--c-navy-dark) 0%,
    #1a2a4a 35%,
    #4a3a1a 75%,
    var(--c-navy-dark) 100%
  );
}
@keyframes bbm-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ============================================================
   GRADIENT TEXT
   Apply to a <span> inside a heading for accent words.
   Falls back to solid yellow if background-clip isn't supported.
   ============================================================ */

.gradient-text {
  background-image: linear-gradient(135deg, var(--c-yellow) 0%, #ffec80 50%, var(--c-yellow-dark) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-yellow); /* fallback before -webkit-text-fill-color kicks in */
  display: inline-block;
}
.gradient-text-cool {
  background-image: linear-gradient(135deg, #6ec1ff 0%, #4a9eff 50%, var(--c-navy-light) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--c-navy-light);
  display: inline-block;
}

/* ============================================================
   COUNTER ANIMATION
   Apply to numeric stats. JS in animations.js animates 0 → data-target
   when the element scrolls into view. Tabular-nums keeps digit width
   stable so the number doesn't jitter as it ticks up.
   ============================================================ */

.counter {
  font-variant-numeric: tabular-nums;
  display: inline-block;
}

/* ============================================================
   SCROLL PROGRESS BAR
   Pinned to the top of the viewport. JS updates the inner width.
   Sits above the navbar (z-index: 1001). Yellow on navy.
   ============================================================ */

#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: transparent;
  z-index: 1001;
  pointer-events: none;
}
#scroll-progress::before {
  content: "";
  display: block;
  height: 100%;
  width: var(--scroll-progress, 0%);
  background: linear-gradient(90deg, var(--c-yellow) 0%, var(--c-green) 60%, var(--c-yellow) 100%);
  background-size: 200% 100%;
  transition: width 0.1s linear;
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.55);
  animation: progress-shimmer 3s linear infinite;
}
@keyframes progress-shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ============================================================
   STAGGER ANIMATIONS
   Wrap a grid or list with .stagger and every direct child
   inherits a transition-delay. Pair with .reveal for the
   "ripple into view" effect. Use sparingly — too much stagger
   feels gimmicky.
   ============================================================ */

.stagger > *                  { transition-delay: 0ms; }
.stagger > *:nth-child(2)     { transition-delay: 80ms; }
.stagger > *:nth-child(3)     { transition-delay: 160ms; }
.stagger > *:nth-child(4)     { transition-delay: 240ms; }
.stagger > *:nth-child(5)     { transition-delay: 320ms; }
.stagger > *:nth-child(6)     { transition-delay: 400ms; }
.stagger > *:nth-child(7)     { transition-delay: 480ms; }
.stagger > *:nth-child(8)     { transition-delay: 560ms; }
.stagger > *:nth-child(9)     { transition-delay: 640ms; }
.stagger > *:nth-child(10)    { transition-delay: 720ms; }

/* ============================================================
   MAGNETIC HOVER
   Add data-magnetic="0.15" to any element to make it follow
   the cursor on hover. JS reads the strength from the attribute.
   The CSS hook is just the transition + transform-origin.
   ============================================================ */

[data-magnetic] {
  transition: transform 0.25s var(--ease-spring);
  will-change: transform;
}

/* ============================================================
   SCROLL-LINKED PARALLAX
   Add data-parallax="0.3" to any element for a subtle scroll
   translate. Speed comes from the attribute (0.1 = subtle,
   0.4 = noticeable). JS in animations.js wires it up.
   ============================================================ */

[data-parallax] {
  will-change: transform;
}

/* ============================================================
   ACCENT-LINE CARD VARIANT
   Adds a 3px coloured line at the top that scales in on hover.
   Compose with existing .service-teaser-card / .feature-card /
   .crm-card by adding .has-accent.
   ============================================================ */

.has-accent {
  position: relative;
  overflow: hidden;
}
.has-accent::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-yellow) 0%, var(--c-green) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.35s var(--ease-out);
  z-index: 1;
}
@media (hover: hover) {
  .has-accent:hover::before {
    transform: scaleX(1);
  }
}

/* ============================================================
   SPOTLIGHT (cursor-follow halo on dark sections)
   Add .spotlight to a dark section. JS sets --mx and --my
   based on mouse position, and the radial gradient follows.
   Subtle yellow glow.
   ============================================================ */

.spotlight {
  position: relative;
  isolation: isolate;
}
.spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    600px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 215, 0, 0.10),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}
.spotlight:hover::after,
.spotlight.is-hovered::after {
  opacity: 1;
}
.spotlight > * {
  position: relative;
  z-index: 1;
}

/* ============================================================
   UTILITY CLASSES (typography + layout helpers)
   Small and obvious — saves repeating styles inline.
   ============================================================ */

.text-balance  { text-wrap: balance; }
.text-pretty   { text-wrap: pretty; }
.text-xs       { font-size: var(--t-xs); }
.text-sm       { font-size: var(--t-sm); }
.text-lg       { font-size: var(--t-lg); }
.text-xl       { font-size: var(--t-xl); }
.text-2xl      { font-size: var(--t-2xl); }
.text-3xl      { font-size: var(--t-3xl); }
.text-4xl      { font-size: var(--t-4xl); }
.text-5xl      { font-size: var(--t-5xl); }
.text-6xl      { font-size: var(--t-6xl); }

/* Display-style numerals — big, tight, yellow */
.num-display {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--c-yellow);
}

/* Lift+glow combo for hero stat tiles */
.lift-glow {
  transition: transform var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
@media (hover: hover) {
  .lift-glow:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-xl);
  }
}

/* ============================================================
   REDUCED MOTION
   Strip animations + transitions to a token amount so vestibular-
   disorder users don't get spammed. Keeps hover state feedback
   (180ms) since that's interaction not decoration.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .gradient-shift,
  #scroll-progress::before,
  [data-magnetic],
  [data-parallax] {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1 !important;
    transform: none !important;
  }
  .stagger > * { transition-delay: 0ms !important; }
}