/* =====================================================
   SCROLL-DRIVEN ANIMATIONS - 2026 PREMIUM EDITION
   Dramatic yet refined micro-animations for VISIV
   
   Based on 2026 UI/UX Research & Best Practices:
   - Micro-interactions: 150-300ms for optimal feedback
   - Scroll animations: 200-600ms for dramatic reveals
   - Easing: expo curves for perceived performance
   - Mobile: 50% distance reduction, 30% faster timing
   - Performance: CSS transforms only (GPU accelerated)
   - Accessibility: prefers-reduced-motion support
   
   CSS-only with progressive enhancement
   ===================================================== */

/* =====================================================
   1. CSS CUSTOM PROPERTIES - 2026 ENHANCED
   ===================================================== */
:root {
  /* Timing - 2026 micro-animation standards (adjusted for better UX) */
  --duration-micro: 0.25s;
  --duration-smooth: 0.5s;
  --duration-dramatic: 0.7s;
  --duration-reveal: 0.6s;

  /* Easing - Premium curves (research-backed for perceived performance) */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-anticipate: cubic-bezier(0.36, 0, 0.66, -0.56);
  /* Slight anticipation */
  --ease-decelerate: cubic-bezier(0, 0.55, 0.45, 1);
  /* Natural deceleration */

  /* Stagger delays - Optimized cascade pattern */
  --stagger-base: 60ms;
  --stagger-increment: 80ms;
  --stagger-faster: 50ms;

  /* Transform distances - Reduced for subtlety */
  --translate-dramatic: 50px;
  --translate-standard: 35px;
  --translate-subtle: 15px;

  /* Scale values - More subtle for elegance */
  --scale-start: 0.95;
  --scale-end: 1;

  /* Rotation - Subtle tilt for organic feel */
  --rotate-subtle: 3deg;
  --rotate-standard: 5deg;
}

/* =====================================================
   2. BASE ANIMATION SETUP
   ===================================================== */

/* Initial state for animated elements - BE SPECIFIC */
.about__left,
.about__right,
.about__editorial-stat,
.about__editorial-content,
.editorial-list li,
.services__header,
.service-card,
.service-card__number,
.service-card__title,
.service-card__desc,
.faq__tag,
.faq__title,
.faq__subtitle,
.faq-item,
.faq-item__answer-content,
.cta-section__bg,
.cta-section__card,
.cta-section__title,
.cta-section .liquid-metal-btn,
.founder-card,
.founder-card__image img,
.founder-card__content,
.founder-card__role,
.founder-card__name,
.founder-card__bio {
  opacity: 0;
  will-change: transform, opacity;
}

/* Ensure kinetic globe doesn't get hidden */
.about__background,
.about__background .kinetic-globe,
.kinetic-globe .ring,
.kinetic-globe .core {
  opacity: 1 !important;
}

/* Ensure parent containers remain visible */
.about,
.services,
.faq,
.cta-section,
.founders {
  opacity: 1 !important;
}

/* =====================================================
   3. CSS SCROLL-DRIVEN ANIMATIONS (2026 STANDARD)
   Using animation-timeline and view()
   ===================================================== */

