/* Reino de Luz — motion & atmosphere */

html {
  scrollbar-gutter: stable;
}

@supports not (scrollbar-gutter: stable) {
  html {
    overflow-y: scroll;
  }
}

/* Legacy bilingual hero labels removed from HTML — hide if cached */
.page-hero-label {
  display: none !important;
}

/* ── Ambient background ── */
.ambient-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.ambient-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% 20%, rgba(245, 200, 0, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 80%, rgba(245, 200, 0, 0.03) 0%, transparent 50%);
  animation: ambient-drift 18s ease-in-out infinite alternate;
}

@keyframes ambient-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(-2%, 2%) scale(1.05); }
}

.ambient-bg--home::before {
  background:
    radial-gradient(ellipse 90% 60% at 50% 45%, rgba(245, 200, 0, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 15% 25%, rgba(245, 200, 0, 0.05) 0%, transparent 50%),
    radial-gradient(ellipse 60% 45% at 85% 75%, rgba(255, 217, 61, 0.04) 0%, transparent 50%);
}

.ambient-bg--hero {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.page-home .hero .hero-content > * {
  position: relative;
  z-index: 2;
}

.page-home .hero::before,
.page-home .hero::after {
  display: none !important;
  content: none !important;
}

body.page-home .ambient-bg {
  display: none !important;
}

.ambient-bg--home::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(245, 200, 0, 0.025) 0%, transparent 42%);
  animation: ambient-pulse 6s ease-in-out infinite alternate;
}

@keyframes ambient-pulse {
  from { opacity: 0.3; transform: scale(1); }
  to { opacity: 0.55; transform: scale(1.04); }
}

.ambient-particle {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 217, 61, 0.95) 0%, rgba(245, 200, 0, 0.35) 40%, rgba(245, 200, 0, 0) 72%);
  opacity: 0;
  box-shadow: 0 0 4px rgba(245, 200, 0, 0.25);
}

.ambient-particle--float {
  animation: particle-float linear infinite;
}

.ambient-particle--lg {
  background: radial-gradient(circle, rgba(255, 230, 100, 0.95) 0%, rgba(245, 200, 0, 0.25) 50%, transparent 75%);
  box-shadow: 0 0 8px rgba(245, 200, 0, 0.35), 0 0 16px rgba(245, 200, 0, 0.1);
}

.ambient-particle--soft {
  background: radial-gradient(circle, rgba(255, 217, 61, 0.7) 0%, transparent 68%);
  filter: blur(1px);
}

.ambient-particle--spark {
  animation: particle-spark ease-in-out infinite;
}

@keyframes particle-spark {
  0%, 100% {
    opacity: calc(var(--p-opacity, 0.6) * 0.55);
    transform: translateY(0) scale(0.85);
  }
  50% {
    opacity: var(--p-opacity, 0.8);
    transform: translateY(-8px) scale(1.05);
    box-shadow: 0 0 4px rgba(245, 200, 0, 0.25), 0 0 8px rgba(245, 200, 0, 0.08);
  }
}

@keyframes particle-float {
  0% {
    opacity: 0;
    transform: translateY(100vh) translateX(0) scale(0);
  }
  10% { opacity: var(--p-opacity, 0.5); }
  90% { opacity: var(--p-opacity, 0.5); }
  100% {
    opacity: 0;
    transform: translateY(-10vh) translateX(18px) scale(1);
  }
}

.ambient-bg--home .ambient-particle--float {
  animation-name: particle-float-home;
}

@keyframes particle-float-home {
  0% {
    opacity: 0;
    transform: translateY(105vh) translateX(0) scale(0);
  }
  8% { opacity: var(--p-opacity, 0.5); }
  50% { transform: translateY(45vh) translateX(calc(var(--p-drift, 20px) * -1)) scale(1); }
  92% { opacity: var(--p-opacity, 0.5); }
  100% {
    opacity: 0;
    transform: translateY(-12vh) translateX(var(--p-drift, 20px)) scale(0.9);
  }
}

