/* ============================================================
   KING TOMATO — animations.css
   CSS-only keyframe animations
   ============================================================ */

/* ── Splash logo entrance ── */
@keyframes splashLogoIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Tomato slow spin (hero pill) ── */
@keyframes slowSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Sidebar CTA gradient shimmer ── */
@keyframes gradientShift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ── Partners marquee ── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Marquee reverse (optional second row) ── */
@keyframes marqueeReverse {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ── Fade up entrance ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Scale in ── */
@keyframes scaleIn {
  from { transform: scale(0.9); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── Gold pulse (decorative elements) ── */
@keyframes goldPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 164, 78, 0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(201, 164, 78, 0); }
}

/* ── Curtain slide up ── */
@keyframes curtainUp {
  from { transform: scaleY(1); transform-origin: top; }
  to   { transform: scaleY(0); transform-origin: top; }
}

/* ── Underline expand ── */
@keyframes underlineExpand {
  from { width: 0; }
  to   { width: 100%; }
}

/* ── Float up/down subtle (decorative) ── */
@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ── Active shimmer for plan-pro badge ── */
@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ─────────────────────────────────────────
   Applied Animation Classes
───────────────────────────────────────── */

/* Service card hover reveal */
.service-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    transparent 0%,
    rgba(22, 76, 74, 0.03) 100%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
}
.service-card:hover::after {
  opacity: 1;
}

/* Portfolio project hover shimmer */
.portfolio-project::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(201, 164, 78, 0.06),
    transparent
  );
  background-size: 200% 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
}
.portfolio-project:hover::after {
  opacity: 1;
  animation: shimmer 1.5s ease infinite;
}

/* Plan pro animated border */
.plan-pro {
  position: relative;
  overflow: hidden;
}
.plan-pro::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--green), var(--gold), var(--green));
  background-size: 200% 100%;
  animation: gradientShift 3s linear infinite;
}

/* Hero pill — NO CSS animation (GSAP controls width shrink + JS controls rotation) */
/* .hero-pill { animation: goldPulse ... } — removed, would conflict with GSAP width tween */



/* Floating animation on contact logo */
.contact-logo {
  animation: floatUpDown 4s ease-in-out infinite;
}

/* Testimonial transition animations */
.testimonial-card {
  transition:
    opacity    0.5s var(--ease-smooth),
    transform  0.5s var(--ease-smooth);
}

/* Data card hover perspective */
.data-card {
  transform-style: preserve-3d;
}

/* Scroll hint arrow bounce on hero */
.hero-scroll-hint {
  animation: floatUpDown 2s ease-in-out infinite;
}

/* Sidebar link hover underline */
.sidebar-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 0.4s var(--ease-smooth);
}
.sidebar-link:hover::after {
  width: 100%;
}

/* Form input focus ring animation */
.form-input:focus {
  animation: none;
}

/* Footer brand name parallax subtle fade */
.footer-brand-name {
  transition: opacity 0.5s;
}

/* Service number subtle float on hover */
.service-card:hover .service-num {
  animation: floatUpDown 2s ease-in-out infinite;
  color: var(--gold);
}

/* Custom cursor spin on portfolio hover */
.portfolio-section:hover ~ #customCursor .cursor-inner {
  animation: slowSpin 3s linear infinite;
}