/* Ridhyansh Store v2 — Shared UI layer (P2)
   Additive polish on top of style.css. No layout restructuring.
   Progressive enhancement: hidden reveal states are scoped to .js so
   content is always visible when JavaScript is unavailable. */

/* ---------- Typography ---------- */
h1, h2, h3, h4, .logo, .catalog-head b { font-family: var(--font-head); }
body { font-family: var(--font-body); }

/* ---------- Focus visibility (WCAG AA) ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 8px;
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- Header polish ---------- */
.top {
  background: rgba(255, 255, 255, .82);
  transition: box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.top.scrolled { box-shadow: var(--sh1); }
nav a { transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
nav a:hover { transform: translateY(-1px); }

/* ---------- Hero refresh ---------- */
.hero {
  background:
    radial-gradient(900px 420px at 85% -10%, rgba(124, 58, 237, .16), transparent 60%),
    radial-gradient(700px 380px at -10% 0%, rgba(79, 70, 229, .12), transparent 55%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
}

/* ---------- Reveal utilities (opacity/transform only → no CLS) ---------- */
/* The .reveal system (driven by ui.js) replaces the legacy per-card fadeUp,
   which pinned transform via animation-fill and blocked 3D tilt. */
.product { animation: none; }
.js .reveal { opacity: 0; transform: translateY(16px); }
.reveal.in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.js .reveal-stagger > * { opacity: 0; transform: translateY(14px); }
.reveal-stagger.in > * {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal-stagger.in > *:nth-child(2) { transition-delay: .06s; }
.reveal-stagger.in > *:nth-child(3) { transition-delay: .12s; }
.reveal-stagger.in > *:nth-child(4) { transition-delay: .18s; }
.reveal-stagger.in > *:nth-child(5) { transition-delay: .24s; }
.reveal-stagger.in > *:nth-child(6) { transition-delay: .30s; }

/* ---------- 3D tilt scaffolding ---------- */
/* Perspective lives on the grid container; each [data-tilt] card tilts itself. */
.grid { perspective: var(--perspective); }
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* Promote to its own layer only while hovered (avoid promoting large grids). */
[data-tilt]:hover { will-change: transform; }

/* ===================================================================
   P4 — PDP, cart drawer & checkout polish (visual only)
   No changes to store.js / order.js logic; class hooks untouched.
   =================================================================== */

/* ---- Product page: hero gallery ---- */
.gallery { perspective: var(--perspective); }
.gmain {
  background:
    radial-gradient(120% 120% at 30% 0%, var(--brand-soft) 0%, transparent 45%),
    var(--surface);
  border-radius: var(--r-lg);
  transition: box-shadow var(--dur) var(--ease);
}
.gmain:hover { box-shadow: var(--sh2); }
.gmain img { transition: transform var(--dur-slow) var(--ease); }
.gmain:hover img { transform: scale(1.035); }
.gth { border-radius: 14px; }
.gth:hover { transform: translateY(-3px); border-color: var(--brand2); box-shadow: var(--sh2); }
.gth.on { box-shadow: 0 0 0 3px rgba(106, 76, 246, .22); }

/* ---- Value strip + info rows ---- */
.value { border-radius: 14px; transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.value:hover { transform: translateY(-2px); box-shadow: var(--sh1); border-color: var(--brand-soft); }
.p-info-rows .irow:last-child { border-bottom: none; }

/* ---- PDP CTA row ---- */
.pdp-cta { gap: 10px; }
.pdp-cta .btn { padding: 13px 22px; font-size: 15px; border-radius: 14px; }

/* ---- Cart drawer ---- */
.cart-drawer {
  background: var(--bg-2);
  border-top-left-radius: var(--r-lg);
  border-bottom-left-radius: var(--r-lg);
}
.drawer-head {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
.drawer-foot { background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.citem { border-radius: 16px; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.citem:hover { border-color: var(--brand-soft); box-shadow: var(--sh1); transform: translateY(-1px); }
.cimg { border: 1px solid var(--line); }

/* ---- Checkout: forms, steps, summary ---- */
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }
.chk { font-weight: 600; }
.step { transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.summary-product { padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.simg { border-radius: 12px; }
.sgrand b { font-family: var(--font-head); }

/* ---- Success / payment box ---- */
.qrwrap { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 10px; box-shadow: var(--sh1); display: inline-block; }
.qrwrap img { border-radius: 10px; display: block; }
.bigamnt { font-family: var(--font-head); }
.warn { border-radius: 12px; }

/* ---- Buttons: micro-interactions ---- */
.btn:active { transform: translateY(0) scale(.985); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ---------- Reduced motion off-switch ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal-stagger > * { opacity: 1 !important; transform: none !important; }
  [data-tilt] { transition: none !important; transform: none !important; }
  .float { animation: none !important; }
  .gmain:hover img { transform: none !important; }
  .value:hover, .citem:hover, .gth:hover { transform: none !important; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ===================================================================
   P7 — Pointer parallax, cinematic entrance, card depth & cart feedback
   Additive, progressive enhancement (Motion / pointer events). No
   layout restructuring; all effects are opacity/transform only (no CLS).
   =================================================================== */

/* ---- Hero: pointer-driven parallax + depth ---- */
.hero-in { perspective: 1200px; }
.hero-art {
  transform-style: preserve-3d;
  transform:
    translate3d(calc(var(--px, 0) * 12px), calc(var(--py, 0) * 12px), 0)
    rotateX(calc(var(--py, 0) * -4deg))
    rotateY(calc(var(--px, 0) * 4deg));
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}

/* ---- Cinematic hero entrance (CSS-only, safe if JS is off) ---- */
@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes heroArtIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.js .hero-txt > * { animation: heroIn .55s cubic-bezier(.22, .61, .36, 1) both; }
.js .hero-txt > *:nth-child(2) { animation-delay: .06s; }
.js .hero-txt > *:nth-child(3) { animation-delay: .12s; }
.js .hero-txt > *:nth-child(4) { animation-delay: .18s; }
.js .hero-txt > *:nth-child(5) { animation-delay: .24s; }
.js .hero-txt > *:nth-child(6) { animation-delay: .30s; }
.js .hero-art { animation: heroArtIn .65s cubic-bezier(.22, .61, .36, 1) both .1s; }

/* ---- Product card: image depth on tilt + sheen sweep ---- */
.imgbox::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .26) 50%, transparent 62%);
  opacity: 0; transform: translateX(-40%);
  transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease);
}
.product:hover .imgbox::after { opacity: 1; transform: translateX(40%); }
.product .ti { will-change: transform; transition: transform var(--dur-fast) var(--ease); }

/* ---- Cart add feedback ---- */
@keyframes cartBump { 0% { transform: scale(1); } 30% { transform: scale(1.26); } 60% { transform: scale(.9); } 100% { transform: scale(1); } }
.cart-btn.bump, .cart-count.bump { animation: cartBump .45s ease; }

/* ---- Page fade-in ---- */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
.js body { animation: pageIn .3s ease both; }

@media (prefers-reduced-motion: reduce) {
  .hero-art { transform: none !important; }
  .js body { animation: none !important; }
}