/* ============================================================
   HIJIR — Ornament & Hero Enhancement System v5
   Hero: clean premium — glow + ring frame + sparkles
   Other sections: Islamic geometric + subtle leaf bg
   ============================================================ */

/* ── 1. Hero: atmospheric warm glow behind product ── */
.hero-visual {
  isolation: isolate;
}
.hero-visual::before {
  content: '';
  position: absolute;
  inset: -60px;
  background: radial-gradient(
    ellipse 72% 68% at 50% 56%,
    rgba(245, 166, 35, 0.18) 0%,
    rgba(245, 166, 35, 0.07) 40%,
    rgba(245, 166, 35, 0.03) 62%,
    transparent 78%
  );
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

/* ── 2. Hero image — clean, deep shadow ── */
.hero-visual img {
  position: relative;
  z-index: 2;
  border-radius: 10px;
  box-shadow:
    0 28px 72px rgba(3, 2, 1, 0.58),
    0 10px 28px rgba(3, 2, 1, 0.32),
    0 0 0 1px rgba(139, 107, 20, 0.12);
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 1.2s ease;
}
.hero-visual:hover img {
  transform: scale(1.012) translateY(-4px);
  box-shadow:
    0 36px 88px rgba(3, 2, 1, 0.64),
    0 14px 36px rgba(3, 2, 1, 0.36),
    0 0 0 1px rgba(139, 107, 20, 0.18);
}

/* ── 3. Hero badge ── */
.hero-visual .hero-badge { position: relative; z-index: 4; }

/* ── 4. Double-ring gold frame around product ── */
.hero-ring {
  position: absolute;
  inset: -10px;
  border-radius: 16px;
  border: 1px solid rgba(245, 166, 35, 0.30);
  pointer-events: none;
  z-index: 3;
  box-shadow:
    inset 0 0 24px rgba(245, 166, 35, 0.06),
    0 0 24px rgba(245, 166, 35, 0.10);
}
.hero-ring::before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 20px;
  border: 1px solid rgba(245, 166, 35, 0.12);
}
.hero-ring::after {
  content: '';
  position: absolute;
  inset: 7px;
  border-radius: 8px;
  border: 1px solid rgba(245, 166, 35, 0.10);
}

/* ── 5. Floating gold sparkle particles ── */
.hero-sparkles {
  position: absolute;
  inset: -20px;
  pointer-events: none;
  z-index: 4;
}
.hero-sparkles span {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 164, 38, 0.92) 0%, rgba(200, 164, 38, 0.30) 50%, transparent 70%);
}
.hero-sparkles span:nth-child(1) { width: 7px; height: 7px; top: 6%;  left: 3%; }
.hero-sparkles span:nth-child(2) { width: 5px; height: 5px; top: 16%; right: 5%; }
.hero-sparkles span:nth-child(3) { width: 4px; height: 4px; top: 70%; left: 4%; }
.hero-sparkles span:nth-child(4) { width: 6px; height: 6px; top: 84%; right: 3%; }
.hero-sparkles span:nth-child(5) { width: 3px; height: 3px; top: 44%; left: 1%; }
.hero-sparkles span:nth-child(6) { width: 4px; height: 4px; top: 58%; right: 2%; }

@keyframes sparkle {
  0%, 100% { opacity: 0;    transform: scale(0.3); }
  35%, 65%  { opacity: 0.90; transform: scale(1);   }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-sparkles span:nth-child(1) { animation: sparkle 4.4s ease-in-out infinite 0.0s; }
  .hero-sparkles span:nth-child(2) { animation: sparkle 3.8s ease-in-out infinite 0.9s; }
  .hero-sparkles span:nth-child(3) { animation: sparkle 5.2s ease-in-out infinite 1.6s; }
  .hero-sparkles span:nth-child(4) { animation: sparkle 4.6s ease-in-out infinite 2.3s; }
  .hero-sparkles span:nth-child(5) { animation: sparkle 3.6s ease-in-out infinite 3.0s; }
  .hero-sparkles span:nth-child(6) { animation: sparkle 4.8s ease-in-out infinite 0.4s; }
}

/* ── 6. Hero meta: pill badges ── */
.hero-meta {
  flex-wrap: wrap;
  gap: 10px;
}
.hero-meta .item {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  padding: 7px 16px 7px 10px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.hero-meta .item:hover {
  border-color: rgba(245, 166, 35, 0.50);
  background: rgba(245, 166, 35, 0.08);
}

/* ── 7. Circular benefit badges ── */
.circ-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 44px;
  padding: 0 24px;
}
.circ-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  max-width: 88px;
}
.circ-badge-ring {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: none;
  background: #0D0D0D;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.circ-badge-ring svg { width: 28px; height: 28px; }
.circ-badge:hover .circ-badge-ring {
  background: #F5A623;
  color: #0D0D0D;
  transform: translateY(-3px);
}
.circ-badge-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0D0D0D;
  line-height: 1.4;
}

