/* ==========================================================================
   DREAM SPARK — Motion system
   ========================================================================== */

/* Reveal on scroll (classes toggled by main.js IntersectionObserver) */
.js .reveal { opacity: 0; transform: translateY(46px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal.is-in { opacity: 1; transform: none; }

/* Image wipe: a curtain slides away (clip-path on the target would stop IntersectionObserver from firing) */
.reveal-clip { position: relative; }
.js .reveal-clip::after { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--wipe, var(--forest-2)); transform-origin: 50% 0; transition: transform 1.4s var(--ease-in-out); transition-delay: var(--d, 0s); pointer-events: none; border-radius: inherit; }
.js .reveal-clip img { transform: scale(1.25); transition: transform 2.2s var(--ease); }
.js .reveal-clip.is-in::after { transform: scaleY(0); }
.js .reveal-clip.is-in img { transform: scale(1); }

.js .reveal-card { opacity: 0; transform: translateY(60px) scale(.96); transition: opacity 1s var(--ease), transform 1s var(--ease); transition-delay: var(--d, 0s); }
.js .reveal-card.is-in { opacity: 1; transform: none; }

/* Word-by-word headline reveal (words wrapped by main.js) */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; transform: translateY(110%) rotate(4deg); transform-origin: left bottom; transition: transform 1.2s var(--ease); transition-delay: calc(var(--wi, 0) * .06s + var(--d, 0s)); }
.reveal-words.is-in .w > span { transform: none; }
.no-js .w > span, .reduced .w > span { transform: none; }

/* Interactive tilt (main.js sets --rx/--ry) */
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); will-change: transform; }

/* Magnetic buttons: main.js sets --tx/--ty */
.magnetic { translate: var(--tx, 0) var(--ty, 0); transition: translate .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease), box-shadow .5s var(--ease); }

/* Page transition curtain */
.page-curtain { position: fixed; inset: 0; z-index: 900; background: var(--forest); transform: translateY(100%); pointer-events: none; transition: transform .7s var(--ease-in-out); }
.page-curtain.is-active { transform: translateY(0); }

@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes kenburns { from { transform: scale(1.02); } to { transform: scale(1.14) translate(-1.5%, -1%); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } }
@keyframes drip { 0% { top: -40%; } 100% { top: 100%; } }
@keyframes bar { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@keyframes spin-pulse { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.12); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(40px) scale(.97); } }
@keyframes shimmer { to { background-position: -300% 0; } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .js .reveal, .js .reveal-card { opacity: 1; transform: none; }
  .js .reveal-clip::after { display: none; }
  .w > span { transform: none; }
  .marquee__track { animation: none; }
}