/* ==========================================================================
   Shared motion for designs B (Flow) and C (Pulse), driven by js/motion.js.
   The hide-before-reveal rules are scoped to .motion-ready (added by the
   script), so without JavaScript every element is simply visible. Reduced
   motion switches every effect off at the bottom of this file.
   ========================================================================== */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Page transitions (cross-document View Transitions) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out .25s ease both; }
::view-transition-new(root) { animation: page-in .45s var(--ease-out) both; }
@keyframes page-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(12px); } }

/* ---------- Scroll reveal ---------- */
.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .9s var(--ease-out) var(--d, 0ms), transform .9s var(--ease-out) var(--d, 0ms), clip-path 1.1s var(--ease-out) var(--d, 0ms);
}
.motion-ready [data-reveal="left"] { transform: translateX(-40px); }
.motion-ready [data-reveal="right"] { transform: translateX(40px); }
.motion-ready [data-reveal="zoom"] { transform: scale(.94); }
.motion-ready [data-reveal="wipe"] { opacity: 1; transform: none; clip-path: inset(0 100% 0 0 round 24px); }
.motion-ready [data-reveal].is-in { opacity: 1; transform: none; }
.motion-ready [data-reveal="wipe"].is-in { clip-path: inset(0 0 0 0 round 24px); }

/* ---------- Load-in: headline words and fades ---------- */
.g-words .word { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .08em; }
.g-words .word > span { display: inline-block; }
.motion-ready .g-words .word > span { transform: translateY(110%); animation: word-up .9s var(--ease-out) forwards; animation-delay: calc(var(--i) * 70ms + 150ms); }
@keyframes word-up { to { transform: none; } }
.motion-ready .g-fade { opacity: 0; animation: fade-up .9s var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ---------- Pointer effects ---------- */
[data-tilt] { transition: transform .3s var(--ease-out); transform-style: preserve-3d; will-change: transform; }
[data-magnetic] { transition: transform .35s var(--ease-out), background .2s ease, color .2s ease; }
[data-spotlight] { position: relative; isolation: isolate; }
[data-spotlight]::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(7, 204, 236, .22), transparent 60%);
}
[data-spotlight]:hover::before { opacity: 1; }

/* ---------- Rotating word ---------- */
.h-rotator { position: relative; display: inline-grid; vertical-align: bottom; overflow: hidden; }
.h-rotator > span { grid-area: 1 / 1; opacity: 0; transform: translateY(100%); transition: opacity .5s var(--ease-out), transform .6s var(--ease-out); white-space: nowrap; }
.h-rotator > span.is-active { opacity: 1; transform: none; }
.h-rotator > span.is-leaving { opacity: 0; transform: translateY(-100%); }

/* ---------- Glowing button: a light rotating round its border ---------- */
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.btn-glow {
  position: relative; isolation: isolate; color: var(--ink); border: 0; padding: 2px; overflow: hidden;
  background: conic-gradient(from var(--spin), var(--cyan), #ffffff, var(--cyan), #3a64a8, var(--cyan));
  animation: spin 4s linear infinite;
}
.btn-glow > span { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.6rem; border-radius: inherit; background: var(--cyan); }
.btn-glow.btn-lg > span { padding: 1rem 1.9rem; }
.btn-glow:hover { color: var(--ink); }
.btn-glow:hover > span { background: #3ad8f0; }
@keyframes spin { to { --spin: 360deg; } }

/* ---------- Smooth accordion ---------- */
[data-accordion] details { overflow: hidden; }

/* ---------- Reduced motion: everything settles immediately ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .motion-ready [data-reveal], .motion-ready [data-reveal="wipe"] { opacity: 1; transform: none; clip-path: none; transition: none; }
  .motion-ready .g-words .word > span, .motion-ready .g-fade { opacity: 1; transform: none; animation: none; }
  .btn-glow { animation: none; }
  [data-tilt], [data-magnetic] { transition: none; }
}