@import url('/script/theme.css');
/* Revival of the Heart – Theme: purple & orange, mobile-first */
/* Theme: change --primary-* and --accent-* to rebrand */
:root {
  --primary-hue: 270;
  --primary-sat: 47%;
  --primary-light-deep: 26%;
  --primary-light-darker: 18%;
  --purple-deep: hsl(var(--primary-hue), var(--primary-sat), var(--primary-light-deep));
  --purple-darker: hsl(var(--primary-hue), var(--primary-sat), var(--primary-light-darker));
  --white: #f5f0f8;
  --off-white: #e8e0f0;
  --header-height: max(9vh, 72px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow: hidden;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  background: var(--purple-darker);
  color: var(--white);
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Sections use the document’s native scrolling surface. */
.scroll-container { height: auto; overflow: visible; }

.section {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 1.5rem 2rem;
  position: relative;
  background: var(--purple-darker);
}

.section-inner {
  max-width: 42rem;
  width: 100%;
  text-align: center;
}

/* Prayer section: layered bg */
.section-prayer {
  overflow: hidden;
  justify-content: flex-start;
  padding-top: 10vh;
}

.section-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

.section-bg--base {
  z-index: 0;
  background-color: var(--purple-darker);
  background-image: none;
}

.section-bg--particles {
  z-index: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
}

/* Fireflies: spawn at bottom of section, float up with drift, fade near top */
.fireflies {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  container-type: inline-size;
}

/* Duplicate fireflies in front of hands (above .section-bg--prayer) */
.fireflies-wrap--front {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  z-index: 3;
  pointer-events: none;
}

.particle {
  --hue: calc(var(--accent-hue) + var(--hue-offset, 0));
  --sat: var(--sat, 74%);
  --particle-color: hsl(var(--hue), var(--sat), 58%);
  --glow-scale: 1;
  position: absolute;
  bottom: 0;
  left: var(--left, 50%);
  /* Narrow: 0.3%–0.9%; desktop overrides in media query to 0.05%–0.3%. --size-n = same scale unitless for glow (box-shadow needs length, not %) */
  --size: calc(0.3% + 0.6% * var(--size-raw, 0.5));
  --size-n: calc(0.3 + 0.6 * var(--size-raw, 0.5));
  width: var(--size);
  height: auto;
  aspect-ratio: 1;
  margin-left: calc(var(--size) / -2);
  border-radius: 50%;
  animation: float-up var(--anim-duration, 16s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform, opacity;
  opacity: 0;
  mix-blend-mode: plus-lighter;
}

.particle::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #fff;
  /* Glow = 1.5× particle size (--size-n) in both blur and spread, same on narrow and desktop */
  box-shadow:
    0 0 calc(1.5 * var(--size-n) * var(--glow-scale) * 1cqw) calc(1.5 * var(--size-n) * 0.4 * var(--glow-scale) * 1cqw) var(--particle-color),
    0 0 calc(1.5 * var(--size-n) * 2 * var(--glow-scale) * 1cqw) calc(1.5 * var(--size-n) * 0.8 * var(--glow-scale) * 1cqw) hsl(var(--hue), var(--sat), 45%);
  pointer-events: none;
  mix-blend-mode: plus-lighter;
}

/* Single keyframe driven by per-particle CSS variables (path, duration, opacity) */
@keyframes float-up {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: var(--o-in, 0.85); }
  20%  { transform: translate(var(--x1, 0px), -24vh); opacity: var(--o1, 0.35); }
  35%  { opacity: 1; }
  40%  { transform: translate(var(--x2, 0px), -48vh); opacity: var(--o2, 0.3); }
  55%  { opacity: var(--o-mid, 0.9); }
  60%  { transform: translate(var(--x3, 0px), -72vh); opacity: var(--o3, 0.45); }
  70%  { opacity: 1; }
  80%  { transform: translate(var(--x4, 0px), -96vh); opacity: var(--o4, 0.35); }
  100% { transform: translate(var(--x5, 0px), -120vh); opacity: 0; }
}

/* Pause particles when prayer section is out of view (saves battery on mobile) */
.section-prayer.particles-paused .particle,
body.tab-hidden .particle {
  animation-play-state: paused;
}

.section-bg--prayer {
  z-index: 2;
  background-image:
    url("assets/prayer-hands.webp"),
    radial-gradient(
      ellipse 55% 95% at 50% 70%,
      hsla(calc(var(--accent-hue) + 21), 55%, 70%, 0.55) 0%,
      hsla(calc(var(--accent-hue) + 14), 70%, 60%, 0.35) 35%,
      hsla(calc(var(--accent-hue) + 6), 75%, 55%, 0.14) 60%,
      transparent 75%
    );
  /* Narrow: hands height 50vh */
  background-size: auto 50vh, 100% 100%;
  background-position: center bottom, center 70%;
  background-repeat: no-repeat;
}

.section-bg--prayer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: hsla(var(--primary-hue), var(--primary-sat), var(--primary-light-darker), 0.25);
  pointer-events: none;
}

