/* ═══════════════════════════════════════════
   ISUFST CareHub — Premium 2026 Animations
   ═══════════════════════════════════════════ */

/* ── Fade In ──────────────────────────────── */
@keyframes fadeIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .8s ease-out}

/* ── Slide Up ─────────────────────────────── */
@keyframes slideUp{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}
.slide-up{animation:slideUp .6s ease-out forwards;opacity:0}

/* ── Slide In Left/Right ──────────────────── */
@keyframes slideInLeft{from{opacity:0;transform:translateX(-60px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(60px)}to{opacity:1;transform:translateX(0)}}
.slide-in-left{animation:slideInLeft .7s cubic-bezier(.4,0,.2,1)}
.slide-in-right{animation:slideInRight .7s cubic-bezier(.4,0,.2,1)}

/* ── Bounce ───────────────────────────────── */
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.bounce{animation:bounce 2.5s ease-in-out infinite}

/* ── Heartbeat ────────────────────────────── */
@keyframes heartbeat{0%,100%{transform:scale(1)}14%{transform:scale(1.06)}28%{transform:scale(1)}42%{transform:scale(1.04)}70%{transform:scale(1)}}
.heartbeat{animation:heartbeat 2s ease-in-out infinite}

/* ── Pulse ────────────────────────────────── */
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.9}}
.pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}

/* ── Glow ─────────────────────────────────── */
@keyframes glow{0%,100%{box-shadow:0 0 20px rgba(37,99,235,.2)}50%{box-shadow:0 0 40px rgba(37,99,235,.4)}}
.glow{animation:glow 3s ease-in-out infinite}

/* ── Float ────────────────────────────────── */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
.float{animation:float 3s ease-in-out infinite}

/* ── Rotate ───────────────────────────────── */
@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.rotate{animation:rotate 20s linear infinite}

/* ── Fade In Scale ────────────────────────── */
@keyframes fadeInScale{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.fade-in-scale{animation:fadeInScale .5s ease-out}

/* ── Shimmer ──────────────────────────────── */
@keyframes shimmer{0%{background-position:-1000px 0}100%{background-position:1000px 0}}
.shimmer{background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 100%);background-size:1000px 100%;animation:shimmer 3s infinite}

/* ── Gradient Shift ───────────────────────── */
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.gradient-animate{background-size:200% 200%;animation:gradientShift 5s ease infinite}

/* ── Spin ─────────────────────────────────── */
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.spin{animation:spin 1s linear infinite}

/* ── Rubber Band ──────────────────────────── */
@keyframes rubberBand{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}100%{transform:scale3d(1,1,1)}}
.rubber-band{animation:rubberBand 1s ease-in-out}

/* ── Swing ────────────────────────────────── */
@keyframes swing{20%{transform:rotate3d(0,0,1,12deg)}40%{transform:rotate3d(0,0,1,-8deg)}60%{transform:rotate3d(0,0,1,4deg)}80%{transform:rotate3d(0,0,1,-4deg)}100%{transform:rotate3d(0,0,1,0deg)}}
.swing{transform-origin:top center;animation:swing 1s ease-in-out}

/* ── Shake ────────────────────────────────── */
@keyframes shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-4px)}20%,40%,60%,80%{transform:translateX(4px)}}
.shake{animation:shake .5s ease-in-out}

