/* ==========================================================================
   Motion — keyframes, scroll reveals, entrance choreography
   Every effect here is disabled or reduced under prefers-reduced-motion.
   ========================================================================== */

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
  70%      { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.9; }
}

@keyframes logo-glow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(25, 200, 240, 0.35)); opacity: 0.82; }
  50%      { filter: drop-shadow(0 0 26px rgba(25, 200, 240, 0.8)); opacity: 1; }
}

@keyframes drawer-in {
  to { opacity: 1; transform: translateY(0); }
}

/* slow, offset drift for decorative layers — different durations so the
   floating elements never fall into sync */
@keyframes float-a {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(14px, -22px, 0); }
}
@keyframes float-b {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-18px, 16px, 0); }
}
@keyframes float-c {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(10px, 20px, 0); }
}

.float-a { animation: float-a 13s var(--ease-io) infinite; }
.float-b { animation: float-b 17s var(--ease-io) infinite; }
.float-c { animation: float-c 21s var(--ease-io) infinite; }

/* -------------------------------------------------------- scroll reveal -- */
/* Only hide reveal targets when JS is actually running to bring them back.
   Without the .js class (script blocked/failed) everything stays visible. */
.js [data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    opacity var(--t-slow) var(--ease-out),
    transform var(--t-slow) var(--ease-out),
    clip-path var(--t-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal='up']    { transform: translateY(34px); }
.js [data-reveal='down']  { transform: translateY(-26px); }
.js [data-reveal='left']  { transform: translateX(38px); }
.js [data-reveal='right'] { transform: translateX(-38px); }
.js [data-reveal='scale'] { transform: scale(0.94); }
.js [data-reveal='mask']  { clip-path: inset(0 0 100% 0); opacity: 1; }
.js [data-reveal='wipe']  { clip-path: inset(0 100% 0 0); opacity: 1; }

.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
  will-change: auto;
}

/* hero entrance choreography */
.js .hero-seq > * {
  opacity: 0;
  transform: translateY(26px);
  animation: hero-in 760ms var(--ease-out) forwards;
}
.hero-seq > *:nth-child(1) { animation-delay: 180ms; }
.hero-seq > *:nth-child(2) { animation-delay: 260ms; }
.hero-seq > *:nth-child(3) { animation-delay: 340ms; }
.hero-seq > *:nth-child(4) { animation-delay: 420ms; }
.hero-seq > *:nth-child(5) { animation-delay: 500ms; }
.hero-seq > *:nth-child(6) { animation-delay: 580ms; }

@keyframes hero-in {
  to { opacity: 1; transform: translateY(0); }
}

.js .hero__card {
  opacity: 0;
  transform: translateY(36px) scale(0.96);
  animation: hero-card-in 900ms var(--ease-out) forwards;
}
.hero__card--a { animation-delay: 420ms; }
.hero__card--b { animation-delay: 540ms; }
.hero__card--c { animation-delay: 660ms; }

@keyframes hero-card-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* magnetic button translation is applied inline by JS via --mx/--my */
.magnetic { transition: transform 260ms var(--ease-out); }

/* 3D tilt cards read --rx/--ry set by JS */
.tilt {
  transition: transform 320ms var(--ease-out);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
}

/* gallery filter restagger */
.gallery__item, .review {
  animation: filter-in 420ms var(--ease-out) both;
}

@keyframes filter-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================== reduced-motion overrides = */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* reveals collapse to a plain opacity change, never a transform */
  [data-reveal] { opacity: 1; transform: none; clip-path: none; }
  [data-reveal].is-in { transform: none; }

  .hero-seq > *, .hero__card { opacity: 1; transform: none; animation: none; }

  /* parallax, floating drift, tilt and the custom cursor are switched off */
  .float-a, .float-b, .float-c { animation: none; }
  .tilt { transform: none !important; }
  .magnetic { transform: none !important; }
  .cursor-dot { display: none !important; }
  [data-parallax] { transform: none !important; }
  .mobile-bar .mb-wa::after { animation: none; opacity: 0.4; }
  .preloader img { animation: none; }
  .status-dot.is-open::before { animation: none; }
}