/* ==========================================================================
   Yujverse — Motion system
   Calming, breath-led, premium. Library-free, transform/opacity only (60fps).
   All gated behind html.js and disabled under prefers-reduced-motion.
   ========================================================================== */

/* ---------------- Scroll progress (thin gold thread) ---------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--brick), var(--gold), var(--mint));
  z-index: calc(var(--z-nav) + 5);
  transition: width .1s linear;
  pointer-events: none;
}

/* ---------------- Directional reveals + stagger ---------------- */
/* Base hidden state is defined in base.css (.js .reveal). Here we add
   direction + a transition-delay driven by inline --d for staggering. */
.js .reveal { transition-delay: var(--d, 0s); }
.js .reveal[data-reveal="left"]  { transform: translateX(-34px); }
.js .reveal[data-reveal="right"] { transform: translateX(34px); }
.js .reveal[data-reveal="scale"] { transform: scale(.94); }
.js .reveal[data-reveal="fade"]  { transform: none; }
.js .reveal[data-reveal="blur"]  { filter: blur(8px); transform: translateY(14px); }
.js .reveal.is-in { transform: none !important; filter: none !important; }

/* Children of [data-stagger] get auto-incrementing delays (set by JS) */

/* ---------------- Split-text headings (word fade-up) ---------------- */
.split-word { display: inline-block; overflow: hidden; vertical-align: top; }
.split-word > span {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform .7s var(--ease-out), opacity .7s var(--ease-out);
  transition-delay: calc(var(--wi, 0) * 55ms);
}
.split-ready.is-in .split-word > span { transform: translateY(0); opacity: 1; }

/* ---------------- Breathing & floating decor ---------------- */
@keyframes breathe { 0%,100% { transform: scale(1); opacity:.7; } 50% { transform: scale(1.12); opacity:1; } }
@keyframes floaty  { 0%,100% { transform: translate(0,0); } 50% { transform: translate(var(--fx,0), var(--fy,-16px)); } }
@keyframes drift   { from { background-position-x: 0; } to { background-position-x: 240px; } }
@keyframes spin-slow { to { transform: rotate(360deg); } }

.breathe-anim { animation: breathe 7s var(--ease-in-out) infinite; }

/* Floating petals / orbs layer */
.petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.petal {
  position: absolute; border-radius: 50% 50% 50% 0;
  background: radial-gradient(circle at 30% 30%, var(--gold), color-mix(in srgb, var(--clay) 70%, transparent));
  opacity: .5; filter: blur(.3px);
  animation: floaty var(--dur-f, 9s) var(--ease-in-out) infinite, spin-slow var(--dur-s, 26s) linear infinite;
}

/* Pattern dividers gently drift */
.pattern-divider.is-animated { animation: drift 14s linear infinite; }

/* ---------------- Affirmations marquee ---------------- */
.marquee {
  --gap: 3rem;
  overflow: hidden; padding-block: 1.1rem; position: relative;
  border-block: 1px solid var(--line);
  background: color-mix(in srgb, var(--cream-warm) 60%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; gap: var(--gap); width: max-content; animation: marquee var(--mq-dur, 36s) linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__item { display: inline-flex; align-items: center; gap: var(--gap); font-family: var(--font-display); font-size: clamp(1.1rem, .9rem + 1vw, 1.6rem); color: var(--brick); white-space: nowrap; }
.marquee__item::after { content: "✦"; color: var(--clay); font-size: .8em; }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }

/* ---------------- Breathe-with-us widget ---------------- */
.breathe {
  position: relative; text-align: center; overflow: hidden;
  background:
    radial-gradient(60% 80% at 50% 50%, color-mix(in srgb, var(--mint) 16%, transparent), transparent 70%),
    linear-gradient(160deg, var(--dark), var(--dark-2));
  color: var(--on-dark);
}
.breathe__circle {
  width: clamp(180px, 26vw, 280px); aspect-ratio: 1; margin: 1.5rem auto; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--gold) 60%, transparent), transparent 70%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 80px -10px var(--gold);
}
.breathe__circle::before, .breathe__circle::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(255,255,255,.18);
}
.breathe__circle.run { animation: breath-cycle 12s ease-in-out infinite; }
.breathe__circle.run::before { animation: breath-ring 12s ease-in-out infinite; }
.breathe__circle.run::after  { animation: breath-ring 12s ease-in-out infinite .4s; }
.breathe__label { font-family: var(--font-serif); font-size: 1.3rem; color: var(--cream); letter-spacing: .04em; }
@keyframes breath-cycle {
  0%   { transform: scale(.78); }   /* exhaled */
  40%  { transform: scale(1.12); }  /* inhale  */
  60%  { transform: scale(1.12); }  /* hold    */
  100% { transform: scale(.78); }   /* exhale  */
}
@keyframes breath-ring { 0%,100% { transform: scale(1); opacity:.3; } 50% { transform: scale(1.25); opacity:.05; } }

