/* Product detail final interactive polish. Scoped only to product detail pages. */

:root {
  --detail-ink: #0d0f16;
  --detail-muted-strong: #55596a;
  --detail-paper: #f7f7fb;
  --detail-card: #ffffff;
  --detail-line-strong: rgba(15, 17, 28, 0.13);
  --detail-accent: oklch(60% 0.22 290);
  --detail-accent-soft: oklch(72% 0.16 292);
}

/* Light mode: make every non-hero detail band intentionally readable. */
html:not([data-theme="dark"]) .pv-detail-config-band,
body:not([data-theme="dark"]) .pv-detail-config-band,
html:not([data-theme="dark"]) .pv-detail-specs-band,
body:not([data-theme="dark"]) .pv-detail-specs-band,
html:not([data-theme="dark"]) .pv-detail-other-band,
body:not([data-theme="dark"]) .pv-detail-other-band {
  background:
    radial-gradient(circle at 16% 8%, rgba(139, 92, 246, 0.10), transparent 30%),
    linear-gradient(180deg, #fbfbfd 0%, var(--detail-paper) 100%) !important;
  color: var(--detail-ink) !important;
}

html:not([data-theme="dark"]) .pv-detail-h2,
body:not([data-theme="dark"]) .pv-detail-h2,
html:not([data-theme="dark"]) .pv-detail-config-name,
body:not([data-theme="dark"]) .pv-detail-config-name,
html:not([data-theme="dark"]) .pv-detail-other-name,
body:not([data-theme="dark"]) .pv-detail-other-name,
html:not([data-theme="dark"]) .pv-spec-value,
body:not([data-theme="dark"]) .pv-spec-value {
  color: var(--detail-ink) !important;
}

html:not([data-theme="dark"]) .pv-detail-config-desc,
body:not([data-theme="dark"]) .pv-detail-config-desc,
html:not([data-theme="dark"]) .pv-detail-other-eyebrow,
body:not([data-theme="dark"]) .pv-detail-other-eyebrow,
html:not([data-theme="dark"]) .pv-spec-key,
html:not([data-theme="dark"]) .pv-spec-label,
body:not([data-theme="dark"]) .pv-spec-key,
body:not([data-theme="dark"]) .pv-spec-label {
  color: var(--detail-muted-strong) !important;
}

html:not([data-theme="dark"]) .pv-detail-config-item,
body:not([data-theme="dark"]) .pv-detail-config-item,
html:not([data-theme="dark"]) .pv-detail-other-card,
body:not([data-theme="dark"]) .pv-detail-other-card {
  background: rgba(255, 255, 255, 0.76) !important;
  border: 1px solid rgba(15, 17, 28, 0.10) !important;
  box-shadow: 0 24px 70px rgba(14, 16, 28, 0.08) !important;
  backdrop-filter: blur(16px);
}

html:not([data-theme="dark"]) .pv-spec-table-inner,
body:not([data-theme="dark"]) .pv-spec-table-inner {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(15, 17, 28, 0.10) !important;
  box-shadow: 0 24px 70px rgba(14, 16, 28, 0.07) !important;
}

html:not([data-theme="dark"]) .pv-spec-row,
body:not([data-theme="dark"]) .pv-spec-row {
  border-bottom-color: rgba(15, 17, 28, 0.10) !important;
}

html:not([data-theme="dark"]) .pv-spec-key,
html:not([data-theme="dark"]) .pv-spec-label,
body:not([data-theme="dark"]) .pv-spec-key,
body:not([data-theme="dark"]) .pv-spec-label {
  background: rgba(245, 245, 250, 0.86) !important;
}

html:not([data-theme="dark"]) .pv-spec-value,
body:not([data-theme="dark"]) .pv-spec-value {
  background: rgba(255, 255, 255, 0.90) !important;
}

html:not([data-theme="dark"]) .pv-spec-group-title,
body:not([data-theme="dark"]) .pv-spec-group-title {
  color: var(--detail-accent) !important;
  border-bottom-color: rgba(15, 17, 28, 0.11) !important;
}

/* Feature bands stay cinematic, but get more depth and real movement hooks. */
.pv-detail-feature-band {
  position: relative;
  overflow: hidden;
  min-height: clamp(420px, 58vh, 680px);
}

.pv-detail-feature-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(139, 92, 246, 0.10), transparent 26%, transparent 74%, rgba(139, 92, 246, 0.08)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 86px);
  opacity: 0.38;
  pointer-events: none;
  transform: translate3d(calc(var(--detail-scroll, 0) * -28px), 0, 0);
  transition: opacity 0.35s ease;
}

