/* ============================================================
   ANOKHI CREATION — Rich Visual Effects
   Animated gradient orbs · Sparkles · Glass shimmer · Scroll reveals
   Inspired by: soft blurred multi-color gradient backgrounds
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   ANIMATED GRADIENT ORB BACKGROUND
   Multiple large blurred color blobs that drift slowly —
   exactly like the reference images (orange/gold palette)
   ══════════════════════════════════════════════════════════ */

/* The fixed background layer that sits behind everything */
.gradient-bg {
  position: fixed;
  inset: 0;
  z-index: -10;
  overflow: hidden;
  background: #fdf8f3;
}

/* Orb 1 — large warm orange, top-right */
.gradient-bg .orb-1 {
  position: absolute;
  width: 900px;
  height: 900px;
  top: -200px;
  right: -150px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%,
    rgba(200, 119, 58, 0.55) 0%,
    rgba(212, 168, 83, 0.30) 35%,
    rgba(240, 180, 80, 0.12) 60%,
    transparent 75%);
  filter: blur(72px);
  animation: orbFloat1 20s ease-in-out infinite alternate;
  will-change: transform;
}

/* Orb 2 — golden yellow, center-left */
.gradient-bg .orb-2 {
  position: absolute;
  width: 750px;
  height: 750px;
  top: 20%;
  left: -100px;
  border-radius: 50%;
  background: radial-gradient(circle at 55% 55%,
    rgba(212, 168, 83, 0.45) 0%,
    rgba(240, 200, 100, 0.22) 40%,
    rgba(200, 119, 58, 0.08) 65%,
    transparent 80%);
  filter: blur(80px);
  animation: orbFloat2 26s ease-in-out infinite alternate;
  will-change: transform;
}

/* Orb 3 — soft peach/cream, bottom-center */
.gradient-bg .orb-3 {
  position: absolute;
  width: 650px;
  height: 650px;
  bottom: -100px;
  left: 30%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(240, 200, 140, 0.40) 0%,
    rgba(212, 168, 83, 0.18) 45%,
    transparent 70%);
  filter: blur(90px);
  animation: orbFloat3 32s ease-in-out infinite alternate;
  will-change: transform;
}

/* Orb 4 — deep amber, bottom-right */
.gradient-bg .orb-4 {
  position: absolute;
  width: 500px;
  height: 500px;
  bottom: 5%;
  right: -80px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 45%,
    rgba(160, 90, 32, 0.35) 0%,
    rgba(200, 119, 58, 0.15) 50%,
    transparent 72%);
  filter: blur(70px);
  animation: orbFloat4 22s ease-in-out infinite alternate;
  will-change: transform;
}

/* Orb 5 — light gold highlight, top-center */
.gradient-bg .orb-5 {
  position: absolute;
  width: 400px;
  height: 400px;
  top: 10%;
  left: 40%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 220, 120, 0.28) 0%,
    rgba(212, 168, 83, 0.10) 55%,
    transparent 75%);
  filter: blur(60px);
  animation: orbFloat5 18s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes orbFloat1 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-60px, 50px) scale(1.08); }
  66%  { transform: translate(40px, -40px) scale(0.94); }
  100% { transform: translate(-30px, 20px) scale(1.04); }
}
@keyframes orbFloat2 {
  0%   { transform: translate(0, 0) scale(1); }
  40%  { transform: translate(70px, -50px) scale(1.10); }
  80%  { transform: translate(-40px, 40px) scale(0.92); }
  100% { transform: translate(30px, -20px) scale(1.05); }
}
@keyframes orbFloat3 {
  0%   { transform: translate(0, 0) scale(1); }
  30%  { transform: translate(-50px, -30px) scale(1.06); }
  70%  { transform: translate(60px, 20px) scale(0.96); }
  100% { transform: translate(-20px, -40px) scale(1.03); }
}
@keyframes orbFloat4 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-40px, -60px) scale(1.12); }
  100% { transform: translate(30px, 30px) scale(0.90); }
}
@keyframes orbFloat5 {
  0%   { transform: translate(0, 0) scale(1); opacity: 0.7; }
  50%  { transform: translate(50px, 30px) scale(1.15); opacity: 1; }
  100% { transform: translate(-30px, -20px) scale(0.88); opacity: 0.6; }
}

/* ══════════════════════════════════════════════════════════
   SPARKLE / GLITTER PARTICLES
   ══════════════════════════════════════════════════════════ */