/* Keep content above ambient layer (exclude fixed chrome/overlays) */
body > *:not(.ambient-bg):not(nav):not(.lightbox) {
  position: relative;
  z-index: 1;
}
.lightbox {
  position: fixed !important;
  z-index: 10000 !important;
}

/* ── Nav scroll state ── */
nav.nav-scrolled {
  background: rgba(10, 10, 10, 0.97);
  border-bottom-color: rgba(245, 200, 0, 0.35);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(245, 200, 0, 0.08);
}

/* Desktop: center nav links so they line up with footer links.
   body > nav beats each page's later inline `nav { display:flex }` rule. */
@media (min-width: 861px) {
  body > nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    justify-content: unset;
    column-gap: 1.25rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  body > nav .nav-logo {
    justify-self: start;
  }

  body > nav .nav-toggle {
    display: none;
  }

  body > nav .nav-links {
    justify-self: center;
    grid-column: 2;
  }

  body > nav .nav-actions {
    justify-self: end;
    grid-column: 3;
  }

  body > footer {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  body > footer .footer-links {
    gap: 1.5rem;
  }

  body > footer .footer-links a {
    font-size: 0.82rem;
    letter-spacing: 0.12em;
  }
}

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.reveal-left {
  transform: translateX(-28px);
}

.reveal.reveal-right {
  transform: translateX(28px);
}

.reveal.reveal-scale {
  transform: scale(0.96);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

.reveal-stagger > .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-stagger > .reveal:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger > .reveal:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger > .reveal:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger > .reveal:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger > .reveal:nth-child(6) { transition-delay: 0.4s; }
.reveal-stagger > .reveal:nth-child(7) { transition-delay: 0.48s; }
.reveal-stagger > .reveal:nth-child(8) { transition-delay: 0.56s; }

/* On mobile, cards enter one-by-one — skip grid stagger delays */
@media (max-width: 860px) {
  .reveal-stagger > .reveal {
    transition-delay: 0s !important;
  }

  .prog-card.reveal {
    transform: translateY(36px);
  }

  .prog-card.reveal.is-visible {
    transform: none;
  }
}

/* Card hover rules also set `transition` — keep opacity/transform reveal intact */
.mission-card.reveal,
.prog-card.reveal,
.vm-card.reveal,
.stat-card.reveal,
.channel-card.reveal,
.founder-card.reveal,
.miracle-item.reveal,
.impact-stat.reveal,
.schedule-list li.reveal,
.gallery-item.reveal,
.explore-card.reveal {
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.25s,
    box-shadow 0.35s ease,
    border-color 0.25s;
}

/* ── Hero entrance (home) ── */
.hero h1,
.hero .hero-subtitle,
.hero .hero-rule,
.hero .hero-verse,
.hero .hero-verse-ref,
.hero .hero-cta {
  opacity: 0;
  animation: hero-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero h1 { animation-delay: 0.1s; }
.hero .hero-subtitle { animation-delay: 0.25s; }
.hero .hero-rule { animation-delay: 0.35s; transform-origin: center; animation-name: hero-rule-grow; }
.hero .hero-verse { animation-delay: 0.45s; }
.hero .hero-verse-ref { animation-delay: 0.55s; }
.hero .hero-cta { animation-delay: 0.65s; }

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-rule-grow {
  from {
    opacity: 0;
    transform: scaleX(0);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

body:not(.page-home):not(.page-mission) .hero::after {
  content: '';
  position: absolute;
  width: min(480px, 80vw);
  height: min(480px, 80vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 200, 0, 0.045) 0%, transparent 68%);
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: hero-orb 9s ease-in-out infinite alternate;
  pointer-events: none;
}

body.page-mission .ambient-bg {
  display: none !important;
}

@keyframes hero-orb {
  from { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
  to { transform: translate(-46%, -54%) scale(1.06); opacity: 0.5; }
}

/* ── Tighter section spacing site-wide ── */
section {
  padding: 3.5rem 2rem;
}

/* Keep in-page anchors clear of the fixed nav */
html {
  scroll-padding-top: 5.5rem;
}

[id] {
  scroll-margin-top: 5.5rem;
}

/* Clear fixed nav on inner pages (no redundant page-hero titles) */
body:not(.page-home):not(.page-mission) > section:first-of-type,
body:not(.page-home) > .about-intro:first-of-type,
body:not(.page-home) > .gallery-wrap:first-of-type {
  padding-top: 6.5rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.gallery-tagline {
  font-family: var(--font-condensed);
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--off-white, #F0EDE8);
  text-align: center;
  margin: 0 0 1.75rem;
  line-height: 1.55;
}

@media (max-width: 600px) {
  section {
    padding: 2.5rem 1.25rem;
  }

  body:not(.page-home):not(.page-mission) > section:first-of-type,
  body:not(.page-home) > .about-intro:first-of-type,
  body:not(.page-home) > .gallery-wrap:first-of-type {
    padding-top: 6.5rem;
  }

  .hero h1 {
    font-size: clamp(2.75rem, 15vw, 4.25rem);
  }

  .hero-subtitle {
    letter-spacing: 0.12em;
    padding: 0 0.5rem;
  }

  .gallery-wrap {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .schedule-list li {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.35rem 1rem;
  }

  .schedule-day {
    min-width: 0;
    flex: 0 0 100%;
  }

  .embed-offline-body {
    white-space: normal;
  }

  .contact-channel {
    padding: 1rem;
  }

  .contact-channel-sub {
    overflow-wrap: anywhere;
  }
}

/* Mobile nav: logo | live/lang | menu — links full-width below */
@media (max-width: 860px) {
  nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.75rem;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    padding-top: max(0.75rem, env(safe-area-inset-top));
  }

  .nav-logo {
    grid-column: 1;
    min-width: 0;
  }

  .nav-logo-text {
    font-size: 1.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-actions {
    grid-column: 2;
    margin-left: 0;
    gap: 0.45rem;
  }

  .nav-toggle {
    grid-column: 3;
    display: block;
    margin-left: 0;
    min-width: 44px;
    min-height: 44px;
    padding: 0.55rem 0.7rem;
  }

  .nav-links {
    grid-column: 1 / -1;
  }

  .nav-links a {
    display: block;
    padding: 0.35rem 0;
    min-height: 44px;
    line-height: 44px;
  }

  .nav-links a.nav-donate {
    display: inline-block;
    line-height: 1;
    min-height: 0;
    padding: 0.7rem 1.15rem;
    margin-top: 0.25rem;
  }

  .nav-live.is-live {
    padding: 0.45rem 0.7rem;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
  }

  .lang-btn {
    padding: 0.45rem 0.7rem;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  .embed-offline-body {
    white-space: normal;
  }
}

@media (max-width: 380px) {
  .nav-logo-text {
    display: none;
  }

  .nav-live.is-live span:not(.live-dot) {
    display: none;
  }

  .nav-live.is-live {
    padding: 0.5rem 0.65rem;
  }
}

/* ── Enhanced cards & buttons ── */
.mission-card,
.prog-card,
.vm-card,
.stat-card,
.channel-card,
.founder-card,
.miracle-item,
.impact-stat,
.schedule-list li,
.gallery-item,
.explore-card {
  transition:
    background 0.25s,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    border-color 0.25s;
}

/* Free-standing cards can lift; tight overflow grids clip translateY and look broken */
.stat-card:hover,
.channel-card:hover,
.founder-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(245, 200, 0, 0.12);
}

.mission-card:hover,
.prog-card:hover,
.vm-card:hover,
.impact-stat:hover,
.explore-card:hover {
  transform: none;
  box-shadow: none;
}

.btn-primary,
.btn-secondary,
.nav-donate,
.donate-btn,
.nav-live,
.amount-btn,
.connect-form button {
  position: relative;
  overflow: hidden;
  transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.2s, box-shadow 0.25s;
}

/* Inline links need a box so the shine sweep can clip and animate */
.btn-secondary,
.nav-donate,
.amount-btn {
  display: inline-block;
}

/* Donate sits at the end of the link row, slightly separated from Contact */
.nav-links > li:last-child {
  margin-left: 0.5rem;
}

.nav-links a.nav-donate {
  font-family: var(--font-condensed);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}

.nav-links a.nav-donate:hover,
.nav-links a.nav-donate.active {
  color: var(--black) !important;
}

@media (max-width: 860px) {
  .nav-links > li:last-child {
    margin-left: 0;
  }
}

.btn-primary::after,
.btn-secondary::after,
.nav-donate::after,
.donate-btn::after,
.nav-live::after,
.amount-btn::after,
.connect-form button::after {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
  pointer-events: none;
  z-index: 1;
}

.btn-primary:hover,
.donate-btn:hover,
.nav-donate:hover,
.nav-live:hover,
.connect-form button:hover {
  box-shadow: 0 6px 24px rgba(245, 200, 0, 0.35);
}

.btn-secondary:hover,
.amount-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px rgba(245, 200, 0, 0.12);
}

.btn-primary:hover::after,
.btn-secondary:hover::after,
.nav-donate:hover::after,
.donate-btn:hover::after,
.nav-live:hover::after,
.amount-btn:hover::after,
.connect-form button:hover::after {
  left: 140%;
}

/* ── Verse banner shimmer ── */
.verse-banner {
  position: relative;
  overflow: hidden;
}

.verse-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255, 255, 255, 0.18) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  animation: banner-shimmer 6s ease-in-out infinite;
}

@keyframes banner-shimmer {
  0%, 100% { transform: translateX(-100%); }
  50% { transform: translateX(100%); }
}

/* ── Animated stat numbers ── */
.stat-num,
.impact-big,
.impact-stat-num,
.origin-years-num {
  display: inline-block;
  transition: transform 0.3s ease;
}

.stat-num.is-counted,
.impact-big.is-counted,
.impact-stat-num.is-counted,
.origin-years-num.is-counted {
  animation: num-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes num-pop {
  0% { transform: scale(0.85); opacity: 0.5; }
  60% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Timeline markers pulse when visible ── */
.tl-marker.tl-gold.is-visible {
  animation: tl-pulse 2.5s ease-in-out infinite;
}

@keyframes tl-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(245, 200, 0, 0.4); }
  50% { box-shadow: 0 0 18px rgba(245, 200, 0, 0.7); }
}

/* ── Embed wrapper glow on hover ── */
.embed-wrapper {
  transition: box-shadow 0.4s ease, border-color 0.3s ease;
}

.embed-wrapper:hover {
  border-color: rgba(245, 200, 0, 0.45);
  box-shadow: 0 0 40px rgba(245, 200, 0, 0.08);
}

/* ── Impact tags float in ── */
.impact-tags span {
  transition: border-color 0.25s, color 0.25s, transform 0.25s;
}

.impact-tags span:hover {
  transform: translateY(-2px);
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .ambient-bg,
  .ambient-bg::before,
  .ambient-bg--home::after,
  .ambient-particle,
  .hero *,
  .page-hero *,
  .verse-banner::before {
    animation: none !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero h1,
  .hero .hero-subtitle,
  .hero .hero-rule,
  .hero .hero-verse,
  .hero .hero-verse-ref,
  .hero .hero-cta,
  .page-hero h1,
  .page-hero .page-hero-sub {
    opacity: 1;
  }

  .mission-card:hover,
  .prog-card:hover,
  .vm-card:hover,
  .stat-card:hover,
  .channel-card:hover,
  .founder-card:hover,
  .impact-stat:hover,
  .explore-card:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .nav-donate:hover,
  .donate-btn:hover,
  .nav-live:hover,
  .amount-btn:hover {
    transform: none;
  }

  .btn-primary::after,
  .btn-secondary::after,
  .nav-donate::after,
  .donate-btn::after,
  .nav-live::after,
  .amount-btn::after,
  .connect-form button::after {
    display: none;
  }
}