.section-bg--prayer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    hsla(var(--primary-hue), var(--primary-sat), var(--primary-light-deep), 0) 0%,
    transparent 0%,
    var(--purple-darker) 100%
  );
  pointer-events: none;
}

.section-prayer .section-inner {
  position: relative;
  z-index: 3;
}

.section-inner h2 {
  font-family: Georgia, serif;
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--orange-accent);
  margin: 0 0 1rem;
}

.section-inner p {
  margin: 0 0 1rem;
  line-height: 1.6;
  color: var(--off-white);
}

#prayer-scripture {
  transition: opacity 2s ease;
}

#prayer-scripture.scripture-fade-out {
  opacity: 0;
}

.scripture-ref {
  display: block;
  text-align: right;
}

/* Hero */
.section-hero {
  justify-content: center;
  padding: 0;
  background: transparent;
}

.video-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('/assets/worship-background-16x9.png') center / cover no-repeat;
}

.video-tint {
  position: absolute;
  inset: 0;
  background: hsla(var(--primary-hue), var(--primary-sat), var(--primary-light-darker), 0.75);
  mix-blend-mode: color;
  pointer-events: none;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.hero-video.is-playing { opacity: 1; }

.video-fade {
  position: absolute;
  inset: 0;
  /* Bottom 25% hero fade using primary color */
  background: linear-gradient(
    to top,
    hsla(var(--primary-hue), var(--primary-sat), var(--primary-light-darker), 1) 0%,
    hsla(var(--primary-hue), var(--primary-sat), var(--primary-light-darker), 0) 25%,
    transparent 25%
  );
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem;
}

.hero-logo {
  display: block;
  margin: 0 auto 0.75rem;
  width: 216px; /* 3x larger than header logo */
  height: auto; /* preserve aspect ratio, no stretching */
}

.church-name {
  font-family: Georgia, serif;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  color: var(--white);
  margin: 0 0 0.25rem;
}

.church-tagline {
  font-size: clamp(0.95rem, 2.5vw, 1.1rem);
  color: var(--orange-light);
  margin: 0 0 0.5rem;
}

.church-short {
  font-size: 1rem;
  color: var(--off-white);
  opacity: 0.9;
  margin: 0;
}

/* Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, transform 0.1s;
  cursor: pointer;
  border: none;
  font-size: 1rem;
}

.btn-primary {
  position: relative;
  overflow: visible;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.8);
  outline: 1px solid rgba(255, 255, 255, 0.2);
  transition: color 1s, outline 1s, background 1s;
}

.btn-primary::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: hsla(var(--accent-hue), var(--accent-sat), var(--accent-light), 0.5);
  box-shadow: 0 0 24px 12px hsla(var(--accent-hue), var(--accent-sat), var(--accent-light), 0.5);
  opacity: 0.5;
  transform: scale(1);
  z-index: -1;
  pointer-events: none;
  animation: btn-pulse-glow 10s ease-out infinite;
}

/* Pulse runs 1s, then 9s rest (10s total) */
@keyframes btn-pulse-glow {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  10% {
    transform: scale(2.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.btn-primary:hover {
  background: hsla(var(--accent-hue), var(--accent-sat), var(--accent-light), 0.12);
  color: var(--orange-accent);
  outline: 1px solid hsla(var(--accent-hue), var(--accent-sat), var(--accent-light), 0.8);
}

/* Same look as .btn-primary but no pulse */
.btn-primary.btn--no-pulse::after {
  display: none;
}

/* Custom secondary: black bg 10% opacity, no pulse */
.btn-secondary {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(255, 255, 255, 0.8);
  outline: 1px solid rgba(255, 255, 255, 0.2);
  transition: color 0.2s, outline 0.2s, background 0.2s;
}

.btn-secondary:hover {
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 1);
  outline: 1px solid rgba(255, 255, 255, 0.75);
}

/* Profile onboarding: Pulse-only helper for "Profile ID" on logout screen.
   Scoped via a custom class so other buttons aren't affected. */
.btn--profile-id-pulse-2s {
  position: relative;
  overflow: visible;
}

.btn--profile-id-pulse-2s::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: hsla(var(--accent-hue), var(--accent-sat), var(--accent-light), 0.75);
  box-shadow: 0 0 24px 12px
    hsla(var(--accent-hue), var(--accent-sat), var(--accent-light), 0.75);
  opacity: 0.75;
  transform: scale(1);
  z-index: -1;
  pointer-events: none;
  animation: btn-pulse-glow 2s ease-out infinite;
}

/* Profile onboarding: pulse-only helper for the empty-state "L" button */
.btn--pulse-l-10s {
  position: relative;
  overflow: visible;
}

.btn--pulse-l-10s::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: hsla(var(--accent-hue), var(--accent-sat), var(--accent-light), 0.75);
  box-shadow: 0 0 24px 12px hsla(var(--accent-hue), var(--accent-sat), var(--accent-light), 0.75);
  opacity: 0.75;
  transform: scale(1);
  z-index: 0;
  pointer-events: none;
  animation: btn-pulse-glow 10s ease-out infinite;
}

/* Custom continue button (same as primary + pulse) */
.btn-continue {
  position: relative;
  overflow: visible;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  color: rgba(255, 255, 255, 0.8);
  outline: 1px solid rgba(255, 255, 255, 0.2);
  transition: color 1s, outline 1s, background 1s;
}

.btn-continue::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: hsla(var(--accent-hue), var(--accent-sat), var(--accent-light), 0.5);
  box-shadow: 0 0 24px 12px hsla(var(--accent-hue), var(--accent-sat), var(--accent-light), 0.5);
  opacity: 0.5;
  transform: scale(1);
  z-index: -1;
  pointer-events: none;
  animation: btn-pulse-glow 10s ease-out infinite;
}

