/* Premium interaction + motion styling (kept separate from base styles) */


/* --------------------------------------------------
   Hover Interactions (cards, images, text)
   -------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .case,
  .service {
    transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 320ms ease,
                color 240ms ease;
    will-change: transform;
    /*! transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 320ms ease,
                color 240ms ease; */
    /*! will-change: transform; */
  }

  .case:hover,
  .service:hover {
    transform: translateY(-10px);
    /*! box-shadow: 0 14px 28px rgba(0,0,0,0.18), 0 10px 10px rgba(0,0,0,0.12); */
  }

  .case__img,
  .service .service__icon,
  .testimonial-card__avatar {
    transition: transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
                filter 240ms ease;
    will-change: transform;
  }

  .case:hover .case__img {
    transform: scale(1.05);
  }

  /* Subtle text color emphasis on hover where applicable */
  .case:hover .case__name,
  .service:hover .service__title {
    color: var(--accent, #e33a92);
  }

  .btn {
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 200ms ease,
                background-color 200ms ease,
                color 200ms ease;
    will-change: transform;
  }

  .btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 14px 30px rgba(18, 18, 25, 0.16);
  }

  .btn:active {
    transform: translateY(-1px) scale(1.02);
  }

  .nav__link {
    position: relative;
    transition: color 200ms ease;
  }

  .nav__link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0.9;
  }

  .nav__link:hover::after {
    transform: scaleX(1);
  }

  .contact-email {
    position: relative;
    transition: color 200ms ease;
  }

  .contact-email::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0.85;
  }

  .contact-email:hover::after {
    transform: scaleX(1);
  }

  .form-field input,
  .form-field textarea,
  .form-field select {
    transition: border-color 200ms ease, box-shadow 200ms ease;
  }

  .form-field input:hover,
  .form-field textarea:hover,
  .form-field select:hover {
    border-color: rgba(227, 58, 146, 0.45);
    box-shadow: 0 0 0 4px rgba(227, 58, 146, 0.10);
  }

  .testimonial__pair {
    cursor: pointer;
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  .testimonial__pair:hover {
    transform: rotate(2.5deg) scale(1.03);
  }
}

/* --------------------------------------------------
   Page-load animations (CSS-first, transform + opacity only)
   -------------------------------------------------- */
