/*
 * mc-animations.css
 * Mindcafe — All animations & motion
 * assets/css/mc-animations.css
 *
 * Contents:
 *  1. Keyframes
 *  2. Hero entrance animations
 *  3. Breathing orb
 *  4. Floating cards
 *  5. CTA rings
 *  6. Neural network pulse
 *  7. Word-split reveal
 *  8. Scroll-lit text
 *  9. Marquee (keyframe)
 * 10. Hover micro-interactions
 * 11. Reduced motion override
 */

/* ================================================================
   1. KEYFRAMES
================================================================ */

/* Slide up fade — general purpose */
@keyframes mcSlideUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Word-by-word reveal */
@keyframes mcWordUp {
  from {
    transform: translateY(110%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Breathing pulse */
@keyframes mcBreathe {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.12);
    opacity: 1;
  }
}

/* Floating cards */
@keyframes mcFloat1 {
  0%, 100% { transform: translateY(0)   rotate(-1deg); }
  50%       { transform: translateY(-12px) rotate(1deg); }
}

@keyframes mcFloat2 {
  0%, 100% { transform: translateY(0)  rotate(0.5deg); }
  50%       { transform: translateY(9px) rotate(-1.5deg); }
}

@keyframes mcFloat3 {
  0%, 100% { transform: translateY(0)    rotate(1deg); }
  50%       { transform: translateY(-8px) rotate(-0.5deg); }
}

/* CTA expanding rings */
@keyframes mcRing {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.06);
    opacity: 0.25;
  }
}

/* Live indicator dot */
@keyframes mcPulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(196, 164, 182, 0.7); }
  50%       { box-shadow: 0 0 0 5px rgba(196, 164, 182, 0); }
}

@keyframes mcPulseGreen {
  0%, 100% { box-shadow: 0 0 0 0   rgba(82, 201, 122, 0.7); }
  50%       { box-shadow: 0 0 0 5px rgba(82, 201, 122, 0); }
}

/* Dissolve bar (Feelz) */
@keyframes mcDissolve {
  from { width: 55%; }
  to   { width: 100%; }
}

/* Orbit spin */
@keyframes mcOrbitSpin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Marquee scroll */
@keyframes mcMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Counter fade */
@keyframes mcFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Nudge (drag hint arrow) */
@keyframes mcNudge {
  0%, 100% { transform: translateX(0); }
  50%       { transform: translateX(8px); }
}

/* ================================================================
   2. HERO ENTRANCE ANIMATIONS
   Applied to elements inside .mc-hero on page load
================================================================ */

/* Wrapper: any direct child of .mc-hero-animate gets staggered */
.mc-hero-animate > * {
  opacity: 0;
  animation: mcSlideUp 0.85s var(--mc-ease) forwards;
}

.mc-hero-animate > *:nth-child(1) { animation-delay: 0.08s; }
.mc-hero-animate > *:nth-child(2) { animation-delay: 0.20s; }
.mc-hero-animate > *:nth-child(3) { animation-delay: 0.32s; }
.mc-hero-animate > *:nth-child(4) { animation-delay: 0.44s; }
.mc-hero-animate > *:nth-child(5) { animation-delay: 0.56s; }
.mc-hero-animate > *:nth-child(6) { animation-delay: 0.68s; }

/* ================================================================
   3. BREATHING ORB
   Usage: wrap rings in .mc-breath-wrap
================================================================ */

.mc-breath-wrap {
  position: absolute;
  pointer-events: none;
}

.mc-breath-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(150, 102, 126, 0.15);
}

.mc-breath-ring--1 { animation: mcBreathe 6s ease-in-out infinite 0.0s; }
.mc-breath-ring--2 { animation: mcBreathe 6s ease-in-out infinite 0.8s; }
.mc-breath-ring--3 { animation: mcBreathe 6s ease-in-out infinite 1.6s; }
.mc-breath-ring--4 {
  animation: mcBreathe 6s ease-in-out infinite 2.4s;
  background: radial-gradient(circle, rgba(150,102,126,0.18) 0%, transparent 70%);
  border: none;
}

/* Interactive breathing orb (counselling / about page) */
.mc-orb-outer  { animation: mcBreathe 5s ease-in-out infinite 0.0s; }
.mc-orb-mid    { animation: mcBreathe 5s ease-in-out infinite 0.5s; }
.mc-orb-inner  { animation: mcBreathe 5s ease-in-out infinite 1.0s; }
.mc-orb-core   { animation: mcBreathe 5s ease-in-out infinite 1.5s; }