.btn-continue:hover {
  background: hsla(var(--accent-hue), var(--accent-sat), var(--accent-light), 0.12);
  color: var(--orange-accent);
  outline: 1px solid hsla(var(--accent-hue), var(--accent-sat), var(--accent-light), 0.8);
}

/* Profile onboarding Done: accent fill at 50% opacity */
.btn-done {
  background: hsla(var(--accent-hue), var(--accent-sat), var(--accent-light), 0.5);
  color: rgba(255, 255, 255, 0.95);
  outline: 1px solid hsla(var(--accent-hue), var(--accent-sat), var(--accent-light), 0.85);
  transition: background 0.2s, color 0.2s, outline 0.2s;
}

.btn-done:hover {
  background: hsla(var(--accent-hue), var(--accent-sat), var(--accent-light), 0.65);
  color: #fff;
  outline: 1px solid hsla(var(--accent-hue), var(--accent-sat), var(--accent-light), 1);
}

/* Location */
.address {
  font-style: normal;
  margin-bottom: 1rem;
}

.map-wrap {
  border-radius: 0.5rem;
  overflow: hidden;
  margin: 0 0 1rem;
  max-width: 100%;
}

.map-wrap iframe {
  display: block;
}

.section-inner a {
  color: var(--orange-accent);
}

.section-inner a:hover {
  color: var(--orange-light);
}

.section-inner .btn-primary {
  color: rgba(255, 255, 255, 0.8);
}

.section-inner .btn-primary:hover {
  color: var(--orange-accent);
}

/* Header & nav – mobile-first */
.header-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--header-height) + 36px);
  background: linear-gradient(to bottom, hsla(var(--primary-hue), var(--primary-sat), var(--primary-light-darker), .78) 0%, hsla(var(--primary-hue), var(--primary-sat), var(--primary-light-darker), .78) calc(100% - 52px), hsla(var(--primary-hue), var(--primary-sat), var(--primary-light-darker), 0) 100%);
  pointer-events: none;
  z-index: 10;
}

