/* ==========================================================================
   SecurApp Design System — Animations (animations.css)
   GSAP-ready initial states, keyframe animations & motion utilities
   ========================================================================== */

/* ==========================================================================
   1. GSAP-READY INITIAL STATES
   Declare starting transforms/opacity; GSAP animates TO the final state.
   ========================================================================== */

/* --- Fade variants ----------------------------------------------------- */
.fade-in {
  opacity: 0;
}

.fade-up {
  opacity: 0;
  transform: translateY(40px);
}

.fade-down {
  opacity: 0;
  transform: translateY(-30px);
}

.fade-left {
  opacity: 0;
  transform: translateX(50px);
}

.fade-right {
  opacity: 0;
  transform: translateX(-50px);
}

/* --- Scale fade ------------------------------------------------------- */
.fade-scale {
  opacity: 0;
  transform: scale(0.92);
}

.fade-scale-up {
  opacity: 0;
  transform: scale(0.92) translateY(20px);
}

/* --- Blur fade -------------------------------------------------------- */
.fade-blur {
  opacity: 0;
  filter: blur(8px);
}

/* When JS marks elements as "in view" or GSAP finishes, use this class */
.is-visible {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}


/* ==========================================================================
   2. STAGGER CONTAINER
   Wraps children so GSAP can stagger their entrance.
   No CSS animation by default — purely a structural marker.
   ========================================================================== */
.stagger-children > * {
  opacity: 0;
  transform: translateY(24px);
}

/* When container is revealed (GSAP adds .is-staggered) */
.stagger-children.is-staggered > * {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   3. PARALLAX MARKER
   A passive hook for GSAP ScrollTrigger. No CSS animation applied.
   ========================================================================== */
.parallax {
  will-change: transform;
}

.parallax--slow {
  /* Hint for GSAP: slower rate */
  --parallax-speed: 0.3;
}

.parallax--fast {
  --parallax-speed: 0.8;
}


/* ==========================================================================
   4. COUNTER (Animated numbers)
   The element starts at "0" and GSAP tweens .textContent to the target.
   ========================================================================== */
.counter {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  /* Prevent layout shift */
  display: inline-block;
  min-width: 2ch;
}


/* ==========================================================================
   5. FLOAT — Gentle floating animation
   ========================================================================== */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

.float {
  animation: float 5s var(--ease-in-out) infinite;
}

.float--slow {
  animation-duration: 7s;
}

.float--fast {
  animation-duration: 3s;
}

/* Staggered float for multiple elements */
.float--delay-1 { animation-delay: 0.5s; }
.float--delay-2 { animation-delay: 1s; }
.float--delay-3 { animation-delay: 1.5s; }
.float--delay-4 { animation-delay: 2s; }


/* ==========================================================================
   6. PULSE GLOW — Subtle glow pulsing
   ========================================================================== */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 16px var(--glow-color, rgba(81, 112, 255, 0.2)),
                0 0 48px var(--glow-color, rgba(81, 112, 255, 0.08));
  }
  50% {
    box-shadow: 0 0 24px var(--glow-color, rgba(81, 112, 255, 0.35)),
                0 0 72px var(--glow-color, rgba(81, 112, 255, 0.15));
  }
}

.pulse-glow {
  animation: pulse-glow 3s var(--ease-in-out) infinite;
}

/* Blue glow — default accent */
.pulse-glow--blue {
  --glow-color: rgba(81, 112, 255, 0.25);
}

/* Violet and pink — reserved for magIA branding */
.pulse-glow--violet {
  --glow-color: rgba(206, 50, 255, 0.25);
}

.pulse-glow--pink {
  --glow-color: rgba(255, 62, 137, 0.25);
}

/* Dot pulse (for status indicators) */
@keyframes pulse-dot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.6);
  }
}

.pulse-dot {
  animation: pulse-dot 2s var(--ease-in-out) infinite;
}

@keyframes hero-float-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.4);
  }
}


/* ==========================================================================
   7. SLIDE UP — For modals, drawers, notifications
   ========================================================================== */
@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.slide-up {
  animation: slide-up var(--duration-slow) var(--ease-spring) forwards;
}

