/* ============================================================
   Ordinary Water — custom styles
   Design language: "Sacred Modernism" (from the Stitch DESIGN.md)
   Depth via tonal layers, ambient blurs and glows — not shadows.
   ============================================================ */

:root {
  --background: #111415;
  --deep-water: #101828;   /* primary-container — midnight blue */
  --spirit: #7c3aed;       /* royal purple accent */
  --spirit-soft: #d2bbff;  /* secondary */
  --light: #e2c62d;        /* tertiary — divine gold */
  --light-bright: #ffe24c;
  --on-surface: #e1e3e4;
  --on-surface-variant: #c6c6cd;
}

html { scroll-behavior: smooth; }

body {
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Anchored sections clear the fixed nav */
[id] { scroll-margin-top: 96px; }

/* ---- Material Symbols ---- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  display: inline-block;
  line-height: 1;
  user-select: none;
}
.material-symbols-outlined.fill {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---- Surfaces: glass / tonal layers ---- */
.glass-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.glass-panel {
  background: rgba(25, 28, 29, 0.70);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.10);
}

/* ---- Glows: spiritual radiance, not physical shadow ---- */
.glow-purple-sm { box-shadow: 0 0 24px rgba(124, 58, 237, 0.30); }
.glow-gold-sm   { box-shadow: 0 0 28px rgba(226, 198, 45, 0.18); }
.text-glow-gold { text-shadow: 0 0 28px rgba(226, 198, 45, 0.35); }

/* ---- Designed backgrounds (no external images) ---- */
/* Deep-water field with ambient light shafts */
.water-field {
  position: relative;
  background:
    radial-gradient(60% 50% at 18% 8%, rgba(124, 58, 237, 0.16), transparent 70%),
    radial-gradient(55% 45% at 88% 14%, rgba(226, 198, 45, 0.10), transparent 70%),
    radial-gradient(80% 70% at 50% 110%, rgba(16, 24, 40, 0.95), transparent 75%),
    linear-gradient(180deg, #0c0f10 0%, #111415 45%, #0c0f10 100%);
}
/* Hero — more dramatic, cinematic depth */
.hero-field {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 22% 0%, rgba(124, 58, 237, 0.28), transparent 72%),
    radial-gradient(60% 50% at 85% 6%, rgba(226, 198, 45, 0.14), transparent 70%),
    radial-gradient(90% 80% at 50% 120%, rgba(16, 24, 40, 1), transparent 70%),
    linear-gradient(180deg, #0b1220 0%, #111415 55%, #0c0f10 100%);
}
/* Soft caustic light rings, layered behind hero content */
.hero-field::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 120%;
  background:
    radial-gradient(closest-side, rgba(191, 198, 220, 0.10), transparent),
    radial-gradient(closest-side, rgba(124, 58, 237, 0.10), transparent);
  background-position: 20% 10%, 80% 30%;
  background-size: 45% 60%, 50% 55%;
  background-repeat: no-repeat;
  filter: blur(8px);
  pointer-events: none;
}
/* Grain — keeps gradients from banding, adds "weight" */
.grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
}

/* Ambient blur orbs you can drop into any section */
.orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(120px);
  pointer-events: none;
  z-index: 0;
}
.orb-purple { background: rgba(124, 58, 237, 0.18); }
.orb-gold   { background: rgba(226, 198, 45, 0.10); }

/* A "window" tile filled with designed water, used where Stitch used photos */
.water-tile {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 30% 10%, rgba(124, 58, 237, 0.35), transparent 60%),
    radial-gradient(120% 90% at 80% 90%, rgba(226, 198, 45, 0.22), transparent 60%),
    linear-gradient(160deg, #101828 0%, #1d2021 60%, #0c0f10 100%);
}
.water-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 50% 50%, transparent 0 6%, rgba(255,255,255,0.05) 6% 7%, transparent 7%),
    radial-gradient(circle at 50% 50%, transparent 0 14%, rgba(255,255,255,0.045) 14% 15%, transparent 15%),
    radial-gradient(circle at 50% 50%, transparent 0 24%, rgba(255,255,255,0.04) 24% 25%, transparent 25%),
    radial-gradient(circle at 50% 50%, transparent 0 36%, rgba(255,255,255,0.03) 36% 37%, transparent 37%);
  background-position: 50% 38%;
  background-repeat: no-repeat;
}

/* ---- Wave divider ---- */
.wave-divider { display: block; width: 100%; height: auto; }

/* ---- Inputs ---- */
.glow-input {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--outline, #45474c);
  border-radius: 0;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.glow-input:focus {
  outline: none;
  border-bottom-color: #7c3aed;
  box-shadow: 0 6px 14px -8px rgba(124, 58, 237, 0.5);
}
.glow-input::placeholder { color: rgba(198, 198, 205, 0.45); }

/* ---- Emoji-gospel accordion ---- */
.gospel-step { transition: border-color .4s ease, background-color .4s ease; }
.gospel-step.open { border-color: rgba(226, 198, 45, 0.45); }
.gospel-body {
  max-height: 0;
  overflow: hidden;
  /* fluid, water-like easing */
  transition: max-height .6s cubic-bezier(.22,.61,.36,1), opacity .45s ease, margin .45s ease;
  opacity: 0;
  margin-top: 0;
}
.gospel-step.open .gospel-body {
  max-height: 1600px;
  opacity: 1;
  margin-top: 24px;
}
.gospel-step .chevron { transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.gospel-step.open .chevron { transform: rotate(180deg); }
.gospel-emoji { transition: transform .45s cubic-bezier(.22,.61,.36,1), filter .45s ease; }
.gospel-step.open .gospel-emoji {
  transform: scale(1.06);
  filter: drop-shadow(0 0 18px rgba(226, 198, 45, 0.45));
}

/* ---- Ask Faith Q&A ---- */
.faith-q {
  transition: background-color .25s ease, border-color .25s ease, transform .15s ease;
}
.faith-q:hover { border-color: rgba(226, 198, 45, 0.4); background: rgba(255,255,255,0.03); }
.faith-q.active {
  border-color: rgba(226, 198, 45, 0.55);
  background: rgba(226, 198, 45, 0.06);
}
.faith-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .55s cubic-bezier(.22,.61,.36,1), opacity .4s ease, margin .4s ease, padding .4s ease;
}
.faith-answer.open {
  max-height: 1200px;
  opacity: 1;
}
.faith-answer blockquote {
  border-left: 2px solid rgba(226, 198, 45, 0.4);
  padding-left: 16px;
  font-style: italic;
  color: var(--on-surface);
}

/* ---- Reveal on scroll ---- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* ---- Mobile menu ---- */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.22,.61,.36,1);
}
.mobile-menu.open { max-height: 340px; }

/* ---- Misc ---- */
.gentle-bounce { animation: gentleBounce 2.4s ease-in-out infinite; }
@keyframes gentleBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}
a, button { -webkit-tap-highlight-color: transparent; }

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .gentle-bounce { animation: none; }
  .gospel-body, .faith-answer, .gospel-step .chevron, .gospel-emoji, .mobile-menu {
    transition: none;
  }
}