@supports ((mask-image: linear-gradient(black, transparent)) or (-webkit-mask-image: linear-gradient(black, transparent))) {
  .header-bg {
    background: hsla(var(--primary-hue), var(--primary-sat), var(--primary-light-darker), .78);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    mask-image: linear-gradient(to bottom, black calc(100% - 52px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 52px), transparent 100%);
  }
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1vmin 1vmin;
  height: var(--header-height);
}

.header-left {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 100;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  z-index: 100;
}

.header-section-nav { display: none; opacity: 1; visibility: visible; transition: opacity 1s ease, visibility 0s; }
body.menu-open .header-section-nav { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 1s ease, visibility 0s 1s; }
@media (prefers-reduced-motion: reduce) {
  .header-section-nav, body.menu-open .header-section-nav { transition: none; }
}
@media (min-width: 768px) {
  .header { gap: 1.25rem; }
  .header-section-nav { display: flex; align-items: center; justify-content: center; gap: clamp(.75rem,1.2vw,2rem); margin-left: auto; position: relative; z-index: 100; }
  .header-section-nav a { position: relative; padding: 1.2rem 0; color: var(--white); text-decoration: none; white-space: nowrap; font: 400 1.275rem/1.2 system-ui,sans-serif; transition: color .2s ease; }
  .header-section-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: .2rem; height: 2px; background: var(--orange-light); transform: scaleX(0); transition: transform .2s ease; }
  .header-section-nav a:hover, .header-section-nav a[aria-current] { color: var(--orange-light); }
  .header-section-nav a[aria-current]::after { transform: scaleX(1); }
  .header-actions { border-left: 1px solid rgba(255,255,255,.25); padding-left: .75rem; }
}

.logo-link {
  display: flex;
  align-items: center;
}

.logo {
  height: 6vh;
  width: auto;
  display: block;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 1s ease, transform 1s ease;
}

body.show-logo-text .logo {
  opacity: 1;
  transform: translateX(0);
}

.logo-text {
  margin-left: 1vmin;
  display: flex;
  flex-direction: column;
  gap: .12em;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 4.875vmin;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 1s ease, transform 1s ease;
}
.logo-name { font-weight: 400; line-height: 1.1; letter-spacing: -.035em; }
.logo-subtitle { width: 0; min-width: calc(100% + .3em); padding-left: .2em; font-size: .36em; font-weight: 400; line-height: 1.4; letter-spacing: .3em; text-transform: uppercase; white-space: nowrap; text-align: justify; text-align-last: justify; }

body.show-logo-text .logo-text {
  opacity: 1;
  transform: translateX(0);
}

.menu-toggle:focus-visible {
  outline: 2px solid var(--orange-accent);
  outline-offset: 2px;
}

.menu-toggle {
  background: none;
  border: none;
  padding: 1vmin;
  cursor: pointer;
  color: var(--white);
  font-size: 1rem;
  line-height: 1;
  min-width: 10vmin;
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 100;
  overflow: visible;
}

.menu-toggle::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 20px 10px rgba(255, 255, 255, 0.8);
  opacity: 0.8;
  transform: scale(1);
  z-index: -1;
  pointer-events: none;
  animation: btn-pulse-glow 10s ease-out infinite;
}

body.on-hero .menu-toggle::after {
  background: hsla(var(--accent-hue), var(--accent-sat), var(--accent-light), 0.8);
  box-shadow: 0 0 20px 10px hsla(var(--accent-hue), var(--accent-sat), var(--accent-light), 0.8);
}

