/* ============================================================
   Hülya'dan — Custom styles & animations
   Tailwind handles most utilities; this file adds imagery,
   scroll reveals, and boutique-grade motion.
   ============================================================ */

:root {
  --cherry: #800020;
  --cherry-light: #991b1b;
  --leaf: #3f6212;
}

/* Font-weight helpers so `font-700` etc. from markup resolve */
.font-300 { font-weight: 300; }
.font-400 { font-weight: 400; }
.font-500 { font-weight: 500; }
.font-600 { font-weight: 600; }
.font-700 { font-weight: 700; }

/* ---------- Hero background ---------- */
.hero-bg {
  /* --hero-bg app.js tarafından, yönetim panelindeki görselle güncellenir */
  background-image:
    linear-gradient(180deg, rgba(92,0,24,0.15), rgba(63,98,18,0.15)),
    var(--hero-bg, url('https://images.unsplash.com/photo-1528821128474-27f963b062bf?auto=format&fit=crop&w=1920&q=80'));
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  animation: heroZoom 18s ease-in-out infinite alternate;
}

@keyframes heroZoom {
  from { transform: scale(1.05); }
  to   { transform: scale(1.15); }
}

/* ---------- Story image ---------- */
.story-img {
  background-image: var(--story-bg, url('https://images.unsplash.com/photo-1592841200221-a6898f307baa?auto=format&fit=crop&w=1000&q=80'));
  background-size: cover;
  background-position: center;
}

/* ---------- Navbar scrolled state ---------- */
#navbar.scrolled {
  background: rgba(253, 251, 247, 0.85);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
#navbar.scrolled a span,
#navbar.scrolled .text-neutral-600 { color: inherit; }

/* On hero (not scrolled) make nav links readable over dark image */
#navbar:not(.scrolled) .text-neutral-600 { color: rgba(255,255,255,0.85); }
#navbar:not(.scrolled) .text-cherry { color: #ffffff; }

/* ---------- CTA glow ---------- */
.cta-glow {
  position: absolute;
  top: -40%;
  left: 50%;
  transform: translateX(-50%);
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 60%);
  pointer-events: none;
}

/* ---------- Product card ---------- */
.product-card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(128, 0, 32, 0.18);
}
.product-thumb {
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}
.product-card:hover .product-thumb { transform: scale(1.06); }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Floating button ---------- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.animate-float { animation: float 3s ease-in-out infinite; }

/* ---------- Success pop ---------- */
@keyframes successPop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); }
}
.success-pop { animation: successPop 0.5s cubic-bezier(0.22, 1, 0.36, 1); }

/* ---------- Modal open state (toggled via JS) ---------- */
#modal.open #modal-overlay { opacity: 1; }
#modal.open #modal-card { transform: translateY(0); opacity: 1; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-bg { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .animate-float, .animate-bounce { animation: none; }
}