/* ==========================================================================
   GREEN GINI THEME — ANIMATIONS CSS
   All keyframes, transitions, and animation utilities
   ========================================================================== */

/* ── Marquee (Trust Bar) ─────────────────────────────────────────────────── */
@keyframes gg-marquee {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.gg-marquee-track {
  display: flex;
  width: max-content;
  animation: gg-marquee 80s linear infinite;
}

.gg-marquee-track:hover {
  animation-play-state: paused;
}

/* ── Hero Slide Fade ─────────────────────────────────────────────────────── */
@keyframes gg-fade-in {
  from { opacity: 0; transform: scale(1.04); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes gg-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.gg-slide-enter {
  animation: gg-fade-in 0.8s ease forwards;
}

.gg-slide-exit {
  animation: gg-fade-out 0.5s ease forwards;
}

/* ── Ping (Province Dots) ────────────────────────────────────────────────── */
@keyframes gg-ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

.gg-ping {
  animation: gg-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

/* ── Float Animation ─────────────────────────────────────────────────────── */
@keyframes gg-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.gg-float {
  animation: gg-float 4s ease-in-out infinite;
}

/* ── Pulse Glow ──────────────────────────────────────────────────────────── */
@keyframes gg-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(17, 193, 157, 0.4); }
  50%       { box-shadow: 0 0 0 12px rgba(17, 193, 157, 0); }
}

.gg-pulse-glow {
  animation: gg-pulse-glow 2s ease-in-out infinite;
}

/* ── Slide In from Right (Process Steps) ────────────────────────────────── */
@keyframes gg-slide-in-right {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes gg-slide-out-left {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-30px); }
}

/* ── Shimmer (Buttons/Loading) ───────────────────────────────────────────── */
@keyframes gg-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── Scale Up (CTA reveal) ───────────────────────────────────────────────── */
@keyframes gg-scale-up {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Image Shine Hover ───────────────────────────────────────────────────── */
.shine-hover {
  position: relative;
  overflow: hidden;
}

.shine-hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: 0.75s;
}

.shine-hover:hover::after {
  left: 150%;
}

/* ── Hover Underline Slide ───────────────────────────────────────────────── */
.gg-hover-underline {
  position: relative;
  display: inline-block;
}

.gg-hover-underline::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 0.5px;
  background-color: var(--gg-emerald);
  transition: width 0.3s ease;
}

.gg-hover-underline:hover::after,
.gg-hover-underline.active::after {
  width: 100%;
}

/* ── Transition Classes ──────────────────────────────────────────────────── */
.gg-transition {
  transition: all 0.3s ease;
}

.gg-transition-slow {
  transition: all 0.5s ease;
}

.gg-transition-fast {
  transition: all 0.15s ease;
}

/* ── Accordion Height Transition ─────────────────────────────────────────── */
.gg-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.gg-accordion-body.open {
  max-height: 500px;
}