.menu-toggle--nav { display: grid; grid-template-columns: 60px 6rem; gap: 1.125rem; padding-inline: 1.5rem; font-family: system-ui, sans-serif; }
.profile-menu-icon, .profile-menu-close-icon { grid-column: 1; grid-row: 1; }
.profile-menu-label, .profile-menu-close-label { grid-column: 2; grid-row: 1; text-align: left; }
.profile-menu-icon { display: block; width: 45px; height: 45px; flex: 0 0 45px; justify-self: center; }
.profile-menu-label { font-size: 1.275rem; }
.profile-menu-close-icon { width: 60px; height: 60px; flex: 0 0 60px; }
.profile-menu-close-label { font-size: 1.275rem; }
.profile-menu-icon, .profile-menu-close-icon { transform-origin: center; transition: opacity .3s ease, transform .4s ease; pointer-events: none; }
.profile-menu-label, .profile-menu-close-label { transition: opacity .25s ease; pointer-events: none; }
.profile-menu-close-icon, .profile-menu-close-label { opacity: 0; }
.profile-menu-close-icon { transform: rotate(-90deg) scale(.6); }
.menu-toggle[data-active="true"] .profile-menu-icon,
.menu-toggle[data-active="true"] .profile-menu-label { opacity: 0; }
.menu-toggle[data-active="true"] .profile-menu-icon { transform: rotate(90deg) scale(.6); }
.menu-toggle[data-active="true"] .profile-menu-close-icon,
.menu-toggle[data-active="true"] .profile-menu-close-label { opacity: 1; }
.menu-toggle[data-active="true"] .profile-menu-close-icon { transform: rotate(0) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .profile-menu-icon, .profile-menu-close-icon, .profile-menu-label, .profile-menu-close-label { transition: none; }
}
@media (max-width: 767px) {
  .profile-menu-label, .profile-menu-close-label { display: none; }
  .menu-toggle[data-active="true"] .profile-menu-close-label { display: none; }
  .menu-toggle--nav { grid-template-columns: 60px; gap: 0; min-width: 72px; min-height: 72px; padding: .75rem; }
}

.menu-overlay {
  position: fixed;
  inset: 0;
  background: var(--purple-deep);
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease, background 1s ease;
}

.menu-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    /* Extra menu-colored glow (was .nav-overlay__gradient) */
    radial-gradient(
      ellipse 120% 100% at 0% 50%,
      hsla(calc(var(--primary-hue) - 36), var(--primary-sat), 27%, 0.5) 0%,
      hsla(calc(var(--primary-hue) - 36), var(--primary-sat), 27%, 0.2) 40%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 150% 130% at 100% 0%,
      hsla(calc(var(--primary-hue) + 30), var(--primary-sat), 26%, 0.78) 0%,
      hsla(calc(var(--primary-hue) + 30), var(--primary-sat), 26%, 0.4) 25%,
      transparent 72%
    );
  pointer-events: none;
  z-index: 0;
}

.menu-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    hsla(var(--primary-hue), var(--primary-sat), var(--primary-light-darker), 1) 0%,
    hsla(var(--primary-hue), var(--primary-sat), var(--primary-light-darker), 0) 50%
  );
  pointer-events: none;
  z-index: 0;
}

.menu-overlay__layout {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  z-index: 1;
}

.profile-panel {
  max-width: 28rem;
  width: 100%;
  min-width: 0;
  text-align: center;
  margin: 0 auto;
  container-type: inline-size;
}

/* Loaded panel only: tie initials to display name sizing */
[data-profile-state="loaded"] .profile-avatar__initials {
  font-size: 9vmin;
}

@media (min-width: 768px) {
  [data-profile-state="loaded"] .profile-avatar__initials {
    font-size: 7vmin;
  }
}

.profile-avatar {
  margin: 0 auto 0.75rem;
  border-radius: 999px;
  border: 5px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2) inset;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  /* fallback size (photo mode + before JS measures initials) */
  width: 32cqw;
  height: 32cqw;
}

.profile-avatar--has-image {
  width: 34cqw;
  height: 34cqw;
}

.profile-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  grid-row: 1;
  grid-column: 1;
}

.profile-avatar__initials {
  font-family: Georgia, serif;
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 400;
  color: var(--white);
  white-space: nowrap;
  user-select: none;
  grid-row: 1;
  grid-column: 1;
  z-index: 2;
}

.profile-avatar__blur-overlay {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  backdrop-filter: blur(var(--blur-px, 0px));
  -webkit-backdrop-filter: blur(var(--blur-px, 0px));
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  z-index: 1;
}

.profile-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.profile-btn {
  min-width: auto;
  width: auto;
  white-space: nowrap;
}

