/* ============================================================
   GILBERT ICE CREAM — animations.css
   Keyframes, Floating, Gradient, Scroll Animations
   ============================================================ */

/* ── KEYFRAMES ───────────────────────────────────────────────── */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-14px) rotate(3deg); }
  66%       { transform: translateY(-8px) rotate(-2deg); }
}

@keyframes floatReverse {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(12px) rotate(-4deg); }
}

@keyframes floatX {
  0%, 100% { transform: translateX(0px); }
  50%       { transform: translateX(12px); }
}

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

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(221,152,195,0.5); }
  50%       { box-shadow: 0 0 0 16px rgba(221,152,195,0); }
}

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

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

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

@keyframes shimmer {
  0%   { transform: translateX(-100%) skewX(-12deg); }
  100% { transform: translateX(200%) skewX(-12deg); }
}

@keyframes loadBounce {
  from { transform: translateY(0px) scale(1); }
  to   { transform: translateY(-20px) scale(1.1); }
}

@keyframes loadBar {
  0%   { width: 0%; }
  100% { width: 100%; }
}

@keyframes blobMorph {
  0%   { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  33%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  66%  { border-radius: 70% 30% 60% 40% / 30% 70% 40% 60%; }
  100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}

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

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

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

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

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

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

@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { opacity: 1; transform: scale(1.05); }
  70%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

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

@keyframes waveFloat {
  0%   { transform: translateX(0) translateY(0); }
  25%  { transform: translateX(8px) translateY(-8px); }
  50%  { transform: translateX(0) translateY(-14px); }
  75%  { transform: translateX(-8px) translateY(-8px); }
  100% { transform: translateX(0) translateY(0); }
}

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

@keyframes ripple {
  0%   { transform: scale(0); opacity: 0.8; }
  100% { transform: scale(3); opacity: 0; }
}

@keyframes twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.3; transform: scale(0.8); }
}

@keyframes drip {
  0%   { transform: scaleY(0) translateY(-10px); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: scaleY(1) translateY(0); opacity: 1; }
}

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

/* ── HERO ANIMATIONS ─────────────────────────────────────────── */
.hero-text .hero-badge   { animation: fadeInDown 0.7s ease 0.1s both; }
.hero-text .hero-title   { animation: fadeInUp 0.8s ease 0.2s both; }
.hero-text .hero-desc    { animation: fadeInUp 0.8s ease 0.35s both; }
.hero-text .hero-actions { animation: fadeInUp 0.8s ease 0.5s both; }
.hero-text .hero-social-proof { animation: fadeInUp 0.8s ease 0.65s both; }
.hero-visual             { animation: fadeIn 1s ease 0.3s both; }

/* ── BLOB ANIMATIONS ─────────────────────────────────────────── */
.blob-1 {
  width: 400px; height: 400px;
  animation: blobMorph 12s ease infinite, floatReverse 8s ease infinite;
}

.blob-2 {
  width: 300px; height: 300px;
  animation: blobMorph 15s ease infinite reverse, float 10s ease infinite;
  animation-delay: 2s;
}

.blob-3 {
  width: 250px; height: 250px;
  animation: blobMorph 10s ease infinite, waveFloat 7s ease infinite;
  animation-delay: 4s;
}

/* ── PARTICLE STARS ──────────────────────────────────────────── */
.star-particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: twinkle var(--duration, 2s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

/* ── SHIMMER EFFECT ─────────────────────────────────────────── */
.shimmer-wrap {
  position: relative;
  overflow: hidden;
}

.shimmer-wrap::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  transform: skewX(-12deg);
  animation: shimmer 2.5s ease infinite;
}

/* ── WAVY SECTION DIVIDER ─────────────────────────────────────── */
.wave-divider {
  position: relative;
  height: 80px;
  overflow: hidden;
  margin-top: -1px;
}

.wave-divider svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
}

/* ── ANIMATED GRADIENT BORDER ────────────────────────────────── */
.gradient-border {
  position: relative;
  border-radius: var(--r-lg);
  z-index: 0;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--r-lg) + 2px);
  background: var(--grad-btn);
  z-index: -1;
  opacity: 0;
  transition: opacity var(--t-med);
}

.gradient-border:hover::before { opacity: 1; }

