html{
    font-size: 68.75%;
    scroll-behavior: smooth;
}

body{
    font-family: 'Poppins', 'Segoe UI' !important;
    font-size: 1.5rem;
    background-color: #F9FAFB;
    height: 100%;
    min-height: 100vh;
    overflow-x: hidden;
}

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Poppins' , 'Segoe UI' !important;
}

section:nth-child(odd){
    background: #ffffffb2;
}


/* Reveal Base State — a subtle rise only (no blur/scale): animating those on
   many large elements during scroll is a big mobile jank source. */
.reveal-hidden {
    opacity: 0;
    transform: translateY(14px);
    /* Only opacity + transform transition (no `all`), 0.5s — cheap to
       composite and quick enough that it reads as a gentle rise. */
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Reveal Active State (Triggered by JS) */
.reveal-active {
    opacity: 1;
    transform: translateY(0);
}

/* Specific Hover "Float" Animation for Cards */
.feature-card:hover, .product-card:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 20px 40px rgba(11, 60, 93, 0.2);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Parallax Orb Effect for Background (referencing your productDetail.html orbs) */
.orb1, .orb2, .orb3 {
    animation: float-slow 15s infinite ease-in-out alternate;
}

@keyframes float-slow {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(50px, 100px) rotate(15deg); }
}

/* Responsive utilities */
@media (max-width: 1440px) {
    html {
        font-size: 60%;
    }
}

@media (max-width: 1200px) {
    html {
        font-size: 58%;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 56%;
    }
    
    body {
        font-size: 1.4rem;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 52%;
    }
    
    body {
        font-size: 1.3rem;
    }
}

/* Prevent horizontal scroll on mobile */
@media (max-width: 768px) {
    body, html {
        max-width: 100vw;
        overflow-x: hidden;
    }
}
/* ============================================================
   MOBILE PERFORMANCE — user pages
   Shorten long transitions on small screens and honour
   prefers-reduced-motion (battery + lag win on phones).
   ============================================================ */
@media (max-width: 768px) {
  body * {
    transition-duration: 0.2s !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* See the note in admin/assets/css/general.css: a blanket reset removed
     every hover transition and spinner. Only scroll smoothing and long
     decorative loops are suppressed. */
  html {
    scroll-behavior: auto !important;
  }
  *,
  *::before,
  *::after {
    transition-duration: 120ms !important;
  }
}