/* ============================================================
   THE KAFFEE NATION — ANIMATIONS CSS
   Complete Animation System
   ============================================================ */

/* ============================================================
   KEYFRAME DEFINITIONS
   ============================================================ */

/* Fade animations */
@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(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

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

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

@keyframes scaleInBounce {
  0% { opacity: 0; transform: scale(0.5); }
  70% { transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}

/* Clip-path reveal */
@keyframes clipRevealUp {
  from { clip-path: inset(0 0 100% 0); opacity: 0; transform: translateY(15px); }
  to { clip-path: inset(0 0 0% 0); opacity: 1; transform: translateY(0); }
}

@keyframes clipRevealRight {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0% 0 0); }
}

/* Letter spacing collapse */
@keyframes letterCollapse {
  from { letter-spacing: 0.5em; opacity: 0; }
  to { letter-spacing: normal; opacity: 1; }
}

/* Marquee */
@keyframes marqueeLeft {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes marqueeRight {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* Scroll bounce */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

/* Pulse animations */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.97); }
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 124, 89, 0.4); }
  50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(74, 124, 89, 0); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  50% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
}

/* Shimmer */
@keyframes shimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

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

/* Skeleton */
@keyframes skeleton-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

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

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

/* Rotate */
@keyframes rotateSlowCW {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Count-up pulse */
@keyframes countPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Page transition curtain */
@keyframes curtainDown {
  from { transform: scaleY(0); transform-origin: top; }
  to { transform: scaleY(1); transform-origin: top; }
}

@keyframes curtainUp {
  from { transform: scaleY(1); transform-origin: bottom; }
  to { transform: scaleY(0); transform-origin: bottom; }
}

/* Ripple */
@keyframes rippleEffect {
  to { transform: scale(4); opacity: 0; }
}

/* Coffee cup fill (preloader) */
@keyframes coffeeFill {
  0% { transform: scaleY(0); transform-origin: bottom; }
  100% { transform: scaleY(1); transform-origin: bottom; }
}

@keyframes steamRise {
  0% { opacity: 0; transform: translateY(0) scaleX(1); }
  50% { opacity: 0.6; transform: translateY(-15px) scaleX(1.2); }
  100% { opacity: 0; transform: translateY(-30px) scaleX(0.8); }
}

/* Typewriter */
@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes caretBlink {
  0%, 100% { border-right-color: var(--color-accent); }
  50% { border-right-color: transparent; }
}

/* Preloader progress */
@keyframes progressFill {
  from { width: 0%; }
  to { width: 100%; }
}

/* Icon bounce */
@keyframes iconBounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-8px); }
  60% { transform: translateY(-3px); }
}

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

/* Stamp pop */
@keyframes stampPop {
  0% { transform: scale(0) rotate(-15deg); opacity: 0; }
  60% { transform: scale(1.2) rotate(5deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Navbar shrink */
@keyframes navShrink {
  from { padding: 1.5rem 0; backdrop-filter: none; background: transparent; }
  to { padding: 0.75rem 0; backdrop-filter: blur(20px); }
}

/* Rating bar expand */
@keyframes barExpand {
  from { width: 0%; }
}

/* Cursor expand */
@keyframes cursorExpand {
  from { width: 12px; height: 12px; }
  to { width: 50px; height: 50px; }
}

/* Wipe */
@keyframes wipeIn {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0% 0 0); }
}

/* ============================================================
   SCROLL-TRIGGERED ANIMATION CLASSES
   (controlled by Intersection Observer in animations.js)
   ============================================================ */
[data-animate] {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate].animated {
  opacity: 1;
  transform: none !important;
}

[data-animate="fade-up"] { transform: translateY(30px); }
[data-animate="fade-down"] { transform: translateY(-30px); }
[data-animate="fade-left"] { transform: translateX(-40px); }
[data-animate="fade-right"] { transform: translateX(40px); }
[data-animate="scale-in"] { transform: scale(0.85); }
[data-animate="fade-in"] { transform: none; }

/* Stagger delays */
[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }
[data-delay="4"] { transition-delay: 0.4s; }
[data-delay="5"] { transition-delay: 0.5s; }
[data-delay="6"] { transition-delay: 0.6s; }
[data-delay="7"] { transition-delay: 0.7s; }
[data-delay="8"] { transition-delay: 0.8s; }

/* ============================================================
   PRELOADER
   ============================================================ */
#preloader {
  position: fixed;
  inset: 0;
  background: var(--color-primary);
  z-index: var(--z-preloader);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  overflow: hidden;
}

#preloader.fade-out {
  animation: fadeOut 0.5s ease forwards;
}

