/* ================================================================
   BYR — Glass Panels, Headings & Entrances
   WPCode: CSS Snippet | Site Wide Header | Priority: 10
   ================================================================
   Glass section panels (.byr-hero), entrance animations (slide/fade),
   heading gradient effects, and utility classes.
   Shares tokens with Image System v3.

   NOTE: Constellation Gallery has been extracted to its own
   standalone snippet for use on a separate site.
   ================================================================ */

/* ============================================================
   0. GLASS PANEL CONTAINER (.byr-hero)
   ============================================================ */

.byr-hero {
  padding: var(--space-lg) var(--space-md) !important;
  border-radius: var(--radius-xl) !important;
  position: relative !important;
  overflow: hidden !important;

  /* Dark mode default */
  background: linear-gradient(135deg,
    rgba(0,102,204,0.12) 0%,
    rgba(0,102,204,0.06) 100%) !important;
  backdrop-filter: blur(7px) !important;
  -webkit-backdrop-filter: blur(7px) !important;
  border: 1px solid rgba(0,102,204,0.18) !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.6),
    0 8px 24px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;

  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}

.mode-light .byr-hero {
  background: linear-gradient(135deg,
    rgba(120,110,100,0.13) 0%,
    rgba(140,130,120,0.10) 100%) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(100,90,80,0.18) !important;
  box-shadow:
    0 2px 4px rgba(0,0,0,0.12),
    0 8px 24px rgba(0,0,0,0.08),
    inset 0 0 50px rgba(0,0,0,0.06),
    inset 0 3px 10px rgba(0,0,0,0.10) !important;
}

.byr-hero:hover {
  transform: translateY(-2px) !important;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.6),
    0 14px 36px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}
.mode-light .byr-hero:hover {
  box-shadow:
    0 2px 6px rgba(0,0,0,0.14),
    0 14px 36px rgba(0,0,0,0.10),
    inset 0 0 60px rgba(0,0,0,0.08),
    inset 0 3px 10px rgba(0,0,0,0.12) !important;
}

/* Inner edge glow */
.byr-hero::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: var(--radius-xl) !important;
  padding: 1px !important;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.08) 0%,
    rgba(255,255,255,0.02) 50%,
    rgba(0,102,204,0.08) 100%) !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
  z-index: var(--z-content) !important;
}
.mode-light .byr-hero::before {
  background: linear-gradient(135deg,
    rgba(120,110,100,0.25) 0%,
    rgba(140,130,120,0.12) 50%,
    rgba(100,90,80,0.20) 100%) !important;
}

.byr-hero-chrome::before {
  padding: 1.5px !important;
  background: conic-gradient(from 210deg,
    rgba(255,255,255,0.85),
    rgba(255,255,255,0.20),
    rgba(34,211,238,0.55),
    rgba(255,255,255,0.20),
    rgba(16,185,129,0.45),
    rgba(255,255,255,0.20),
    rgba(255,255,255,0.85)) !important;
  opacity: 0.6 !important;
  transition: opacity 0.3s ease !important;
}
.byr-hero-chrome:hover::before {
  opacity: 1 !important;
  filter: brightness(1.15) saturate(1.1) !important;
}
.mode-light .byr-hero-chrome::before {
  background: conic-gradient(from 210deg,
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.10),
    rgba(34,211,238,0.40),
    rgba(0,0,0,0.10),
    rgba(16,185,129,0.35),
    rgba(0,0,0,0.10),
    rgba(0,0,0,0.55)) !important;
}

.byr-hero-flush { padding: 0 !important; }


/* ============================================================
   1. HEADINGS — Utility Classes
   ============================================================ */

[class*="byr-h-"] h1,
[class*="byr-h-"] h2,
[class*="byr-h-"] h3,
[class*="byr-h-"] h4,
[class*="byr-h-"] h5,
[class*="byr-h-"] h6 {
  text-wrap: balance !important;
  max-width: 65ch !important;
  margin: 0 0 0.6em !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
}

