/* ═══════════════════════════════════════════════════════
   CREVITA — MOTION FX
   Vanilla-JS recreations of Motion Primitives-style components:
   text scramble/shimmer, spotlight + border-trail hover cards,
   morphing quick-view dialog, animated accordion.
   ═══════════════════════════════════════════════════════ */

/* ── 1. Text scramble + shimmer (hero headline) ── */
.fx-scr-ch { display: inline-block; }

.hero-content h1 em.fx-shimmer {
  background-image: linear-gradient(110deg, var(--gold-light) 35%, #fff6df 50%, var(--gold-light) 65%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: fx-shimmer-sweep 3s linear infinite;
}
@keyframes fx-shimmer-sweep {
  0%   { background-position: 220% 0; }
  100% { background-position: -220% 0; }
}

/* ── 2. Spotlight + animated border trail (hover cards) ── */
.fx-spot { position: relative; isolation: isolate; }
.fx-spot > * { position: relative; z-index: 1; }

.fx-spot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(240px circle at var(--fx-x, 50%) var(--fx-y, 50%), rgba(212,145,58,0.16), transparent 70%);
  transition: opacity .3s ease;
}
.fx-spot:hover::before { opacity: 1; }

.fx-spot::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  border: 2px solid transparent;
  background: conic-gradient(from 0deg, transparent 0deg, var(--gold-light) 40deg, transparent 110deg) border-box;
  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0) border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  animation: fx-border-spin 2.6s linear infinite;
  animation-play-state: paused;
}
.fx-spot:hover::after { opacity: 1; animation-play-state: running; }
@keyframes fx-border-spin { to { transform: rotate(360deg); } }

/* ── 3. Quick-view button (on product card media) ── */
.fx-qv-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.94);
  border: 1px solid var(--border);
  color: var(--brown);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease, background .2s ease;
  cursor: pointer;
}
.fx-qv-btn:hover { background: var(--white); color: var(--gold); }
.shopx-card:hover .fx-qv-btn { opacity: 1; transform: translateY(0); }
@media (hover: none) {
  .fx-qv-btn { opacity: 1; transform: none; }
}

/* ── 4. Morphing quick-view dialog ── */
.fx-qv-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.fx-qv-overlay.is-open { display: flex; }

.fx-qv-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26,17,8,.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  animation: fx-qv-fade .25s ease forwards;
}
@keyframes fx-qv-fade { to { opacity: 1; } }

.fx-qv-dialog {
  position: relative;
  width: min(720px, 100%);
  max-height: 86vh;
  overflow: auto;
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.fx-qv-media {
  background: var(--cream-mid);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.fx-qv-media img { width: 100%; height: 100%; object-fit: contain; padding: 18px; }

.fx-qv-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--border);
  color: var(--brown);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.fx-qv-close:hover { color: var(--gold); }

.fx-qv-body { padding: 36px 32px; display: flex; flex-direction: column; }
.fx-qv-name {
  font-family: var(--ff-head);
  font-size: 24px;
  color: var(--brown);
  text-decoration: none;
  margin-bottom: 6px;
}
.fx-qv-name:hover { color: var(--gold); }
.fx-qv-size { color: var(--muted); font-size: var(--text-sm); margin: 0 0 16px; }

.fx-qv-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 20px; }
.fx-qv-price #fxQvSell { font-size: 26px; font-weight: 700; color: var(--brown); }
.fx-qv-price #fxQvMrp { font-size: var(--text-base); color: var(--muted); text-decoration: line-through; }
.fx-qv-price #fxQvSave { font-size: var(--text-xs); color: var(--green); font-weight: 600; }

.fx-qv-qty { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.fx-qv-qbtn {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--cream);
  color: var(--brown); font-size: 16px; cursor: pointer;
}
.fx-qv-qbtn:hover { border-color: var(--gold); }
#fxQvQty { min-width: 20px; text-align: center; font-weight: 600; }

.fx-qv-add {
  padding: 14px 20px;
  border-radius: var(--r-md);
  border: none;
  background: var(--gold);
  color: var(--white);
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease;
  margin-bottom: 14px;
}
.fx-qv-add:hover { background: var(--gold-light); }

.fx-qv-link { color: var(--muted); font-size: var(--text-sm); text-decoration: none; }
.fx-qv-link:hover { color: var(--gold); }

@media (max-width: 640px) {
  .fx-qv-dialog { grid-template-columns: 1fr; }
  .fx-qv-body { padding: 24px 22px; }
}

/* ── 5. Animated accordion (homepage FAQ teaser) ── */
.fx-faq-teaser { padding: 72px 24px; background: var(--cream-mid); }
.fx-faq-inner { max-width: 760px; margin: 0 auto; }
.fx-faq-inner .section-header { text-align: center; margin-bottom: 8px; }

.fx-acc { margin-top: 32px; border-top: 1px solid var(--border); }
.fx-acc-item { border-bottom: 1px solid var(--border); }

.fx-acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--ff-head);
  font-size: 17px;
  color: var(--brown);
  text-align: left;
}
.fx-acc-chevron { flex: 0 0 auto; color: var(--gold); transition: transform .3s cubic-bezier(.4,0,.2,1); }
.fx-acc-item.is-open .fx-acc-chevron { transform: rotate(180deg); }

.fx-acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .38s cubic-bezier(.4,0,.2,1);
}
.fx-acc-item.is-open .fx-acc-panel { max-height: 320px; }
.fx-acc-panel-inner {
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.7;
  padding: 0 34px 18px 0;
}

.fx-faq-viewall {
  display: inline-block;
  margin-top: 28px;
  color: var(--gold);
  font-weight: 600;
  text-decoration: none;
}
.fx-faq-viewall:hover { color: var(--gold-light); }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .fx-shimmer { animation: none; background: none; -webkit-text-fill-color: unset; color: var(--gold-light); }
  .fx-spot::before, .fx-spot::after { display: none; }
  .fx-acc-panel, .fx-acc-chevron { transition: none; }
}