/* ── FLOATING ICE CREAM SHAPES (global decoration) ───────────── */
.deco-shape {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0.22;
  font-size: 3rem;
}

.deco-shape:nth-child(1)  { animation: float 5.0s ease-in-out infinite;       animation-delay: 0.0s; }
.deco-shape:nth-child(2)  { animation: floatReverse 6.5s ease-in-out infinite; animation-delay: 0.8s; }
.deco-shape:nth-child(3)  { animation: waveFloat 7.0s ease-in-out infinite;    animation-delay: 1.6s; }
.deco-shape:nth-child(4)  { animation: float 4.5s ease-in-out infinite;        animation-delay: 2.4s; }
.deco-shape:nth-child(5)  { animation: floatReverse 5.5s ease-in-out infinite; animation-delay: 0.4s; }
.deco-shape:nth-child(6)  { animation: waveFloat 6.0s ease-in-out infinite;    animation-delay: 1.2s; }

/* ── PROGRESS BAR ────────────────────────────────────────────── */
.page-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--grad-btn);
  z-index: 10000;
  transition: width 0.1s linear;
  border-radius: 0 2px 2px 0;
}

/* ── HOVER LIFT ──────────────────────────────────────────────── */
.hover-lift { transition: transform var(--t-med), box-shadow var(--t-med); }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

/* ── ANIMATED UNDERLINE ──────────────────────────────────────── */
.underline-anim {
  position: relative;
  display: inline-block;
}

.underline-anim::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--grad-btn);
  border-radius: 2px;
  transition: width var(--t-med);
}
.underline-anim:hover::after { width: 100%; }

/* ── RIPPLE BUTTON EFFECT ────────────────────────────────────── */
.ripple-btn {
  position: relative;
  overflow: hidden;
}

.ripple-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: ripple 0.6s ease-out forwards;
  pointer-events: none;
}

/* ── SPINNING DECORATIVE RING ────────────────────────────────── */
.spin-ring {
  animation: spinSlow 20s linear infinite;
}

/* ── PULSE GLOW BUTTON ───────────────────────────────────────── */
.pulse-btn { animation: pulseGlow 2.5s ease infinite; }

/* ── PAGE TRANSITION ─────────────────────────────────────────── */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--grad-btn);
  z-index: 99998;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
  pointer-events: none;
}

.page-transition.entering {
  transform: translateY(0%);
}

/* ── STICKY SCROLL INDICATOR ─────────────────────────────────── */
@keyframes scaleWidth {
  from { transform-origin: left; transform: scaleX(0); }
  to   { transform-origin: left; transform: scaleX(1); }
}

/* ── CONFETTI PARTICLES ───────────────────────────────────────── */
@keyframes confettiFall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

.confetti-piece {
  position: fixed;
  width: 10px;
  height: 10px;
  top: -20px;
  z-index: 9999;
  pointer-events: none;
  animation: confettiFall linear forwards;
}

/* ── TRUCK BOUNCE ────────────────────────────────────────────── */
@keyframes truckBounce {
  0%, 100% { transform: translateY(0px); }
  10%, 30%, 50%, 70%, 90% { transform: translateY(-4px); }
  20%, 40%, 60%, 80% { transform: translateY(0px); }
}

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

/* ── FLIP CARD ───────────────────────────────────────────────── */
.flip-card { perspective: 1000px; }
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.7s ease;
  transform-style: preserve-3d;
}
.flip-card:hover .flip-card-inner { transform: rotateY(180deg); }
.flip-card-front, .flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: inherit;
}
.flip-card-back {
  transform: rotateY(180deg);
  background: var(--grad-btn);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

/* ── SLIDING HIGHLIGHT ───────────────────────────────────────── */
.slide-highlight {
  background-image: linear-gradient(to right, var(--pink) 0%, var(--pink) 100%);
  background-repeat: no-repeat;
  background-size: 0% 38%;
  background-position: 0% 88%;
  transition: background-size 0.4s ease;
}
.slide-highlight:hover { background-size: 100% 38%; }

/* ── ANIMATED BADGE DOT ──────────────────────────────────────── */
.badge-dot-live {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #4caf50;
  border-radius: 50%;
  position: relative;
}
.badge-dot-live::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: rgba(76,175,80,0.35);
  animation: pulse 1.5s ease infinite;
}

/* ── REDUCE MOTION ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}