.profile-helper {
  margin: 0;
  line-height: 1.6;
  color: var(--off-white);
  font-size: 0.95rem;
}

.profile-title,
.profile-question,
.profile-helper {
  margin: 0 0 0.35rem;
  font-family: Georgia, serif;
  font-weight: 400;
  line-height: 1.2;
  color: var(--white);
}

.profile-title {
  font-size: 7.5vmin;
}

.profile-question,
.profile-helper {
  font-size: 3.75vmin;
  font-family: system-ui, -apple-system, sans-serif;
}

.profile-question {
  margin-top: 0.5rem;
}

.profile-helper {
  margin-top: 0.75rem;
}

@media (max-width: 480px) {
  .profile-btn {
    min-width: 0;
    padding-inline: 1.05rem;
  }
}

/* Narrow view: 50% nav (top), 50% profile (bottom) */
.menu-overlay__nav,
.menu-overlay__profile {
  position: relative;
  width: 100%;
  flex: 1 1 50%;
  min-height: 50%;
  z-index: 1;
}

.menu-overlay__nav {
  order: 1;
}

.menu-overlay__profile {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform 0.7s ease, opacity 0.5s ease;
  z-index: 2;
}

/* Panel animation states (narrow): nav/profile fade/slide */
.menu-overlay__nav {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  transform: translateX(-10%);
}

