/* ==========================================================
   INTERACTIONS v2 — motion, reveals, modal, halftone accents
   ========================================================== */

/* ---------- Global: consistent easing + focus ring ---------- */
:root {
  --ease-out-back: cubic-bezier(.18,.89,.32,1.28);
  --ease-out-expo: cubic-bezier(.19,1,.22,1);
  --focus-ring: 0 0 0 3px rgba(212,53,126,.35);
}
:is(button, a, input, .p-card, .series-card, .artist-card, .cat-card, .faq-item, .filter-tab):focus-visible {
  outline: none; box-shadow: var(--focus-ring);
}

/* ---------- Scroll reveal (IntersectionObserver hook) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s var(--ease-out-expo), transform .6s var(--ease-out-expo);
  will-change: opacity, transform;
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
[data-reveal][data-reveal-delay="1"] { transition-delay: .06s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: .12s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: .18s; }
[data-reveal][data-reveal-delay="4"] { transition-delay: .24s; }
[data-reveal][data-reveal-delay="5"] { transition-delay: .3s; }

/* ---------- Product card: richer hover ---------- */
.p-card {
  transition: transform .28s var(--ease-out-expo), box-shadow .28s var(--ease-out-expo);
  position: relative;
}
.p-card-img { overflow: hidden; position: relative; }
.p-card-img img {
  transition: transform .6s var(--ease-out-expo), filter .3s ease;
}
.p-card:hover .p-card-img img { transform: scale(1.06); }
.p-card:active { transform: translateY(1px) scale(.995); }

