/* ═══════════════════════════════════════════════════════════════════════════
   motion.css — premium interactive motion  bukiski-hram.org

   Principles:
   – Calm, liturgical pacing. Nothing aggressive or flashy.
   – Only transform + opacity (no layout-triggering properties).
   – All JS-driven states use data-attributes (graceful degradation).
   – Pure CSS animations for hero entrance — works without JS.
   – Full prefers-reduced-motion support.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Hero entrance — pure CSS, zero JS dependency ─────────────────────────────
   Timing: loader (navigation.js) starts fading at 1100ms after window.load.
   Hero children begin entering at the same moment, creating a natural
   cross-dissolve as the loader reveals the content beneath.
   ──────────────────────────────────────────────────────────────────────────── */

@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Parent is always visible — children handle their own staggered entry */
.hero__content {
  animation: none;
}

/* Media column rises from slight offset */
.hero__media {
  /* Override surface-rise from components.css */
  animation: hero-enter 1100ms cubic-bezier(0.22, 0.1, 0.25, 1) 1100ms both;
}

/* Content enters in three waves */
.hero__intro {
  animation: hero-enter 820ms cubic-bezier(0.22, 0.1, 0.25, 1) 1100ms both;
}

.hero__lead {
  animation: hero-enter 820ms cubic-bezier(0.22, 0.1, 0.25, 1) 1310ms both;
}

.hero__footer {
  animation: hero-enter 820ms cubic-bezier(0.22, 0.1, 0.25, 1) 1520ms both;
}

/* ── Cross ornament — imperceptibly slow breath ───────────────────────────────
   12-second cycle, barely moves (0.03 ↔ 0.056 opacity).
   Gives the hero a sense of living presence without distraction.
   ──────────────────────────────────────────────────────────────────────────── */

@keyframes cross-breathe {
  0%, 100% { opacity: 0.03; }
  50% { opacity: 0.056; }
}

.hero__inner::before {
  animation: cross-breathe 12s ease-in-out infinite;
}

/* ── Hero ambient glow — very slow, 18-second pulse ─────────────────────────── */

@keyframes ambient-drift {
  0%, 100% { opacity: 0.78; }
  50% { opacity: 1; }
}

.hero::before {
  animation: ambient-drift 18s ease-in-out infinite;
}

/* ── Scroll reveal — driven by JS IntersectionObserver ───────────────────────
   data-reveal-ready="true"   → element is below fold, hidden by JS
   data-reveal-visible="true" → element has entered viewport, animate in

   Graceful degradation: elements without these attributes are always visible.
   ──────────────────────────────────────────────────────────────────────────── */

[data-reveal-ready='true'] {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 900ms cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 900ms cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: opacity, transform;
}

[data-reveal-visible='true'] {
  opacity: 1 !important;
  transform: translateY(0) !important;
  will-change: auto;
}

/* Stagger: children of a reveal-stagger container animate sequentially */
[data-reveal-stagger='true'] > * {
  opacity: 0;
  transform: translateY(18px);
  animation: none !important; /* cancel surface-rise so stagger controls visibility */
}

[data-reveal-stagger='true'] > *:nth-child(1) {
  transition:
    opacity 780ms 0ms cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 780ms 0ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

[data-reveal-stagger='true'] > *:nth-child(2) {
  transition:
    opacity 780ms 90ms cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 780ms 90ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

[data-reveal-stagger='true'] > *:nth-child(3) {
  transition:
    opacity 780ms 180ms cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 780ms 180ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

[data-reveal-stagger='true'] > *:nth-child(4) {
  transition:
    opacity 780ms 270ms cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 780ms 270ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

[data-reveal-stagger='true'] > *:nth-child(n+5) {
  transition:
    opacity 780ms 360ms cubic-bezier(0.25, 0.1, 0.25, 1),
    transform 780ms 360ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

[data-reveal-visible='true'] > * {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ── Card hover — premium, unhurried ────────────────────────────────────────── */

.card {
  transition:
    transform 460ms cubic-bezier(0.25, 0.1, 0.25, 1),
    border-color 460ms ease,
    box-shadow 460ms cubic-bezier(0.25, 0.1, 0.25, 1),
    background-position 460ms ease;
}

.card:hover,
.card:focus-within {
  box-shadow:
    0 28px 58px rgba(32, 16, 10, 0.13),
    0 6px 16px rgba(32, 16, 10, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ── Button — refined press state ────────────────────────────────────────────── */

.button {
  transition:
    transform 360ms cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 360ms cubic-bezier(0.25, 0.1, 0.25, 1),
    opacity 260ms ease;
}

.button:active {
  transform: scale(0.974) translateY(1px);
  transition-duration: 100ms;
}

/* ── Тихое слово — contained shimmer over the intro-block ────────────────────
   A single very slow shimmer pass every 22s.
   The block gets overflow:hidden to contain it within the border-radius.
   ──────────────────────────────────────────────────────────────────────────── */

@keyframes shimmer-drift {
  0% {
    opacity: 0;
    transform: translateX(-130%) skewX(-14deg);
  }

  12% { opacity: 1; }
  88% { opacity: 1; }

  100% {
    opacity: 0;
    transform: translateX(190%) skewX(-14deg);
  }
}

.section--accent .intro-block {
  overflow: hidden; /* contain shimmer within border-radius */
}

.section--accent .intro-block::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 32%,
    rgba(255, 238, 185, 0.055) 50%,
    transparent 68%
  );
  pointer-events: none;
  border-radius: inherit;
  animation: shimmer-drift 22s ease-in-out 4s infinite;
}

/* ── Link underlines — body text contexts only ───────────────────────────────── */

.parish-intro a:not(.button),
.page-main a:not(.button):not(.card__link):not([aria-current]),
.page-sidebar a:not(.button) {
  text-decoration-color: rgba(91, 15, 25, 0.28);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 320ms ease;
}

.parish-intro a:not(.button):hover,
.page-main a:not(.button):not(.card__link):not([aria-current]):hover,
.page-sidebar a:not(.button):hover {
  text-decoration-color: var(--color-brand);
}

/* ── Locale switcher — gentle transitions ────────────────────────────────────── */

.locale-switcher__link,
.locale-pill__list a {
  transition:
    opacity 260ms ease,
    color 260ms ease,
    background-color 260ms ease;
}

/* ── Header is-condensed — smooth visual transition ─────────────────────────── */

.site-header {
  transition:
    background 420ms cubic-bezier(0.25, 0.1, 0.25, 1),
    box-shadow 420ms cubic-bezier(0.25, 0.1, 0.25, 1),
    border-color 420ms ease,
    backdrop-filter 420ms ease,
    padding 420ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ── prefers-reduced-motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  /* Hero entrance: show immediately, no motion */
  .hero__intro,
  .hero__lead,
  .hero__footer {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__media {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* Stop ambient animations */
  .hero__inner::before,
  .hero::before {
    animation: none !important;
  }

  /* Scroll reveal: no motion, just appear */
  [data-reveal-ready='true'] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  [data-reveal-stagger='true'] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* No shimmer */
  .section--accent .intro-block::after {
    display: none !important;
  }

  /* Instant card transitions */
  .card {
    transition: none !important;
  }

  /* Instant button transitions */
  .button {
    transition: none !important;
  }
}