/* ============================================================
   SAHU SAREE SHOP — motion layer
   showcase ring, looms scroll, tilt cards, split text, cursor
   (loaded after styles.css)
   ============================================================ */

/* ---------- richer saree fallback: pallu stripes, zari border, weave ---------- */
.art {
  --fab:
    linear-gradient(90deg, transparent 0 84%, rgba(236, 207, 139, 0.55) 84% 85%, transparent 85% 87%, rgba(236, 207, 139, 0.8) 87% 91%, transparent 91% 92%, rgba(236, 207, 139, 0.55) 92% 93%, transparent 93%),
    linear-gradient(0deg, rgba(236, 207, 139, 0.75) 0 2.5%, transparent 2.5% 3.5%, rgba(236, 207, 139, 0.4) 3.5% 4%, transparent 4%),
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(0, 0, 0, 0.12) 12px 14px, transparent 14px 26px),
    radial-gradient(circle at 50% 50%, rgba(236, 207, 139, 0.32) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 50%, rgba(236, 207, 139, 0.16) 0 1px, transparent 2px),
    linear-gradient(160deg, var(--c1) 0%, var(--c2) 100%);
  background-image: none, var(--fab);
  background-size: cover, 100% 100%, 100% 100%, 100% 100%, 26px 26px, 26px 26px, cover;
  background-position: center, center, center, center, 0 0, 13px 13px, center;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
}

/* ---------- scroll progress thread ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.progress span {
  display: block; height: 100%; transform-origin: left; transform: scaleX(0);
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-light) 60%, #fff6dc);
  box-shadow: 0 0 10px rgba(236, 207, 139, 0.7);
}

/* ---------- cursor ring (fine pointers only) ---------- */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 180; pointer-events: none;
  width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  border: 1px solid rgba(236, 207, 139, 0.7);
  display: grid; place-items: center;
  opacity: 0;
  transition: width 0.4s var(--ease), height 0.4s var(--ease), margin 0.4s var(--ease), background 0.4s, border-color 0.4s, opacity 0.3s;
}
.cursor span { font-size: 9px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; color: var(--ink-on-gold); opacity: 0; transition: opacity 0.3s; padding-left: 0.24em; }
.cursor.is-on { opacity: 1; }
.cursor.is-hover { width: 54px; height: 54px; margin: -27px 0 0 -27px; background: rgba(236, 207, 139, 0.1); }
.cursor.is-big { width: 84px; height: 84px; margin: -42px 0 0 -42px; background: var(--gold-light); border-color: var(--gold-light); }
.cursor.is-big span { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ---------- header tucks away on scroll down ---------- */
#header { transition: background 0.5s var(--ease), height 0.4s var(--ease), border-color 0.5s, transform 0.6s var(--ease); }
#header.is-tucked { transform: translateY(-100%); }

/* ---------- hero: silk canvas ---------- */
.silk { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-content { z-index: 1; }
#hero .reveal { transition-duration: 1.4s; }

/* ---------- split text (words or chars rise from a mask) ---------- */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.04em 0.03em 0.16em; margin: -0.04em -0.03em -0.16em; }
.split .wi {
  display: inline-block; transform: translateY(115%) rotate(4deg); transform-origin: left bottom;
  transition: transform 1.3s var(--ease); transition-delay: calc(var(--i) * 45ms);
}
.split[data-split="chars"] .wi { transition-duration: 1.5s; transition-delay: calc(var(--i) * 38ms); }
.split.is-in .wi { transform: none; }

/* ---------- ribbon marquee (zari border) ---------- */
.ribbon {
  position: relative; overflow: hidden;
  background: linear-gradient(90deg, var(--maroon-deep), var(--maroon) 30%, var(--maroon) 70%, var(--maroon-deep));
  padding: 24px 0;
  border-block: 1px solid var(--gold-deep);
}
.ribbon::before, .ribbon::after {
  content: ""; position: absolute; left: 0; right: 0; height: 6px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 6px, transparent 6px 9px, var(--gold-light) 9px 11px, transparent 11px 14px);
  opacity: 0.75;
}
.ribbon::before { top: 5px; }
.ribbon::after { bottom: 5px; }
.ribbon-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.ribbon:hover .ribbon-track { animation-play-state: paused; }
.ribbon-track p { white-space: nowrap; font-family: var(--serif-i); font-style: italic; font-size: clamp(20px, 2.4vw, 32px); color: var(--cream-hi); }
.ribbon-track span { display: inline-block; color: var(--gold); font-style: normal; font-size: 0.55em; margin: 0 clamp(18px, 3vw, 44px); vertical-align: middle; animation: twinkle 3s ease-in-out infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes twinkle { 50% { transform: rotate(90deg) scale(1.25); color: var(--gold-light); } }

/* ---------- category cards: drawn frame + lift ---------- */
.cat { transition: opacity 1.1s var(--ease), transform 0.8s var(--ease), box-shadow 0.8s var(--ease); }
.cat::before {
  content: ""; position: absolute; inset: 12px; z-index: 2; pointer-events: none;
  border: 1px solid rgba(236, 207, 139, 0.6);
  clip-path: inset(0 100% 100% 0); transition: clip-path 1s var(--ease);
}
.cat:hover::before { clip-path: inset(0 0 0 0); }
.cat:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7); }
.cat-body h3, .cat-body p { transition: transform 0.7s var(--ease); }
.cat-body span { transition: letter-spacing 0.7s var(--ease); }
.cat:hover .cat-body h3, .cat:hover .cat-body p { transform: translateY(-6px); }
.cat:hover .cat-body span { letter-spacing: 0.36em; }
.cat-num { position: absolute; top: 20px; right: 24px; z-index: 2; font-family: var(--serif-i); font-style: italic; font-size: 16px; color: var(--gold-light); }