.pv-detail-feature-band::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(188,167,255,.45), transparent);
  opacity: 0.7;
  pointer-events: none;
}

.pv-detail-feature-inner {
  position: relative;
  z-index: 1;
}

.pv-detail-feature-copy,
.pv-detail-feature-visual,
.pv-detail-metric,
.pv-detail-config-item,
.pv-detail-other-card,
.pv-spec-row {
  will-change: transform, opacity;
}

.pv-detail-feature-copy {
  transform: translate3d(0, calc(var(--detail-scroll, 0) * 22px), 0) !important;
}

.pv-detail-feature-visual {
  transform: translate3d(calc(var(--detail-pointer-x, 0) * 10px), calc(var(--detail-scroll, 0) * -34px + var(--detail-pointer-y, 0) * 10px), 0) scale(1.02) !important;
  transition: transform 0.22s ease-out;
}

.pv-detail-feature-icon {
  display: inline-block;
  color: var(--detail-accent-soft);
  opacity: 0.24;
  text-shadow: 0 0 44px rgba(139, 92, 246, 0.35);
  transform: scale(calc(1 + var(--detail-inview, 0) * 0.08));
  transition: transform 0.55s cubic-bezier(.22,.61,.36,1), opacity 0.55s ease;
}

.pv-detail-feature-band.is-revealed .pv-detail-feature-icon {
  opacity: 0.34;
}

/* Hero and metrics: more premium, but content visible by default. */
.pv-detail-hero-alpi {
  isolation: isolate;
}

.pv-detail-hero-alpi::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at calc(70% + var(--detail-pointer-x, 0) * 3%) calc(44% + var(--detail-pointer-y, 0) * 3%), rgba(139, 92, 246, 0.20), transparent 34%),
    radial-gradient(circle at 82% 74%, rgba(255, 255, 255, 0.08), transparent 26%);
  pointer-events: none;
  z-index: 0;
}

.pv-detail-hero-alpi-inner {
  position: relative;
  z-index: 1;
}

.pv-detail-hero-alpi-media img {
  transform: translate3d(calc(var(--detail-pointer-x, 0) * 8px), calc(var(--detail-pointer-y, 0) * 8px), 0) scale(1.015) !important;
  transition: transform 0.22s ease-out, filter 0.35s ease;
}

.pv-detail-hero-alpi:hover .pv-detail-hero-alpi-media img {
  filter: drop-shadow(0 50px 100px rgba(0,0,0,.78)) drop-shadow(0 0 36px rgba(139, 92, 246, .16));
}

.pv-detail-metrics-strip {
  position: relative;
  overflow: hidden;
}

.pv-detail-metrics-strip::before {
  content: "";
  position: absolute;
  left: -20%;
  right: -20%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, .55), transparent);
  transform: translateX(calc(var(--detail-scroll, 0) * 80px));
  opacity: .8;
}

.pv-detail-metric {
  position: relative;
  padding: 18px 0;
}

.pv-detail-metric::after {
  content: "";
  position: absolute;
  left: 0;
  right: 20%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(139, 92, 246, .55), transparent);
  transform: scaleX(0.28);
  transform-origin: left;
  transition: transform .45s ease;
}

.pv-detail-metric:hover::after {
  transform: scaleX(1);
}

