/* ═══════════════════════════════════════════════════════════════════════
   joy-bright.css — added 2026-06-10 (Yousef directive: brighter, joyful, alive)
   Loaded LAST so it overrides earlier dark accents while preserving brand identity.

   Palette shift:
   - Keep gold cross identity (#D4A843)
   - Replace navy dominance with warm cream + sky + sunset
   - Add joy accents: peach, sage, rose, sky-blue
   - More color flow and brightness, less dark space
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Joy palette — soft, warm, alive */
  --joy-cream:        #FDFBF5;
  --joy-cream-warm:   #FBF6E9;
  --joy-peach:        #FFD4B8;
  --joy-peach-soft:   #FFE9D9;
  --joy-rose:         #F8BDC3;
  --joy-rose-soft:    #FBDDDF;
  --joy-sky:          #BDD9F2;
  --joy-sky-soft:     #DEEAF6;
  --joy-sage:         #C8DCB0;
  --joy-sage-soft:    #E0EBD4;
  --joy-gold:         #D4A843;
  --joy-gold-light:   #F4D77A;
  --joy-gold-warm:    #E8C067;
  --joy-coral:        #F4A78B;
  --joy-lavender:     #D4C9E8;

  /* Soften the dark vars so deep navy is rarely visible */
  --navy:        #2A3344;   /* was #0D1117 — much lighter */
  --navy-soft:   #3D4759;
  --navy-grad-1: #FBF6E9;   /* gradients now bright cream */
  --navy-grad-2: #FFD4B8;   /* warm peach */
  --ink:         #2A2D38;   /* slightly softer text */
  --ink-soft:    #5A6173;
}

/* ─── Body background — warm dawn cream ─── */
body {
  background: linear-gradient(180deg, var(--joy-cream) 0%, var(--joy-cream-warm) 100%);
  background-attachment: fixed;
}

/* ─── Cinematic hero — JOY bright cinematic instead of dark ─── */
.cinematic-hero {
  background: linear-gradient(
    135deg,
    var(--joy-sky-soft) 0%,
    var(--joy-peach-soft) 35%,
    var(--joy-rose-soft) 70%,
    var(--joy-cream-warm) 100%
  );
  position: relative;
  overflow: hidden;
}

/* Hero veil — light golden veil instead of dark */
.cinematic-hero__veil {
  background: linear-gradient(
    180deg,
    rgba(253, 251, 245, 0.15) 0%,
    rgba(244, 215, 122, 0.10) 50%,
    rgba(248, 189, 195, 0.20) 100%
  );
}