/* ---------------- Card sheen + hover polish ---------------- */
.card { position: relative; overflow: hidden; }
.card::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-18deg); transition: left .7s var(--ease-out); pointer-events: none;
}
.card:hover::after { left: 130%; }
.card .card__icon { transition: transform .45s var(--ease-spring), background .45s var(--ease-out); }
.card:hover .card__icon { transform: translateY(-3px) rotate(-4deg) scale(1.06); }

/* Magnetic-ish button press + sheen */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: ""; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.28), transparent 45%);
  opacity: 0; transition: opacity var(--dur) var(--ease-out);
}
.btn:hover::before { opacity: 1; }

/* Link underline grow (footer + inline) */
.footer__links a, .contact__note a { background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .35s var(--ease-out); padding-bottom: 1px; }
.footer__links a:hover, .contact__note a:hover { background-size: 100% 1px; }

/* ---------------- Reduced motion: stop everything calm ---------------- */
@media (prefers-reduced-motion: reduce) {
  .breathe-anim, .petal, .pattern-divider.is-animated, .marquee__track, .breathe__circle.run,
  .breathe__circle.run::before, .breathe__circle.run::after { animation: none !important; }
  .split-word > span { transform: none; opacity: 1; }
  .scroll-progress { display: none; }
  .card::after { display: none; }
}

/* ==========================================================================
   Creative layer — tilt, magnetic, mandala, organic dividers, dot-nav
   ========================================================================== */

/* 3D tilt on cards (subtle) */
.tilt { transform-style: preserve-3d; transition: transform .4s var(--ease-out); will-change: transform; }
.tilt > * { transform: translateZ(0); }

/* Section dot navigation (right edge) */
.dot-nav { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index: var(--z-nav);
  display: flex; flex-direction: column; gap: 14px; }
.dot-nav a { width: 11px; height: 11px; border-radius: 50%; position: relative;
  background: color-mix(in srgb, var(--brick) 22%, transparent); transition: all .35s var(--ease-out); }
.dot-nav a::after { content: attr(data-label); position: absolute; right: 22px; top: 50%; transform: translateY(-50%) translateX(6px);
  background: var(--ink); color: var(--cream); font-size: .68rem; letter-spacing: .04em; padding: .2rem .55rem; border-radius: var(--radius-full);
  white-space: nowrap; opacity: 0; pointer-events: none; transition: all .3s var(--ease-out); }
.dot-nav a:hover { background: var(--brick); transform: scale(1.2); }
.dot-nav a:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.dot-nav a.is-active { background: var(--brick); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brick) 16%, transparent); }
@media (max-width: 1100px) { .dot-nav { display: none; } }

/* Rotating mandala / sacred-geometry accent */
.mandala { position: absolute; pointer-events: none; opacity: .12; color: currentColor; }
.mandala svg { width: 100%; height: 100%; display: block; }
.mandala--spin svg { animation: spin-slow 60s linear infinite; transform-origin: 50% 50%; }
.mandala--spin-rev svg { animation: spin-slow 80s linear infinite reverse; transform-origin: 50% 50%; }

/* Organic curved section divider (top/bottom wave) */
.wave-top, .wave-bottom { position: relative; }
.wave-top::before, .wave-bottom::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 60px; z-index: 1;
  background-repeat: no-repeat; background-size: 100% 100%;
}
.wave-top::before { top: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C360,5 1080,75 1440,30 L1440,0 L0,0 Z' fill='%23faf2e4'/%3E%3C/svg%3E"); }
.wave-bottom::after { bottom: -1px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C360,75 1080,5 1440,40 L1440,60 L0,60 Z' fill='%23faf2e4'/%3E%3C/svg%3E"); }

@media (prefers-reduced-motion: reduce) {
  .tilt { transform: none !important; }
  .mandala--spin svg, .mandala--spin-rev svg { animation: none; }
}