/* ============================================================
   CondoFAST — Animations & micro-interactions
   ============================================================ */

/* ---------- Scroll reveal (driven by js/animations.js) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger helpers */
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"] { transition-delay: 0.4s; }
.reveal[data-delay="5"] { transition-delay: 0.5s; }

/* ---------- Hero floating gradient orbs ---------- */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.45;
  pointer-events: none;
}
.orb--1 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(79,142,247,0.55), transparent 70%);
  top: -120px; right: -80px;
  animation: orb-drift-1 18s ease-in-out infinite alternate;
}
.orb--2 {
  width: 420px; height: 420px;
  background: radial-gradient(circle, rgba(124,58,237,0.5), transparent 70%);
  bottom: -140px; left: -100px;
  animation: orb-drift-2 22s ease-in-out infinite alternate;
}
.orb--3 {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(34,197,94,0.18), transparent 70%);
  top: 45%; left: 42%;
  animation: orb-drift-3 26s ease-in-out infinite alternate;
}

@keyframes orb-drift-1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-70px, 60px) scale(1.12); }
}
@keyframes orb-drift-2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(80px, -50px) scale(1.08); }
}
@keyframes orb-drift-3 {
  from { transform: translate(0, 0); }
  to   { transform: translate(-60px, -70px); }
}

/* ---------- CTA gradient border shimmer ---------- */
.btn--primary::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}
.btn--primary:hover::before { left: 160%; }

/* ---------- 3D tilt on feature cards (JS sets --rx / --ry) ---------- */
.tilt {
  transform-style: preserve-3d;
  transform: perspective(900px)
             rotateX(var(--rx, 0deg))
             rotateY(var(--ry, 0deg))
             translateZ(0);
  transition: transform 0.25s ease;
}
.tilt:hover { transition: transform 0.06s linear; }

/* ---------- Security badge pulse/glow ---------- */
.pulse-glow {
  animation: pulse-glow 3.2s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79,142,247,0); }
  50%      { box-shadow: 0 0 22px 2px rgba(79,142,247,0.28); }
}

.shield-pulse {
  display: inline-grid;
  place-items: center;
  width: 64px; height: 64px;
  border-radius: 18px;
  font-size: 1.8rem;
  background: linear-gradient(135deg, rgba(79,142,247,0.16), rgba(124,58,237,0.16));
  border: 1px solid rgba(79,142,247,0.4);
  position: relative;
}
.shield-pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  border: 1px solid rgba(79,142,247,0.5);
  animation: shield-ring 2.6s ease-out infinite;
}
@keyframes shield-ring {
  0%   { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* ---------- Nav underline micro-interaction ---------- */
.nav__links a {
  position: relative;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.nav__links a:hover::after,
.nav__links a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- Price value change ---------- */
.price-animate {
  display: inline-block;
  animation: price-pop 0.35s ease;
}
@keyframes price-pop {
  0%   { opacity: 0; transform: translateY(8px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Gentle float for the hero mockup ---------- */
.float-slow {
  animation: float-slow 7s ease-in-out infinite;
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ---------- Reduced motion: respect user preference ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .orb--1, .orb--2, .orb--3,
  .float-slow,
  .pulse-glow,
  .shield-pulse::after {
    animation: none;
  }
  .tilt { transform: none !important; }
  .flip__inner { transition: none; }
  .btn--primary::before { display: none; }
}

/* ============================================================
   MOBILE — Disabilita animazioni pesanti su smartphone
   Queste regole si applicano SOLO su mobile (≤768px).
   Il desktop rimane completamente invariato.
   ============================================================ */
@media (max-width: 768px) {
  /* Orb con filter:blur(90px) molto pesante per GPU mobile */
  .orb--1, .orb--2, .orb--3 {
    animation: none;
    display: none;
  }

  /* Float del mockup: nascosto su mobile, inutile animarlo */
  .float-slow {
    animation: none;
  }

  /* Logo animazioni multiple: le tower float e i fogli volanti */
  /* sono belle su desktop ma consumano GPU su device entry-level */
  .condofast-logo-container .tower-left,
  .condofast-logo-container .tower-center,
  .condofast-logo-container .tower-right {
    animation: none;
  }
  .condofast-logo-container.interactive .sheet-1,
  .condofast-logo-container.interactive .sheet-2,
  .condofast-logo-container.interactive .sheet-3 {
    animation: none;
    opacity: 0;
  }

  /* Shimmer del bottone primary: ottimizzazione GPU */
  .btn--primary::before {
    display: none;
  }

  /* Stagger delays su mobile: ridotti per UX più immediata */
  .reveal[data-delay="3"] { transition-delay: 0.1s; }
  .reveal[data-delay="4"] { transition-delay: 0.15s; }
  .reveal[data-delay="5"] { transition-delay: 0.2s; }
}

/* ---------- Scroll-driven Animations (Progressive Enhancement) ---------- */
@supports ((animation-timeline: view()) and (animation-range: entry)) {
  .scroll-reveal {
    animation: fade-in-up linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
  }

  @keyframes fade-in-up {
    0% {
      opacity: 0;
      transform: translateY(60px) scale(0.95);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}