/* ============================================================
   CEMAP CONSULTANTS — MOTION SYSTEM
   Keyframes, transitions, reveals
   ============================================================ */

/* ---- Text reveal ---- */
.tr-line { overflow: hidden; display: block; }
.tr-inner { display: block; transform: translateY(110%); transition: transform 1s var(--ease-out); }
.in-view .tr-inner { transform: translateY(0); }

/* ---- Fade / slide reveals ---- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeLeft { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeRight { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes zoomIn { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: scale(1); } }
@keyframes blurIn { from { opacity: 0; filter: blur(14px); } to { opacity: 1; filter: blur(0); } }
@keyframes staggerUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }

.anim-fadeUp { animation: fadeUp .8s var(--ease-out) both; }
.anim-fadeIn { animation: fadeIn .8s ease both; }
.anim-fadeLeft { animation: fadeLeft .8s var(--ease-out) both; }
.anim-fadeRight { animation: fadeRight .8s var(--ease-out) both; }
.anim-zoomIn { animation: zoomIn .8s var(--ease-out) both; }
.anim-blurIn { animation: blurIn 1s ease both; }

.d-1 { animation-delay: .08s } .d-2 { animation-delay: .16s } .d-3 { animation-delay: .24s }
.d-4 { animation-delay: .32s } .d-5 { animation-delay: .40s } .d-6 { animation-delay: .48s }
.d-7 { animation-delay: .56s } .d-8 { animation-delay: .64s } .d-9 { animation-delay: .72s }

/* ---- Floating / drift ---- */
@keyframes floatX { 0%,100% { transform: translateX(0); } 50% { transform: translateX(22px); } }
.float-x { animation: floatX 7s ease-in-out infinite; }

@keyframes morphBlob { 0%,100% { border-radius: 42% 58% 62% 38% / 46% 44% 56% 54%; } 34% { border-radius: 60% 40% 36% 64% / 52% 62% 38% 48%; } 68% { border-radius: 38% 62% 58% 42% / 60% 38% 62% 40%; } }
.morph-blob { animation: morphBlob 18s ease-in-out infinite; }

/* ---- Shimmer (gradient slide) ---- */
@keyframes shimmer { to { background-position: 200% center; } }
.shimmer-text { background: linear-gradient(90deg, var(--royal-600) 20%, var(--purple) 40%, var(--royal-500) 60%, var(--royal-600) 80%); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 6s linear infinite; }

/* ---- Gradient pan (hero / borders) ---- */
@keyframes gradPan { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.grad-animate { background-size: 200% 200%; animation: gradPan 12s ease infinite; }

/* ---- Animated underline (links) ---- */
.u-line { position: relative; }
.u-line::after { content: ""; position: absolute; left: 0; bottom: -3px; height: 2px; width: 100%; background: var(--grad-primary); transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease-out); }
.u-line:hover::after, .u-line.active::after { transform: scaleX(1); transform-origin: left; }

/* ---- Bounce (scroll arrows) ---- */
@keyframes bounceY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
.bounce-y { animation: bounceY 2s ease-in-out infinite; }

/* ---- Spin slow (decorative rings) ---- */
@keyframes spinSlow { to { transform: rotate(360deg); } }
.spin-slow { animation: spinSlow 22s linear infinite; }

/* ---- Progress bar (timeline) ---- */
@keyframes growX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.grow-x { transform-origin: left; animation: growX 1.2s var(--ease-out) both; }

/* ---- Pulsing icon badge ---- */
@keyframes softPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(0,56,179,.28); } 50% { box-shadow: 0 0 0 14px rgba(0,56,179,0); } }
.soft-pulse { animation: softPulse 3s ease-out infinite; }

/* ---- Hover ring sweep on service cards ---- */
@keyframes ringSweep { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ---- Hero underline draw ---- */
@keyframes drawLine { from { width: 0; } to { width: 100%; } }
.draw-line { animation: drawLine 1.1s var(--ease-out) both; }

/* ---- Section divider wave bounce (SVG subtle) ---- */
.wave-path { animation: waveShift 8s ease-in-out infinite alternate; }
@keyframes waveShift { from { transform: translateX(-2%); } to { transform: translateX(2%); } }

/* ---- Stat number pop ---- */
@keyframes numPop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.num-pop { animation: numPop .7s var(--ease-out) both; }

/* ---- Preloader logo breathe ---- */
@keyframes logoBreathe { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: 1; } }

/* ---- Menu items stagger handled in style.css (mmItem) ---- */

/* ---- Card entrance stagger (grid) ---- */
.stagger-grid > * { opacity: 0; transform: translateY(30px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.stagger-grid.in-view > * { opacity: 1; transform: translateY(0); }
.stagger-grid.in-view > *:nth-child(1){ transition-delay: .02s } .stagger-grid.in-view > *:nth-child(2){ transition-delay: .07s }
.stagger-grid.in-view > *:nth-child(3){ transition-delay: .12s } .stagger-grid.in-view > *:nth-child(4){ transition-delay: .17s }
.stagger-grid.in-view > *:nth-child(5){ transition-delay: .22s } .stagger-grid.in-view > *:nth-child(6){ transition-delay: .27s }
.stagger-grid.in-view > *:nth-child(7){ transition-delay: .32s } .stagger-grid.in-view > *:nth-child(8){ transition-delay: .37s }
.stagger-grid.in-view > *:nth-child(9){ transition-delay: .42s } .stagger-grid.in-view > *:nth-child(10){ transition-delay: .47s }
.stagger-grid.in-view > *:nth-child(11){ transition-delay: .52s } .stagger-grid.in-view > *:nth-child(12){ transition-delay: .57s }

/* ---- Accessibility: reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  html { scroll-behavior: auto; }
}