@keyframes slide-down {
  from {
    opacity: 0;
    transform: translateY(-24px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.slide-down {
  animation: slide-down var(--duration-slow) var(--ease-spring) forwards;
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-right {
  animation: slide-in-right var(--duration-slow) var(--ease-spring) forwards;
}


/* ==========================================================================
   8. REVEAL — Clip-path reveal animation
   ========================================================================== */
@keyframes reveal-up {
  from {
    clip-path: inset(100% 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes reveal-down {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes reveal-left {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes reveal-right {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes reveal-center {
  from {
    clip-path: inset(50% 50% 50% 50%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

.reveal {
  clip-path: inset(100% 0 0 0);
}

.reveal--up {
  clip-path: inset(100% 0 0 0);
}

.reveal--down {
  clip-path: inset(0 0 100% 0);
}

.reveal--left {
  clip-path: inset(0 0 0 100%);
}

.reveal--right {
  clip-path: inset(0 100% 0 0);
}

.reveal--center {
  clip-path: inset(50% 50% 50% 50%);
}

/* When active — GSAP or Intersection Observer adds this */
.reveal.is-revealed {
  animation: reveal-up var(--duration-slower) var(--ease-out) forwards;
}

.reveal--up.is-revealed {
  animation-name: reveal-up;
}

.reveal--down.is-revealed {
  animation-name: reveal-down;
}

.reveal--left.is-revealed {
  animation-name: reveal-left;
}

.reveal--right.is-revealed {
  animation-name: reveal-right;
}

.reveal--center.is-revealed {
  animation-name: reveal-center;
}


/* ==========================================================================
   9. SPIN / ROTATE — Loader & decorative
   ========================================================================== */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.spin {
  animation: spin 1.2s linear infinite;
}

.spin--slow {
  animation-duration: 3s;
}

/* Icon spinner utility */
.icon-spin {
  animation: spin 1s linear infinite;
}


/* ==========================================================================
   10. MARQUEE — Continuous scroll (logos, testimonials)
   ========================================================================== */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.marquee {
  display: flex;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 10%,
    black 90%,
    transparent 100%
  );
}

.marquee__track {
  display: flex;
  gap: var(--space-8);
  animation: marquee 30s linear infinite;
  /* Duplicate content in HTML for seamless loop */
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee--reverse .marquee__track {
  animation-direction: reverse;
}

.marquee--fast .marquee__track {
  animation-duration: 15s;
}

.marquee--slow .marquee__track {
  animation-duration: 50s;
}


/* ==========================================================================
   11. TYPEWRITER — Character-by-character reveal
   ========================================================================== */
@keyframes typewriter-cursor {
  0%, 100% { border-color: var(--color-primary); }
  50%      { border-color: transparent; }
}

.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--color-primary);
  animation: typewriter-cursor 0.8s step-end infinite;
}


/* ==========================================================================
   12. PAGE-SPECIFIC KEYFRAMES
   Consolidated here per CLAUDE.md — single source for all @keyframes.
   ========================================================================== */

/* Skeleton loading shimmer (components.css) */
@keyframes skeleton-shimmer {
  100% {
    transform: translateX(100%);
  }
}

/* FAQ accordion open (plans page) */
@keyframes faq-open {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Contact form step slide (contact page) */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* magIA decorative pulse (magia page) */
@keyframes magia-pulse {
  0%, 100% { opacity: 0.4; transform: translateY(-50%) scale(1); }
  50% { opacity: 0.7; transform: translateY(-50%) scale(1.15); }
}

/* magIA chat typing dots (magia page) */
@keyframes magia-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

/* SVG stroke draw — stats cards (modules page) */
@keyframes stroke-draw {
  from { stroke-dashoffset: var(--stroke-length, 100); }
  to   { stroke-dashoffset: 0; }
}

/* Evolution — audio bar bounce (about page) */
@keyframes audio-bar-bounce {
  0%   { transform: scaleY(0.4); }
  100% { transform: scaleY(1); }
}

/* Plan card — plastic light sweep on hover */
@keyframes card-light-sweep {
  0% {
    transform: translateX(-100%) skewX(-15deg);
  }
  100% {
    transform: translateX(300%) skewX(-15deg);
  }
}

/* Evolution — shimmer highlight on glass cards (about page) */
@keyframes evolution-shimmer {
  0%, 100% { background-position: 200% center; }
  50%      { background-position: -200% center; }
}

/* Evolution — breathing gradient for CSS fallback (about page) */
@keyframes evolution-breathe {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.05); }
}


/* ==========================================================================
   13. BLOB / BACKGROUND MORPHS — Decorative
   ========================================================================== */
@keyframes morph {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  25% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
  50% {
    border-radius: 50% 60% 30% 60% / 30% 40% 70% 60%;
  }
  75% {
    border-radius: 60% 30% 60% 50% / 60% 70% 40% 30%;
  }
}

.blob {
  animation: morph 12s var(--ease-in-out) infinite;
  will-change: border-radius;
}

.blob--fast {
  animation-duration: 6s;
}


/* ==========================================================================
   14. PERFORMANCE HINTS
   ========================================================================== */

/* Promote commonly animated elements to GPU layer */
.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

.gpu {
  transform: translateZ(0);
  backface-visibility: hidden;
}


/* ==========================================================================
   15. VIEW TRANSITION — Theme circle reveal
   ========================================================================== */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 9999;
  animation: theme-reveal var(--duration-slower) var(--ease-smooth) forwards;
}

@keyframes theme-reveal {
  from { clip-path: circle(0px at var(--theme-x, 50%) var(--theme-y, 50%)); }
  to   { clip-path: circle(var(--theme-r, 150%) at var(--theme-x, 50%) var(--theme-y, 50%)); }
}


/* ==========================================================================
   16. FLAME BORDER — Rotating conic gradient for pricing cards
   ========================================================================== */
@keyframes flame-rotate {
  to { transform: rotate(1turn); }
}


/* ==========================================================================
   17. ERROR PAGE — Flame reveal + floating numbers
   ========================================================================== */

/* Flame video ignition (gas stove) */
@keyframes error-flame-reveal {
  0% {
    opacity: 0;
    transform: scaleY(0.3);
  }
  50% {
    opacity: 0.85;
    transform: scaleY(1.06);
  }
  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* Floating numbers — pyramid tilt */
@keyframes error-float-left {
  0%, 100% { transform: translateY(0) rotate(-12deg); }
  50% { transform: translateY(-14px) rotate(-15deg); }
}

@keyframes error-float-right {
  0%, 100% { transform: translateY(0) rotate(12deg); }
  50% { transform: translateY(-14px) rotate(15deg); }
}

@keyframes error-brand-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.04); }
}


/* ==========================================================================
   18. REDUCED MOTION — Disable ALL animations
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* Kill all keyframe animations */
  .float,
  .pulse-glow,
  .pulse-dot,
  .slide-up,
  .slide-down,
  .slide-in-right,
  .reveal.is-revealed,
  .reveal--up.is-revealed,
  .reveal--down.is-revealed,
  .reveal--left.is-revealed,
  .reveal--right.is-revealed,
  .reveal--center.is-revealed,
  .spin,
  .marquee__track,
  .blob,
  .typewriter,
  .evolution--css-fallback .evolution__canvas-wrap {
    animation: none !important;
  }

  /* Disable SVG stroke draw */
  .modules-stats__icon svg * {
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }

  /* Remove GSAP initial states so content is visible */
  .fade-in,
  .fade-up,
  .fade-down,
  .fade-left,
  .fade-right,
  .fade-scale,
  .fade-scale-up,
  .fade-blur,
  .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  /* Remove clip-path hiding */
  .reveal,
  .reveal--up,
  .reveal--down,
  .reveal--left,
  .reveal--right,
  .reveal--center {
    clip-path: none !important;
  }

  /* Disable view-transition animation */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }

  /* No will-change overhead */
  .parallax,
  .will-change-transform,
  .will-change-opacity {
    will-change: auto !important;
  }

  /* Disable plan card light sweep */
  .card--plan::after {
    animation: none !important;
    opacity: 0 !important;
  }

  /* Disable flame border animation */
  .pricing-flame::before,
  .pricing-flame::after {
    animation: none !important;
  }

  .about-vision__logo-wrap::before,
  .about-vision__logo-wrap::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ── Logo sparkles — fade in/out in place, no movement ── */
@keyframes sparkle-a {
  0%, 100% { opacity: 0; }
  35%, 65% { opacity: 1; }
}

@keyframes sparkle-b {
  0%, 100% { opacity: 0; }
  30%, 60% { opacity: 1; }
}