.sparkle-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -5;
  overflow: hidden;
}
.sparkle {
  position: absolute;
  pointer-events: none;
  animation: sparkleTwinkle ease-in-out infinite;
}
.sparkle::before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,220,100,0.95) 0%, rgba(200,119,58,0.5) 50%, transparent 100%);
  box-shadow: 0 0 8px 3px rgba(212,168,83,0.55);
}
.sparkle:nth-child(1)  { left:4%;   top:12%; width:5px;  height:5px;  animation-duration:3.0s; animation-delay:0s;    }
.sparkle:nth-child(2)  { left:11%;  top:68%; width:3px;  height:3px;  animation-duration:4.2s; animation-delay:-1.1s; }
.sparkle:nth-child(3)  { left:20%;  top:32%; width:6px;  height:6px;  animation-duration:2.7s; animation-delay:-0.4s; }
.sparkle:nth-child(4)  { left:33%;  top:85%; width:4px;  height:4px;  animation-duration:5.1s; animation-delay:-2.0s; }
.sparkle:nth-child(5)  { left:47%;  top:18%; width:5px;  height:5px;  animation-duration:3.6s; animation-delay:-0.7s; }
.sparkle:nth-child(6)  { left:57%;  top:58%; width:7px;  height:7px;  animation-duration:2.4s; animation-delay:-1.4s; }
.sparkle:nth-child(7)  { left:66%;  top:8%;  width:4px;  height:4px;  animation-duration:4.5s; animation-delay:-2.9s; }
.sparkle:nth-child(8)  { left:74%;  top:42%; width:5px;  height:5px;  animation-duration:3.1s; animation-delay:-0.2s; }
.sparkle:nth-child(9)  { left:81%;  top:77%; width:4px;  height:4px;  animation-duration:4.9s; animation-delay:-1.7s; }
.sparkle:nth-child(10) { left:89%;  top:28%; width:3px;  height:3px;  animation-duration:3.4s; animation-delay:-2.4s; }
.sparkle:nth-child(11) { left:94%;  top:62%; width:6px;  height:6px;  animation-duration:2.8s; animation-delay:-0.6s; }
.sparkle:nth-child(12) { left:28%;  top:52%; width:3px;  height:3px;  animation-duration:4.3s; animation-delay:-0.9s; }
.sparkle:nth-child(13) { left:41%;  top:75%; width:5px;  height:5px;  animation-duration:3.9s; animation-delay:-2.7s; }
.sparkle:nth-child(14) { left:53%;  top:90%; width:4px;  height:4px;  animation-duration:5.3s; animation-delay:-0.3s; }
.sparkle:nth-child(15) { left:17%;  top:48%; width:6px;  height:6px;  animation-duration:2.5s; animation-delay:-1.5s; }
.sparkle:nth-child(16) { left:87%;  top:10%; width:4px;  height:4px;  animation-duration:4.1s; animation-delay:-3.1s; }
@keyframes sparkleTwinkle {
  0%   { opacity:0;   transform:scale(0.3) rotate(0deg); }
  20%  { opacity:0.9; transform:scale(1.3) rotate(60deg); }
  50%  { opacity:0.3; transform:scale(0.7) rotate(120deg); }
  80%  { opacity:1.0; transform:scale(1.5) rotate(160deg); }
  100% { opacity:0;   transform:scale(0.3) rotate(200deg); }
}

/* Floating drift particles */
.particle-field { position:fixed; inset:0; pointer-events:none; z-index:-4; overflow:hidden; }
.particle {
  position:absolute; border-radius:50%;
  background:radial-gradient(circle, rgba(212,168,83,0.6) 0%, rgba(200,119,58,0.25) 55%, transparent 100%);
  animation:particleDrift linear infinite;
}
.particle:nth-child(1) { width:5px; height:5px; left:7%;  top:95%; animation-duration:19s; animation-delay:0s;    }
.particle:nth-child(2) { width:3px; height:3px; left:21%; top:92%; animation-duration:25s; animation-delay:-4s;   }
.particle:nth-child(3) { width:7px; height:7px; left:37%; top:98%; animation-duration:16s; animation-delay:-9s;   }
.particle:nth-child(4) { width:4px; height:4px; left:54%; top:94%; animation-duration:29s; animation-delay:-2s;   }
.particle:nth-child(5) { width:6px; height:6px; left:69%; top:97%; animation-duration:21s; animation-delay:-13s;  }
.particle:nth-child(6) { width:3px; height:3px; left:84%; top:90%; animation-duration:18s; animation-delay:-7s;   }
.particle:nth-child(7) { width:5px; height:5px; left:2%;  top:87%; animation-duration:23s; animation-delay:-11s;  }
.particle:nth-child(8) { width:4px; height:4px; left:47%; top:96%; animation-duration:27s; animation-delay:-17s;  }
@keyframes particleDrift {
  0%   { transform:translateY(0) translateX(0);    opacity:0; }
  8%   { opacity:0.8; }
  92%  { opacity:0.3; }
  100% { transform:translateY(-100vh) translateX(15px); opacity:0; }
}

