/* ============================================================
   Cofella.az — Animasiya Stilləri
   ============================================================ */

/* ── AOS (Animate On Scroll) əlavə effektlər ─────────────── */
[data-aos] { pointer-events: none; }
[data-aos].aos-animate { pointer-events: auto; }

/* ── Fade Animasiyaları ───────────────────────────────────── */
@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); }
}

/* ── Scale Animasiyaları ──────────────────────────────────── */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes scaleInY {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: scaleY(1); }
}

/* ── Pulse ────────────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.05); }
}
@keyframes pulseRing {
  0%   { transform: scale(0.85); opacity: 0.8; }
  100% { transform: scale(1.5);  opacity: 0; }
}

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

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

/* ── Shimmer (skeleton loading) ──────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, var(--beige) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* ── Utility Animasiya Siniflər ───────────────────────────── */
.animate-fadeInUp   { animation: fadeInUp   0.6s ease both; }
.animate-fadeInDown { animation: fadeInDown 0.6s ease both; }
.animate-fadeInLeft { animation: fadeInLeft 0.6s ease both; }
.animate-fadeInRight{ animation: fadeInRight 0.6s ease both; }
.animate-scaleIn    { animation: scaleIn    0.5s ease both; }
.animate-float      { animation: float      3s ease-in-out infinite; }
.animate-pulse      { animation: pulse      2s ease-in-out infinite; }

/* Gecikmə utilitləri */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }

/* ── Hero Slide Animasiyaları ─────────────────────────────── */
.hero-slide.active .hero-slide__tag     { animation: fadeInDown 0.6s ease 0.2s both; }
.hero-slide.active .hero-slide__title   { animation: fadeInUp   0.7s ease 0.35s both; }
.hero-slide.active .hero-slide__subtitle{ animation: fadeInUp   0.7s ease 0.5s both; }
.hero-slide.active .hero-slide__btns    { animation: fadeInUp   0.7s ease 0.65s both; }

/* ── Counter Animasiyası ──────────────────────────────────── */
.counter-wrapper .stat-item__num { transition: color 0.3s ease; }

/* ── Card Hover Animasiyaları ─────────────────────────────── */
.hover-lift {
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease;
}
.hover-lift:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }

/* ── Ripple effekti (düymə klik) ─────────────────────────── */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: ''; position: absolute;
  width: 0; height: 0; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
  opacity: 0;
}
.btn:active::before {
  width: 300px; height: 300px;
  left: var(--click-x, 50%); top: var(--click-y, 50%);
  opacity: 1;
}

/* ── Page Transition ──────────────────────────────────────── */
.page-enter { animation: fadeIn 0.4s ease; }

/* ── Swiper Slider Xüsusi Stilləri ───────────────────────── */
.swiper-pagination-bullet {
  width: 8px; height: 8px;
  background: rgba(255,255,255,0.5); opacity: 1;
}
.swiper-pagination-bullet-active {
  width: 28px; border-radius: 4px;
  background: var(--white);
}
.swiper-button-next,
.swiper-button-prev {
  width: 48px; height: 48px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%; color: var(--white) !important;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.2);
  transition: var(--transition);
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: rgba(255,255,255,0.3);
}
.swiper-button-next::after,
.swiper-button-prev::after { font-size: 1rem !important; font-weight: 700 !important; }

/* ── Progress Bar (bloq oxuma) ───────────────────────────── */
#reading-progress {
  position: fixed; top: 72px; left: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  z-index: 999; width: 0%; transition: width 0.1s linear;
}

/* ── Scroll to Top düyməsi ────────────────────────────────── */
#scroll-top {
  position: fixed; bottom: 96px; right: 28px;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); color: var(--primary);
  border: 2px solid var(--border); box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; cursor: pointer; z-index: 988;
  opacity: 0; visibility: hidden; transition: var(--transition);
  transform: translateY(10px);
}
#scroll-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
#scroll-top:hover   { background: var(--primary); color: var(--white); border-color: var(--primary); }

/* ── Map Marker animasiyası ───────────────────────────────── */
.map-marker-pulse {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--primary); position: relative;
}
.map-marker-pulse::before {
  content: ''; position: absolute;
  inset: -4px; border-radius: 50%;
  background: rgba(107,58,42,0.3);
  animation: pulseRing 1.5s ease-out infinite;
}