/* Interactive cards and rows: quieter depth, fewer flat boxes. */
.pv-detail-config-item,
.pv-detail-other-card,
.pv-spec-row {
  transition: transform .38s cubic-bezier(.22,.61,.36,1), box-shadow .38s ease, background .32s ease, border-color .32s ease;
}

.pv-detail-config-item:hover,
.pv-detail-other-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in oklab, var(--detail-accent), transparent 55%) !important;
  box-shadow: 0 30px 90px rgba(14, 16, 28, 0.14) !important;
}

.pv-spec-row:hover .pv-spec-key,
.pv-spec-row:hover .pv-spec-label,
.pv-spec-row:hover .pv-spec-value {
  background: color-mix(in oklab, var(--detail-accent), transparent 92%) !important;
}

.pv-spec-row:hover .pv-spec-key,
.pv-spec-row:hover .pv-spec-label {
  color: var(--detail-accent) !important;
}

/* Scroll reveal is additive only: no element starts invisible. */
.pv-detail-hero-alpi-copy:not(.is-revealed),
.pv-detail-hero-alpi-media:not(.is-revealed),
.pv-detail-metric:not(.is-revealed),
.pv-detail-feature-copy:not(.is-revealed),
.pv-detail-feature-visual:not(.is-revealed),
.pv-detail-config-item:not(.is-revealed),
.pv-detail-other-card:not(.is-revealed),
.pv-spec-row:not(.is-revealed),
.pv-spec-group-title:not(.is-revealed) {
  opacity: 1 !important;
}

.pv-detail-hero-alpi-copy.is-revealed,
.pv-detail-hero-alpi-media.is-revealed,
.pv-detail-metric.is-revealed,
.pv-detail-feature-copy.is-revealed,
.pv-detail-feature-visual.is-revealed,
.pv-detail-config-item.is-revealed,
.pv-detail-other-card.is-revealed,
.pv-spec-row.is-revealed,
.pv-spec-group-title.is-revealed {
  animation: pvDetailLift .72s cubic-bezier(.22,.61,.36,1) both;
}