/* ══════════════════════════════════════════════════════════
   CURSOR GLOW — follows mouse with warm light
   ══════════════════════════════════════════════════════════ */

.cursor-glow {
  position: fixed;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  pointer-events: none;
  z-index: -3;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(200, 119, 58, 0.10) 0%,
    rgba(212, 168, 83, 0.05) 40%,
    transparent 70%);
  transition: left 0.06s linear, top 0.06s linear;
  will-change: left, top;
}

/* ══════════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATIONS
   ══════════════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.75s cubic-bezier(0.4,0,0.2,1),
              transform 0.75s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible { opacity:1; transform:translateY(0); }

.reveal-left  { opacity:0; transform:translateX(-50px); transition:opacity 0.75s cubic-bezier(0.4,0,0.2,1),transform 0.75s cubic-bezier(0.4,0,0.2,1); }
.reveal-right { opacity:0; transform:translateX(50px);  transition:opacity 0.75s cubic-bezier(0.4,0,0.2,1),transform 0.75s cubic-bezier(0.4,0,0.2,1); }
.reveal-left.visible, .reveal-right.visible { opacity:1; transform:translateX(0); }

.reveal-stagger > * { opacity:0; transform:translateY(28px); transition:opacity 0.65s cubic-bezier(0.4,0,0.2,1),transform 0.65s cubic-bezier(0.4,0,0.2,1); }
.reveal-stagger.visible > *:nth-child(1) { opacity:1; transform:none; transition-delay:0.04s; }
.reveal-stagger.visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:0.11s; }
.reveal-stagger.visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:0.18s; }
.reveal-stagger.visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:0.25s; }
.reveal-stagger.visible > *:nth-child(5) { opacity:1; transform:none; transition-delay:0.32s; }
.reveal-stagger.visible > *:nth-child(6) { opacity:1; transform:none; transition-delay:0.39s; }
.reveal-stagger.visible > *:nth-child(n+7) { opacity:1; transform:none; transition-delay:0.45s; }

/* ══════════════════════════════════════════════════════════
   GLASS CARD — shimmer sweep on hover
   ══════════════════════════════════════════════════════════ */

.glass-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.35s cubic-bezier(0.4,0,0.2,1),
              border-color 0.35s ease;
}
.glass-card::after {
  content: '';
  position: absolute;
  top: -50%; left: -80%;
  width: 55%;
  height: 200%;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
  transform: skewX(-15deg);
  opacity: 0;
  transition: left 0.55s ease, opacity 0.3s ease;
  pointer-events: none;
}
.glass-card:hover::after { left: 130%; opacity: 1; }
.glass-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(200,119,58,0.20),
              0 0 0 1px rgba(200,119,58,0.16),
              inset 0 1px 0 rgba(255,255,255,0.55);
  border-color: rgba(200,119,58,0.32);
}

/* ══════════════════════════════════════════════════════════
   PRODUCT CARD — light sweep shimmer
   ══════════════════════════════════════════════════════════ */

.product-card { position:relative; overflow:hidden; }
.product-card::before {
  content:''; position:absolute; top:0; left:-110%;
  width:65%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transform:skewX(-20deg);
  transition:left 0.65s ease;
  pointer-events:none; z-index:2;
}
.product-card:hover::before { left:160%; }

/* ══════════════════════════════════════════════════════════
   SECTION TITLE — animated underline
   ══════════════════════════════════════════════════════════ */

.section-title { position:relative; display:inline-block; }
.section-title::after {
  content:''; position:absolute; bottom:-8px; left:50%;
  transform:translateX(-50%) scaleX(0);
  width:70px; height:3px;
  background:linear-gradient(90deg, var(--primary), var(--accent), var(--primary));
  background-size:200% 100%;
  border-radius:2px;
  transition:transform 0.6s cubic-bezier(0.4,0,0.2,1);
  animation:gradientSlide 3s linear infinite;
}
.section-header.visible .section-title::after { transform:translateX(-50%) scaleX(1); }
@keyframes gradientSlide { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }

/* ══════════════════════════════════════════════════════════
   NAVBAR — bottom shimmer line on scroll
   ══════════════════════════════════════════════════════════ */

.navbar::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(200,119,58,0.5), rgba(212,168,83,0.7), rgba(200,119,58,0.5), transparent);
  opacity:0; transition:opacity 0.4s ease;
}
.navbar.scrolled::after { opacity:1; }