/* When overlay is open on narrow view, slide profile panel in from the right */
.menu-overlay[aria-hidden="false"] .menu-overlay__profile {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

.menu-overlay[data-panel="nav"] .menu-overlay__nav {
  opacity: 1;
  transform: translateX(0);
}

/* Nav panel only intercepts pointer events when overlay itself is open */
.menu-overlay[aria-hidden="false"][data-panel="nav"] .menu-overlay__nav {
  pointer-events: auto;
}
/* Extra gradient layer: menu color at -36° hue (narrow: center left; desktop: middle top) */
.menu-overlay[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 2vmin;
}

.menu-overlay .nav-list {
  position: absolute;
  top: var(--header-height);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.05vh;
  text-align: left;
  transform: translateX(-100%);
  transition: transform 0.7s ease;
  padding: 2vmin 0 0 2vmin;
}

.menu-overlay[aria-hidden="false"] .nav-list {
  transform: translateX(0);
}

.nav-list li {
  margin: 0;
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  margin: 0;
  color: var(--white);
  text-decoration: none;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 7.5vmin;
  line-height: 1.2;
  text-align: left;
  opacity: 0;
  transition: color 0.2s, opacity 0.5s ease, transform 0.2s ease;
  transform: scale(1);
}

.nav-link.nav-link--active {
  color: var(--white);
  font-style: italic;
  cursor: default;
  pointer-events: none;
}

.nav-fullscreen { border: 0; background: none; cursor: pointer; }
.nav-fullscreen:disabled { cursor: not-allowed; opacity: .5; }
#fullscreen-status { max-width: 28rem; font: 1rem/1.5 system-ui, sans-serif; }

.menu-overlay[aria-hidden="false"] .nav-link {
  opacity: 1;
}

.menu-overlay[aria-hidden="false"] .nav-list:has(.nav-link:hover) .nav-link {
  opacity: 0.5;
}

.menu-overlay[aria-hidden="false"] .nav-list:has(.nav-link:hover) .nav-link:hover {
  opacity: 1;
  color: var(--white);
}

.nav-link:hover {
  color: var(--white);
  transform: scale(1.05);
}

/* Footer */
.footer {
  background: var(--purple-darker);
  padding: 2rem 1.5rem;
  text-align: center;
}

.footer-connect {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 1rem;
}

.footer-connect a {
  color: var(--orange-accent);
  text-decoration: none;
}

.footer-connect a:hover {
  color: var(--orange-light);
}

.footer-legal {
  font-size: 0.875rem;
  color: var(--off-white);
  opacity: 0.9;
  margin: 0;
}

@media (min-width: 768px) {
  .logo-text {
    font-size: 2.4vmin;
  }

  /* Desktop: nav overlay uses two-column layout: profile (left) and nav (right) */
  .menu-overlay__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    padding: 0;
  }

  /* Desktop: slide profile panel in from the left (mirroring nav list on the right) */
  .profile-panel {
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 0.7s ease, opacity 0.5s ease;
  }

  .menu-overlay[aria-hidden="false"] .profile-panel {
    transform: translateX(0);
    opacity: 1;
  }

  /* Desktop: adjust blue glow to top-center while keeping other gradients */
  .menu-overlay::before {
    background:
      radial-gradient(
        ellipse 120% 100% at 50% 0%,
        hsla(calc(var(--primary-hue) - 36), var(--primary-sat), 27%, 0.5) 0%,
        hsla(calc(var(--primary-hue) - 36), var(--primary-sat), 27%, 0.2) 40%,
        transparent 70%
      ),
      radial-gradient(
        ellipse 150% 130% at 100% 0%,
        hsla(calc(var(--primary-hue) + 30), var(--primary-sat), 26%, 0.78) 0%,
        hsla(calc(var(--primary-hue) + 30), var(--primary-sat), 26%, 0.4) 25%,
        transparent 72%
      );
  }

  /* Desktop: reset profile/nav to participate in grid layout (profile left, nav right by DOM order) */
  .menu-overlay__nav,
  .menu-overlay__profile {
    flex: none;
    min-height: 0;
    order: 0;
  }

  .menu-overlay__profile {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    height: 100%;
    justify-content: center;
  }

  /* Desktop: nav/profile panels always visible, no fade/slide swap */
  .menu-overlay__nav,
  .menu-overlay__profile {
    opacity: 1;
    transform: none;
    /* Keep panels visually present, but don't block page interaction when overlay is closed */
    pointer-events: none;
  }

  /* Desktop: allow interaction only when overlay is open */
  .menu-overlay[aria-hidden="false"] .menu-overlay__nav,
  .menu-overlay[aria-hidden="false"] .menu-overlay__profile {
    pointer-events: auto;
  }

  .section-inner {
    padding: 2rem;
  }

  .section-prayer {
    padding-top: 5vh;
  }

  /* Desktop: hands height 70vh */
  .section-bg--prayer {
    background-size: auto 70vh, 100% 100%;
  }

  /* Desktop: right-aligned, slide in from right, vertically centered */
  .menu-overlay::before {
    background:
      /* Blue menu glow at top-center */
      radial-gradient(
        ellipse 75% 100% at 50% 0%,
        hsla(calc(var(--primary-hue) - 36), var(--primary-sat), 27%, 0.6) 0%,
        hsla(calc(var(--primary-hue) - 36), var(--primary-sat), 27%, 0.3) 40%,
        transparent 70%
      ),
      /* Existing right-hand glow */
      radial-gradient(
        ellipse 150% 130% at 100% 100%,
        hsla(calc(var(--primary-hue) + 30), var(--primary-sat), 26%, 0.78) 0%,
        hsla(calc(var(--primary-hue) + 30), var(--primary-sat), 26%, 0.4) 25%,
        transparent 72%
      );
  }

  .menu-overlay::after {
    background: linear-gradient(
      to right,
      hsla(var(--primary-hue), var(--primary-sat), var(--primary-light-darker), 1) 0%,
      hsla(var(--primary-hue), var(--primary-sat), var(--primary-light-darker), 0) 50%
    );
  }

  /* Desktop: center nav list vertically in its column */
  .menu-overlay__nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .menu-overlay .nav-list {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    justify-content: center;
    align-items: flex-end;
    text-align: right;
    gap: 1vh;
    transform: translateX(100%);
    padding: 2vmin;
  }

  .menu-overlay[aria-hidden="false"] .nav-list {
    transform: translateX(0);
  }

  .nav-link {
    font-size: 5vmin;
    justify-content: flex-end;
    text-align: right;
  }

  /* Welcome keeps 5vmin on desktop; other profile text matches nav at 4vmin */
  .profile-title {
    font-size: 5vmin;
  }

  .profile-question,
  .profile-helper {
    font-size: 2.5vmin;
  }

  /* Desktop: size range 0.05%–0.3% (narrow uses 0.3%–0.9% via base .particle); glow uses same --size-n scale */
  .particle { --size: calc(0.05% + 0.25% * var(--size-raw, 0.5)); --size-n: calc(0.05 + 0.25 * var(--size-raw, 0.5)); }
}

