/* ==========================================================
   CobAnanda motion: gentle entrances, scroll reveals and hover touches.
   Shared file: a page opts in by loading motion.css + motion.js and
   marking elements with data-reveal / data-reveal-stagger.

   Nothing here hides content unless motion.js has added "js-motion" to
   <html>, which it skips for visitors who prefer reduced motion. So if the
   script fails or motion is off, the page simply shows as normal.
   ========================================================== */
:root {
  --m-ease: cubic-bezier(.22, .61, .36, 1);       /* soft ease-out */
  --m-ease-slow: cubic-bezier(.16, .84, .3, 1);   /* long settle */
  --m-rise: 18px;
  --m-dur: 700ms;
}

/* ---------- Hero: one quiet opening moment ---------- */
@keyframes m-settle { from { transform: scale(1.06); } to { transform: none; } }
@keyframes m-rise   { from { opacity: 0; transform: translateY(var(--m-rise)); } to { opacity: 1; transform: none; } }
@keyframes m-draw   { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.js-motion .m-hero { overflow: hidden; }
/* The photo stays fully visible (it is the first thing people see); it only eases in from a touch closer. */
.js-motion .m-hero > img { animation: m-settle 2.4s var(--m-ease-slow) both; }
.js-motion .m-hero .hero__text .wrap > * { animation: m-rise var(--m-dur) var(--m-ease) both; }
.js-motion .m-hero .hero__text .wrap > :nth-child(1) { animation-delay: 150ms; }
.js-motion .m-hero .hero__text .wrap > :nth-child(2) { animation-delay: 280ms; }
.js-motion .m-hero .hero__text .wrap > :nth-child(3) { animation-delay: 420ms; }
.js-motion .m-hero .hero__text .wrap > :nth-child(4) { animation-delay: 560ms; }

/* ---------- Inner pages: the opening screen ----------
   Payment and registration pages stay still on purpose. */
.js-motion body:not(.page-payment):not(.page-register) main > .banner:first-child { overflow: hidden; }
.js-motion body:not(.page-payment):not(.page-register) main > .banner:first-child .banner__img { animation: m-settle 2.4s var(--m-ease-slow) both; }
.js-motion body:not(.page-payment):not(.page-register) :is(main > .section:first-child, main > .banner:first-child + .section, main > .pp-hero:first-child + .pp-herotext) .wrap > *,
.js-motion body:not(.page-payment):not(.page-register) main > .overlay:first-child .overlay__box { animation: m-rise var(--m-dur) var(--m-ease) both; animation-delay: 150ms; }
.js-motion body:not(.page-payment):not(.page-register) :is(main > .section:first-child, main > .banner:first-child + .section, main > .pp-hero:first-child + .pp-herotext) .wrap > :nth-child(2) { animation-delay: 300ms; }
.js-motion body:not(.page-payment):not(.page-register) :is(main > .section:first-child, main > .banner:first-child + .section, main > .pp-hero:first-child + .pp-herotext) .wrap > :nth-child(n+3) { animation-delay: 450ms; }

/* ---------- Scroll reveals ---------- */
/* data-reveal="fade": wide photos fade in place instead of rising */
.js-motion [data-reveal="fade"]:not(.is-in) { transform: none; }
.js-motion [data-reveal="fade"]:not(.is-settled) { transition-duration: 1000ms; }
/* Waiting to arrive */
.js-motion [data-reveal]:not(.is-in),
.js-motion [data-reveal-stagger] > :not(.is-in) { opacity: 0; transform: translateY(var(--m-rise)); }
/* Arriving. Once settled, motion.js adds .is-settled and the element's own
   transitions (e.g. the quick card hover lift) take over again. */
.js-motion [data-reveal]:not(.is-settled),
.js-motion [data-reveal-stagger] > :not(.is-settled) {
  transition: opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease);
  transition-delay: var(--m-delay, 0ms);
}

/* Small eyebrow rule draws in when its section arrives. */
.js-motion .is-in .h-eyebrow::before,
.js-motion .m-hero .h-eyebrow::before { transform-origin: left center; animation: m-draw 800ms var(--m-ease) both; animation-delay: calc(var(--m-delay, 0ms) + 250ms); }
.js-motion .m-hero .h-eyebrow::before { animation-delay: 450ms; }

/* ---------- Hover and tap touches (only when motion is welcome) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Card photos drift slightly closer on hover. The cards already clip their corners. */
  .h-card .h-card__img,
  .h-wide .h-wide__img { transition: transform 900ms var(--m-ease); }
  .h-card:hover .h-card__img,
  .h-wide:hover .h-wide__img { transform: scale(1.04); }

  /* Same drift on the Offerings page cards and on photo galleries (matches the Pilgrimage mosaic). */
  .o-card__media { overflow: hidden; }
  .o-card__media img,
  .gallery .gallery__item .photo { transition: transform 900ms var(--m-ease); }
  .o-card:hover .o-card__media img { transform: scale(1.04); }
  .gallery .gallery__item { overflow: hidden; }
  .gallery .gallery__item:hover .photo { transform: scale(1.03); }

  /* "Learn more" arrows lean forward. */
  .h-card__more::after,
  .h-more::after { display: inline-block; transition: transform 300ms var(--m-ease); }
  .h-card:hover .h-card__more::after,
  .h-wide:hover .h-card__more::after,
  .h-more:hover::after { transform: translateX(4px); }

  /* Buttons lift a hair. */
  .btn { transition: background .2s, border-color .2s, color .2s, transform 300ms var(--m-ease), box-shadow 300ms var(--m-ease); }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(31, 48, 40, .14); }
  .btn:active { transform: none; box-shadow: none; }

  /* Underlines that grow in from the left. */
  .h-more { border-bottom-color: transparent; background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; transition: color .2s, background-size 400ms var(--m-ease); }
  .h-more:hover { background-size: 0 1px; animation: m-underline 600ms var(--m-ease) 150ms both; }
  @keyframes m-underline { from { background-size: 0 1px; } to { background-size: 100% 1px; } }
}

/* Desktop nav: a fine line slides in under each link. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .nav > li > a { position: relative; }
  .nav > li > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left center; transition: transform 350ms var(--m-ease); }
  .nav > li > a:hover::after,
  .nav > li > a[aria-current]::after { transform: scaleX(1); }
}

/* ---------- Safety nets ---------- */
@media (prefers-reduced-motion: reduce) {
  .js-motion [data-reveal],
  .js-motion [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
  .js-motion *, .js-motion *::before, .js-motion *::after { animation: none !important; }
}
@media print {
  .js-motion [data-reveal],
  .js-motion [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; }
}