.mc-orbit-1 {
  animation: mcOrbitSpin 20s linear infinite;
}
.mc-orbit-2 {
  animation: mcOrbitSpin 30s linear infinite reverse;
}

/* ================================================================
   4. FLOATING STAT CARDS
================================================================ */
.mc-float-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(20px);
}

.mc-float-card--1 { animation: mcFloat1 6s ease-in-out infinite; }
.mc-float-card--2 { animation: mcFloat2 5s ease-in-out infinite; }
.mc-float-card--3 { animation: mcFloat3 7s 1s ease-in-out infinite; }

.mc-float-val {
  font-family: var(--mc-font-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--mc-navy);
  line-height: 1;
}

.mc-float-lbl {
  font-family: var(--mc-font-body);
  font-size: 10px;
  color: #888;
  margin-top: 2px;
  letter-spacing: 0.04em;
}

.mc-float-live {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mc-font-body);
  font-size: 10px;
  color: #3A7A58;
  font-weight: 600;
  margin-top: 2px;
}

.mc-float-live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #52C97A;
  animation: mcPulseGreen 1.5s infinite;
}

/* ================================================================
   5. CTA RINGS
================================================================ */
.mc-cta-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(150, 102, 126, 0.08);
  pointer-events: none;
}

.mc-cta-ring--1 { width: 400px; height: 400px; animation: mcRing 8s ease-in-out infinite 0.0s; }
.mc-cta-ring--2 { width: 650px; height: 650px; animation: mcRing 8s ease-in-out infinite 2.5s; }
.mc-cta-ring--3 { width: 900px; height: 900px; animation: mcRing 8s ease-in-out infinite 5.0s; }

/* ================================================================
   6. BADGE PULSE (live indicator)
================================================================ */
.mc-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mc-mauve-lt);
  display: inline-block;
  animation: mcPulse 2s infinite;
}

/* ================================================================
   7. WORD-SPLIT REVEAL
   Wrap each word: <span class="mc-word"><span class="mc-word-inner">Word</span></span>
================================================================ */
.mc-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  margin-right: 0.25em;
}

.mc-word-inner {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  animation: mcWordUp 0.85s var(--mc-ease) forwards;
}

/* Stagger — add class mc-word--N to each word */
.mc-word--1 .mc-word-inner  { animation-delay: 0.10s; }
.mc-word--2 .mc-word-inner  { animation-delay: 0.22s; }
.mc-word--3 .mc-word-inner  { animation-delay: 0.34s; }
.mc-word--4 .mc-word-inner  { animation-delay: 0.46s; }
.mc-word--5 .mc-word-inner  { animation-delay: 0.58s; }
.mc-word--6 .mc-word-inner  { animation-delay: 0.70s; }
.mc-word--7 .mc-word-inner  { animation-delay: 0.82s; }
.mc-word--8 .mc-word-inner  { animation-delay: 0.94s; }

/* ================================================================
   8. SCROLL-LIT TEXT
   Words light up as user scrolls through the section
================================================================ */
.mc-reveal-word {
  display: inline-block;
  color: rgba(255, 255, 255, 0.1);
  transition: color 0.5s var(--mc-ease), transform 0.5s var(--mc-ease);
  transform: translateY(6px);
  margin: 0 0.1em;
}

.mc-reveal-word.is-lit {
  color: var(--mc-white);
  transform: translateY(0);
}

.mc-reveal-word em {
  font-style: italic;
  color: var(--mc-mauve-lt);
}

/* ================================================================
   9. DISSOLVE BAR (Feelz page)
================================================================ */
.mc-dissolve-bar {
  height: 100%;
  border-radius: 2px;
  background: var(--mc-mauve-lt);
  animation: mcDissolve 2s ease-in-out infinite alternate;
}

/* ================================================================
   10. HOVER MICRO-INTERACTIONS
================================================================ */

/* Cards lift on hover */
.mc-hover-lift {
  transition: transform var(--mc-transition), box-shadow var(--mc-transition);
}

.mc-hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 56px rgba(150, 102, 126, 0.12);
}

/* Drag hint arrow nudge */
.mc-drag-hint span {
  display: inline-block;
  animation: mcNudge 2s ease-in-out infinite;
}

/* ================================================================
   11. REDUCED MOTION OVERRIDE
   Respects system accessibility preferences
================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .mc-reveal {
    opacity: 1;
    transform: none;
  }
}