/* ============================================================
   FURNOVA — Animations v2
   Color-aware · Premium transitions · Rich effects
   ============================================================ */

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes fadeIn    { from{opacity:0}              to{opacity:1} }
@keyframes fadeUp    { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:none} }
@keyframes slideLeft { from{opacity:0;transform:translateX(-36px)} to{opacity:1;transform:none} }
@keyframes slideRight{ from{opacity:0;transform:translateX(36px)} to{opacity:1;transform:none} }
@keyframes scaleIn   { from{opacity:0;transform:scale(0.9)}  to{opacity:1;transform:none} }
@keyframes clipReveal{ from{clip-path:inset(0 100% 0 0)}     to{clip-path:inset(0 0% 0 0)} }
@keyframes goldShimmer {
  0%  { background-position: -200% center; }
  100%{ background-position:  200% center; }
}
@keyframes floatY {
  0%,100%{ transform: translateY(0); }
  50%    { transform: translateY(-10px); }
}
@keyframes rotateSlow{ from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes borderPulse {
  0%,100%{ box-shadow: 0 0 0 0 rgba(201,168,76,0); }
  50%    { box-shadow: 0 0 0 8px rgba(201,168,76,0.15); }
}
@keyframes gradientShift {
  0%  { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
@keyframes numberPop {
  0%  { opacity:0; transform:translateY(20px) scale(0.8); }
  70% { transform:translateY(-4px) scale(1.05); }
  100%{ opacity:1; transform:none; }
}

/* ── Entrance helpers ─────────────────────────────────────── */
.anim-fade-up     { opacity:0; transform:translateY(36px);  }
.anim-fade-in     { opacity:0; }
.anim-slide-left  { opacity:0; transform:translateX(-44px); }
.anim-slide-right { opacity:0; transform:translateX(44px);  }
.anim-scale-in    { opacity:0; transform:scale(0.88);       }
.anim-clip        { clip-path:inset(0 100% 0 0);            }
.anim-float       { animation: floatY 4s ease-in-out infinite; }

/* ── Hero CSS fallback ────────────────────────────────────── */
.hero-anim-1 { animation: fadeUp 1s var(--ease-out,cubic-bezier(.16,1,.3,1)) 0.2s both; }
.hero-anim-2 { animation: fadeUp 1s var(--ease-out,cubic-bezier(.16,1,.3,1)) 0.4s both; }
.hero-anim-3 { animation: fadeUp 1s var(--ease-out,cubic-bezier(.16,1,.3,1)) 0.6s both; }
.hero-anim-4 { animation: fadeUp 1s var(--ease-out,cubic-bezier(.16,1,.3,1)) 0.85s both; }

/* ── Gold shimmer text ────────────────────────────────────── */
.gold-shimmer {
  background: linear-gradient(90deg, #C9A84C 0%, #F5E9CC 40%, #E8C97A 60%, #C9A84C 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: goldShimmer 3.5s linear infinite;
}

/* ── Animated gradient background ────────────────────────── */
.grad-animate {
  background: linear-gradient(-45deg, #1C1712, #2A2118, #1A2340, #2D3A5E);
  background-size: 400% 400%;
  animation: gradientShift 12s ease infinite;
}

/* ── Image reveal ─────────────────────────────────────────── */
.img-reveal-wrap { overflow: hidden; position: relative; }
.img-reveal-wrap img { transform: scale(1.1); transition: transform 1.3s var(--ease-out,cubic-bezier(.16,1,.3,1)); }
.img-reveal-wrap.revealed img { transform: scale(1); }

/* ── Hover lift ───────────────────────────────────────────── */
.hover-lift {
  transition: transform 0.45s var(--ease-out,cubic-bezier(.16,1,.3,1)),
              box-shadow 0.45s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.hover-lift:hover { transform: translateY(-7px); box-shadow: 0 24px 56px rgba(28,23,18,0.14); }

/* ── Magnetic button ──────────────────────────────────────── */
.btn-magnetic { transition: transform 0.35s var(--ease-out,cubic-bezier(.16,1,.3,1)); display: inline-flex; }

/* ── Marquee ──────────────────────────────────────────────── */
.marquee-wrap { overflow:hidden; white-space:nowrap; }
.marquee-track { display:inline-flex; animation:marquee 35s linear infinite; gap:3rem; }
.marquee-track:hover { animation-play-state:paused; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── Scroll progress ──────────────────────────────────────── */
#scroll-progress {
  position:fixed; top:0; left:0; height:2.5px;
  background: linear-gradient(90deg, #C9A84C, #E8C97A, #C9A84C);
  background-size: 200% auto;
  animation: goldShimmer 2s linear infinite;
  z-index:9999; transform-origin:left; transform:scaleX(0);
  transition: transform 0.1s linear;
}

/* ── Skeleton ─────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, #EDE9E4 25%, #FAF7F2 50%, #EDE9E4 75%);
  background-size:200% 100%; animation:shimmer 1.6s infinite; border-radius:8px;
}
@keyframes shimmer { from{background-position:200% 0} to{background-position:-200% 0} }

/* ── Page transition overlay ──────────────────────────────── */
.page-transition {
  position:fixed; inset:0;
  background: var(--grad-espresso, linear-gradient(135deg,#1C1712,#3D2E20));
  z-index:9990; transform:translateY(100%); pointer-events:none;
}

/* ── Number counters ──────────────────────────────────────── */
.counter { display:inline-block; }
[data-counter] { animation: numberPop 0.8s var(--ease-out,cubic-bezier(.16,1,.3,1)) both; }

/* ── Stagger children ─────────────────────────────────────── */
.stagger-children > * { opacity:0; transform:translateY(22px); }

/* ── Parallax ─────────────────────────────────────────────── */
[data-parallax] { will-change:transform; }

/* ── Section divider line ─────────────────────────────────── */
.section-tag::before {
  content:''; display:inline-block;
  width:20px; height:1.5px;
  background:linear-gradient(90deg, #C9A84C, #E8C97A);
  border-radius:2px;
}

/* ── Gold border pulse ────────────────────────────────────── */
.pulse-gold { animation: borderPulse 2.5s ease-in-out infinite; }

/* ── Focus ring ───────────────────────────────────────────── */
:focus-visible { outline:2.5px solid #C9A84C; outline-offset:3px; border-radius:6px; }

/* ── Split text ───────────────────────────────────────────── */
.split-text .char { display:inline-block; overflow:hidden; vertical-align:top; }
.split-text .char-inner { display:inline-block; transform:translateY(100%); transition:transform 0.75s var(--ease-out,cubic-bezier(.16,1,.3,1)); }
.split-text.revealed .char-inner { transform:none; }

/* ── Collection hero overlay ──────────────────────────────── */
.collection-hero-overlay {
  position:absolute; inset:0;
  background: linear-gradient(to top, rgba(28,23,18,0.88) 0%, rgba(28,23,18,0.15) 55%, transparent 100%);
}

/* ── Card glow on hover ───────────────────────────────────── */
.card-glow {
  transition: box-shadow 0.4s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.card-glow:hover {
  box-shadow: 0 0 0 1px rgba(201,168,76,0.3), 0 24px 60px rgba(28,23,18,0.16);
}

/* ── Gold underline animation ─────────────────────────────── */
.gold-underline {
  position:relative;
  display:inline-block;
}
.gold-underline::after {
  content:'';
  position:absolute; bottom:-2px; left:0;
  width:0; height:1.5px;
  background:linear-gradient(90deg, #C9A84C, #E8C97A);
  border-radius:2px;
  transition:width 0.4s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.gold-underline:hover::after { width:100%; }

/* ── Gradient text utility ────────────────────────────────── */
.text-gold {
  background: linear-gradient(135deg, #C9A84C 0%, #E8C97A 50%, #C9A84C 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.text-sage {
  background: linear-gradient(135deg, #4A5E47 0%, #6B8068 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}

/* ── Background accent blobs ──────────────────────────────── */
.blob-gold {
  position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(201,168,76,0.18) 0%, transparent 70%);
  filter:blur(40px); animation:floatY 8s ease-in-out infinite;
}
.blob-sage {
  position:absolute; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(107,128,104,0.15) 0%, transparent 70%);
  filter:blur(50px); animation:floatY 10s ease-in-out infinite reverse;
}

/* ── Hero decorative ring ─────────────────────────────────── */
.hero-ring {
  position:absolute; border-radius:50%;
  border:1px solid rgba(201,168,76,0.12);
  animation:rotateSlow 30s linear infinite;
  pointer-events:none;
}

/* ── Shimmer card effect ──────────────────────────────────── */
.shimmer-card {
  position:relative; overflow:hidden;
}
.shimmer-card::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(105deg, transparent 40%, rgba(201,168,76,0.06) 50%, transparent 60%);
  transform:translateX(-100%);
  transition:transform 0.7s var(--ease-out,cubic-bezier(.16,1,.3,1));
}
.shimmer-card:hover::after { transform:translateX(100%); }

/* ── Journey timeline dot ─────────────────────────────────── */
.timeline-dot {
  width:14px; height:14px; border-radius:50%;
  background:linear-gradient(135deg, #C9A84C, #E8C97A);
  box-shadow:0 0 0 4px rgba(201,168,76,0.2);
  transition:box-shadow 0.3s;
}
.timeline-dot:hover { box-shadow:0 0 0 8px rgba(201,168,76,0.15); }

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
  .marquee-track    { animation:none; }
  [data-parallax]   { transform:none !important; }
  .gold-shimmer     { animation:none; }
  #scroll-progress  { animation:none; background:#C9A84C; }
  .blob-gold,.blob-sage { animation:none; }
}