@layer tokens, reset, typography, layout, components, utilities;

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

@import url('./base/tokens.css') layer(tokens);
@import url('./base/reset.css') layer(reset);
@import url('./base/typography.css') layer(typography);
@import url('./layout/layout.css') layer(layout);
@import url('./components/components.css') layer(components);
@import url('./base/utilities.css') layer(utilities);

/* Scroll-driven animations layer */
@layer overrides {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: fadeUp 0.6s var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 0% entry 30%;
    }
    .reveal--delay-1 { animation-delay: 0.1s; }
    .reveal--delay-2 { animation-delay: 0.2s; }
    .reveal--delay-3 { animation-delay: 0.3s; }
    .reveal--delay-4 { animation-delay: 0.4s; }
    .reveal--delay-5 { animation-delay: 0.5s; }
    .reveal--left {
      animation-name: slideInLeft;
    }
    .reveal--right {
      animation-name: slideInRight;
    }
    .reveal--scale {
      animation-name: scaleIn;
    }
  }

  @keyframes fadeUp {
    from {
      opacity: 0;
      transform: translateY(24px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes scaleIn {
    from {
      opacity: 0;
      transform: scale(0.9);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(-30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 20px rgba(25, 99, 206, 0.2); }
    50% { box-shadow: 0 0 40px rgba(25, 99, 206, 0.4); }
  }

  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  @keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }

  .animate-float { animation: float 3s ease-in-out infinite; }
  .animate-glow { animation: pulse-glow 2s ease-in-out infinite; }
  .animate-fade-in { animation: fadeIn 0.6s var(--ease-out) both; }
  .animate-scale-in { animation: scaleIn 0.5s var(--ease-spring) both; }
  .animate-slide-left { animation: slideInLeft 0.6s var(--ease-out) both; }
  .animate-slide-right { animation: slideInRight 0.6s var(--ease-out) both; }

  @keyframes revealLine {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  @keyframes slideUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .reveal--line {
    transform-origin: left;
  }

  .reveal--line.is-visible,
  .reveal--line[style*="animation"] {
    animation: revealLine 0.8s var(--ease-out) both;
  }

  .reveal--up {
    animation: slideUp 0.5s var(--ease-out) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible,
  .animate-float,
  .animate-glow,
  .animate-fade-in,
  .animate-scale-in,
  .animate-slide-left,
  .animate-slide-right,
  .hero--gradient-brand,
  .hero--brand,
  .hero--ink,
  .hero--split-brand .hero__brand-side,
  .hero--split .hero__visual,
  .contact-modal-overlay,
  .contact-modal-card,
  .contact-modal-card .contact-modal-inner,
  .contact-modal-card .contact-modal-success,
  .contact-modal-card .form-group,
  .map-modal-overlay,
  .map-modal-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
    background-size: 100% 100% !important;
    clip-path: none !important;
    visibility: visible !important;
  }
  .hero--gradient-brand::before,
  .hero--gradient-brand::after,
  .hero--brand::before,
  .hero--brand::after,
  .hero--ink::after,
  .hero--split-brand .hero__brand-side::before,
  .hero--split-brand .hero__brand-side::after {
    display: none;
  }
}

@supports not (animation-timeline: view()) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  }
  .reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .reveal--delay-1.is-visible { transition-delay: 0.1s; }
  .reveal--delay-2.is-visible { transition-delay: 0.2s; }
  .reveal--delay-3.is-visible { transition-delay: 0.3s; }
  .reveal--delay-4.is-visible { transition-delay: 0.4s; }
  .reveal--delay-5.is-visible { transition-delay: 0.5s; }

  .reveal--left {
    transform: translateX(-30px);
  }
  .reveal--left.is-visible {
    transform: translateX(0);
  }
  .reveal--right {
    transform: translateX(30px);
  }
  .reveal--right.is-visible {
    transform: translateX(0);
  }
  .reveal--scale {
    transform: scale(0.9);
  }
  .reveal--scale.is-visible {
    transform: scale(1);
  }
}