/* Section heading — big, bold, gradient */
.byr-h-section h2 {
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  font-size: clamp(1.75rem, 2vw + 1.2rem, 2.5rem) !important;
  background: linear-gradient(120deg, #10B981 0%, #22D3EE 50%, #3B82F6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) !important;
}
.mode-light .byr-h-section h2 {
  background: linear-gradient(120deg, #059669 0%, #0891B2 50%, #1E40AF 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08)) !important;
}

/* Subsection */
.byr-h-sub h3 {
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  font-size: clamp(1.4rem, 1.2vw + 1.1rem, 1.9rem) !important;
  background: linear-gradient(110deg, #FB7185 0%, #F97316 60%, #FBBF24 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.25)) !important;
}
.mode-light .byr-h-sub h3 {
  background: linear-gradient(110deg, #E11D48 0%, #EA580C 60%, #D97706 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.06)) !important;
}

/* Kicker — uppercase, underbar */
.byr-h-kicker h4 {
  font-weight: 750 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: clamp(1.15rem, 0.6vw + 1rem, 1.45rem) !important;
  color: #FFD54F !important;
  -webkit-text-fill-color: #FFD54F !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 0 12px rgba(255,213,79,0.35) !important;
}
.byr-h-kicker h4::after {
  content: "" !important;
  display: block !important;
  width: 3.2rem !important;
  height: 0.2rem !important;
  background: #FFD54F !important;
  margin-top: 0.5em !important;
  border-radius: var(--radius-pill) !important;
  opacity: 0.85 !important;
}
.mode-light .byr-h-kicker h4 {
  color: #B8860B !important;
  -webkit-text-fill-color: #B8860B !important;
  text-shadow: 0 1px 1px rgba(0,0,0,0.06), 0 0 8px rgba(184,134,11,0.2) !important;
}
.mode-light .byr-h-kicker h4::after {
  background: #B8860B !important;
}

/* Display — Playfair serif */
.byr-h-display h2,
.byr-h-display h3 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  color: var(--byr-text-primary, rgba(240,240,248,0.92)) !important;
  -webkit-text-fill-color: var(--byr-text-primary, rgba(240,240,248,0.92)) !important;
}
.mode-light .byr-h-display h2,
.mode-light .byr-h-display h3 {
  color: rgba(15,15,30,0.90) !important;
  -webkit-text-fill-color: rgba(15,15,30,0.90) !important;
}

/* Hero H1 — large 4-color gradient headline */
.byr-h-hero h1 {
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.03em !important;
  font-size: clamp(2.25rem, 5vw + 1rem, 4rem) !important;
  background: linear-gradient(135deg, #22D3EE 0%, #3B82F6 35%, #8B5CF6 70%, #EC4899 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)) drop-shadow(0 0 20px rgba(34,211,238,0.35)) !important;
  max-width: 20ch !important;
  text-wrap: balance !important;
}
.mode-light .byr-h-hero h1 {
  background: linear-gradient(135deg, #0891B2 0%, #1E40AF 35%, #7C3AED 70%, #DB2777 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08)) drop-shadow(0 0 16px rgba(8,145,178,0.25)) !important;
}

/* Plain — no gradient, clean text */
.byr-h-plain h2,
.byr-h-plain h3,
.byr-h-plain h4 {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: var(--byr-text-primary, rgba(240,240,248,0.92)) !important;
  color: var(--byr-text-primary, rgba(240,240,248,0.92)) !important;
  filter: none !important;
  text-shadow: none !important;
}
.mode-light .byr-h-plain h2,
.mode-light .byr-h-plain h3,
.mode-light .byr-h-plain h4 {
  -webkit-text-fill-color: rgba(15,15,30,0.90) !important;
  color: rgba(15,15,30,0.90) !important;
}


/* ============================================================
   2. HEADING GRADIENT SWAPS
   ============================================================ */

/* Cool (default on section) */
.byr-h-gradient-cool h2,
.byr-h-gradient-cool h3 {
  background: linear-gradient(135deg, #22D3EE 0%, #3B82F6 40%, #8B5CF6 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
.mode-light .byr-h-gradient-cool h2,
.mode-light .byr-h-gradient-cool h3 {
  background: linear-gradient(135deg, #0891B2 0%, #1E40AF 40%, #7C3AED 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
}

/* Warm */
.byr-h-gradient-warm h2,
.byr-h-gradient-warm h3 {
  background: linear-gradient(110deg, #FB7185 0%, #F97316 60%, #FBBF24 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
.mode-light .byr-h-gradient-warm h2,
.mode-light .byr-h-gradient-warm h3 {
  background: linear-gradient(110deg, #E11D48 0%, #EA580C 60%, #D97706 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
}

/* Mint */
.byr-h-gradient-mint h2,
.byr-h-gradient-mint h3 {
  background: linear-gradient(120deg, #10B981 0%, #22D3EE 50%, #3B82F6 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}
.mode-light .byr-h-gradient-mint h2,
.mode-light .byr-h-gradient-mint h3 {
  background: linear-gradient(120deg, #059669 0%, #0891B2 50%, #1E40AF 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
}

/* Animated gradient */
.byr-h-gradient-anim h2,
.byr-h-gradient-anim h3 {
  background-size: 250% 100% !important;
  animation: byr-grad-shift 8s ease infinite;
}

/* Glow modifier */
.byr-h-glow h2,
.byr-h-glow h3 {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)) drop-shadow(0 0 24px rgba(34,211,238,0.35)) !important;
}
.mode-light .byr-h-glow h2,
.mode-light .byr-h-glow h3 {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08)) drop-shadow(0 0 16px rgba(8,145,178,0.2)) !important;
}

/* Chrome text modifier */
.byr-h-chrome h2,
.byr-h-chrome h3 {
  background: linear-gradient(180deg,
    rgba(255,255,255,0.95) 0%, rgba(180,190,200,0.8) 30%,
    rgba(255,255,255,0.9) 50%, rgba(160,170,185,0.7) 70%,
    rgba(220,225,235,0.85) 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35)) !important;
}
.mode-light .byr-h-chrome h2,
.mode-light .byr-h-chrome h3 {
  background: linear-gradient(180deg,
    rgba(40,40,60,0.9) 0%, rgba(70,75,90,0.75) 30%,
    rgba(30,30,50,0.85) 50%, rgba(80,85,100,0.7) 70%,
    rgba(50,55,70,0.8) 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.12)) !important;
}


/* Highlighted <mark> text */
[class*="byr-h"] mark,
.byr-hero mark {
  background: linear-gradient(135deg, rgba(34,211,238,0.25), rgba(139,92,246,0.25)) !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  padding: 0.1em 0.3em !important;
  border-radius: var(--radius-xs) !important;
  box-shadow: 0 0 12px rgba(34,211,238,0.25) !important;
}
.mode-light [class*="byr-h"] mark,
.mode-light .byr-hero mark {
  background: linear-gradient(135deg, rgba(251,191,36,0.3), rgba(249,115,22,0.3)) !important;
  box-shadow: 0 0 8px rgba(251,191,36,0.2) !important;
}

/* Caption / small text */
.byr-text-caption {
  font-size: 0.875rem !important;
  color: rgba(240,240,248,0.50) !important;
  line-height: 1.5 !important;
  letter-spacing: 0.025em !important;
}
.mode-light .byr-text-caption {
  color: rgba(15,15,30,0.45) !important;
}

/* Selection highlighting */
[class*="byr-h"]::selection,
[class*="byr-h"] *::selection,
.byr-hero::selection,
.byr-hero *::selection {
  background: rgba(34,211,238,0.3) !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}
.mode-light [class*="byr-h"]::selection,
.mode-light [class*="byr-h"] *::selection,
.mode-light .byr-hero::selection,
.mode-light .byr-hero *::selection {
  background: rgba(251,191,36,0.3) !important;
}


/* ============================================================
   3. ENTRANCE ANIMATIONS
   ============================================================ */

/* All entrances share these defaults */
[class*="byr-enter-"] {
  animation-duration: 0.6s !important;
  animation-iteration-count: 1 !important;
  animation-fill-mode: both !important;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Scroll-triggered: hidden until .byr-visible is added */
.byr-on-scroll {
  opacity: 0 !important;
  visibility: hidden !important;
}
.byr-on-scroll.byr-visible {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ---- FADE ---- */
.byr-enter-fade { animation-name: byr-e-fade !important; }
@keyframes byr-e-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- RISE (fade up) ---- */
.byr-enter-rise { animation-name: byr-e-rise !important; }
@keyframes byr-e-rise {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- FALL (fade down) ---- */
.byr-enter-fall { animation-name: byr-e-fall !important; }
@keyframes byr-e-fall {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- SLIDE LEFT (from right) ---- */
.byr-enter-slide-left { animation-name: byr-e-slide-l !important; }
@keyframes byr-e-slide-l {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---- SLIDE RIGHT (from left) ---- */
.byr-enter-slide-right { animation-name: byr-e-slide-r !important; }
@keyframes byr-e-slide-r {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---- SCALE ---- */
.byr-enter-scale { animation-name: byr-e-scale !important; }
@keyframes byr-e-scale {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- SCALE + ROTATE ---- */
.byr-enter-scale-rotate { animation-name: byr-e-scale-rot !important; }
@keyframes byr-e-scale-rot {
  from { opacity: 0; transform: scale(0.8) rotate(-4deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* ---- BLUR TO SHARP ---- */
.byr-enter-blur { animation-name: byr-e-blur !important; }
@keyframes byr-e-blur {
  from { opacity: 0; filter: blur(12px); transform: scale(1.04); }
  to   { opacity: 1; filter: blur(0); transform: scale(1); }
}

/* ---- GLITCH ---- */
.byr-enter-glitch { animation-name: byr-e-glitch !important; animation-timing-function: steps(1) !important; }
@keyframes byr-e-glitch {
  0%   { opacity: 0; transform: translate(0); clip-path: inset(0 0 100% 0); }
  10%  { opacity: 1; clip-path: inset(40% 0 30% 0); transform: translate(-3px, 2px); }
  20%  { clip-path: inset(10% 0 60% 0); transform: translate(3px, -1px); }
  30%  { clip-path: inset(70% 0 5% 0); transform: translate(-2px, 1px); }
  40%  { clip-path: inset(20% 0 40% 0); transform: translate(2px, -2px); }
  50%  { clip-path: inset(0 0 55% 0); transform: translate(-1px, 1px); }
  60%  { clip-path: inset(50% 0 10% 0); transform: translate(1px, 0); }
  70%  { clip-path: inset(5% 0 25% 0); transform: translate(0, -1px); }
  85%  { clip-path: inset(0); transform: translate(0); opacity: 0.9; }
  100% { clip-path: inset(0); transform: translate(0); opacity: 1; }
}

/* ---- TYPEWRITER (clip reveal L→R) ---- */
.byr-enter-typewriter { animation-name: byr-e-typewriter !important; }
@keyframes byr-e-typewriter {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* ---- SPLIT (center open) ---- */
.byr-enter-split { animation-name: byr-e-split !important; }
@keyframes byr-e-split {
  from { clip-path: inset(0 50% 0 50%); opacity: 0; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* ---- DROP + BOUNCE ---- */
.byr-enter-drop { animation-name: byr-e-drop !important; animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1) !important; }
@keyframes byr-e-drop {
  from { opacity: 0; transform: translateY(-80px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- 3D FLIP ---- */
.byr-enter-flip {
  animation-name: byr-e-flip !important;
  perspective: 800px !important;
  transform-style: preserve-3d !important;
}
@keyframes byr-e-flip {
  from { opacity: 0; transform: perspective(800px) rotateX(-70deg); }
  to   { opacity: 1; transform: perspective(800px) rotateX(0deg); }
}

/* ---- MORPH (organic blob-in) ---- */
.byr-enter-morph { animation-name: byr-e-morph !important; }
@keyframes byr-e-morph {
  0%   { opacity: 0; border-radius: 60% 40% 50% 45% / 45% 55% 40% 60%; transform: scale(0.7) rotate(-3deg); }
  60%  { opacity: 1; border-radius: 45% 55% 48% 52% / 52% 48% 55% 45%; transform: scale(1.03) rotate(1deg); }
  100% { opacity: 1; border-radius: inherit; transform: scale(1) rotate(0deg); }
}


/* ============================================================
   4. DELAY & DURATION MODIFIERS
   ============================================================ */

.byr-delay-1 { animation-delay: 0.1s !important; }
.byr-delay-2 { animation-delay: 0.2s !important; }
.byr-delay-3 { animation-delay: 0.3s !important; }
.byr-delay-4 { animation-delay: 0.4s !important; }
.byr-delay-5 { animation-delay: 0.5s !important; }
.byr-delay-6 { animation-delay: 0.6s !important; }
.byr-delay-7 { animation-delay: 0.7s !important; }
.byr-delay-8 { animation-delay: 0.8s !important; }

.byr-dur-fast  { animation-duration: 0.3s !important; }
.byr-dur-med   { animation-duration: 0.6s !important; }
.byr-dur-slow  { animation-duration: 1s !important; }
.byr-dur-crawl { animation-duration: 1.6s !important; }


/* ============================================================
   5. ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  [class*="byr-enter-"],
  .byr-h-gradient-anim h2,
  .byr-h-gradient-anim h3 {
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}


/* ============================================================
   6. RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .byr-hero { padding: 1.5rem 1.25rem !important; border-radius: var(--radius-lg) !important; }

  /* Reduce entrance travel distance on mobile */
  @keyframes byr-e-rise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes byr-e-slide-l {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
  }
  @keyframes byr-e-slide-r {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
  }
}

@media (max-width: 480px) {
  .byr-hero { padding: 1.25rem 1rem !important; border-radius: var(--radius-md) !important; }
}


/* ============================================================
   KEYFRAMES (shared)
   ============================================================ */

@keyframes byr-grad-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}


/* ============================================================
   SCROLL-TRIGGER JS — Add to WPCode as JavaScript snippet
   ============================================================

   Paste this into a separate WPCode JS snippet (Footer):

   (function(){
     const els = document.querySelectorAll('.byr-on-scroll');
     if (!els.length) return;
     const io = new IntersectionObserver((entries) => {
       entries.forEach(e => {
         if (e.isIntersecting) {
           e.target.classList.add('byr-visible');
           io.unobserve(e.target);
         }
       });
     }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });
     els.forEach(el => io.observe(el));
   })();

   ============================================================ */