@keyframes fadeOut {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.preloader-coffee-cup {
  width: 80px;
  height: 80px;
  position: relative;
}

.preloader-coffee-cup svg {
  width: 100%;
  height: 100%;
}

.coffee-fill {
  animation: coffeeFill 1.8s ease-in-out forwards;
  animation-delay: 0.2s;
  transform: scaleY(0);
  transform-origin: bottom;
}

.steam-1 { animation: steamRise 1s ease-in-out 1.8s infinite; }
.steam-2 { animation: steamRise 1s ease-in-out 2.1s infinite; }
.steam-3 { animation: steamRise 1s ease-in-out 2.4s infinite; }

.preloader-brand {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--color-accent);
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--color-accent);
  width: 0;
  animation:
    typewriter 1s steps(20, end) 0.5s forwards,
    caretBlink 0.75s step-end 0.5s 3;
}

.preloader-tagline {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.4em;
  color: rgba(200, 169, 126, 0.5);
  text-transform: uppercase;
  opacity: 0;
  animation: fadeIn 0.5s ease 2s forwards;
}

.preloader-progress {
  width: 200px;
  height: 2px;
  background: rgba(200, 169, 126, 0.15);
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 1rem;
}

.preloader-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-accent), #F0E6D3);
  border-radius: 9999px;
  animation: progressFill 2s ease-in-out forwards;
  width: 0;
}

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  background: var(--color-accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, background 0.2s ease;
  mix-blend-mode: normal;
}

.cursor-ring {
  position: fixed;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(200, 169, 126, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease, transform 0.08s linear;
}

.cursor-label {
  position: fixed;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  pointer-events: none;
  z-index: var(--z-cursor);
  opacity: 0;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

body.cursor-hover .cursor-dot {
  width: 0;
  height: 0;
  background: transparent;
}

body.cursor-hover .cursor-ring {
  width: 64px;
  height: 64px;
  border-color: var(--color-accent);
  background: rgba(200, 169, 126, 0.08);
}

body.cursor-hover .cursor-label {
  opacity: 1;
}

body.cursor-image .cursor-dot { background: white; }
body.cursor-image .cursor-ring {
  width: 56px;
  height: 56px;
  border-color: white;
}

/* Cursor click ripple */
.cursor-click-ripple {
  position: fixed;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%) scale(0);
  animation: cursorRipple 0.4s ease-out forwards;
}

@keyframes cursorRipple {
  to { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}

/* ============================================================
   NAVIGATION ANIMATIONS
   ============================================================ */
.navbar {
  transition:
    background var(--transition-base),
    padding var(--transition-base),
    box-shadow var(--transition-base),
    backdrop-filter var(--transition-base);
}

.navbar.scrolled {
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 4px 30px rgba(44, 24, 16, 0.08);
  padding: 0.75rem 0;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--color-accent);
  border-radius: 9999px;
  transition: width var(--transition-base);
}

.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

/* Mobile menu */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}

.mobile-menu.open { transform: translateX(0); }

.mobile-menu .nav-item {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.mobile-menu.open .nav-item:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.15s; }
.mobile-menu.open .nav-item:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.2s; }
.mobile-menu.open .nav-item:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.25s; }
.mobile-menu.open .nav-item:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.3s; }
.mobile-menu.open .nav-item:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.35s; }
.mobile-menu.open .nav-item:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.4s; }

/* ============================================================
   PAGE TRANSITION CURTAIN
   ============================================================ */
.page-curtain {
  position: fixed;
  inset: 0;
  background: var(--color-primary);
  z-index: var(--z-preloader);
  transform: scaleY(0);
  transform-origin: top;
  pointer-events: none;
}

.page-curtain.entering {
  animation: curtainDown 0.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  pointer-events: all;
}

.page-curtain.leaving {
  transform-origin: bottom;
  animation: curtainUp 0.5s cubic-bezier(0.77, 0, 0.175, 1) 0.1s forwards;
}

/* ============================================================
   MARQUEE ANIMATION
   ============================================================ */
.marquee-track {
  display: flex;
  width: max-content;
  animation: marqueeLeft 30s linear infinite;
}

.marquee-track-reverse {
  display: flex;
  width: max-content;
  animation: marqueeRight 28s linear infinite;
}

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

/* ============================================================
   HERO SECTION ANIMATIONS
   ============================================================ */
.hero-eyebrow {
  opacity: 0;
  animation: fadeInDown 0.6s ease 0.3s forwards;
}

.hero-title .word {
  display: inline-block;
  overflow: hidden;
}