/* Quick-view chip — appears on hover over p-card */
.p-qv {
  position: absolute; inset: auto 10px 10px auto;
  background: var(--ink); color: var(--ink-fg);
  font-family: var(--font-display); font-size: 10px;
  letter-spacing: 0.16em; font-weight: 700;
  padding: 6px 10px; border-radius: 999px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .2s ease, transform .25s var(--ease-out-back);
  cursor: pointer;
  z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  border: 2px solid var(--ink);
}
.theme-manga-city .p-qv { background: var(--primary); border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.theme-neon-stream .p-qv { background: rgba(255,255,255,.95); color: var(--ink); border-color: transparent; }
.theme-monochrome-ink .p-qv { border-width: 1px; }
.p-card:hover .p-qv { opacity: 1; transform: none; }
.p-qv:hover { transform: translateY(-2px) !important; }
@media (hover: none) {
  .p-qv { opacity: 1; transform: none; }
}

/* ---------- Series card: overlay slide-in ---------- */
.series-card-overlay {
  transition: transform .45s var(--ease-out-expo);
}
.series-card:hover .series-card-overlay {
  transform: translateY(-4px);
}
.series-card-img {
  transition: transform .8s var(--ease-out-expo), filter .5s ease;
}
.series-card:hover .series-card-img {
  transform: scale(1.04);
}

/* ---------- Marquee: pause on hover ---------- */
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee { cursor: default; }

/* ---------- Halftone accent utility ---------- */
.halftone-accent {
  position: relative;
}
.halftone-accent::before {
  content: ''; position: absolute; pointer-events: none;
  width: 180px; height: 180px;
  background-image: radial-gradient(circle, currentColor 1.2px, transparent 1.6px);
  background-size: 8px 8px;
  opacity: 0.14;
  mask-image: radial-gradient(circle, #000 35%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 70%);
  z-index: 0;
}
.halftone-accent > * { position: relative; z-index: 1; }
.theme-monochrome-ink .halftone-accent::before { opacity: 0.08; }
.theme-neon-stream .halftone-accent::before { opacity: 0.18; color: var(--primary); }

/* Section-header halftone flourish (manga theme only) */
.theme-manga-city .sec-head-l { position: relative; }
.theme-manga-city .sec-head-l::before {
  content: ''; position: absolute;
  width: 120px; height: 120px;
  top: -40px; left: -40px;
  background-image: radial-gradient(circle, rgba(212,53,126,.3) 1px, transparent 1.5px);
  background-size: 7px 7px;
  mask-image: radial-gradient(circle, #000 25%, transparent 70%);
  -webkit-mask-image: radial-gradient(circle, #000 25%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

/* ---------- QUICK VIEW MODAL ---------- */
.qv-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(16,17,34,0.64);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  animation: qv-fade-in .25s ease forwards;
}
@keyframes qv-fade-in { to { opacity: 1; } }
.qv-modal {
  position: relative;
  width: min(920px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius);
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  transform: translateY(20px) scale(.98);
  animation: qv-rise .4s var(--ease-out-expo) .05s forwards;
}
.theme-manga-city .qv-modal {
  border: 3px solid var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
}
.theme-neon-stream .qv-modal {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.theme-monochrome-ink .qv-modal {
  border: 1px solid var(--ink);
}
@keyframes qv-rise {
  to { transform: none; }
}
@media (max-width: 700px) {
  .qv-modal { grid-template-columns: 1fr; max-height: calc(100vh - 32px); }
  .qv-backdrop { padding: 12px; align-items: flex-end; }
  .qv-modal { max-height: 92vh; }
}
.qv-close {
  position: absolute; top: 14px; right: 14px;
  z-index: 4;
  width: 40px; height: 40px;
  background: var(--ink); color: var(--ink-fg);
  border: 2px solid var(--ink);
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .18s ease;
}
.qv-close:hover { transform: scale(1.08) rotate(90deg); }
.theme-manga-city .qv-close { box-shadow: 3px 3px 0 var(--ink); }

.qv-img {
  aspect-ratio: 1;
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  position: relative;
  overflow: hidden;
}
.theme-manga-city .qv-img::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(26,27,46,.12) 1px, transparent 1.5px);
  background-size: 8px 8px; z-index: 0;
  mask-image: radial-gradient(circle at 80% 20%, #000 0%, transparent 55%);
  -webkit-mask-image: radial-gradient(circle at 80% 20%, #000 0%, transparent 55%);
}
.qv-img img { width: 100%; height: 100%; object-fit: contain; position: relative; z-index: 1; }

.qv-body {
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 14px;
}
@media (max-width: 700px) { .qv-body { padding: 22px 20px; } }
.qv-eyebrow {
  font-family: var(--font-display); font-size: 11px;
  letter-spacing: 0.2em; color: var(--primary); font-weight: 700;
  display: inline-flex; align-items: center; gap: 10px;
}
.qv-eyebrow::after { content: ''; width: 28px; height: 2px; background: var(--primary); }
.qv-title {
  font-family: var(--font-jp-display);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900; line-height: 1.15; margin: 0;
}
.qv-artist-row { font-size: 13px; color: var(--fg-muted); }
.qv-price {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 700;
  padding: 14px 0;
  border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  margin: 6px 0;
}
.theme-monochrome-ink .qv-price { border-width: 1px; font-style: italic; }
.theme-neon-stream .qv-price { border-color: var(--line); }
.qv-price small { font-size: 11px; color: var(--fg-soft); margin-left: 10px; font-weight: 500; letter-spacing: 0.1em; }
.qv-desc { font-size: 13px; line-height: 1.8; color: var(--fg-muted); }
.qv-ctas {
  display: flex; gap: 10px; margin-top: auto;
  padding-top: 10px;
  flex-wrap: wrap;
}
.qv-ctas .btn { flex: 1; min-width: 140px; }

/* ---------- Button press physics ---------- */
.btn { transition: transform .14s ease, box-shadow .14s ease, background .18s ease; }
.btn:active { transform: translateY(1px); }

/* ---------- Header: subtle lift on scroll ---------- */
body.is-scrolled .site-hdr {
  box-shadow: 0 2px 14px rgba(0,0,0,.06);
}
.theme-neon-stream body.is-scrolled .site-hdr { box-shadow: 0 2px 14px rgba(0,0,0,.4); }

/* ---------- Cursor hint on interactive cards ---------- */
.p-card, .series-card, .artist-card, .cat-card, .pickup-hero, .pickup-small, .pd-artist-mini { cursor: pointer; }

/* ---------- Filter tab press feedback ---------- */
.filter-tab { transition: transform .14s ease, background .18s ease, color .18s ease; }
.filter-tab:active { transform: scale(.95); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- Mobile tap-state for non-hover devices ---------- */
@media (hover: none) {
  .p-card:active { transform: scale(.98); }
  .series-card:active { transform: scale(.98); }
  .cat-card:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
}