/* ==========================================================================
   Calm, Sweet & Smooth Animations (0.5s Easing)
   ========================================================================== */

/* --- 1. Smooth Button Transitions --- */
.btn-get-app {
  transition: background 0.5s cubic-bezier(0.25, 1, 0.5, 1),
              color 0.5s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
              border-color 0.5s ease !important;
  will-change: transform;
}

.btn-get-app:hover {
  transform: translateY(-2px);
  background: white !important;
  color: black !important;
}

.btn-get-app i {
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), color 0.5s ease !important;
}

.btn-get-app:hover i {
  transform: scale(1.1) translateX(2px);
  color: black !important;
}

.btn-hello, .btn-notify {
  transition: background 0.5s cubic-bezier(0.25, 1, 0.5, 1),
              color 0.5s cubic-bezier(0.25, 1, 0.5, 1),
              transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.btn-hello:hover, .btn-notify:hover {
  transform: translateY(-2px);
}

.icon-circle {
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
              background 0.5s ease,
              color 0.5s ease !important;
}

.btn-hello:hover .icon-circle,
.btn-notify:hover .icon-circle {
  transform: scale(1.08);
}

/* Button Active Press */
button:active, .btn-get-app:active, .btn-hello:active, .btn-notify:active {
  transform: scale(0.97) translateY(0) !important;
  transition: transform 0.15s ease !important;
}

/* --- 2. Framer Scroll-Driven Text Reveal --- */
.scroll-word {
  display: inline-block;
  opacity: 0.15;
  will-change: opacity, transform;
  margin-right: 0.25em;
  transition: color 0.4s ease;
}

/* --- 3. Feature Card 3D Tilt & Lighting --- */
.feature-card {
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), 
              border-color 0.5s ease, 
              box-shadow 0.5s ease !important;
  will-change: transform;
}

.feature-card:hover {
  border-color: rgba(31, 174, 100, 0.35) !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5), 0 0 30px rgba(31, 174, 100, 0.15) !important;
}

.about-divider .line {
  transform-origin: left center;
  will-change: transform;
}

/* --- 3. Hero Heading & Accent Motion --- */
.serif-italic {
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), color 0.5s ease;
}

.hero-heading:hover .serif-italic {
  transform: translateY(-2px);
  color: var(--color-accent);
}

/* --- 3. CTA Bar Subtle Elevation --- */
.cta-bar {
  transition: border-color 0.5s ease,
              background 0.5s ease,
              transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.cta-bar:hover {
  border-color: rgba(31, 174, 100, 0.35) !important;
  background: rgba(0, 0, 0, 0.45) !important;
  transform: translateY(-1px);
}

/* --- 4. Feature Cards Calm Motion --- */
.feature-card {
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1),
              border-color 0.5s ease !important;
}

.feature-card:hover {
  transform: translateY(-3px);
}

.feature-nav-btn {
  transition: background 0.5s ease,
              color 0.5s ease,
              transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.feature-nav-btn:hover {
  color: #E2F86C !important;
  background: rgba(31, 174, 100, 0.1) !important;
  transform: translateX(4px);
}

/* --- 5. Navbar & Brand --- */
.navbar {
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.5s ease;
}

.navbar-brand {
  transition: color 0.5s ease, transform 0.5s ease;
  display: inline-block;
}

.navbar-brand:hover {
  color: var(--color-accent);
}

.dropdown a {
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease !important;
}

.dropdown a:hover {
  background: rgba(31, 174, 100, 0.08) !important;
  color: var(--color-accent) !important;
  transform: translateX(3px);
}

/* --- 6. Pulse & Utility Animations --- */
@keyframes livePulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.12);
  }
}
.live-pulse {
  animation: livePulse 2s ease-in-out infinite;
}

/* --- 7. Premium Typography & Kinetic Animation Helpers --- */
.hero-heading .line-mask {
  overflow: hidden;
  perspective: 1200px;
  -webkit-perspective: 1200px;
}

.hero-heading .line-content {
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
}

.features-heading {
  perspective: 1000px;
}

.features-heading-line {
  display: block;
  opacity: 0;
  will-change: transform, opacity, letter-spacing, filter;
}

.footer-giant-brand .brand-pinwheel-icon svg {
  transition: none !important; /* Disable CSS transition so GSAP ScrollTrigger can rotate smoothly */
  will-change: transform;
}

.footer-giant-brand .brand-text {
  will-change: transform, opacity;
}


/* Reduced Motion Fallback */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}