/* ══════════════════════════════════════════════════════════
   HERO IMAGE CARDS — hover glow
   ══════════════════════════════════════════════════════════ */

.hero-img-card { transition:transform 0.45s cubic-bezier(0.4,0,0.2,1), box-shadow 0.45s ease; }
.hero-img-card:hover {
  transform:scale(1.04) rotate(-0.5deg);
  box-shadow:0 24px 56px rgba(160,90,32,0.28), 0 0 0 2px rgba(212,168,83,0.35);
}
.hero-img-card.card1:hover { transform:scale(1.03) rotate(0.3deg); }

/* ══════════════════════════════════════════════════════════
   PAGE HERO — animated gradient overlay
   ══════════════════════════════════════════════════════════ */

.page-hero { position:relative; overflow:hidden; }
.page-hero::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(212,168,83,0.14) 0%, rgba(200,119,58,0.07) 40%, rgba(212,168,83,0.12) 70%, rgba(200,119,58,0.09) 100%);
  background-size:300% 300%;
  animation:pageHeroShift 10s ease infinite; pointer-events:none;
}
.page-hero::after { content:''; position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, rgba(200,119,58,0.3), transparent); }
@keyframes pageHeroShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* ══════════════════════════════════════════════════════════
   MARQUEE — fade edges
   ══════════════════════════════════════════════════════════ */

.marquee-strip { position:relative; overflow:hidden; }
.marquee-strip::before,.marquee-strip::after { content:''; position:absolute; top:0; bottom:0; width:100px; z-index:2; pointer-events:none; }
.marquee-strip::before { left:0;  background:linear-gradient(90deg, var(--primary), transparent); }
.marquee-strip::after  { right:0; background:linear-gradient(-90deg, var(--primary-dark), transparent); }

/* ══════════════════════════════════════════════════════════
   BUTTON — ripple on click
   ══════════════════════════════════════════════════════════ */

.btn { position:relative; overflow:hidden; }
.btn::before {
  content:''; position:absolute; top:50%; left:50%;
  width:0; height:0; border-radius:50%;
  background:rgba(255,255,255,0.22);
  transform:translate(-50%,-50%);
  transition:width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
  opacity:0;
}
.btn:active::before { width:280px; height:280px; opacity:0; }

/* ══════════════════════════════════════════════════════════
   SHOP CARD — radial glow on hover
   ══════════════════════════════════════════════════════════ */

.shop-card { position:relative; overflow:hidden; }
.shop-card::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% -10%, rgba(200,119,58,0.12) 0%, transparent 65%);
  opacity:0; transition:opacity 0.4s ease; pointer-events:none;
}
.shop-card:hover::before { opacity:1; }

/* ══════════════════════════════════════════════════════════
   VALUE CARDS & REVIEW CARDS
   ══════════════════════════════════════════════════════════ */

.value-card { transition:transform 0.3s ease, box-shadow 0.3s ease; }
.value-card:hover { transform:translateY(-8px) scale(1.03); }
.review-card { transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.review-card:hover { border-color:rgba(200,119,58,0.30); }

/* ══════════════════════════════════════════════════════════
   STAT COUNTER HOVER
   ══════════════════════════════════════════════════════════ */

.stat-num { display:inline-block; transition:transform 0.3s ease, color 0.3s ease; }
.stat:hover .stat-num { transform:scale(1.14); color:var(--primary-dark); }

/* ══════════════════════════════════════════════════════════
   BACK TO TOP — pulse glow
   ══════════════════════════════════════════════════════════ */

.back-to-top.visible { animation:btPulse 2.8s ease-in-out infinite; }
@keyframes btPulse {
  0%,100% { box-shadow:0 4px 20px rgba(200,119,58,0.30); }
  50%     { box-shadow:0 4px 32px rgba(200,119,58,0.65), 0 0 0 8px rgba(200,119,58,0.07); }
}

/* ══════════════════════════════════════════════════════════
   LAZY IMAGE FADE
   ══════════════════════════════════════════════════════════ */

/* Images load naturally — no opacity trick needed, browser handles lazy loading */
img { transition: opacity 0.3s ease; }

/* ══════════════════════════════════════════════════════════
   FOCUS & ACCESSIBILITY
   ══════════════════════════════════════════════════════════ */

:focus-visible { outline:2px solid var(--primary); outline-offset:3px; border-radius:4px; }

/* ══════════════════════════════════════════════════════════
   REDUCE MOTION
   ══════════════════════════════════════════════════════════ */

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