/* ── Typing ───────────────────────────────── */
@keyframes typing{from{width:0}to{width:100%}}
@keyframes blink{from,to{border-color:transparent}50%{border-color:#2563eb}}
.typing{overflow:hidden;white-space:nowrap;border-right:3px solid #2563eb;animation:typing 3.5s steps(40,end),blink .75s step-end infinite}

/* ── Scale Hover ──────────────────────────── */
.scale-hover{transition:transform .3s ease-in-out}
.scale-hover:hover{transform:scale(1.05)}

/* ── Hover Lift ───────────────────────────── */
.hover-lift{transition:transform .3s ease,box-shadow .3s ease}
.hover-lift:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,.15)}

/* ── Smooth Transition ────────────────────── */
.smooth-transition{transition:all .3s cubic-bezier(.4,0,.2,1)}

/* ── Stagger Children ─────────────────────── */
.stagger-children>*{animation:fadeIn .6s ease-out both}
.stagger-children>*:nth-child(1){animation-delay:.1s}
.stagger-children>*:nth-child(2){animation-delay:.2s}
.stagger-children>*:nth-child(3){animation-delay:.3s}
.stagger-children>*:nth-child(4){animation-delay:.4s}
.stagger-children>*:nth-child(5){animation-delay:.5s}
.stagger-children>*:nth-child(6){animation-delay:.6s}

/* ── Premium 2026 Effects ─────────────────── */

/* Morphing blob */
@keyframes morphBlob{0%,100%{border-radius:60% 40% 30% 70%/60% 30% 70% 40%}50%{border-radius:30% 60% 70% 40%/50% 60% 30% 60%}}
.morph-blob{animation:morphBlob 8s ease-in-out infinite}

/* Gradient text shimmer */
@keyframes textShimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.text-shimmer{background-size:200% auto;animation:textShimmer 4s linear infinite}

/* Magnetic hover */
.magnetic{transition:transform .3s cubic-bezier(.25,.46,.45,.94)}

/* Card tilt on hover */
.tilt-card{transition:transform .5s cubic-bezier(.16,1,.3,1);transform-style:preserve-3d}
.tilt-card:hover{transform:perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-4px)}

/* Slide reveal border */
@keyframes borderReveal{0%{width:0}100%{width:100%}}
.border-reveal::after{content:'';position:absolute;bottom:0;left:0;height:2px;width:0;background:linear-gradient(90deg,#2563eb,#10b981);transition:width .4s cubic-bezier(.16,1,.3,1)}
.border-reveal:hover::after{width:100%}

/* Parallax scroll */
.parallax-slow{will-change:transform}

/* Smooth underline */
.link-underline{position:relative;text-decoration:none}
.link-underline::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background:currentColor;transition:width .3s ease}
.link-underline:hover::after{width:100%}

/* Glass card shimmer line */
@keyframes glassShimmer{0%{transform:translateX(-100%)}100%{transform:translateX(200%)}}
.glass-shimmer{position:relative;overflow:hidden}
.glass-shimmer::after{content:'';position:absolute;top:0;left:0;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent);animation:glassShimmer 4s ease-in-out infinite}

/* Notification dot pulse */
@keyframes notifPulse{0%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}70%{box-shadow:0 0 0 8px rgba(239,68,68,0)}100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}}
.notif-pulse{animation:notifPulse 2s infinite}

/* Page load curtain reveal */
@keyframes curtainReveal{0%{transform:scaleY(1)}100%{transform:scaleY(0)}}
.curtain-reveal{transform-origin:top;animation:curtainReveal .8s ease-out forwards;animation-delay:.2s}

/* Counter number pop */
@keyframes numberPop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
.number-pop{animation:numberPop .6s ease-out}

/* Skeleton loading */
@keyframes skeletonWave{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;animation:skeletonWave 1.5s ease-in-out infinite;border-radius:4px}

/* Ripple effect */
@keyframes ripple{to{transform:scale(4);opacity:0}}
.ripple{position:relative;overflow:hidden}
.ripple::after{content:'';position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.3) 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:scale(10);opacity:0;transition:transform .5s,opacity 1s}
.ripple:active::after{transform:scale(0);opacity:.3;transition:0s}

/* Focus ring */
.focus-ring:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.2)}

/* Fix for global CSS frameworks (like Tailwind Forms) inadvertently showing SweetAlert2 hidden inputs */
.swal2-popup .swal2-select:not([style*="display: flex"]),
.swal2-popup .swal2-input:not([style*="display: flex"]),
.swal2-popup .swal2-file:not([style*="display: flex"]),
.swal2-popup .swal2-textarea:not([style*="display: flex"]),
.swal2-popup .swal2-radio:not([style*="display: flex"]),
.swal2-popup .swal2-checkbox:not([style*="display: flex"]) {
    display: none !important;
}

.swal2-toast .swal2-select,
.swal2-toast .swal2-input,
.swal2-toast .swal2-textarea,
.swal2-toast .swal2-radio,
.swal2-toast .swal2-checkbox,
.swal2-toast .swal2-file {
    display: none !important;
}