/* Native page scrolling and section snapping; no wheel/touch interception. */
html, body { overflow: auto; }
.landing-page { scroll-snap-type: y mandatory; scrollbar-width: none; }
.landing-page::-webkit-scrollbar { display: none; }
.landing-page body { overflow: visible; }
.landing-page.menu-open, html.profile-open, body.menu-open { overflow: hidden; scroll-snap-type: none; }
.landing-page.menu-open body, html.profile-open body { overflow: hidden; }
[hidden] { display: none !important; }
.scroll-container { height: auto; overflow: visible; scrollbar-width: auto; }
.scroll-container::-webkit-scrollbar { display: initial; width: auto; }

/* The overlay starts at the viewport top, so subtracting the header leaves a gap. */
.menu-overlay { max-height: none; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; transition: opacity 1s ease, background 1s ease; }
.menu-overlay::-webkit-scrollbar { display: none; width: 0; height: 0; }
/* The background fades in place while the options slide in/out together. */
.page-scroll-thumb { position: fixed; right: 3px; width: 5px; border-radius: 5px; background: rgba(255,255,255,.45); z-index: 900; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
.menu-open .page-scroll-thumb, .profile-open .page-scroll-thumb { visibility: hidden; }
.page-scroll-thumb.is-scrolling { opacity: 1; }
.profile-avatar { width: 160px; height: 160px; width: 32cqw; height: 32cqw; }
.profile-avatar--has-image { width: 170px; height: 170px; width: 34cqw; height: 34cqw; }
.section { scroll-snap-align: start; scroll-snap-stop: always; scroll-margin-top: 0; }
.section-hero { scroll-margin-top: 0; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .particle { display: none; }
}

@media (max-width: 767px) { .header-left { min-width: 0; } .header .logo-text { white-space: normal; } .header .logo { flex-shrink: 0; }
  /* Keep the homepage profile menu stationary while its backdrop and contents fade. */
  .menu-overlay .menu-overlay__profile,
  .menu-overlay .menu-overlay__nav,
  .menu-overlay .nav-list,
  .menu-overlay[aria-hidden="false"] .menu-overlay__profile,
  .menu-overlay[data-panel="nav"] .menu-overlay__nav,
  .menu-overlay[aria-hidden="false"] .nav-list { transform: none; transition: opacity .5s ease; }
  .menu-overlay .nav-list { opacity: 0; }
  .menu-overlay[aria-hidden="false"] .nav-list { opacity: 1; }
}

/* Keep tablet navigation beside Profile rather than dropping into a second row. */
@media (min-width: 768px) and (max-width: 1799px) {
  :root { --header-height: 72px; }
  .header { gap: 1rem; }
  .header-left { min-width: 0; }
  .header-section-nav { display: flex; flex: 1; justify-content: flex-end; margin: 0; gap: clamp(.5rem, 1.2vw, .9rem); }
  body.menu-open .header-section-nav { flex: 0; width: 0; overflow: hidden; }
  body:not(.show-logo-text) .header-section-nav { display: flex; flex: 1; justify-content: flex-end; margin: 0; gap: clamp(.5rem, 1.2vw, .9rem); }
  .header-section-nav a { font-size: clamp(.85rem, 1.5vw, 1.1rem); padding: .75rem 0; }
  .header .logo { height: 48px; flex-shrink: 0; }
  .header .logo-text { font-size: clamp(1.1rem, 2.5vw, 1.65rem); }
  .header-actions { flex-shrink: 0; }
}
@media (min-width: 768px) and (max-width: 1399px) {
  .header { gap: .5rem; }
  .header .logo { height: 32px; }
  .header .logo-text { font-size: .8rem; }
  .header-section-nav a { font-size: .75rem; }
  .header-section-nav, body:not(.show-logo-text) .header-section-nav { gap: .5rem; }
  .header .menu-toggle--nav { grid-template-columns: 36px 4rem; gap: .5rem; padding-inline: .5rem; }
  .header .profile-menu-icon, .header .profile-menu-close-icon { width: 32px; height: 32px; }
  .header .profile-menu-label, .header .profile-menu-close-label { font-size: .9rem; }
}