/* =====================================================================
   ALIVE DAY FOUNDATION  |  Masterpiece visual layer  (ADDITIVE)
   Loads AFTER styles.css. Overrides visuals only — touches no markup,
   copy, schema, or SEO/AIO. Front page = cinematic photography; whole
   site = bold, dramatic, filmic finish.   Crafted by ThatDeveloperGuy.com
   ===================================================================== */

:root {
  --m-ink-0: #070d1a;                 /* near-black navy */
  --m-shadow: 0 30px 80px rgba(7,13,26,.45);
}

/* ---------- filmic grain over everything (subtle, non-interactive) ---------- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 9998; pointer-events: none;
  opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- header: dark, premium glass ---------- */
.site-header {
  background: rgba(8,15,28,.74); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(200,162,74,.20);
  transition: background .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.m-scrolled { background: rgba(8,15,28,.95); box-shadow: 0 14px 40px rgba(0,0,0,.42); }
.brand .brand-name { color: #fff; }
.brand .brand-sub { color: var(--gold-300); }
.nav-links a { color: rgba(244,238,225,.86); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--gold-300); background: rgba(200,162,74,.12); }
.nav-toggle span { background: #fff; }
@media (max-width: 940px) {
  .nav-links { background: rgba(8,15,28,.98); border-bottom-color: rgba(200,162,74,.2); }
  .nav-links a { color: rgba(244,238,225,.9); border-bottom-color: rgba(255,255,255,.08); }
}

/* ---------- bolder, more cinematic type ---------- */
.section-head.center h2 {
  font-family: var(--cond); text-transform: uppercase; font-weight: 700;
  font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: .005em; line-height: 1.02;
}
.section-head.center h2::after {
  content: ""; display: block; width: 64px; height: 3px; margin: 1.05rem auto 0;
  background: linear-gradient(90deg, var(--gold), var(--red)); border-radius: 2px;
}

/* ---------- buttons: bolder ---------- */
.btn { font-size: 1.02rem; padding: 0.95rem 1.9rem; letter-spacing: .08em; }
.btn-gold { box-shadow: 0 14px 36px rgba(200,162,74,.42); }
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 20px 52px rgba(200,162,74,.55); }
.btn-ghost-light { border-color: rgba(244,238,225,.7); backdrop-filter: blur(4px); }

/* =====================================================================
   FRONT PAGE  (body.m-home, added by masterpiece.js when a .hero exists)
   ===================================================================== */

/* ---------- HERO: full-bleed cinematic photograph ---------- */
.m-home .hero {
  min-height: calc(100vh - 74px); display: flex; align-items: center;
  background: var(--m-ink-0);
}
.m-home .hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("/images/m-hero.jpg") center 28% / cover no-repeat;
  transform: scale(1.06); transform-origin: center;
  animation: m-kenburns 32s ease-in-out infinite alternate;
}
.m-home .hero::after {
  content: ""; position: absolute; inset: 0; bottom: 0; height: auto; z-index: -1; clip-path: none;
  background:
    linear-gradient(180deg, rgba(7,13,26,.42) 0%, rgba(7,13,26,.22) 32%, rgba(7,13,26,.93) 100%),
    linear-gradient(90deg, rgba(7,13,26,.88) 0%, rgba(7,13,26,.32) 56%, rgba(7,13,26,.08) 100%),
    radial-gradient(130% 95% at 80% 12%, rgba(200,162,74,.20), transparent 56%);
}
@keyframes m-kenburns { from { transform: scale(1.04) translateY(0); } to { transform: scale(1.14) translateY(-2%); } }

.m-home .hero-inner { max-width: 920px; padding-block: clamp(3rem, 9vw, 7rem); }
.m-home .hero h1 {
  font-family: var(--cond); text-transform: uppercase; font-weight: 700;
  font-size: clamp(2.9rem, 8.5vw, 6.4rem); line-height: .94; letter-spacing: -.01em;
  color: #fff; text-shadow: 0 4px 44px rgba(0,0,0,.55);
}
.m-home .hero h1 .script-accent {
  text-transform: none; color: var(--gold-300); display: inline-block;
  text-shadow: 0 2px 26px rgba(200,162,74,.45);
}
.m-home .hero .lede {
  font-size: clamp(1.12rem, 1.9vw, 1.4rem); color: rgba(244,238,225,.92);
  max-width: 62ch; text-shadow: 0 1px 18px rgba(0,0,0,.45);
}
.m-home .hero .eyebrow { color: var(--gold-300); }
.m-home .flag-strip { box-shadow: 0 0 24px rgba(0,0,0,.45); }

/* animated scroll cue */
.m-home .hero-inner { position: relative; }
.m-home .hero-inner::after {
  content: ""; position: absolute; left: 2px; bottom: -2.4rem;
  width: 22px; height: 34px; border: 2px solid rgba(244,238,225,.5); border-radius: 12px;
}
.m-home .hero-inner::before {
  content: ""; position: absolute; left: 11px; bottom: -1.6rem; width: 2px; height: 7px;
  background: var(--gold-300); border-radius: 2px; animation: m-scroll 1.8s ease-in-out infinite;
}
@keyframes m-scroll { 0%,100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(8px); opacity: .25; } }

/* ---------- photographic, parallaxed stat band ---------- */
.m-home .section.bg-navy { position: relative; isolation: isolate; overflow: hidden; background: var(--m-ink-0); }
.m-home .section.bg-navy::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(7,13,26,.84), rgba(7,13,26,.93)),
    url("/images/m-sunset.jpg") center / cover no-repeat fixed;
}
.m-home .stat .num {
  font-family: var(--cond); font-weight: 700; font-size: clamp(2.6rem, 6vw, 4rem);
  text-shadow: 0 2px 30px rgba(0,0,0,.5);
}

/* ---------- emotional, photographic closing CTA ---------- */
.m-home .cta-band { position: relative; isolation: isolate; overflow: hidden; background: var(--m-ink-0); }
.m-home .cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(7,13,26,.92) 0%, rgba(7,13,26,.58) 58%, rgba(7,13,26,.32) 100%),
    url("/images/m-family.jpg") center 28% / cover no-repeat fixed;
}
@media (max-width: 860px) {
  .m-home .section.bg-navy::before,
  .m-home .cta-band::before { background-attachment: scroll; }
}

/* ---------- sitewide depth on light surfaces ---------- */
.bg-navy { background: var(--navy-900); }
.bg-cream2 { background: linear-gradient(180deg, var(--cream), var(--cream-200)); }
.card { border-radius: 16px; box-shadow: 0 14px 40px rgba(12,27,51,.10); }
.card:hover { box-shadow: var(--m-shadow); transform: translateY(-6px); }
.pillar .ring { box-shadow: 0 0 0 6px rgba(200,162,74,.08), 0 12px 30px rgba(12,27,51,.12); }
.answer-capsule { box-shadow: var(--m-shadow); }
.quote p { font-size: clamp(1.4rem, 2.8vw, 2rem); }