/* ==========================================================================
   Ruby Make Over · Motion (docs/MOTION-SYSTEM.md)
   Reveal "before" states apply only once JS adds .js-motion to <html>,
   so the page is fully visible without JavaScript.
   ========================================================================== */

/* §4 Page transitions: cross-document View Transitions -------------------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 450ms var(--ease-curtain) both vt-leave; }
::view-transition-new(root) { animation: 600ms var(--ease-curtain) both vt-enter; }
@keyframes vt-leave { to { opacity: .6; transform: translateY(-20px); } }
@keyframes vt-enter { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* §3 Loader ---------------------------------------------------------------- */
.loader {
  position: fixed; inset: 0; z-index: 300; background: var(--primary);
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  transition: clip-path 600ms var(--ease-curtain);
  clip-path: inset(0 0 0 0);
}
.js-motion.show-loader .loader { display: flex; }
.loader.is-done { clip-path: inset(0 0 100% 0); }
.loader svg { width: 110px; height: 110px; overflow: visible; }
.loader text {
  font-family: var(--font-family-heading); font-size: 110px; fill: transparent;
  stroke: var(--accent-color-2); stroke-width: 1; stroke-dasharray: 520; stroke-dashoffset: 520;
  animation: draw 800ms var(--ease-curtain) 100ms forwards, fillin 400ms var(--ease-silk) 800ms forwards;
}
.loader .word { color: var(--accent-color-2); font-size: 13px; letter-spacing: .32em; text-transform: uppercase; opacity: 0; animation: fade 600ms var(--ease-silk) 300ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fillin { to { fill: var(--accent-color-2); } }
@keyframes fade { to { opacity: 1; } }

/* §5 Reveals ---------------------------------------------------------------- */
.js-motion [data-reveal] { will-change: auto; }

/* R1 rise */
.js-motion [data-reveal="rise"] {
  opacity: 0; transform: translateY(var(--rise));
  transition: opacity var(--dur-base) var(--ease-silk), transform var(--dur-base) var(--ease-silk);
  transition-delay: var(--d, 0ms);
}
/* R2 line (H1/H2): each .line > span rises from below its mask */
.js-motion [data-reveal="line"] .line > span {
  transform: translateY(105%);
  transition: transform var(--dur-slow) var(--ease-silk);
  transition-delay: calc(var(--d, 0ms) + var(--i, 0) * var(--stagger-text));
}
/* R3 mask (images) */
.js-motion [data-reveal="mask"] {
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--dur-slow) var(--ease-silk);
  transition-delay: var(--d, 0ms);
}
.js-motion [data-reveal="mask"][data-from="top"] { clip-path: inset(0 0 100% 0); }
.js-motion [data-reveal="mask"] img { transform: scale(1.08); transition: transform 1400ms var(--ease-silk); transition-delay: var(--d, 0ms); }
/* R4 draw (hairlines, frames) */
.js-motion [data-reveal="draw"]::after,
.js-motion [data-reveal="draw"].eyebrow--double::before { transform: scaleX(0); transition: transform var(--dur-base) var(--ease-curtain); transition-delay: var(--d, 0ms); }
.js-motion .value-item[data-reveal="draw"]::before { transform: scaleX(0); transition: transform var(--dur-base) var(--ease-curtain); transition-delay: var(--d, 0ms); }
.js-motion [data-reveal="frame"] { clip-path: inset(0 100% 100% 0); transition: clip-path var(--dur-slow) var(--ease-curtain); transition-delay: var(--d, 0ms); }
.js-motion [data-reveal="dots"] { transform: scaleX(0); transition: transform var(--dur-base) var(--ease-curtain); transition-delay: var(--d, 0ms); }
/* R6 soft focus */
.js-motion [data-reveal="focus"] { opacity: 0; letter-spacing: .02em; transition: opacity var(--dur-slow) var(--ease-silk), letter-spacing var(--dur-slow) var(--ease-silk); }

/* Revealed state */
.js-motion [data-reveal].is-in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); letter-spacing: normal; }
.js-motion [data-reveal="line"].is-in .line > span { transform: none; }
.js-motion [data-reveal="mask"].is-in img { transform: scale(1); }
.js-motion [data-reveal="draw"].is-in::after,
.js-motion [data-reveal="draw"].is-in::before { transform: scaleX(1); }

/* Hero: Ken-Burns idle drift (§9) after its reveal */
.hero-slider.is-in .hero-slide.is-active img { animation: kenburns 7.2s linear forwards; }
@keyframes kenburns { from { transform: scale(1.06); } to { transform: scale(1) translateX(-1%); } }

/* Parallax layers are moved by JS with transform only */
[data-parallax], [data-depth] { will-change: transform; }

/* §8 Custom cursor (desktop, fine pointer only; JS adds .has-cursor) ------- */
.cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity var(--dur-fast); }
.has-cursor .cursor-dot, .has-cursor .cursor-ring { opacity: 1; }
.cursor-dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--primary); }
.cursor-ring {
  width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1px solid var(--primary);
  display: grid; place-items: center; color: #fff;
  font: 500 11px/1 var(--font-family-text); letter-spacing: .2em; text-transform: uppercase;
  transition: width var(--dur-fast) var(--ease-silk), height var(--dur-fast) var(--ease-silk), margin var(--dur-fast) var(--ease-silk), background var(--dur-fast) var(--ease-silk), border-color var(--dur-fast), opacity var(--dur-fast), transform var(--dur-instant);
}
.cursor-ring svg { width: 26px; height: 26px; fill: #fff; display: none; }
.cursor-ring span { display: none; padding-left: .2em; }
.on-dark-cursor .cursor-dot { background: #fff; }
.on-dark-cursor .cursor-ring { border-color: #fff; }
.cursor--link .cursor-ring { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: rgba(231,211,197,.3); }
.cursor--link .cursor-dot { opacity: 0; }
.cursor--view .cursor-ring, .cursor--drag .cursor-ring, .cursor--whatsapp .cursor-ring { width: 88px; height: 88px; margin: -44px 0 0 -44px; background: var(--primary); border-color: var(--primary); }
.cursor--view .cursor-dot, .cursor--drag .cursor-dot, .cursor--whatsapp .cursor-dot { opacity: 0; }
.cursor--view .cursor-ring span, .cursor--drag .cursor-ring span { display: block; }
.cursor--whatsapp .cursor-ring svg { display: block; }
.cursor--text .cursor-dot, .cursor--text .cursor-ring { opacity: 0; }
.cursor--down .cursor-ring { transform: scale(.9); }

/* §12 Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; scroll-behavior: auto !important;
  }
  ::view-transition-old(root), ::view-transition-new(root) { animation: 200ms ease both fade !important; }
  .js-motion [data-reveal] { transform: none !important; clip-path: none !important; }
  .js-motion [data-reveal] img, .js-motion [data-reveal] .line > span { transform: none !important; }
  .js-motion [data-reveal="rise"], .js-motion [data-reveal="focus"] { transition: opacity 300ms ease !important; }
  .marquee-track { animation: none !important; flex-wrap: wrap; width: auto; }
  .marquee-track span[aria-hidden="true"] { display: none; }
  .hero-slide img { animation: none !important; }
  .hero-dots button[aria-current="true"] i::after { animation: none !important; transform: scaleX(1); }
  .ripple-btn::before, .ripple-btn::after { display: none; }
  .loader { display: none !important; }
}