@supports (animation-timeline: view()) {

  /* Base reveal animation - Enhanced with subtle anticipation */
  @keyframes reveal-up {
    0% {
      opacity: 0;
      transform: translateY(var(--translate-standard));
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes reveal-left {
    0% {
      opacity: 0;
      transform: translateX(calc(var(--translate-dramatic) * -1));
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes reveal-right {
    0% {
      opacity: 0;
      transform: translateX(var(--translate-dramatic));
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes reveal-scale {
    0% {
      opacity: 0;
      transform: scale(var(--scale-start)) translateY(var(--translate-subtle));
    }

    70% {
      transform: scale(1.02) translateY(-2px);
    }

    100% {
      opacity: 1;
      transform: scale(var(--scale-end)) translateY(0);
    }
  }

  @keyframes reveal-rotate {
    0% {
      opacity: 0;
      transform: rotate(calc(var(--rotate-standard) * -1)) translateY(var(--translate-subtle));
    }

    100% {
      opacity: 1;
      transform: rotate(0) translateY(0);
    }
  }

  @keyframes blur-reveal {
    0% {
      opacity: 0;
      filter: blur(6px);
      transform: translateY(var(--translate-subtle));
    }

    100% {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0);
    }
  }

  /* Enhanced fade with slight tilt for organic feel */
  @keyframes fade-tilt-up {
    0% {
      opacity: 0;
      transform: translateY(var(--translate-subtle)) rotate(var(--rotate-subtle));
    }

    100% {
      opacity: 1;
      transform: translateY(0) rotate(0);
    }
  }

  /* Slide with shadow lift effect */
  @keyframes slide-shadow-reveal {
    0% {
      opacity: 0;
      transform: translateY(var(--translate-standard));
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Kinetic Globe - Enhanced with spring physics */
  @keyframes kinetic-globe-reveal {
    0% {
      opacity: 0;
      transform: scale(0.85) rotate(-12deg);
    }

    60% {
      opacity: 0.8;
      transform: scale(1.02) rotate(2deg);
    }

    100% {
      opacity: 1;
      transform: scale(1) rotate(0);
    }
  }

  /* Counter animation for stats */
  @property --num {
    syntax: '<integer>';
    initial-value: 0;
    inherits: false;
  }

  @keyframes count-up {
    from {
      --num: 0;
    }

    to {
      --num: 90;
    }
  }

  /* List item cascade with micro-delay */
  @keyframes list-item-reveal {
    0% {
      opacity: 0;
      transform: translateX(-10px);
    }

    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }
}

/* =====================================================
   4. SECTION-SPECIFIC ANIMATIONS
   ===================================================== */

/* -----------------------------------------------------
   ABOUT SECTION (Chi Siamo)
   ----------------------------------------------------- */

/* Kinetic Globe - Enhanced spring physics entrance */
.about__background .kinetic-globe {
  animation: kinetic-globe-reveal var(--duration-dramatic) var(--ease-spring) forwards;
  animation-timeline: view();
  animation-range: entry 5% cover 35%;
}

/* Left side content - Enhanced slide with subtle shadow */
.about__left {
  animation: reveal-left var(--duration-dramatic) var(--ease-expo) forwards;
  animation-timeline: view();
  animation-range: entry 10% cover 30%;
}

/* Right side content - Slide with improved timing */
.about__right {
  animation: reveal-right var(--duration-dramatic) var(--ease-expo) forwards;
  animation-timeline: view();
  animation-range: entry 12% cover 32%;
}

/* Stat number - Enhanced scale with anticipation */
.about__editorial-stat .stat-display {
  animation: reveal-scale var(--duration-dramatic) var(--ease-spring) forwards;
  animation-timeline: view();
  animation-range: entry 15% cover 35%;
}

/* Editorial content - Enhanced fade with tilt */
.about__editorial-content {
  animation: fade-tilt-up var(--duration-reveal) var(--ease-smooth) forwards;
  animation-timeline: view();
  animation-range: entry 20% cover 40%;
}

/* Editorial list items - Optimized staggered cascade */
.editorial-list li {
  opacity: 0;
  animation: list-item-reveal var(--duration-smooth) var(--ease-expo) forwards;
  animation-timeline: view();
}

.editorial-list li:nth-child(1) {
  animation-range: entry 25% cover 45%;
}

.editorial-list li:nth-child(2) {
  animation-range: entry 30% cover 50%;
  animation-delay: 0.05s;
}

.editorial-list li:nth-child(3) {
  animation-range: entry 35% cover 55%;
  animation-delay: 0.1s;
}

/* -----------------------------------------------------
   SERVICES SECTION
   ----------------------------------------------------- */

/* Section header - Enhanced scale with anticipation */
.services__header {
  animation: reveal-scale var(--duration-reveal) var(--ease-expo) forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 25%;
}

/* Service cards - Optimized staggered reveals */
.service-card {
  opacity: 0;
  animation: reveal-up var(--duration-reveal) var(--ease-expo) forwards;
  animation-timeline: view();
}

/* Full-width cards (1st and 6th) - Enhanced with spring */
.services__grid--6 .service-card:nth-child(1) {
  animation: reveal-scale var(--duration-dramatic) var(--ease-spring) forwards;
  animation-range: entry 0% cover 30%;
}

.services__grid--6 .service-card:nth-child(6) {
  animation: reveal-scale var(--duration-dramatic) var(--ease-spring) forwards;
  animation-range: entry 0% cover 30%;
}

/* 2x2 Grid cards - Optimized stagger cascade */
.services__grid--6 .service-card:nth-child(2) {
  animation-range: entry 5% cover 25%;
}

.services__grid--6 .service-card:nth-child(3) {
  animation-range: entry 10% cover 30%;
}

.services__grid--6 .service-card:nth-child(4) {
  animation-range: entry 15% cover 35%;
}

.services__grid--6 .service-card:nth-child(5) {
  animation-range: entry 20% cover 40%;
}

/* Card internal elements - Improved micro stagger */
.service-card__number {
  opacity: 0;
  animation: reveal-up var(--duration-smooth) var(--ease-expo) forwards;
  animation-timeline: view();
  animation-range: entry 8% cover 28%;
}

.service-card__title {
  opacity: 0;
  animation: reveal-up var(--duration-smooth) var(--ease-smooth) forwards;
  animation-timeline: view();
  animation-range: entry 12% cover 32%;
}

.service-card__desc {
  opacity: 0;
  animation: fade-tilt-up var(--duration-smooth) var(--ease-smooth) forwards;
  animation-timeline: view();
  animation-range: entry 16% cover 36%;
}

/* -----------------------------------------------------
   FAQ SECTION
   ----------------------------------------------------- */

/* Section header */
.faq__tag,
.faq__title,
.faq__subtitle {
  animation: reveal-up var(--duration-reveal) var(--ease-expo) forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 25%;
}

/* FAQ items - Staggered cascade */
.faq-item {
  opacity: 0;
  animation: reveal-up var(--duration-smooth) var(--ease-smooth) forwards;
  animation-timeline: view();
}

.faq-item:nth-child(1) {
  animation-range: entry 5% cover 30%;
}

.faq-item:nth-child(2) {
  animation-range: entry 10% cover 35%;
}

.faq-item:nth-child(3) {
  animation-range: entry 15% cover 40%;
}

.faq-item:nth-child(4) {
  animation-range: entry 20% cover 45%;
}

.faq-item:nth-child(5) {
  animation-range: entry 25% cover 50%;
}

/* FAQ answer content - Fade in when expanded */
.faq-item__answer-content {
  animation: blur-reveal var(--duration-micro) var(--ease-smooth);
}

/* -----------------------------------------------------
   CTA SECTION
   ----------------------------------------------------- */

/* Background gradient intensifies on scroll */
.cta-section__bg {
  animation: cta-bg-intensify linear forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 50%;
}

@keyframes cta-bg-intensify {
  from {
    opacity: 0.7;
  }

  to {
    opacity: 1;
  }
}

/* CTA Card - Dramatic scale with shadow */
.cta-section__card {
  animation: cta-card-reveal var(--duration-dramatic) var(--ease-spring) forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 35%;
}

@keyframes cta-card-reveal {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(30px);
    box-shadow: 0 0 0 rgba(212, 167, 72, 0);
  }

  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    box-shadow: 0 30px 60px rgba(212, 167, 72, 0.2);
  }
}

/* CTA Title - Line by line reveal */
.cta-section__title {
  animation: reveal-up var(--duration-reveal) var(--ease-expo) forwards;
  animation-timeline: view();
  animation-range: entry 10% cover 40%;
}

/* CTA Button - Bounce in */
.cta-section .liquid-metal-btn {
  animation: cta-bounce-in var(--duration-dramatic) var(--ease-spring) forwards;
  animation-timeline: view();
  animation-range: entry 20% cover 45%;
}

@keyframes cta-bounce-in {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }

  60% {
    transform: scale(1.05) translateY(-5px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* -----------------------------------------------------
   FOUNDERS SECTION
   ----------------------------------------------------- */

/* Founder cards - Alternating directions */
.founder-card:nth-child(1) {
  animation: reveal-left var(--duration-dramatic) var(--ease-expo) forwards;
  animation-timeline: view();
  animation-range: entry 0% cover 35%;
}

.founder-card:nth-child(2) {
  animation: reveal-right var(--duration-dramatic) var(--ease-expo) forwards;
  animation-timeline: view();
  animation-range: entry 10% cover 45%;
}

/* Founder images - Blur reveal */
.founder-card__image img {
  animation: blur-reveal var(--duration-dramatic) var(--ease-smooth) forwards;
  animation-timeline: view();
  animation-range: entry 5% cover 30%;
}

/* Founder content - Fade up */
.founder-card__content {
  animation: reveal-up var(--duration-reveal) var(--ease-smooth) forwards;
  animation-timeline: view();
  animation-range: entry 15% cover 40%;
}

/* Founder role, name, bio - Micro stagger */
.founder-card__role {
  opacity: 0;
  animation: reveal-up var(--duration-smooth) var(--ease-smooth) forwards;
  animation-timeline: view();
  animation-range: entry 20% cover 45%;
}

.founder-card__name {
  opacity: 0;
  animation: reveal-up var(--duration-smooth) var(--ease-smooth) forwards;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

.founder-card__bio {
  opacity: 0;
  animation: reveal-up var(--duration-smooth) var(--ease-smooth) forwards;
  animation-timeline: view();
  animation-range: entry 30% cover 55%;
}

/* =====================================================
   5. FALLBACK FOR UNSUPPORTED BROWSERS
   Uses existing Intersection Observer in scripts.js
   ===================================================== */

@supports not (animation-timeline: view()) {

  /* These classes will be added by JS */
  [data-animate].visible,
  .about__left.visible,
  .about__right.visible,
  .about__editorial-stat.visible,
  .about__editorial-content.visible,
  .editorial-list li.visible,
  .services__header.visible,
  .service-card.visible,
  .service-card__number.visible,
  .service-card__title.visible,
  .service-card__desc.visible,
  .faq__tag.visible,
  .faq__title.visible,
  .faq__subtitle.visible,
  .faq-item.visible,
  .cta-section__bg.visible,
  .cta-section__card.visible,
  .cta-section__title.visible,
  .cta-section .liquid-metal-btn.visible,
  .founder-card.visible,
  .founder-card__image img.visible,
  .founder-card__content.visible,
  .founder-card__role.visible,
  .founder-card__name.visible,
  .founder-card__bio.visible {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  /* Remove will-change after animation */
  [data-animate].visible {
    will-change: auto;
  }
}

/* =====================================================
   6. MOBILE OPTIMIZATIONS
   Research-backed: 50% distance reduction, 30% faster timing
   ===================================================== */

@media (max-width: 768px) {
  :root {
    /* Reduce transform distances by 50% for mobile */
    --translate-dramatic: 25px;
    --translate-standard: 18px;
    --translate-subtle: 8px;

    /* Faster animations for mobile responsiveness */
    --duration-dramatic: 0.45s;
    --duration-reveal: 0.35s;
    --duration-smooth: 0.3s;

    /* Subtle scale for elegance */
    --scale-start: 0.97;

    /* Reduced rotation */
    --rotate-subtle: 2deg;
    --rotate-standard: 3deg;
  }

  /* Simplify kinetic globe on mobile for performance */
  .about__background .kinetic-globe {
    animation: reveal-scale var(--duration-dramatic) var(--ease-expo) forwards;
    animation-range: entry 0% cover 25%;
  }

  /* Ensure visibility on mobile - DETACH SCROLL DRIVER FOR ALL ELEMENTS */
  .about__left,
  .about__right,
  .about__editorial-stat,
  .about__editorial-content,
  .editorial-list li,
  .service-card,
  .service-card__number,
  .service-card__title,
  .service-card__desc,
  .faq-item,
  .faq__tag,
  .faq__title,
  .faq__subtitle,
  .founder-card,
  .founder-card__content,
  .founder-card__image img,
  .founder-card__name,
  .founder-card__role,
  .founder-card__bio,
  .cta-section__card,
  .cta-section__title {
    opacity: 1 !important;
    animation-timeline: auto !important;
    /* CRITICAL: Disable scroll linking on mobile */
    animation-range: normal !important;
    view-timeline: none !important;
  }

  /* About section - simplified time-based animation */
  .about__left,
  .about__right {
    animation: reveal-left var(--duration-dramatic) var(--ease-expo) forwards;
    animation-delay: 0.2s;
    /* Brief delay to ensure render */
  }

  /* Service cards - simplified time-based animation */
  .service-card {
    animation: reveal-up var(--duration-reveal) var(--ease-smooth) forwards;
    animation-delay: 0.1s;
  }

  /* Reduce blur on mobile for GPU performance */
  @keyframes blur-reveal {
    0% {
      opacity: 0;
      filter: blur(3px);
      transform: translateY(var(--translate-subtle));
    }

    100% {
      opacity: 1;
      filter: blur(0);
      transform: translateY(0);
    }
  }

  /* FAQ items - time-based stagger */
  .faq-item {
    animation: reveal-up var(--duration-smooth) var(--ease-smooth) forwards;
  }

  /* Use simple delays instead of scroll ranges */
  .faq-item:nth-child(1) {
    animation-delay: 0.1s;
  }

  .faq-item:nth-child(2) {
    animation-delay: 0.2s;
  }

  .faq-item:nth-child(3) {
    animation-delay: 0.3s;
  }

  .faq-item:nth-child(4) {
    animation-delay: 0.4s;
  }

  .faq-item:nth-child(5) {
    animation-delay: 0.5s;
  }

  /* Founder cards - time-based */
  .founder-card {
    animation: reveal-up var(--duration-reveal) var(--ease-smooth) forwards;
    animation-delay: 0.2s;
  }

  /* CTA section - faster bounce */
  .cta-section__card {
    animation-duration: var(--duration-dramatic);
    animation-timeline: auto;
    /* Ensure this is also detached if needed */
  }

  @keyframes cta-bounce-in {
    0% {
      opacity: 0;
      transform: scale(0.92) translateY(15px);
    }

    60% {
      transform: scale(1.03) translateY(-3px);
    }

    100% {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
}

/* =====================================================
   7. REDUCED MOTION SUPPORT
   Respect user preferences
   ===================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .about__left,
  .about__right,
  .about__editorial-stat,
  .about__editorial-content,
  .editorial-list li,
  .services__header,
  .service-card,
  .service-card__number,
  .service-card__title,
  .service-card__desc,
  .faq__tag,
  .faq__title,
  .faq__subtitle,
  .faq-item,
  .cta-section__bg,
  .cta-section__card,
  .cta-section__title,
  .cta-section .liquid-metal-btn,
  .founder-card,
  .founder-card__image img,
  .founder-card__content,
  .founder-card__role,
  .founder-card__name,
  .founder-card__bio {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* =====================================================
   8. PERFORMANCE OPTIMIZATIONS - 2026 Best Practices
   ===================================================== */

/* Promote animated elements to their own layer */
.about__left,
.about__right,
.about__editorial-stat,
.about__editorial-content,
.editorial-list li,
.services__header,
.service-card,
.service-card__number,
.service-card__title,
.service-card__desc,
.faq__tag,
.faq__title,
.faq__subtitle,
.faq-item,
.cta-section__bg,
.cta-section__card,
.cta-section__title,
.cta-section .liquid-metal-btn,
.founder-card,
.founder-card__image img,
.founder-card__content,
.founder-card__role,
.founder-card__name,
.founder-card__bio {
  contain: layout style;
}

/* Content visibility for off-screen elements */
@media (prefers-reduced-motion: no-preference) {

  .service-card,
  .faq-item,
  .founder-card,
  .about__editorial-content {
    content-visibility: auto;
    contain-intrinsic-size: auto 300px;
  }
}

/* GPU acceleration hints - Only on animated elements */
.about__background .kinetic-globe,
.cta-section__card,
.founder-card__image img,
.service-card {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* Remove will-change after animation completes for better performance */
@media (prefers-reduced-motion: no-preference) {

  .about__left,
  .about__right,
  .about__editorial-stat,
  .services__header,
  .faq-item,
  .founder-card {
    animation-fill-mode: forwards;
  }

  /* Once animated, remove will-change */
  .about__left,
  .about__right,
  .services__header,
  .faq-item,
  .founder-card {
    will-change: auto;
  }
}

/* Optimize paint and composite layers */
.about,
.services,
.faq,
.cta-section,
.founders {
  contain: layout;
}

/* Prevent layout shifts during animation */
.service-card,
.faq-item,
.founder-card {
  min-height: auto;
}