/* ==========================================================================
   NIRAPPEL NURSERY — UNIFIED SHARED MOTION DESIGN SYSTEM
   Used by both Public Website and Owner Management Portal
   ========================================================================== */

:root {
  /* Motion Curve Tokens */
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-hover: cubic-bezier(0.16, 1, 0.3, 1);

  /* Motion Duration Tokens */
  --duration-fast: 0.2s;
  --duration-base: 0.35s;
  --duration-reveal: 0.55s;
}

/* ==========================================================================
   1. UNIFIED SCROLL REVEAL SYSTEM
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity var(--duration-reveal) var(--ease-out-quint),
              transform var(--duration-reveal) var(--ease-out-quint);
  will-change: opacity, transform;
  backface-visibility: hidden;
  /* Critical GPU Optimization: Disable backdrop-filter during movement to prevent per-frame GPU blur recalculation overhead */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.reveal.left { transform: translate3d(-20px, 0, 0); }
.reveal.right { transform: translate3d(20px, 0, 0); }

.reveal.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
  backdrop-filter: blur(var(--glass-blur, 10px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 10px));
}

/* ==========================================================================
   2. UNIFIED BUTTONS & MICRO-INTERACTIONS
   ========================================================================== */

.btn, .round-btn, .pill, .s-pill, .floating-whatsapp, .nav-item {
  transition: transform var(--duration-fast) var(--ease-hover),
              background-color var(--duration-fast) ease,
              border-color var(--duration-fast) ease,
              box-shadow var(--duration-fast) ease,
              color var(--duration-fast) ease !important;
  will-change: transform;
  backface-visibility: hidden;
}

.btn:hover, .s-pill:hover, .pill:hover {
  transform: translate3d(0, -3px, 0);
}

.btn:active, .s-pill:active, .pill:active {
  transform: translate3d(0, -1px, 0) scale(0.98);
}

/* ==========================================================================
   3. UNIFIED CARD HOVER MECHANICS
   ========================================================================== */

.plant-card, .blog-card, .gallery-card, .pillar-card, .service-card, .info-card, .stat-card, .widget-card, .owner-photo-card, .blog-admin-card {
  transition: transform var(--duration-base) var(--ease-hover),
              box-shadow var(--duration-base) ease,
              border-color var(--duration-base) ease !important;
  will-change: transform;
  backface-visibility: hidden;
}

.plant-card:hover, .blog-card:hover, .gallery-card:hover, .pillar-card:hover, .service-card:hover, .info-card:hover, .stat-card:hover, .widget-card:hover, .owner-photo-card:hover, .blog-admin-card:hover {
  transform: translate3d(0, -5px, 0);
}

/* Image Zoom inside cards */
.plant-card .thumb img, .blog-card .thumb img, .gallery-card img, .photo-frame img, .b-thumb img {
  transition: transform var(--duration-base) var(--ease-hover) !important;
  will-change: transform;
  backface-visibility: hidden;
}

.plant-card:hover .thumb img, .blog-card:hover .thumb img, .gallery-card:hover img, .owner-photo-card:hover .photo-frame img, .blog-admin-card:hover .b-thumb img {
  transform: scale(1.04);
}

/* ==========================================================================
   4. ACCESSIBILITY & REDUCED MOTION SUPPORT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    backdrop-filter: blur(var(--glass-blur, 10px)) !important;
    -webkit-backdrop-filter: blur(var(--glass-blur, 10px)) !important;
  }
}