/* ---------- product cards: 3D tilt, zari sheen, curtain-wipe reveal ---------- */
.prod-media {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}
.prod-media.is-tilting { transition: transform 0.12s linear, box-shadow 0.6s var(--ease); }
.prod:hover .prod-media { box-shadow: 0 34px 60px -24px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(236, 207, 139, 0.35); }
.prod-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255, 240, 200, 0.3), transparent 45%),
    linear-gradient(115deg, transparent 30%, rgba(255, 236, 190, 0.4) 48%, transparent 62%);
  background-size: 100% 100%, 250% 100%;
  background-position: 0 0, 120% 0;
  opacity: 0; transition: opacity 0.5s, background-position 1.2s var(--ease);
  mix-blend-mode: soft-light;
}
.prod:hover .prod-media::after { opacity: 1; background-position: 0 0, -40% 0; }

.prod.reveal { opacity: 1; transform: none; }
/* keyframes, not a transition, so no clip-path lingers to crop the hover shadow */
.prod.reveal:not(.is-in) .prod-media { clip-path: inset(100% 0 0 0); }
.prod.reveal.is-in .prod-media { animation: wipeUp 1.2s var(--ease-io) backwards; }
@keyframes wipeUp { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
.prod.reveal .prod-media .art { transform: scale(1.35); transition: transform 1.6s var(--ease); }
.prod.reveal .prod-info { opacity: 0; transform: translateY(16px); transition: opacity 0.9s var(--ease) 0.3s, transform 0.9s var(--ease) 0.3s; }
.prod.reveal.is-in .prod-media .art { transform: scale(1); }
.prod.reveal.is-in .prod-info { opacity: 1; transform: none; }
.prod.reveal.is-in:hover .prod-media .art { transform: scale(1.07); }
.heart.pop svg { animation: heartPop 0.6s var(--ease); }
@keyframes heartPop { 30% { transform: scale(1.5); } 60% { transform: scale(0.9); } }

/* ---------- image wipe reveal + parallax ---------- */
.wipe.reveal { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.6s var(--ease-io); }
.wipe.reveal.is-in { clip-path: inset(0 0 0 0); }
[data-parallax] { translate: 0 var(--py, 0px); }

/* ============================================================
   3D SHOWCASE RING
   ============================================================ */
.showcase {
  position: relative; overflow: hidden;
  padding: clamp(70px, 10vw, 130px) 0 clamp(60px, 8vw, 110px);
  background:
    radial-gradient(60% 50% at 50% 55%, rgba(201, 163, 95, 0.16), transparent 70%),
    linear-gradient(180deg, var(--green-deep), #0b1610 60%, var(--green-deep));
}
.showcase .sec-head { width: min(640px, calc(100% - 2 * var(--pad-x))); }
.ring-stage {
  --fw: 230px; --fh: 330px;
  position: relative; height: calc(var(--fh) + 190px);
  perspective: 1500px; perspective-origin: 50% 30%;
  display: grid; place-items: center;
  cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.ring-stage:focus-visible { outline: 1px solid var(--gold); outline-offset: -10px; }
.ring-stage.is-dragging { cursor: grabbing; }
.ring-stage::after {
  /* glowing floor */
  content: ""; position: absolute; left: 50%; bottom: 30px; width: min(900px, 90%); height: 70px;
  transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(236, 207, 139, 0.22), transparent 70%);
  pointer-events: none;
}
.ring { position: relative; width: var(--fw); height: var(--fh); transform-style: preserve-3d; margin-top: -50px; }
.face {
  position: absolute; inset: 0;
  -webkit-box-reflect: below 16px linear-gradient(transparent 64%, rgba(0, 0, 0, 0.26));
}
.face-in {
  position: absolute; inset: 0;
  transform-origin: 50% -22px;
  animation: sway 5s ease-in-out infinite; animation-delay: calc(var(--i) * -0.7s);
}
.face .art {
  position: absolute; inset: 0;
  border: 1px solid rgba(236, 207, 139, 0.45);
  box-shadow: 0 30px 50px -20px rgba(0, 0, 0, 0.9);
}
.face .art::after {
  /* soft vertical pleats so it reads as hanging fabric */
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0.06) 9%, rgba(0, 0, 0, 0.16) 17%);
}
.face-in::before {
  /* hanger rod */
  content: ""; position: absolute; left: -10px; right: -10px; top: -10px; height: 6px; border-radius: 4px; z-index: 1;
  background: linear-gradient(180deg, var(--gold-light), var(--gold-deep));
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.face-in::after {
  /* hook */
  content: ""; position: absolute; left: 50%; top: -30px; width: 16px; height: 22px; margin-left: -8px;
  border: 2px solid var(--gold); border-bottom: 0; border-radius: 10px 10px 0 0;
}
.face-tag {
  position: absolute; left: 50%; bottom: 0; z-index: 1; transform: translate(-50%, 50%);
  padding: 5px 12px; white-space: nowrap;
  background: var(--cream-hi); color: var(--ink-on-gold);
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600;
  opacity: 0; transition: opacity 0.4s;
}
.face.is-front .face-tag { opacity: 1; }
@keyframes sway { 0%, 100% { transform: rotateZ(-0.8deg); } 50% { transform: rotateZ(0.8deg); } }

.ring-ui { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 4vw, 50px); padding: 0 var(--pad-x); }
.ring-nav {
  width: 54px; height: 54px; flex: none; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-items: center; color: var(--gold-light);
  transition: background 0.4s, border-color 0.4s, color 0.4s;
}
.ring-nav:hover { background: var(--gold); border-color: var(--gold); color: var(--ink-on-gold); }
.ring-nav svg { width: 24px; height: 10px; }
.ring-meta { text-align: center; min-width: 0; width: min(440px, 100%); min-height: 124px; }
.ring-meta > * { animation: metaIn 0.7s var(--ease) both; }
.ring-meta > :nth-child(2) { animation-delay: 60ms; }
.ring-meta > :nth-child(3) { animation-delay: 120ms; }
.ring-meta > :nth-child(4) { animation-delay: 180ms; }
.ring-meta h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); color: var(--cream-hi); line-height: 1.2; margin: 6px 0; }
.ring-meta .price { justify-content: center; }
.rm-origin { font-family: var(--serif-i); font-style: italic; color: var(--cream-dim); font-size: 17px; margin-top: 4px; }
@keyframes metaIn { from { opacity: 0; transform: translateY(12px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* ============================================================
   JOURNEY THROUGH THE LOOMS — pinned horizontal scroll
   ============================================================ */
.looms { position: relative; background: linear-gradient(180deg, #0b1610, var(--green) 50%, #0b1610); }
.looms-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.looms-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  padding: 0 var(--pad-x); margin-bottom: clamp(20px, 3vh, 40px);
}
.looms-head .sec-kicker { text-align: left; }
.looms-head .sec-kicker::before { display: none; }
.looms-count { font-family: var(--serif); color: var(--cream-dim); white-space: nowrap; }
.looms-count strong { font-weight: 400; font-size: clamp(40px, 5vw, 72px); color: var(--gold-light); line-height: 1; margin-right: 8px; }
.looms-track { display: flex; gap: clamp(20px, 3vw, 48px); padding: 0 var(--pad-x); width: max-content; will-change: transform; }
.loom {
  position: relative; flex: none;
  width: clamp(280px, 62vw, 820px); height: clamp(300px, 56vh, 540px);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 44px); align-items: center;
}
.loom-media { position: relative; height: 100%; overflow: hidden; border: 1px solid var(--line); cursor: pointer; }
.loom-media .art { position: absolute; inset: -4% -16%; transform: translateX(var(--lx, 0px)); }
.loom-media::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(236, 207, 139, 0.45); pointer-events: none; }
.loom-big {
  position: absolute; right: 0; top: -0.2em;
  font-family: var(--serif); font-size: clamp(90px, 14vw, 220px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(236, 207, 139, 0.2);
  pointer-events: none;
}
.loom-body { position: relative; z-index: 1; transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.loom-body h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 3.4vw, 50px); color: var(--cream-hi); line-height: 1.05; margin: 10px 0 6px; }
.loom-body h4 { font-family: var(--serif-i); font-style: italic; font-weight: 400; font-size: clamp(18px, 1.8vw, 24px); color: var(--gold-light); }
.loom-body p { color: var(--cream-dim); font-size: 14px; margin: 16px 0 24px; max-width: 360px; }
.loom-body .btn { padding: 13px 20px; }
.loom:not(.is-near) .loom-body { opacity: 0.25; transform: translateY(20px); }
.looms-bar { margin: clamp(22px, 4vh, 44px) var(--pad-x) 0; height: 1px; background: var(--line); }
.looms-bar span { display: block; height: 100%; background: var(--gold-light); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 8px var(--gold); }

/* no-pin fallback (reduced motion): native swipe row */
.looms.is-static .looms-sticky { position: relative; height: auto; padding: 80px 0; }
.looms.is-static .looms-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 20px; }
.looms.is-static .loom { scroll-snap-align: center; }
.looms.is-static .loom-body { opacity: 1; transform: none; }
.looms.is-static .looms-bar, .looms.is-static .looms-count { display: none; }

/* ============================================================
   QUICK VIEW: fabric unfold + weave zoom
   ============================================================ */
.modal-box { transform: translateY(30px) scale(0.97); transition: transform 0.6s var(--ease); }
.modal.is-open .modal-box { transform: none; }
.qv-media { position: relative; overflow: hidden; min-height: 460px; cursor: zoom-in; }
.qv-media .art { position: absolute; inset: 0; min-height: 0; transition: transform 0.5s var(--ease); }
.qv-media.is-zoom .art { transform: scale(2.2); transition: transform 0.35s var(--ease); }
.modal.is-open .qv-media .art { animation: unfold 1.3s var(--ease-io) both; }
.qv-media::after {
  /* pleat shadows that relax as the saree opens */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0, rgba(255, 240, 200, 0.12) 6%, rgba(0, 0, 0, 0.4) 12.5%);
  opacity: 0;
}
.modal.is-open .qv-media::after { animation: pleats 1.6s var(--ease) both; }
.qv-hint { position: absolute; left: 14px; bottom: 14px; z-index: 1; padding: 6px 12px; background: rgba(15, 29, 21, 0.7); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-light); pointer-events: none; transition: opacity 0.3s; }
.qv-media.is-zoom .qv-hint { opacity: 0; }
.modal.is-open .qv-body > * { animation: metaIn 0.8s var(--ease) both; }
.modal.is-open .qv-body > :nth-child(1) { animation-delay: 0.18s; }
.modal.is-open .qv-body > :nth-child(2) { animation-delay: 0.25s; }
.modal.is-open .qv-body > :nth-child(3) { animation-delay: 0.32s; }
.modal.is-open .qv-body > :nth-child(4) { animation-delay: 0.39s; }
.modal.is-open .qv-body > :nth-child(5) { animation-delay: 0.46s; }
.modal.is-open .qv-body > :nth-child(6) { animation-delay: 0.53s; }
@keyframes unfold {
  0% { clip-path: inset(0 0 100% 0); transform: scaleY(0.4); transform-origin: top; }
  60% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0); transform: none; transform-origin: top; }
}
@keyframes pleats { from { opacity: 0.9; } to { opacity: 0; } }

/* ============================================================
   RESPONSIVE + REDUCED MOTION
   ============================================================ */
@media (max-width: 800px) {
  .ring-stage { --fw: 150px; --fh: 220px; perspective: 900px; }
  .ring-nav { width: 44px; height: 44px; }
  .loom { grid-template-columns: 1fr; grid-template-rows: 1fr auto; width: 78vw; height: 64vh; height: 64svh; gap: 14px; }
  .loom-body p:not(.prod-cat) { display: none; }
  .loom-body h3 { margin: 4px 0 2px; }
  .loom-body .btn { margin-top: 12px; }
  .loom-big { font-size: 80px; top: auto; bottom: 30%; }
  .qv-media { min-height: 360px; }
  .looms-count { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .split .wi { transform: none; }
  .prod.reveal:not(.is-in) .prod-media, .wipe.reveal { clip-path: none; }
  .prod.reveal .prod-media .art { transform: none; }
  .prod.reveal .prod-info { opacity: 1; transform: none; }
  .ribbon-track, .face-in { animation: none; }
}