/* ============================================
   effects.css — Motion, hover and reveal effects

   Animations use transform/opacity only — no blur or
   box-shadow keyframes — and honour reduced motion.
   ============================================ */

:root {
  --ease-premium: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Single consistent corner radius: 12px */
.service-card,
.contact-form,
.approach-art,
.button,
.nav-cta,
.contact-form input,
.contact-form textarea,
.service-icon,
.contact-map,
.footer-brand img,
.brand img,
.menu-toggle,
.form-message,
.map-link,
.approach-feature img {
  border-radius: 12px;
}

/* ============================================
   HOVER, ENTRANCE AND INFINITE ANIMATIONS
   ============================================ */

@media (prefers-reduced-motion: no-preference) {
  /* Service cards — subtle lift */
  .service-card:hover {
    transform: translate3d(0, -6px, 0) scale(1.02);
  }

  /* Buttons — lift on hover, press on active */
  .button {
    transition:
      transform var(--duration-fast) var(--ease-premium),
      background-color var(--duration-fast) var(--ease-premium),
      border-color var(--duration-fast) var(--ease-premium),
      color var(--duration-fast) var(--ease-premium);
  }
  .button:active {
    transform: translate3d(0, 0, 0) scale(0.98);
  }

  /* Nav CTA */
  .nav-cta {
    transition:
      transform var(--duration-fast) var(--ease-premium),
      background-color var(--duration-fast) var(--ease-premium);
  }
  .nav-cta:active {
    transform: translate3d(0, 0, 0) scale(0.98);
  }

  /* Primary nav links */
  .primary-nav > a:not(.nav-cta) {
    transition:
      color var(--duration-fast) var(--ease-premium),
      transform var(--duration-fast) var(--ease-premium);
  }
  .primary-nav > a:not(.nav-cta):hover {
    transform: scale(1.03);
  }

  /* Service card arrow */
  .service-card > a {
    transition:
      color var(--duration-fast) var(--ease-premium),
      transform var(--duration-fast) var(--ease-premium);
  }
  .service-card > a:hover {
    transform: translateX(4px);
  }

  /* Approach art — parallax tilt */
  .approach-art {
    transition:
      transform var(--duration-medium) var(--ease-premium),
      background-color var(--duration-medium) var(--ease-premium),
      border-color var(--duration-medium) var(--ease-premium);
    transform-style: preserve-3d;
  }
  .approach-art:hover {
    transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateZ(0);
  }

  /* Contact form — subtle lift */
  .contact-form {
    transition:
      transform var(--duration-medium) var(--ease-premium),
      background-color var(--duration-medium) var(--ease-premium);
  }
  .contact-form:hover {
    transform: translate3d(0, -4px, 0);
  }

  /* Brand */
  .brand {
    transition: transform var(--duration-fast) var(--ease-premium);
  }
  .brand:hover {
    transform: scale(1.02);
  }

  /* Service icon */
  .service-icon img {
    transition: transform var(--duration-medium) var(--ease-premium);
  }
  .service-card:hover .service-icon img {
    transform: translate3d(0, -4px, 0) scale(1.08);
  }

  /* Skip link */
  .skip-link {
    transition:
      transform var(--duration-medium) var(--ease-premium),
      opacity var(--duration-medium) var(--ease-premium);
  }
  .skip-link:focus {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  /* Service card — gradient overlay + depth shadow */
  .service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(198, 40, 40, 0.05), transparent 60%);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-medium) var(--ease-premium);
  }
  .service-card:hover::after {
    opacity: 1;
  }
  .service-card {
    transition:
      transform var(--duration-medium) var(--ease-premium),
      background-color var(--duration-medium) var(--ease-premium),
      border-color var(--duration-medium) var(--ease-premium),
      box-shadow var(--duration-medium) var(--ease-premium);
  }
  .service-card:hover {
    box-shadow: var(--glass-inset-highlight), 0 24px 48px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
  }

  /* Buttons — shine overlay */
  .button,
  .nav-cta {
    position: relative;
  }
  .button::after,
  .nav-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent 50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-premium);
  }
  .button:hover::after,
  .nav-cta:hover::after {
    opacity: 1;
  }
  .button:hover,
  .nav-cta:hover {
    transform: translate3d(0, -2px, 0) scale(1.02);
  }

  /* Nav links — underline animation */
  .primary-nav > a:not(.nav-cta)::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 14px;
    right: 14px;
    height: 2px;
    background: var(--accent-text);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-medium) var(--ease-premium);
  }
  .primary-nav > a:not(.nav-cta):hover::after {
    transform: scaleX(1);
  }

  /* Approach features */
  .approach-feature {
    border: 1px solid transparent;
    border-radius: 12px;
    transition:
      transform var(--duration-medium) var(--ease-premium),
      border-color var(--duration-medium) var(--ease-premium);
  }
  .approach-feature:hover {
    transform: translateY(-4px);
    border-color: var(--accent-text);
  }

  /* Form inputs — focus glow */
  .contact-form input,
  .contact-form textarea {
    transition:
      border-color var(--duration-fast) var(--ease-premium),
      background var(--duration-fast) var(--ease-premium),
      box-shadow var(--duration-fast) var(--ease-premium);
  }
  .contact-form input:focus,
  .contact-form textarea:focus {
    box-shadow: var(--glass-inset-highlight), 0 0 0 1px var(--red), 0 0 20px rgba(198, 40, 40, 0.15);
  }

  .hero-visual {
    transform-style: preserve-3d;
  }

  /* Footer links — underline animation */
  .footer-main nav a {
    position: relative;
    transition: color var(--duration-fast) var(--ease-premium);
  }
  .footer-main nav a::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--accent-text);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--duration-medium) var(--ease-premium);
  }
  .footer-main nav a:hover::after {
    transform: scaleX(1);
  }

  /* --------------------------------------------
     ENTRANCE ANIMATIONS
     -------------------------------------------- */

  .hero-copy > * {
    animation: fade-in-up var(--duration-entrance) var(--ease-premium) both;
  }
  .hero-copy > *:nth-child(1) { animation-delay: calc(var(--duration-fast) * 0.5); }
  .hero-copy > *:nth-child(2) { animation-delay: var(--duration-fast); }
  .hero-copy > *:nth-child(3) { animation-delay: var(--duration-medium); }
  .hero-copy > *:nth-child(4) { animation-delay: calc(var(--duration-medium) * 1.33); }
  .hero-copy > *:nth-child(5) { animation-delay: calc(var(--duration-medium) * 1.66); }

  .hero-visual {
    animation:
      fade-in-scale var(--duration-entrance) var(--ease-premium) var(--duration-medium) both,
      float var(--duration-infinite-medium) ease-in-out var(--duration-slow) infinite;
  }

  .hero-bottom {
    animation: fade-in-up var(--duration-entrance) var(--ease-premium) var(--duration-slow) both;
  }

  .visual-label {
    animation: fade-in-up var(--duration-entrance) var(--ease-premium) calc(var(--duration-medium) * 1.66) both;
  }

  .trust-inner li {
    animation: fade-in-up var(--duration-entrance) var(--ease-premium) both;
  }
  .trust-inner li:nth-child(1) { animation-delay: calc(var(--duration-fast) * 0.5); }
  .trust-inner li:nth-child(2) { animation-delay: var(--duration-fast); }
  .trust-inner li:nth-child(3) { animation-delay: var(--duration-medium); }

  .section-heading {
    animation: scale-in var(--duration-entrance) var(--ease-premium) both;
  }

  .service-card {
    animation: fade-in-up var(--duration-entrance) var(--ease-premium) both;
  }
  .service-card:nth-child(1) { animation-delay: calc(var(--duration-fast) * 0.5); }
  .service-card:nth-child(2) { animation-delay: var(--duration-fast); }
  .service-card:nth-child(3) { animation-delay: var(--duration-medium); }
  .service-card:nth-child(4) { animation-delay: calc(var(--duration-medium) * 1.33); }

  .approach-art {
    animation: fade-in-up var(--duration-entrance) var(--ease-premium) calc(var(--duration-fast) * 0.5) both;
  }
  .approach-copy {
    animation: fade-in-up var(--duration-entrance) var(--ease-premium) var(--duration-fast) both;
  }

  /* Only one .approach-feature exists in the DOM, so nth-child(2)/(3) never
     matched. */
  .approach-feature {
    animation: parallax-drift var(--duration-infinite-medium) ease-in-out infinite alternate;
  }

  .contact-copy {
    animation: fade-in-up var(--duration-entrance) var(--ease-premium) calc(var(--duration-fast) * 0.5) both;
  }
  .contact-details {
    animation: fade-in-up var(--duration-entrance) var(--ease-premium) var(--duration-fast) both;
  }
  .contact-form {
    animation: fade-in-up var(--duration-entrance) var(--ease-premium) var(--duration-medium) both;
  }

  .contact-details dl > div {
    animation: fade-in-up var(--duration-entrance) var(--ease-premium) both;
  }
  .contact-details dl > div:nth-child(1) { animation-delay: calc(var(--duration-medium) * 0.5); }
  .contact-details dl > div:nth-child(2) { animation-delay: calc(var(--duration-medium) * 0.7); }
  .contact-details dl > div:nth-child(3) { animation-delay: calc(var(--duration-medium) * 0.9); }
  .contact-details dl > div:nth-child(4) { animation-delay: calc(var(--duration-medium) * 1.1); }

  .footer-main {
    animation: fade-in-up var(--duration-entrance) var(--ease-premium) var(--duration-fast) both;
  }

  /* --------------------------------------------
     MICRO-INTERACTIONS & INFINITE ANIMATIONS
     -------------------------------------------- */

  [data-theme-toggle] {
    transition:
      border-color var(--duration-fast) var(--ease-premium),
      background-color var(--duration-fast) var(--ease-premium),
      transform var(--duration-fast) var(--ease-premium);
  }
  [data-theme-toggle]:hover {
    transform: scale(1.05);
  }
  [data-theme-toggle] .theme-toggle__icon {
    transition: transform var(--duration-medium) var(--ease-premium);
  }
  [data-theme-toggle]:hover .theme-toggle__icon {
    transform: rotate(-30deg) scale(1.1);
  }

  .menu-toggle span {
    transition:
      transform var(--duration-medium) var(--ease-premium),
      opacity var(--duration-fast) var(--ease-premium);
  }

  .visual-orbit {
    animation: rotate-slow var(--duration-infinite-slow) linear infinite;
  }

  .visual-core {
    animation: breathe var(--duration-infinite-medium) var(--ease-smooth) infinite;
  }

  /* NOTE: bg-shift / gradient-shift were removed. They animated
     background-position on gradients that declare no background-size, so both
     keyframe endpoints computed to the same offset — a provable no-op that
     still repainted the viewport every frame, forever. */

  /* --------------------------------------------
     SCROLL-TRIGGERED REVEAL
     -------------------------------------------- */

  .js-reveal {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition:
      opacity var(--duration-slow) var(--ease-premium),
      transform var(--duration-slow) var(--ease-premium);
  }
  .js-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  .hero-copy > *.js-reveal:nth-child(1) { animation-delay: calc(var(--duration-fast) * 0.25); }
  .hero-copy > *.js-reveal:nth-child(2) { animation-delay: calc(var(--duration-fast) * 0.6); }
  .hero-copy > *.js-reveal:nth-child(3) { animation-delay: calc(var(--duration-fast) * 0.95); }
  .hero-copy > *.js-reveal:nth-child(4) { animation-delay: calc(var(--duration-fast) * 1.3); }
  .hero-copy > *.js-reveal:nth-child(5) { animation-delay: calc(var(--duration-medium) * 0.66); }

  .trust-inner li.js-reveal:nth-child(1) { animation-delay: calc(var(--duration-fast) * 0.25); }
  .trust-inner li.js-reveal:nth-child(2) { animation-delay: calc(var(--duration-fast) * 0.6); }
  .trust-inner li.js-reveal:nth-child(3) { animation-delay: calc(var(--duration-fast) * 0.95); }

  .service-card.js-reveal:nth-child(1) { animation-delay: calc(var(--duration-fast) * 0.25); }
  .service-card.js-reveal:nth-child(2) { animation-delay: calc(var(--duration-fast) * 0.6); }
  .service-card.js-reveal:nth-child(3) { animation-delay: calc(var(--duration-fast) * 0.95); }
  .service-card.js-reveal:nth-child(4) { animation-delay: calc(var(--duration-fast) * 1.3); }

  .approach-art.js-reveal { animation-delay: calc(var(--duration-fast) * 0.25); }
  .approach-copy.js-reveal { animation-delay: calc(var(--duration-fast) * 0.6); }
  .approach-feature.js-reveal:nth-child(1) { animation-delay: calc(var(--duration-fast) * 0.4); }

  .contact-copy.js-reveal { animation-delay: calc(var(--duration-fast) * 0.25); }
  .contact-details.js-reveal { animation-delay: calc(var(--duration-fast) * 0.6); }
  .contact-form.js-reveal { animation-delay: calc(var(--duration-fast) * 0.95); }

  .footer-main.js-reveal { animation-delay: calc(var(--duration-fast) * 0.25); }

  /* --------------------------------------------
     KEYFRAMES — transform + opacity only
     -------------------------------------------- */

  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translate3d(0, 24px, 0);
    }
    to {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

  @keyframes fade-in-scale {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes scale-in {
    from {
      opacity: 0;
      transform: scale(0.96);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

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

  @keyframes pulse-dot {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.7;
      transform: scale(0.85);
    }
  }

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

  @keyframes breathe {
    0%, 100% {
      opacity: 0.85;
      transform: scale(1);
    }
    50% {
      opacity: 1;
      transform: scale(1.02);
    }
  }

  @keyframes pulse-glow {
    0%, 100% {
      opacity: 0.6;
      transform: scale(1) translate3d(0, 0, 0);
    }
    50% {
      opacity: 1;
      transform: scale(1.05) translate3d(4px, -4px, 0);
    }
  }

  @keyframes pan-grid {
    from {
      transform: translate3d(0, 0, 0);
    }
    to {
      transform: translate3d(68px, 68px, 0);
    }
  }

  @keyframes parallax-drift {
    from {
      transform: translate3d(0, 0, 0);
    }
    to {
      transform: translate3d(0, -8px, 0);
    }
  }
}