/* Clarity brand variables and base styles */
:root {
  --color-primary: #00A99D;
  --color-secondary: #0D7382;
  --color-accent: #16CEB7;
  --color-gradient-start: #00C9A6;
  --color-gradient-end: #0D7382;
  --color-neutral-dark: #1F2937;
  --color-neutral-light: #F9FAFB;
  --color-text-primary: #1F2937;
  --color-text-secondary: #6B7280;

  --font-family: 'Inter', system-ui, -apple-system, sans-serif;

  --duration-short: 250ms;
  --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
}

html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-family); color: var(--color-text-primary); background: var(--color-neutral-light); }

/* Utilities */
.container { max-width: 1200px; margin: 0 auto; }

/* Brand gradients */
.brand-gradient { background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-end)); }

/* Holographic helpers */
.holo-text {
  background-image: linear-gradient(100deg, var(--color-primary), #0077B6, #00D4B8, var(--color-primary));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: holo-shine 7s linear infinite;
}
@keyframes holo-shine { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}}

/* Scroll progress bar defaults (used by site/scroll-controller) */
.scroll-progress-container { position: fixed; top: 0; left: 0; width: 100%; height: 4px; background: rgba(255,255,255,0.1); z-index: 1000; }
.scroll-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--color-gradient-start), var(--color-gradient-end)); transition: width var(--duration-short) var(--ease-standard); }

/* v6 parity: default viewport-height beats with vertical centering */
[data-scroll-section] {
  /* Fallback first, then newer viewport units */
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center; /* vertical centering */
}

/* Opt-out: allow sections to size to content when needed */
[data-scroll-section][data-size="auto"],
[data-scroll-section].size-auto {
  min-height: auto;
  display: block;
}

/* v6 parity: radial glassmorphism for sections */
[data-scroll-section][data-glass="radial"] {
  position: relative;
  /* Radial mask defaults */
  --glass-alpha: 0.17;
  --glass-blur: 22px;
  /* Increase coverage ~50% (28%→42%, 46%→69%) */
  --glass-inner: 42%;  /* fully glass up to this radius */
  --glass-outer: 69%;  /* fades to 0 by this radius */
  --glass-center-x: 50%;
  --glass-center-y: 50%;
}

