/* ============================================================
   ANIMATIONS & MOTION ENGINE (Pure Vanilla CSS)
   ============================================================ */

:root {
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Scroll Reveal Triggers */
.reveal-fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-expo), transform 0.7s var(--ease-expo);
  will-change: opacity, transform;
}

.reveal-fade-in {
  opacity: 0;
  transition: opacity 0.65s var(--ease-expo);
  will-change: opacity;
}

.reveal-scale-up {
  opacity: 0;
  transform: scale(0.94) translateY(20px);
  transition: opacity 0.75s var(--ease-expo), transform 0.75s var(--ease-expo);
  will-change: opacity, transform;
}

/* Section-heading treatment: rises and sharpens from a slight blur into focus
   (mirrors GWHead/DMSectionHead/GCHead's blurUp variant). */
.reveal-blur-up {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(10px);
  transition: opacity 0.8s var(--ease-expo), transform 0.8s var(--ease-expo), filter 0.8s var(--ease-expo);
  will-change: opacity, transform, filter;
}
.reveal-blur-up.is-visible {
  filter: blur(0px) !important;
}

.reveal-slide-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.75s var(--ease-expo), transform 0.75s var(--ease-expo);
  will-change: opacity, transform;
}

.reveal-slide-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.75s var(--ease-expo), transform 0.75s var(--ease-expo);
  will-change: opacity, transform;
}

/* Visible active state */
.is-visible {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
}

/* Stagger delay utility classes */
.delay-1 { transition-delay: 0.08s !important; }
.delay-2 { transition-delay: 0.16s !important; }
.delay-3 { transition-delay: 0.24s !important; }
.delay-4 { transition-delay: 0.32s !important; }
.delay-5 { transition-delay: 0.40s !important; }
.delay-6 { transition-delay: 0.48s !important; }
.delay-7 { transition-delay: 0.56s !important; }
.delay-8 { transition-delay: 0.64s !important; }

/* Continuous floating animation */
.float-slow {
  animation: floatSlow 4.5s ease-in-out infinite alternate;
}

.float-subtle {
  animation: floatSubtle 3.8s ease-in-out infinite alternate;
}

@keyframes floatSlow {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-8px); }
}

@keyframes floatSubtle {
  0% { transform: translateY(0px); }
  100% { transform: translateY(-5px); }
}

/* Live beacon pulsing */
.pulse-beacon {
  animation: pulseBeacon 1.8s ease-in-out infinite;
}

@keyframes pulseBeacon {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--g-green, #34A853) 24%, transparent);
  }
  50% {
    transform: scale(1.25);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--g-green, #34A853) 45%, transparent);
  }
}

/* 3D Orbit Carousel perspective container */
.orbit-perspective-wrap {
  perspective: 1200px;
  transform-style: preserve-3d;
}

/* Smooth Accordion Height */
.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.38s var(--ease-expo), opacity 0.38s ease;
  opacity: 0;
}

.accordion-content.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

.accordion-inner {
  overflow: hidden;
}

/* Modal lightbox backdrop */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 22, 40, 0.75);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-backdrop.is-active {
  opacity: 1;
  pointer-events: auto;
}

.modal-dialog {
  position: relative;
  width: 90%;
  max-width: 860px;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.92);
  transition: transform 0.3s var(--ease-expo);
}

.modal-backdrop.is-active .modal-dialog {
  transform: scale(1);
}

.modal-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: none;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.35);
}

/* Navbar logo shrinks 62px -> 52px on scroll (React drives this via a prop;
   here it rides the existing .is-scrolled class toggle). */
.amyntas-exact-brand-logo {
  height: 62px;
}
.navbar-fixed-header.is-scrolled .amyntas-exact-brand-logo {
  height: 52px;
}

/* [hidden] must win over the JSX-ported `.contact-success-state{display:flex}`
   (and similar toggled-visibility blocks) — author class rules otherwise
   beat the UA [hidden] default. */
[hidden] {
  display: none !important;
}

/* Pricing plan card — collapsed feature rows beyond the first 7 (matches
   PricingSection.jsx's expand/collapse behaviour). */
.plan-features-list .feature-row--extra {
  display: none;
}
.plan-features-list.is-expanded .feature-row--extra {
  display: flex;
}

/* Gemini video lightbox (.gw-vs-modal-backdrop) — in React this element only
   mounts when open (conditional JSX), so the copied CSS has no closed state;
   the static site keeps it in the DOM and toggles .is-active via JS instead. */
.gw-vs-modal-backdrop {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.gw-vs-modal-backdrop.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile nav drawer open/close (framer animates height:0 -> 'auto' in React;
   grid-template-rows gives the same effect without measuring JS). */
.mobile-nav-drawer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.25s ease, opacity 0.25s ease;
}
.mobile-nav-drawer > * {
  min-height: 0;
  overflow: hidden;
}
.mobile-nav-drawer.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
}

/* 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;
  }
}