/* Hero text — readable on bright bg */
.cinematic-hero__h1 {
  /* Override aurora gradient with joy gradient */
  background: linear-gradient(
    100deg,
    var(--joy-gold) 0%,
    var(--joy-coral) 30%,
    var(--joy-rose) 55%,
    var(--joy-gold-light) 80%,
    var(--joy-gold) 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 2px 16px rgba(212, 168, 67, 0.15);
}

.cinematic-hero__lede,
.cinematic-hero__kicker {
  color: var(--ink) !important;
}

.cinematic-hero__kicker {
  background: rgba(212, 168, 67, 0.16);
  padding: 0.35rem 0.9rem;
  border-radius: 1.5rem;
  display: inline-block;
}

/* ─── Sacred-tech layer — re-tinted for bright bg ─── */
.sacred-pillars {
  opacity: 0.40; /* less needed on bright */
  mix-blend-mode: multiply;
}
.sacred-pillars__beam {
  background: linear-gradient(
    to top,
    rgba(244, 167, 139, 0.55) 0%,
    rgba(212, 168, 67, 0.30) 40%,
    rgba(189, 217, 242, 0.20) 70%,
    rgba(244, 215, 122, 0.0) 100%
  );
}

.sacred-scanline::before {
  background: linear-gradient(
    180deg,
    rgba(212, 168, 67, 0) 0%,
    rgba(244, 167, 139, 0.20) 50%,
    rgba(212, 168, 67, 0) 100%
  );
}

.sacred-verse-rain {
  opacity: 0.12;
  mix-blend-mode: multiply;
}

.cinematic-hero::after {
  /* CRT scan-lines softer on bright bg */
  background: repeating-linear-gradient(
    0deg,
    rgba(212, 168, 67, 0.03) 0px,
    rgba(212, 168, 67, 0.03) 1px,
    transparent 1px,
    transparent 4px
  );
  opacity: 0.40;
  mix-blend-mode: multiply;
}

/* ─── Verse band — bright with sunset accents ─── */
.verse-band {
  background: linear-gradient(
    90deg,
    var(--joy-cream-warm) 0%,
    var(--joy-peach-soft) 50%,
    var(--joy-cream-warm) 100%
  );
  color: var(--ink);
  padding: var(--s-7) var(--s-5);
  border-top: 1px solid rgba(212, 168, 67, 0.25);
  border-bottom: 1px solid rgba(212, 168, 67, 0.25);
}

.verse-band__line { color: var(--ink); }
.verse-band__ref { color: var(--joy-gold); }

/* ─── Foundations grid — bright cards ─── */
.foundations {
  background: linear-gradient(180deg, var(--joy-cream) 0%, var(--joy-peach-soft) 100%);
  padding: var(--s-8) var(--s-5);
}
.foundations__h2 { color: var(--ink); }
.foundations__kicker { color: var(--joy-gold); background: rgba(212, 168, 67, 0.12); }
.foundations__lede { color: var(--ink-soft); }

.media-card {
  background: var(--joy-cream);
  border: 1px solid rgba(212, 168, 67, 0.30);
  box-shadow: 0 2px 12px rgba(244, 167, 139, 0.18);
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.media-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(244, 167, 139, 0.30);
}

/* ─── Tech-character section — bright ─── */
.tech-character {
  background: linear-gradient(135deg, var(--joy-cream-warm) 0%, var(--joy-sky-soft) 50%, var(--joy-rose-soft) 100%);
  color: var(--ink);
}
.tech-character__h2 { color: var(--ink); }
.tech-character__copy { color: var(--ink-soft); }

/* ─── Section dividers — colorful ─── */
.section-divider::after {
  background: linear-gradient(
    90deg,
    rgba(244, 167, 139, 0) 0%,
    rgba(244, 167, 139, 0.5) 25%,
    rgba(212, 168, 67, 0.7) 50%,
    rgba(189, 217, 242, 0.5) 75%,
    rgba(189, 217, 242, 0) 100%
  );
}

/* ─── Buttons — joyful glow ─── */
.btn--gold {
  background: linear-gradient(135deg, var(--joy-gold) 0%, var(--joy-coral) 100%);
  color: var(--ink);
  border-color: var(--joy-gold);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(244, 167, 139, 0.25);
}
.btn--gold:hover {
  background: linear-gradient(135deg, var(--joy-coral) 0%, var(--joy-gold) 100%);
  box-shadow: 0 0 32px rgba(244, 167, 139, 0.55),
              0 4px 16px rgba(212, 168, 67, 0.45);
  transform: translateY(-2px);
}

.btn--ghost {
  background: rgba(253, 251, 245, 0.7);
  border-color: var(--joy-gold);
  color: var(--ink);
  backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  background: var(--joy-gold);
  color: var(--ink);
  border-color: var(--joy-gold);
}

/* ─── Site header (top nav) — bright with hint of joy ─── */
.site-header {
  background: rgba(253, 251, 245, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(212, 168, 67, 0.22);
}

.site-mark__name { color: var(--ink); }
.site-mark__name .ai {
  background: linear-gradient(90deg, var(--joy-coral), var(--joy-gold));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 700;
}

.site-nav__list a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  transition: color 200ms ease, background 200ms ease;
  padding: 0.4rem 0.7rem;
  border-radius: 1rem;
}
.site-nav__list a:hover {
  color: var(--ink);
  background: rgba(244, 167, 139, 0.18);
}
.site-nav__list a[aria-current="page"] {
  background: rgba(212, 168, 67, 0.22);
  color: var(--ink);
}

/* ─── Site footer — bright still ─── */
.site-footer {
  background: linear-gradient(180deg, var(--joy-peach-soft) 0%, var(--joy-rose-soft) 100%);
  color: var(--ink);
}
.site-footer a { color: var(--ink); }
.site-footer h4 { color: var(--joy-gold); }
.signoff, .footer-bless, .footer-signature, .footer-meta { color: var(--ink-soft); }

/* ─── Sections — bright instead of navy ─── */
.section--navy,
.section--dark {
  background: linear-gradient(135deg, var(--joy-cream-warm) 0%, var(--joy-peach-soft) 100%);
  color: var(--ink);
}

/* ─── Disclaimer strip — soft warm ─── */
.disclaimer-strip {
  background: var(--joy-cream-warm);
  color: var(--ink-soft);
  border-top: 1px solid rgba(212, 168, 67, 0.20);
}

/* ─── Animations: gentle joy wave at top ─── */
@keyframes joy-wave-flow {
  0% { transform: translateX(0); opacity: 0.5; }
  50% { transform: translateX(20px); opacity: 0.8; }
  100% { transform: translateX(0); opacity: 0.5; }
}

.cinematic-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(244, 167, 139, 0.35) 0%, transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(189, 217, 242, 0.40) 0%, transparent 35%),
    radial-gradient(circle at 50% 50%, rgba(244, 215, 122, 0.20) 0%, transparent 50%);
  animation: joy-wave-flow 18s ease-in-out infinite;
  z-index: 0;
}

/* ─── Honor reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  .cinematic-hero::before { animation: none !important; }
}

/* ─── Mobile tuning ─── */
@media (max-width: 640px) {
  .site-nav__list a { padding: 0.35rem 0.5rem; }
}