[data-scroll-section][data-glass="radial"]::before {
  content: '';
  position: absolute;
  inset: -8%;
  pointer-events: none;
  z-index: 0;
  /* Glass panel rendered only where mask is opaque */
  background: rgba(255, 255, 255, var(--glass-alpha));
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow:
    0 40px 110px -64px rgba(15, 23, 42, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: saturate(140%) blur(var(--glass-blur));
  -webkit-backdrop-filter: saturate(140%) blur(var(--glass-blur));
  opacity: 0;
  transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1);

  /* Radial mask: center visible, edges transparent → no glass at edges */
  -webkit-mask-image: radial-gradient(
    circle at var(--glass-center-x) var(--glass-center-y),
    rgba(0,0,0,1) var(--glass-inner),
    rgba(0,0,0,0) var(--glass-outer)
  );
  mask-image: radial-gradient(
    circle at var(--glass-center-x) var(--glass-center-y),
    rgba(0,0,0,1) var(--glass-inner),
    rgba(0,0,0,0) var(--glass-outer)
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: cover;
  mask-size: cover;
}

[data-scroll-section][data-glass="radial"].in::before {
  opacity: 0.8;
}

.prefers-reduced-motion [data-scroll-section][data-glass="radial"]::before {
  opacity: 1;
  transition: none;
}

[data-scroll-section][data-glass="radial"] > * {
  position: relative;
  z-index: 1;
}

/* =====================================
   SECTION EYEBROW SYSTEM
   ===================================== */

/* Eyebrow CSS Variables (from design tokens) */
:root {
  /* Typography tokens */
  --eyebrow-size-mobile: 0.6875rem;        /* 11px */
  --eyebrow-size-desktop: 0.8125rem;       /* 13px */
  --eyebrow-weight: 600;                    /* semibold */
  --eyebrow-tracking: 0.1em;               /* letter-spacing */
  --eyebrow-line-height: 1.2;              /* compact display */

  /* Color tokens */
  --eyebrow-color-default: #0d9488;        /* teal-600 WCAG AA */
  --eyebrow-color-hover: #0f766e;          /* teal-700 */
  --eyebrow-color-active: #0f766e;         /* teal-700 */
  --eyebrow-color-category: #6b7280;       /* gray-500 neutral */

  /* Spacing tokens */
  --eyebrow-spacing-to-heading: 1.5rem;    /* 24px gap */
  --eyebrow-max-width: 12.5rem;            /* 200px max width */

  /* Transition tokens */
  --eyebrow-transition-duration: 280ms;     /* smooth transitions */
  --eyebrow-transition-easing: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Base Eyebrow Styles */
.section-eyebrow {
  /* Typography */
  font-family: var(--font-family);
  font-size: var(--eyebrow-size-mobile);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-tracking);
  line-height: var(--eyebrow-line-height);
  text-transform: uppercase;

  /* Color */
  color: var(--eyebrow-color-default);

  /* Layout */
  display: block;
  max-width: var(--eyebrow-max-width);
  margin-bottom: var(--eyebrow-spacing-to-heading);

  /* Text overflow handling */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  /* Accessibility */
  word-break: break-word;
  hyphens: auto;
}

/* Desktop responsive scaling */
@media (min-width: 768px) {
  .section-eyebrow {
    font-size: var(--eyebrow-size-desktop);
  }
}

/* Interactive States for Navigation-Linked Eyebrows */
.section-eyebrow.nav-linked {
  cursor: pointer;
  transition: all var(--eyebrow-transition-duration) var(--eyebrow-transition-easing);
  position: relative;
}

.section-eyebrow.nav-linked:hover {
  color: var(--eyebrow-color-hover);
}

.section-eyebrow.nav-linked:active,
.section-eyebrow.nav-linked.active {
  color: var(--eyebrow-color-active);
}

/* Active state left border dot indicator */
.section-eyebrow.nav-linked.active::before {
  content: '';
  position: absolute;
  left: -0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.25rem;
  height: 0.25rem;
  background-color: var(--eyebrow-color-active);
  border-radius: 50%;
  opacity: 1;
  transition: opacity var(--eyebrow-transition-duration) var(--eyebrow-transition-easing);
}

/* Focus states for keyboard accessibility */
.section-eyebrow.nav-linked:focus {
  outline: 2px solid var(--eyebrow-color-hover);
  outline-offset: 2px;
  border-radius: 0.125rem;
}

.section-eyebrow.nav-linked:focus:not(:focus-visible) {
  outline: none;
}

/* Category-specific color variants */
.section-eyebrow.category-neutral {
  color: var(--eyebrow-color-category);
}

.section-eyebrow.category-confidence {
  color: #047857; /* green-700 */
}

.section-eyebrow.category-adaptive {
  color: #2563eb; /* blue-600 */
}

.section-eyebrow.category-scale {
  color: #9333ea; /* purple-600 */
}

/* Conditional display logic */
.section-eyebrow.hidden {
  display: none;
}

/* Section integration - consistent positioning */
.section-content .section-eyebrow {
  margin-top: 0;
}

/* Hero section specific positioning */
.hero-panel .section-eyebrow {
  text-align: center;
  max-width: none; /* Allow full width in hero */
  margin-left: auto;
  margin-right: auto;
}

/* Other section types - left aligned */
.section-container .section-eyebrow,
.container .section-eyebrow {
  text-align: left;
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .section-eyebrow.nav-linked {
    transition: none;
  }

  .section-eyebrow.nav-linked.active::before {
    transition: none;
  }
}

/* Ultra-wide viewport optimization */
@media (min-width: 1920px) {
  .section-eyebrow {
    font-size: calc(var(--eyebrow-size-desktop) * 1.1); /* 14.3px */
  }
}

/* Mobile landscape and small tablet adjustments */
@media (min-width: 640px) and (max-width: 767px) {
  .section-eyebrow {
    font-size: calc(var(--eyebrow-size-mobile) * 1.1); /* 12.1px */
  }
}

/* Extra small mobile (320px) optimization */
@media (max-width: 480px) {
  .section-eyebrow {
    font-size: 0.625rem; /* 10px for very small screens */
    --eyebrow-max-width: 10rem; /* 160px on small screens */
  }
}