/* ==========================================================================
   MindShift Guru — Motion layer
   --------------------------------------------------------------------------
   Every animation here is decorative. When `prefers-reduced-motion: reduce`
   is active, the final block disables all of it and the site remains fully
   usable (all content visible, all interactions functional).
   ========================================================================== */

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */

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

@keyframes msg-rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes msg-rise-sm {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes msg-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Gentle image reveal: a sage veil lifts away */
@keyframes msg-unveil {
  from {
    opacity: 0;
    transform: scale(1.045);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slow drift for the soft background shapes */
@keyframes msg-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  50% {
    transform: translate3d(0, -18px, 0) scale(1.03);
  }
}

@keyframes msg-drift-x {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(16px, -12px, 0);
  }
}

/* Slow rotation of the decorative "shift" arc */
@keyframes msg-arc-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   SCROLL REVEAL
   ==========================================================================
   Elements are hidden only once JS has confirmed IntersectionObserver support
   (see js/main.js -> initReveal). Without JS, nothing is ever hidden, so the
   page is complete on its own.
   ========================================================================== */

[data-reveal] {
  opacity: 1;
}

html.js-motion [data-reveal] {
  opacity: 0;
  transition: opacity 720ms var(--ease-out),
    transform 720ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

html.js-motion [data-reveal="up"] {
  transform: translateY(28px);
}
html.js-motion [data-reveal="fade"] {
  transform: none;
}
html.js-motion [data-reveal="left"] {
  transform: translateX(-26px);
}
html.js-motion [data-reveal="right"] {
  transform: translateX(26px);
}
html.js-motion [data-reveal="scale"] {
  transform: scale(0.965);
}

html.js-motion [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ==========================================================================
   HERO ENTRANCE
   ==========================================================================
   Runs once on load, staggered by --hero-delay.
   ========================================================================== */

html.js-motion .hero-anim {
  opacity: 0;
  animation: msg-rise 900ms var(--ease-out) forwards;
  animation-delay: var(--hero-delay, 0ms);
}

/* ==========================================================================
   IMAGE REVEAL
   ========================================================================== */

html.js-motion [data-img-reveal] {
  opacity: 0;
  animation: msg-unveil 1100ms var(--ease-out) forwards;
  animation-delay: var(--hero-delay, 0ms);
}

/* ==========================================================================
   AMBIENT DECORATION
   ==========================================================================
   Very slow, very small amplitude. Purely atmospheric.
   ========================================================================== */

.ambient-slow {
  animation: msg-drift 18s var(--ease-soft) infinite;
}

.ambient-slower {
  animation: msg-drift 26s var(--ease-soft) infinite;
}

.ambient-slow-x {
  animation: msg-drift-x 22s var(--ease-soft) infinite;
}

.ambient-arc {
  transform-origin: center;
  animation: msg-arc-spin 70s linear infinite;
}

/* ==========================================================================
   ACCESSIBLE FEEDBACK
   ==========================================================================
   Subtle highlight for content updated by JS (search, filters, TOC).
   ========================================================================== */

@keyframes msg-pulse-soft {
  0% {
    opacity: 0.35;
  }
  100% {
    opacity: 1;
  }
}

.is-updating {
  animation: msg-fade 220ms var(--ease-soft);
}

/* Drawer / panel entry is handled by transform transitions in style.css */

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Restore everything that motion would otherwise hide */
  html.js-motion [data-reveal],
  html.js-motion .hero-anim,
  html.js-motion [data-img-reveal] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  .ambient-slow,
  .ambient-slower,
  .ambient-slow-x,
  .ambient-arc {
    animation: none !important;
  }

  .btn:hover,
  .card--hover:hover,
  .principle-card:hover,
  .social-link:hover,
  .fab:hover {
    transform: none !important;
  }
}

/* When JS is unavailable the reveal system must never hide content. */
html.no-js [data-reveal] {
  opacity: 1;
}