.hero-title .word-inner {
  display: inline-block;
  transform: translateY(100%);
  animation: wordReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-title .word:nth-child(1) .word-inner { animation-delay: 0.5s; }
.hero-title .word:nth-child(2) .word-inner { animation-delay: 0.65s; }
.hero-title .word:nth-child(3) .word-inner { animation-delay: 0.8s; }
.hero-title .word:nth-child(4) .word-inner { animation-delay: 0.95s; }

@keyframes wordReveal {
  to { transform: translateY(0); }
}

.hero-subtitle {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.7s ease 1.1s forwards;
}

.hero-badges {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.7s ease 1.3s forwards;
}

.hero-cta {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.7s ease 1.5s forwards;
}

.scroll-hint {
  opacity: 0;
  animation: fadeIn 0.7s ease 2s forwards;
}

.scroll-arrow {
  animation: scrollBounce 1.5s ease-in-out infinite;
}

/* ============================================================
   BRANCH CARDS
   ============================================================ */
.branch-card {
  transition:
    transform var(--transition-spring),
    box-shadow var(--transition-base);
}

.branch-card:hover {
  transform: translateY(-12px);
  box-shadow: var(--shadow-2xl), 0 0 40px rgba(200, 169, 126, 0.2);
}

.branch-card:hover .branch-card-image {
  transform: scale(1.07);
}

.branch-card-image {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.branch-card:hover .card-glow-border {
  opacity: 1;
}

.card-glow-border {
  position: absolute;
  inset: -1px;
  border: 1.5px solid var(--color-accent);
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--transition-base);
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   BENTO GRID
   ============================================================ */
.bento-item {
  transition: transform var(--transition-spring), box-shadow var(--transition-base);
}

.bento-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.bento-item:hover .bento-icon {
  animation: iconBounce 0.5s ease;
}

/* ============================================================
   TESTIMONIAL SLIDER
   ============================================================ */
.testimonial-track {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-card {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ============================================================
   COUNTER ANIMATION
   ============================================================ */
.counter-value {
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   HOVER IMAGE PARALLAX
   ============================================================ */
.parallax-img {
  transition: transform 0.1s linear;
  will-change: transform;
}

/* ============================================================
   BUTTON HOVER STATES
   ============================================================ */
.btn {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   INSTAGRAM FEED
   ============================================================ */
.insta-strip {
  display: flex;
  gap: 0.5rem;
  animation: marqueeLeft 25s linear infinite;
  width: max-content;
}

.insta-item {
  transition: transform var(--transition-spring);
  flex-shrink: 0;
}

.insta-item:hover { transform: scale(1.05); }

.insta-overlay {
  opacity: 0;
  transition: opacity var(--transition-base);
}

.insta-item:hover .insta-overlay { opacity: 1; }

/* ============================================================
   LOYALTY STAMP CARD
   ============================================================ */
.stamp {
  transition: transform var(--transition-spring), box-shadow var(--transition-base);
}

.stamp.filled {
  animation: stampPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.stamp.active-stamp {
  animation: stampGlow 1.5s ease-in-out infinite;
}

@keyframes stampGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(200, 169, 126, 0.4); }
  50% { box-shadow: 0 0 25px rgba(200, 169, 126, 0.7); }
}

/* ============================================================
   WHATSAPP BUTTON
   ============================================================ */
.whatsapp-btn {
  animation: pulseGlow 2s ease-in-out infinite;
  transition: transform var(--transition-spring);
}

.whatsapp-btn:hover {
  transform: scale(1.1);
  animation: none;
}

/* ============================================================
   DARK MODE TOGGLE
   ============================================================ */
.theme-toggle {
  transition: transform var(--transition-spring), background var(--transition-base);
}

.theme-toggle:hover {
  transform: rotate(15deg) scale(1.1);
}

.theme-icon {
  transition: opacity var(--transition-base), transform var(--transition-base);
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.lightbox.open {
  opacity: 1;
  pointer-events: all;
}

.lightbox-content {
  transform: scale(0.9);
  transition: transform var(--transition-spring);
}

.lightbox.open .lightbox-content {
  transform: scale(1);
}

/* ============================================================
   OFFERS BANNER
   ============================================================ */
.offer-item {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.offer-item.active {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   ANNOUNCEMENT SHIMMER
   ============================================================ */
.shimmer-bg {
  background: linear-gradient(
    90deg,
    var(--color-accent) 0%,
    #E8C99A 40%,
    var(--color-accent) 80%,
    #E8C99A 100%
  );
  background-size: 200% auto;
  animation: shimmer 3s linear infinite;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@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;
  }

  [data-animate] {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-eyebrow,
  .hero-subtitle,
  .hero-badges,
  .hero-cta,
  .scroll-hint {
    opacity: 1 !important;
    animation: none !important;
  }

  .hero-title .word-inner {
    transform: none !important;
    animation: none !important;
  }

  .preloader-brand {
    width: auto !important;
    border: none !important;
  }
}