/* ── Image Lazy Load ──────────────────────────────────────── */
img.lazy { opacity: 0; transition: opacity 0.4s ease; }
img.lazy.loaded { opacity: 1; }

/* ── Tooltip ──────────────────────────────────────────────── */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--text-dark); color: var(--white);
  padding: 6px 10px; border-radius: var(--radius-sm);
  font-size: 0.75rem; white-space: nowrap; pointer-events: none;
  opacity: 0; transition: opacity 0.2s ease;
}
[data-tooltip]:hover::after { opacity: 1; }

/* ── Notification / Toast ─────────────────────────────────── */
.toast-container {
  position: fixed; top: 90px; right: 20px; z-index: 9990;
  display: flex; flex-direction: column; gap: 10px;
}
.toast {
  min-width: 280px; max-width: 360px;
  padding: 14px 18px; border-radius: var(--radius-md);
  background: var(--white); box-shadow: var(--shadow-lg);
  border-left: 4px solid var(--primary);
  display: flex; align-items: center; gap: 12px;
  font-size: 0.875rem; font-weight: 500;
  animation: fadeInRight 0.3s ease;
}
.toast--success { border-color: #22c55e; }
.toast--error   { border-color: #ef4444; }
.toast--info    { border-color: var(--primary); }
.toast.removing { animation: fadeInRight 0.3s ease reverse; }
/* ============================================================
   Cofella.az — Kofe Animasiyaları
   ============================================================ */

/* ── Canvas Kofe Dənələri ─────────────────────────────────── */
#coffee-beans-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* ── SVG Buxar Animasiyası ────────────────────────────────── */
.hero-steam {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
  opacity: 0.18;
}
.steam-svg {
  width: 100%;
  height: 100%;
}
.steam-path {
  fill: none;
  stroke: #C9A96E;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
}
.steam-path.s1 { animation: steamRise 3.0s ease-in-out infinite 0.0s; }
.steam-path.s2 { animation: steamRise 3.0s ease-in-out infinite 0.5s; }
.steam-path.s3 { animation: steamRise 3.0s ease-in-out infinite 1.0s; }
.steam-path.s4 { animation: steamRise 3.0s ease-in-out infinite 1.5s; }
.steam-path.s5 { animation: steamRise 3.0s ease-in-out infinite 2.0s; }

@keyframes steamRise {
  0%   { stroke-dashoffset: 60; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 0.6; }
  100% { stroke-dashoffset: -60; opacity: 0; }
}

/* ── Hero məzmun z-index (buxar üzərində) ─────────────────── */
.hero .container { position: relative; z-index: 3; }
.hero-arrows     { z-index: 4; }
.hero-controls   { z-index: 4; }

/* ── Kofe Dalğası Separator ───────────────────────────────── */
.coffee-wave-separator {
  width: 100%;
  line-height: 0;
  margin-bottom: -2px;
  background: var(--beige);
}
.coffee-wave-separator svg {
  display: block;
  width: 100%;
  height: 80px;
}

/* ── Dalğa animasiyası ────────────────────────────────────── */
.coffee-wave-separator path:first-child {
  animation: waveMove 6s ease-in-out infinite;
  transform-origin: center;
}
.coffee-wave-separator path:last-child {
  animation: waveMove 8s ease-in-out infinite reverse;
  transform-origin: center;
}
@keyframes waveMove {
  0%, 100% { d: path("M0,40 C180,80 360,0 540,40 C720,80 900,0 1080,40 C1260,80 1380,20 1440,40 L1440,80 L0,80 Z"); }
  50%       { d: path("M0,50 C180,10 360,70 540,30 C720,10 900,70 1080,30 C1260,10 1380,60 1440,30 L1440,80 L0,80 Z"); }
}

/* ── Kofe fincanı hover glow (məhsul kartı) ───────────────── */
.product-card:hover .product-card__img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(201,169,110,0.15), transparent 70%);
  pointer-events: none;
}

/* ── Parallax kofe fon ────────────────────────────────────── */
.stats-section { position: relative; overflow: hidden; }
.stats-section::before {
  content: '☕';
  position: absolute;
  font-size: 20rem;
  opacity: 0.03;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  animation: coffeeBgPulse 4s ease-in-out infinite;
}
@keyframes coffeeBgPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.03; }
  50%       { transform: translate(-50%, -50%) scale(1.1); opacity: 0.05; }
}