@keyframes pvDetailLift {
  from { opacity: .72; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .pv-detail-feature-copy,
  .pv-detail-feature-visual,
  .pv-detail-hero-alpi-media img,
  .pv-detail-feature-band::before,
  .pv-detail-metrics-strip::before {
    transform: none !important;
  }

  .pv-detail-hero-alpi-copy.is-revealed,
  .pv-detail-hero-alpi-media.is-revealed,
  .pv-detail-metric.is-revealed,
  .pv-detail-feature-copy.is-revealed,
  .pv-detail-feature-visual.is-revealed,
  .pv-detail-config-item.is-revealed,
  .pv-detail-other-card.is-revealed,
  .pv-spec-row.is-revealed,
  .pv-spec-group-title.is-revealed {
    animation: none !important;
  }
}

@media (max-width: 860px) {
  .pv-detail-feature-band {
    min-height: auto;
  }

  .pv-detail-feature-copy,
  .pv-detail-feature-visual,
  .pv-detail-hero-alpi-media img {
    transform: none !important;
  }
}

/* Explicit dark-mode lock so older light-mode fixes cannot bleed into dark. */
html[data-theme="dark"] .pv-detail-config-band,
body[data-theme="dark"] .pv-detail-config-band,
html[data-theme="dark"] .pv-detail-specs-band,
body[data-theme="dark"] .pv-detail-specs-band,
html[data-theme="dark"] .pv-detail-other-band,
body[data-theme="dark"] .pv-detail-other-band {
  background:
    radial-gradient(circle at 14% 8%, rgba(139, 92, 246, 0.12), transparent 28%),
    linear-gradient(180deg, #0a0b0f 0%, #06070a 100%) !important;
  color: #f4f2ed !important;
}

html[data-theme="dark"] .pv-detail-h2,
body[data-theme="dark"] .pv-detail-h2,
html[data-theme="dark"] .pv-detail-config-name,
body[data-theme="dark"] .pv-detail-config-name,
html[data-theme="dark"] .pv-detail-other-name,
body[data-theme="dark"] .pv-detail-other-name,
html[data-theme="dark"] .pv-spec-value,
body[data-theme="dark"] .pv-spec-value {
  color: #f4f2ed !important;
}

html[data-theme="dark"] .pv-detail-config-desc,
body[data-theme="dark"] .pv-detail-config-desc,
html[data-theme="dark"] .pv-detail-other-eyebrow,
body[data-theme="dark"] .pv-detail-other-eyebrow,
html[data-theme="dark"] .pv-spec-key,
html[data-theme="dark"] .pv-spec-label,
body[data-theme="dark"] .pv-spec-key,
body[data-theme="dark"] .pv-spec-label {
  color: rgba(244, 242, 237, 0.58) !important;
}

html[data-theme="dark"] .pv-detail-config-item,
body[data-theme="dark"] .pv-detail-config-item,
html[data-theme="dark"] .pv-detail-other-card,
body[data-theme="dark"] .pv-detail-other-card,
html[data-theme="dark"] .pv-spec-table-inner,
body[data-theme="dark"] .pv-spec-table-inner {
  background: rgba(255, 255, 255, 0.035) !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .pv-spec-key,
html[data-theme="dark"] .pv-spec-label,
body[data-theme="dark"] .pv-spec-key,
body[data-theme="dark"] .pv-spec-label,
html[data-theme="dark"] .pv-spec-value,
body[data-theme="dark"] .pv-spec-value {
  background: transparent !important;
}

/* Detail feature bands v4: compact accordion rows, no decorative icons. */
.pv-detail-feature-band {
  min-height: 0 !important;
  padding: clamp(22px, 4vw, 46px) 0 !important;
  overflow: visible !important;
  background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(246,247,252,.88)) !important;
  border-top: 1px solid rgba(19, 22, 34, .10) !important;
  border-bottom: 0 !important;
}

.pv-detail-feature-band.pv-detail-feature-alt {
  background: linear-gradient(180deg, rgba(248,249,253,.94), rgba(240,242,248,.88)) !important;
}

.pv-detail-feature-band::before {
  inset: 0 auto 0 0 !important;
  width: clamp(2px, .35vw, 5px) !important;
  background: linear-gradient(180deg, transparent, rgba(130, 82, 255, .72), transparent) !important;
  opacity: calc(.2 + (var(--detail-inview, 0) * .55)) !important;
  transform: scaleY(calc(.55 + (var(--detail-inview, 0) * .45))) !important;
  transform-origin: center !important;
}

.pv-detail-feature-band::after {
  display: none !important;
}

.pv-detail-feature-inner {
  max-width: min(980px, calc(100vw - 40px)) !important;
  display: block !important;
  padding: 0 !important;
}

.pv-detail-feature-copy {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  align-items: start !important;
  gap: clamp(18px, 3vw, 38px) !important;
  padding: clamp(22px, 3vw, 34px) clamp(20px, 4vw, 46px) !important;
  border: 1px solid rgba(19, 22, 34, .12) !important;
  background: rgba(255,255,255,.72) !important;
  box-shadow: 0 20px 60px rgba(18, 22, 34, .06) !important;
  backdrop-filter: blur(18px) saturate(1.05) !important;
  transition: transform .55s cubic-bezier(.22,.61,.36,1),
              border-color .55s cubic-bezier(.22,.61,.36,1),
              background .55s cubic-bezier(.22,.61,.36,1),
              box-shadow .55s cubic-bezier(.22,.61,.36,1) !important;
}

.pv-detail-feature-band.is-motion-live .pv-detail-feature-copy {
  transform: translate3d(0, calc(var(--detail-scroll, 0) * -18px), 0) !important;
}

.pv-detail-feature-band:hover .pv-detail-feature-copy {
  transform: translate3d(0, -4px, 0) !important;
  border-color: rgba(130, 82, 255, .34) !important;
  box-shadow: 0 28px 74px rgba(18, 22, 34, .10) !important;
}

.pv-detail-feature-label {
  grid-row: 1 / span 2 !important;
  align-self: start !important;
  color: rgba(130, 82, 255, .86) !important;
  font: 600 13px/1 var(--font-mono, ui-monospace, monospace) !important;
  letter-spacing: .12em !important;
  padding-top: 9px !important;
}

.pv-detail-feature-title {
  margin: 0 !important;
  color: #10131d !important;
  font-size: clamp(28px, 3.8vw, 52px) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
  max-width: 760px !important;
}

.pv-detail-feature-more {
  margin-top: clamp(16px, 2vw, 22px) !important;
  max-width: 680px !important;
}

.pv-detail-feature-more summary {
  list-style: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  cursor: pointer !important;
  color: rgba(17, 20, 30, .64) !important;
  font: 650 12px/1 var(--font-body) !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  user-select: none !important;
}

.pv-detail-feature-more summary::-webkit-details-marker {
  display: none !important;
}

.pv-detail-feature-more summary b {
  display: grid !important;
  place-items: center !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: #11141d !important;
  font: 400 19px/1 var(--font-body) !important;
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
              background .35s cubic-bezier(.22,.61,.36,1) !important;
}

.pv-detail-feature-more[open] summary b {
  transform: rotate(45deg) !important;
  background: #8252ff !important;
}

.pv-detail-feature-desc {
  margin: 18px 0 0 !important;
  color: rgba(20, 23, 34, .70) !important;
  max-width: 640px !important;
  font-size: clamp(15px, 1.5vw, 18px) !important;
  line-height: 1.62 !important;
  animation: pvFeatureDescIn .36s cubic-bezier(.22,.61,.36,1) both !important;
}

.pv-detail-feature-visual,
.pv-detail-feature-icon {
  display: none !important;
}

@keyframes pvFeatureDescIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

html[data-theme="dark"] .pv-detail-feature-band,
body[data-theme="dark"] .pv-detail-feature-band {
  background:
    radial-gradient(circle at 10% 50%, rgba(130,82,255,.12), transparent 36%),
    linear-gradient(180deg, #080a10, #0d1018) !important;
  border-top-color: rgba(255,255,255,.10) !important;
}

html[data-theme="dark"] .pv-detail-feature-band.pv-detail-feature-alt,
body[data-theme="dark"] .pv-detail-feature-band.pv-detail-feature-alt {
  background:
    radial-gradient(circle at 90% 50%, rgba(130,82,255,.10), transparent 34%),
    linear-gradient(180deg, #0b0d14, #090b11) !important;
}

html[data-theme="dark"] .pv-detail-feature-copy,
body[data-theme="dark"] .pv-detail-feature-copy {
  background: rgba(13, 16, 24, .78) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 28px 80px rgba(0,0,0,.28) !important;
}

html[data-theme="dark"] .pv-detail-feature-title,
body[data-theme="dark"] .pv-detail-feature-title {
  color: rgba(255,255,255,.94) !important;
}

html[data-theme="dark"] .pv-detail-feature-more summary,
body[data-theme="dark"] .pv-detail-feature-more summary {
  color: rgba(255,255,255,.62) !important;
}

html[data-theme="dark"] .pv-detail-feature-more summary b,
body[data-theme="dark"] .pv-detail-feature-more summary b {
  color: #11141d !important;
  background: rgba(255,255,255,.92) !important;
}

html[data-theme="dark"] .pv-detail-feature-more[open] summary b,
body[data-theme="dark"] .pv-detail-feature-more[open] summary b {
  color: #fff !important;
  background: #8252ff !important;
}

html[data-theme="dark"] .pv-detail-feature-desc,
body[data-theme="dark"] .pv-detail-feature-desc {
  color: rgba(255,255,255,.70) !important;
}

@media (max-width: 760px) {
  .pv-detail-feature-inner {
    max-width: calc(100vw - 24px) !important;
  }

  .pv-detail-feature-copy {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .pv-detail-feature-label {
    grid-row: auto !important;
    padding-top: 0 !important;
  }
}