@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ✅ NEW: Slide up — used for staggered scroll reveals */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ✅ NEW: Slide in from left — for profile intro image */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ✅ NEW: Slide in from right — for profile intro text */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ✅ NEW: Subtle scale pop — for stat numbers and badges */
@keyframes scalePop {
  0%   { opacity: 0; transform: scale(0.88); }
  70%  { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

/* ✅ NEW: Gentle pulse glow — for live dot and CTA buttons */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); }
  50%       { box-shadow: 0 0 0 10px rgba(249, 115, 22, 0); }
}

/* ✅ KEPT + IMPROVED: Blink → smoother pulse ring for live dot */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ✅ NEW: Hero text staggered entry */
@keyframes fadeSlideDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ✅ NEW: Shimmer sweep — for card top glow line */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ─────────────────────────────────────────
   2. BASE ELEMENT ANIMATIONS
───────────────────────────────────────── */

/* ✅ KEPT: Hero fade in on page load */
.hero {
  animation: fadeIn 1.2s ease both;
}

/* ✅ KEPT: Generic fade-in class */
.fade-in {
  animation: fadeIn 1s ease both;
}

/* ─────────────────────────────────────────
   3. SCROLL REVEAL SYSTEM
   Elements start hidden, JS adds .revealed
───────────────────────────────────────── */

/* ✅ NEW: Base hidden state */
.scroll-reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity  0.6s ease var(--delay, 0s),
    transform 0.6s ease var(--delay, 0s);
}

/* ✅ NEW: Triggered state (added by IntersectionObserver in JS) */
.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ─────────────────────────────────────────
   4. NAVBAR
───────────────────────────────────────── */

/* ✅ NEW: Navbar slides down on page load */
.navbar {
  animation: fadeSlideDown 0.6s ease both;
}

/* ✅ NEW: Nav links — underline slide-in on hover */
nav a {
  position: relative;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 50%;
  width: 0; height: 2px;
  background: var(--clr-sky, #38bdf8);
  border-radius: 2px;
  transition: width 0.3s ease, left 0.3s ease;
}

nav a:hover::after,
nav a.nav-active::after {
  width: 60%;
  left: 20%;
}

/* ─────────────────────────────────────────
   5. FEATURE CARDS
───────────────────────────────────────── */

/* ✅ IMPROVED: Smoother cubic-bezier, added shadow + border glow */
.feature-card {
  transition:
    transform  0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.35s ease;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  border-color: rgba(56, 189, 248, 0.28);
}

/* ✅ NEW: Top glow streak animates on hover */
.feature-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #38bdf8, transparent);
  background-size: 200% auto;
  opacity: 0;
  transition: opacity 0.35s ease;
}

.feature-card:hover::before {
  opacity: 1;
  animation: shimmer 1.6s linear infinite;
}

/* ✅ NEW: Card icon bounces subtly on card hover */
.feature-card:hover .card-icon {
  animation: scalePop 0.4s ease both;
}

/* ─────────────────────────────────────────
   6. STAT CARDS
───────────────────────────────────────── */

/* ✅ IMPROVED: Added box-shadow and border transition */
.stat {
  transition:
    transform  0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.stat:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  border-color: rgba(249, 115, 22, 0.35);
}

/* ✅ NEW: Stat numbers pop in when revealed */
.stat.revealed h2 {
  animation: scalePop 0.5s 0.2s ease both;
}

/* ─────────────────────────────────────────
   7. GALLERY IMAGES
───────────────────────────────────────── */

/* ✅ IMPROVED: Smoother + added shadow and border glow */
.gallery img {
  transition:
    transform  0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.gallery img:hover {
  transform: scale(1.06);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
  border-color: rgba(56, 189, 248, 0.5);
}

/* ─────────────────────────────────────────
   8. HERO IMAGES
───────────────────────────────────────── */

/* ✅ IMPROVED: Lift + glow ring */
.hero-img {
  transition:
    transform  0.4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.4s ease;
}

.hero-img:hover {
  transform: scale(1.06) translateY(-5px);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.65),
    0 0 0 2px rgba(56, 189, 248, 0.6);
}

/* ─────────────────────────────────────────
   9. BUTTONS
───────────────────────────────────────── */

/* ✅ IMPROVED: Transition covers transform, shadow and background */
.btn {
  transition:
    background  0.3s ease,
    transform   0.3s ease,
    box-shadow  0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(249, 115, 22, 0.55);
  animation: pulseGlow 1.8s ease infinite;
}

.btn-ghost:hover {
  transform: translateY(-3px);
}

/* ─────────────────────────────────────────
   10. LIST ITEMS
───────────────────────────────────────── */

/* ✅ IMPROVED: Slide right + border highlight on hover */
ul li {
  transition:
    transform    0.3s ease,
    background   0.3s ease,
    border-color 0.3s ease;
}

ul li:hover {
  transform: translateX(7px);
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(56, 189, 248, 0.28);
}

/* ─────────────────────────────────────────
   11. TABLE ROWS
───────────────────────────────────────── */

/* ✅ NEW: Subtle row highlight on hover */
table tr {
  transition: background 0.25s ease;
}

table tr:hover {
  background: rgba(56, 189, 248, 0.06);
}

/* ─────────────────────────────────────────
   12. FOOTER LINKS
───────────────────────────────────────── */

/* ✅ NEW: Indent slide + color on hover */
.footer-section a {
  transition:
    color       0.3s ease,
    padding-left 0.3s ease;
}

.footer-section a:hover {
  color: #38bdf8;
  padding-left: 5px;
}

/* ─────────────────────────────────────────
   13. SECTION BLOCKS (inner pages)
───────────────────────────────────────── */

/* ✅ NEW: Subtle lift on section blocks */
.section-block {
  transition:
    box-shadow   0.35s ease,
    border-color 0.35s ease;
}

.section-block:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  border-color: rgba(56, 189, 248, 0.15);
}

/* ─────────────────────────────────────────
   14. PROFILE HERO IMAGE (rohit.html)
───────────────────────────────────────── */

/* ✅ NEW: Smooth scale + glow on profile image */
.profile-hero-img {
  transition:
    transform  0.4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.4s ease;
}

.profile-hero-img:hover {
  transform: scale(1.03);
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.6),
    0 0 0 2px rgba(56, 189, 248, 0.5);
}

/* ─────────────────────────────────────────
   15. LIVE DOT
───────────────────────────────────────── */

/* ✅ IMPROVED: Pulse ring (replaces basic blink) */
.dot {
  animation: pulse-ring 1.6s ease-out infinite;
}

/* ─────────────────────────────────────────
   16. PERFORMANCE SAFEGUARD
   Respects user's reduced-motion preference
───────────────────────────────────────── */

/* ✅ NEW: Accessibility — disables motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}