/* ==========================================================================
   CREAMSON FOODS — ANIMATION SYSTEM
   GPU-Accelerated Micro-Interactions, Parallax & Keyframe Library
   ========================================================================== */

/* ==========================================================================
   1. PRELOADER
   ========================================================================== */

.preloader {
  position: fixed;
  inset: 0;
  background: var(--bg-canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 99999;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.preloader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-logo {
  width: 80px;
  height: 80px;
  animation: preloaderPulse 1.5s ease-in-out infinite;
}

.preloader-bar {
  width: 120px;
  height: 3px;
  background: var(--bg-surface-subtle);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-top: 1.5rem;
}

.preloader-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--gradient-leaf);
  border-radius: var(--radius-full);
  animation: preloaderFill 1.8s ease-in-out infinite;
}

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

@keyframes preloaderFill {
  0% { width: 0%; margin-left: 0; }
  50% { width: 60%; margin-left: 20%; }
  100% { width: 0%; margin-left: 100%; }
}

/* ==========================================================================
   2. COUNTER ANIMATION (Number Count-Up)
   ========================================================================== */

.counter-animate {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   3. FLOATING / PARALLAX ANIMATIONS
   ========================================================================== */

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-12px) rotate(1deg); }
  75% { transform: translateY(8px) rotate(-1deg); }
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

@keyframes floatRotate {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(8deg); }
}

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

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

.animate-float { animation: float 4s ease-in-out infinite; }
.animate-float-slow { animation: floatSlow 6s ease-in-out infinite; }
.animate-float-rotate { animation: floatRotate 5s ease-in-out infinite; }
.animate-spin { animation: spin 8s linear infinite; }
.animate-spin-slow { animation: spinSlow 20s linear infinite; }

/* Staggered float delays */
.float-delay-1 { animation-delay: -0.5s; }
.float-delay-2 { animation-delay: -1.2s; }
.float-delay-3 { animation-delay: -2s; }
.float-delay-4 { animation-delay: -3s; }
.float-delay-5 { animation-delay: -4s; }

/* ==========================================================================
   4. HOVER MICRO-INTERACTIONS
   ========================================================================== */

/* Lift effect */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* Scale pop */
.hover-scale {
  transition: transform var(--transition-spring);
}

.hover-scale:hover {
  transform: scale(1.04);
}

/* Glow ring */
.hover-glow {
  transition: box-shadow var(--transition-base);
}

.hover-glow:hover {
  box-shadow: 0 0 0 6px var(--color-forest-glow), var(--shadow-md);
}

/* Tilt on hover (subtle 3D) */
.hover-tilt {
  transition: transform var(--transition-base);
  transform-style: preserve-3d;
}

.hover-tilt:hover {
  transform: perspective(1000px) rotateX(-2deg) rotateY(3deg) translateY(-4px);
}

/* Image zoom on hover (for containers) */
.hover-zoom-img {
  overflow: hidden;
}

.hover-zoom-img img {
  transition: transform 0.6s var(--ease-smooth);
}

.hover-zoom-img:hover img {
  transform: scale(1.08);
}

/* ==========================================================================
   5. TEXT ANIMATIONS
   ========================================================================== */

/* Gradient text shimmer */
.text-shimmer {
  background: linear-gradient(90deg, var(--color-forest), var(--color-leaf), var(--color-amber), var(--color-leaf), var(--color-forest));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 4s linear infinite;
}

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

/* Typing cursor blink */
.typing-cursor::after {
  content: '|';
  animation: blink 1s step-end infinite;
  color: var(--color-leaf);
  font-weight: 300;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* Underline draw animation */
.underline-draw {
  position: relative;
  display: inline-block;
}

.underline-draw::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--gradient-leaf);
  border-radius: var(--radius-full);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s var(--ease-smooth);
}

.underline-draw:hover::after,
.underline-draw.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ==========================================================================
   6. SCROLL-TRIGGERED PARTICLES / DECORATIVE
   ========================================================================== */

/* Floating particle dots */
.particles-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-leaf);
  opacity: 0.15;
  animation: particleFloat 8s ease-in-out infinite;
}

.particle:nth-child(odd) {
  background: var(--color-amber);
  width: 4px;
  height: 4px;
}

@keyframes particleFloat {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.15; }
  25% { transform: translateY(-30px) translateX(15px); opacity: 0.3; }
  50% { transform: translateY(-20px) translateX(-10px); opacity: 0.1; }
  75% { transform: translateY(-40px) translateX(20px); opacity: 0.25; }
}

/* ==========================================================================
   7. PAGE TRANSITION
   ========================================================================== */

.page-transition {
  position: fixed;
  inset: 0;
  background: var(--color-forest);
  z-index: 99998;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.6s var(--ease-smooth);
}

.page-transition.active {
  transform: scaleY(1);
  transform-origin: top;
}

/* ==========================================================================
   8. MARQUEE / INFINITE SCROLL
   ========================================================================== */

.marquee {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.marquee-track {
  display: inline-flex;
  animation: marqueeScroll 25s linear infinite;
}

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

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0 2.5rem;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.marquee-item .marquee-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-leaf);
  flex-shrink: 0;
}

/* ==========================================================================
   9. CURSOR GLOW (Desktop Premium Effect)
   ========================================================================== */

.cursor-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 163, 85, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 99997;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  will-change: transform;
}

/* ==========================================================================
   10. PROGRESS / SCROLL INDICATOR
   ========================================================================== */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--gradient-leaf);
  z-index: 10001;
  width: 0%;
  transition: width 0.1s linear;
}

/* ==========================================================================
   REDUCED MOTION — Accessibility
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1;
    transform: none;
  }

  .hero-image-main,
  .hero-float,
  .animate-float,
  .animate-float-slow,
  .animate-float-rotate {
    animation: none;
  }

  .cursor-glow {
    display: none;
  }
}