/* ═══════════════════════════════════════════════════════
   GARG CHILD HOSPITAL — Animations
   File: assets/css/animations.css
   All @keyframes and animation classes here
═══════════════════════════════════════════════════════ */

/* ── KEYFRAMES ─────────────────────────────────────── */
@keyframes fadeUp       { from { opacity:0; transform:translateY(28px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeLeft     { from { opacity:0; transform:translateX(-28px)} to { opacity:1; transform:translateX(0)} }
@keyframes fadeRight    { from { opacity:0; transform:translateX( 28px)} to { opacity:1; transform:translateX(0)} }
@keyframes ticker       { 0%   { transform:translateX(0) }  100%{ transform:translateX(-50%) } }
@keyframes heartbeat    { 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.5) } }
@keyframes floatBounce  { 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-18px) } }
@keyframes wiggle       { 0%,100%{ transform:rotate(-5deg) } 50%{ transform:rotate(5deg) } }
@keyframes spin         { from{ transform:rotate(0) } to{ transform:rotate(360deg) } }
@keyframes pulse        { 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.6; transform:scale(1.4) } }
@keyframes slideInDown  { from{ opacity:0; transform:translateY(-20px) } to{ opacity:1; transform:translateY(0) } }
@keyframes pageEnter    { from{ opacity:0; transform:translateY(20px) } to{ opacity:1; transform:translateY(0) } }
@keyframes waPulse      { 0%,100%{ box-shadow:0 6px 22px rgba(37,211,102,.48), 4px 4px 0 #128C7E, 0 0 0 0 rgba(37,211,102,.4) } 70%{ box-shadow:0 6px 22px rgba(37,211,102,.48), 4px 4px 0 #128C7E, 0 0 0 16px rgba(37,211,102,0) } }
@keyframes doodleFloat  { 0%,100%{ transform:translateY(0) rotate(0) } 33%{ transform:translateY(-18px) rotate(8deg) } 66%{ transform:translateY(10px) rotate(-5deg) } }
@keyframes since-wiggle { 0%,100%{ transform:rotate(-4deg) } 50%{ transform:rotate(4deg) } }

/* ── SCROLL REVEAL CLASSES ─────────────────────────── */
/* Applied by reveal.js when elements enter viewport   */
.reveal        { opacity:0; transform:translateY(28px);   transition:opacity .65s ease, transform .65s ease; }
.reveal-left   { opacity:0; transform:translateX(-28px);  transition:opacity .65s ease, transform .65s ease; }
.reveal-right  { opacity:0; transform:translateX( 28px);  transition:opacity .65s ease, transform .65s ease; }
.reveal.visible,
.reveal-left.visible,
.reveal-right.visible { opacity:1; transform:none; }

/* Delay helpers */
.delay-1 { transition-delay: .05s !important; }
.delay-2 { transition-delay: .10s !important; }
.delay-3 { transition-delay: .15s !important; }
.delay-4 { transition-delay: .20s !important; }
.delay-5 { transition-delay: .25s !important; }
.delay-6 { transition-delay: .30s !important; }
.delay-7 { transition-delay: .35s !important; }
.delay-8 { transition-delay: .40s !important; }

/* ── HERO ANIMATIONS ───────────────────────────────── */
.hero-eyebrow { animation: fadeUp .8s both; }
.hero h1      { animation: fadeUp .9s .1s both; }
.hero-sub     { animation: fadeUp .9s .2s both; }
.hero-btns    { animation: fadeUp .9s .3s both; }
.hero-badges  { animation: fadeUp .9s .4s both; }
.hero-card    { animation: fadeRight .9s .2s both; }

/* ── DOODLE ANIMATIONS ─────────────────────────────── */
.doodle         { animation: doodleFloat 6s ease-in-out infinite; }
.doodle.d-star  { animation: doodleFloat 5s ease-in-out infinite; }
.doodle.d-heart { animation: heartbeat 2.5s ease-in-out infinite; }
.doodle.d-plus  { animation: spin 8s linear infinite; }
.doodle.d-circ  { animation: floatBounce 4s ease-in-out infinite; }

/* ── COMPONENT ANIMATIONS ──────────────────────────── */
.facility-icon  { animation: floatBounce 4s ease-in-out infinite; }
.since-badge    { animation: since-wiggle 4s ease-in-out infinite; }
.wa-float       { animation: waPulse 3s ease infinite; }
.ticker-dot     { animation: heartbeat 2s ease infinite; }
.hero-eyebrow .dot { animation: heartbeat 2s infinite; }

/* Stagger facility icons */
.facility-card:nth-child(2) .facility-icon { animation-delay: -1.3s; }
.facility-card:nth-child(3) .facility-icon { animation-delay: -2.6s; }
.facility-card:nth-child(4) .facility-icon { animation-delay:  -.65s; }
.facility-card:nth-child(5) .facility-icon { animation-delay: -1.95s; }
.facility-card:nth-child(6) .facility-icon { animation-delay: -3.25s; }