.a-fade-down,
.a-slide-left,
.a-fade-up,
.a-scale-in,
.a-float-in,
.a-cta-reveal {
  --a-duration: 600ms;
  --a-delay: 0ms;
  --a-ease: cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

.a-fade-down {
  opacity: 0;
  transform: translateY(-20px);
  animation: a-fade-down var(--a-duration) var(--a-ease) var(--a-delay) both;
}

.a-slide-left {
  opacity: 0;
  transform: translateX(-40px);
  animation: a-slide-left var(--a-duration) var(--a-ease) var(--a-delay) both;
}

.a-fade-up {
  opacity: 0;
  transform: translateY(20px);
  animation: a-fade-up var(--a-duration) var(--a-ease) var(--a-delay) both;
}

.a-scale-in {
  opacity: 0;
  transform: scale(0.95);
  transform-origin: 50% 50%;
  animation: a-scale-in var(--a-duration) var(--a-ease) var(--a-delay) both;
}

.a-float-in {
  opacity: 0;
  transform: translateY(30px);
  animation: a-float-in var(--a-duration) var(--a-ease) var(--a-delay) both;
}

.a-cta-reveal {
  opacity: 1;
  transform: none;
  transform-origin: left center;
  animation: a-cta-reveal var(--a-duration) var(--a-ease) var(--a-delay) both;
}

@keyframes a-fade-down {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes a-slide-left {
  0% { opacity: 0; transform: translateX(-40px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes a-fade-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes a-scale-in {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes a-float-in {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes a-cta-reveal {
  0% { opacity: 0; transform: translateY(22px) scaleX(1.02); }
  100% { opacity: 1; transform: translateY(0) scaleX(1); }
}

.a-phone-bounce {
  --a-duration: 800ms;
  --a-delay: 0ms;
  --a-ease: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}

.a-phone-bounce {
  opacity: 0;
  transform: translateY(-8px) scale(0.8) rotate(-6deg);
  animation: a-bounce-in var(--a-duration) var(--a-ease) var(--a-delay) both;
}

@keyframes a-bounce-in {
  0% { opacity: 0; transform: translateY(-8px) scale(0.8) rotate(-6deg); }
  60% { opacity: 1; transform: translateY(0) scale(1.03) rotate(1.5deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
}

/* --------------------------------------------------
   Testimonial floating blob (non-intrusive decorative layer)
   -------------------------------------------------- */
.section--testimonial {
  position: relative;
  overflow: hidden;
}

.section--testimonial::before {
  content: "";
  position: absolute;
  inset: auto -20% -40% -20%;
  height: 60vmin;
  /*! background: radial-gradient(ellipse at center, rgba(255,56,92,0.18), rgba(255,56,92,0) 60%),
              radial-gradient(ellipse at center, rgba(119,0,255,0.18), rgba(119,0,255,0) 60%); */
  filter: blur(30px);
  transform: translate3d(0,0,0);
  animation: float-blob 14s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes float-blob {
  0%   { transform: translate3d(-6%, 0%, 0) scale(1); }
  50%  { transform: translate3d(6%, -6%, 0) scale(1.05); }
  100% { transform: translate3d(0%, 3%, 0) scale(0.98); }
}

/* --------------------------------------------------
   Final CTA subtle animated gradient (non-destructive overlay)
   -------------------------------------------------- */
.section--final-cta {
  position: relative;
  overflow: hidden;
}

.section--final-cta > * {
  position: relative;
  z-index: 1;
}

.section--final-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: none;
  animation: none;
}

.final-cta__title:hover { animation: title-bounce 0.7s ease-out 1; transform-origin: center bottom; }
.final-cta__title:hover .move-forward { animation: title-bounce 0.7s ease-out 0.06s 1; }

@keyframes title-bounce {
  0% { transform: translateY(0); }
  20% { transform: translateY(-10px); }
  40% { transform: translateY(0); }
  60% { transform: translateY(-6px); }
  80% { transform: translateY(0); }
  100% { transform: translateY(0); }
}

.nonneg-item { perspective: 800px; }
.nonneg-item img { transition: transform 0.6s ease; transform-style: preserve-3d; }
.nonneg-item:hover img { transform: rotateY(180deg); }
.nonneg-item:hover .nonneg-item__name { animation: title-bounce 0.7s ease-out 1; transform-origin: center bottom; }

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

/* Page-load fade-up for pillars */
.nonneg-item { opacity: 0; animation: fade-up 0.7s ease-out both; }
.nonneg__grid .nonneg-item:nth-child(1) { animation-delay: 0.04s; }
.nonneg__grid .nonneg-item:nth-child(2) { animation-delay: 0.14s; }
.nonneg__grid .nonneg-item:nth-child(3) { animation-delay: 0.24s; }
.nonneg__grid .nonneg-item:nth-child(4) { animation-delay: 0.34s; }

/* About cards: load + hover */
.about-cards .a-card { opacity: 0; transform: translateY(18px) scale(0.98); animation: fade-up 0.7s ease-out both; transition: transform 220ms ease, box-shadow 220ms ease; }
.about-cards .a-card:nth-child(1) { animation-delay: 0.06s; }
.about-cards .a-card:nth-child(2) { animation-delay: 0.16s; }
.about-cards .a-card:nth-child(3) { animation-delay: 0.26s; }
.about-cards .a-card:nth-child(4) { animation-delay: 0.36s; }
.about-cards .a-card img { transition: transform 220ms ease; }
.about-cards .a-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(18,18,25,0.12); }
.about-cards .a-card:hover img { transform: scale(1.03); }
.about-cards .a-card:hover h3 { animation: title-bounce 0.7s ease-out 1; transform-origin: center bottom; }

@keyframes gradient-move {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* --------------------------------------------------
   Mobile overrides
   -------------------------------------------------- */
@media (max-width: 768px) {
  /* Disable hover visuals on touch devices */
  .case:hover,
  .service:hover,
  .testimonial-card:hover {
    transform: none;
    box-shadow: none;
  }

  /* Remove decorative infinite blob on mobile */
  .section--testimonial::before { display: none; }

  /* Stop long-running gradient animation on mobile */
  .section--final-cta::after { animation: none; }
}

/* --------------------------------------------------
   Reduced Motion
   -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .a-fade-down,
  .a-slide-left,
  .a-fade-up,
  .a-scale-in,
  .a-float-in,
  .a-cta-reveal,
  .a-phone-bounce {
    opacity: 1 !important;
    transform: none !important;
  }
}