/* ── 8. Eyebrow: small leaf icon ── */
.eyebrow::before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 18px;
  margin-right: 8px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 20'%3E%3Cpath d='M6.5 1C9.5 4 10.5 10 8.5 17 7.8 19 6.5 20 6.5 20 6.5 20 5.2 19 4.5 17 2.5 10 3.5 4 6.5 1Z' fill='%234D7C5F' opacity='0.85'/%3E%3Cpath d='M6.5 1.5 Q7 10 6.5 19.5' stroke='%236AAE7A' stroke-width='0.8' fill='none' opacity='0.70'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* ── 9. Islamic geometric corner ornaments ── */
.orn-wrap {
  position: relative;
  overflow: hidden;
}
.orn-corner {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0.28;
}
.orn-corner--tr { top: 0; right: 0; }
.orn-corner--tl { top: 0; left: 0; transform: scaleX(-1); }
.orn-corner--br { bottom: 0; right: 0; transform: scaleY(-1); }
.orn-corner--bl { bottom: 0; left: 0; transform: scale(-1); }

/* ── 10. Islamic star + line divider ── */
.orn-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 360px;
  margin: 0 auto 56px;
  padding: 0 24px;
  opacity: 0.82;
}
.orn-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.orn-divider svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ── 11. Botanical bidara leaf bg accent (other sections) ── */
.section-leaf-bg { position: relative; }
.section-leaf-bg::after {
  content: '';
  position: absolute;
  width: 360px;
  height: 460px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 220' fill='none'%3E%3Cpath d='M70 210 C45 173 40 120 55 62 C63 33 70 14 70 14 C70 14 77 33 85 62 C100 120 95 173 70 210Z' fill='%234A6741'/%3E%3Cpath d='M70 14 Q72 60 70 120 Q68 170 70 210' stroke='%235C7A50' stroke-width='1.2' fill='none'/%3E%3Cpath d='M70 60 Q54 68 40 66M70 88 Q52 96 36 93M70 115 Q54 122 40 119' stroke='%235C7A50' stroke-width='.7' fill='none' opacity='.6'/%3E%3Cpath d='M70 60 Q86 68 100 66M70 88 Q88 96 104 93M70 115 Q86 122 100 119' stroke='%235C7A50' stroke-width='.7' fill='none' opacity='.6'/%3E%3Cpath d='M30 200 C5 165 0 115 15 60 C22 32 30 15 30 15 C30 15 38 32 45 60 C60 115 55 165 30 200Z' fill='%234A6741' opacity='0.72'/%3E%3Cpath d='M110 185 C90 155 88 120 100 80 C107 58 112 44 112 44 C112 44 117 58 122 80 C134 120 132 155 112 185Z' fill='%234A6741' opacity='0.62'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}
.section-leaf-bg--tr::after { top: -30px; right: -60px; }
.section-leaf-bg--bl::after { bottom: -30px; left: -60px; transform: scaleX(-1); }

/* ── Responsive ── */
@media (max-width: 640px) {
  .hero-ring { display: none; }
  .circ-badges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 16px;
    justify-items: center;
    padding: 0 32px;
  }
  .circ-badge { max-width: 80px; width: 100%; }
  .circ-badge-ring { width: 64px; height: 64px; }
  .circ-badge-ring svg { width: 26px; height: 26px; }
  .circ-badge-label { font-size: 10px; }
  .orn-corner { opacity: 0.14; }
  .section-leaf-bg::after { width: 180px; height: 230px; opacity: 0.12; }
}

/* ── 12. Golden oil splash ornaments ── */
.oil-splash {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.oil-splash.visible { opacity: 1; }

/* Top-right hero splash */
.oil-splash--tr {
  top: -40px;
  right: -60px;
  width: 420px;
  height: 420px;
}
/* Bottom-left section splash */
.oil-splash--bl {
  bottom: -60px;
  left: -80px;
  width: 380px;
  height: 380px;
  transform: scaleX(-1) rotate(25deg);
}
/* Bottom-right section splash */
.oil-splash--br {
  bottom: -50px;
  right: -70px;
  width: 360px;
  height: 360px;
  transform: rotate(-20deg);
}

@keyframes oil-drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  33%  { transform: translate(-6px, 8px) rotate(1.2deg); }
  66%  { transform: translate(4px, -5px) rotate(-0.8deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes oil-drift-flip {
  0%   { transform: scaleX(-1) rotate(25deg) translate(0, 0); }
  33%  { transform: scaleX(-1) rotate(25deg) translate(5px, -7px); }
  66%  { transform: scaleX(-1) rotate(25deg) translate(-4px, 4px); }
  100% { transform: scaleX(-1) rotate(25deg) translate(0, 0); }
}

@media (prefers-reduced-motion: no-preference) {
  .oil-splash--tr { animation: oil-drift 12s ease-in-out infinite; }
  .oil-splash--bl { animation: oil-drift-flip 14s ease-in-out infinite 1s; }
  .oil-splash--br { animation: oil-drift 13s ease-in-out infinite 2s; }
}

@media (max-width: 640px) {
  .oil-splash--tr { width: 200px; height: 200px; top: -20px; right: -30px; }
  .oil-splash--bl { width: 180px; height: 180px; }
  .oil-splash--br { width: 170px; height: 170px; }
}