/* ── Detail page polish: light mode fixes + scroll animations ──
   Loaded last. Scoped to product detail classes only. */

/* ── Scroll reveal base states ── */
.pv-detail-hero-alpi-copy,
.pv-detail-hero-alpi-media,
.pv-detail-metric,
.pv-detail-feature-copy,
.pv-detail-feature-visual,
.pv-detail-config-item,
.pv-detail-other-card,
.pv-spec-row,
.pv-spec-group-title {
  opacity: 1;
  transform: none;
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pv-detail-hero-alpi-media {
  transform: none;
}

.pv-detail-feature-visual {
  transform: none;
}

/* ── Visible state (added by detail-scroll.js) ── */
.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 {
  opacity: 1;
  transform: none;
}

/* ── Feature icon animation ── */
.pv-detail-feature-icon {
  font-size: clamp(72px, 10vw, 140px);
  line-height: 1;
  opacity: 0.18;
  filter: blur(0);
  transition: opacity 1s ease 0.25s, filter 1s ease 0.25s;
}

.pv-detail-feature-visual.is-revealed .pv-detail-feature-icon {
  opacity: 0.18;
  filter: blur(0);
}

/* ── Metrics: stagger ── */
.pv-detail-metric:nth-child(1) { transition-delay: 0s; }
.pv-detail-metric:nth-child(2) { transition-delay: 0.1s; }
.pv-detail-metric:nth-child(3) { transition-delay: 0.2s; }
.pv-detail-metric:nth-child(4) { transition-delay: 0.3s; }

/* ── Config items: stagger ── */
.pv-detail-config-item:nth-child(1) { transition-delay: 0s; }
.pv-detail-config-item:nth-child(2) { transition-delay: 0.07s; }
.pv-detail-config-item:nth-child(3) { transition-delay: 0.14s; }
.pv-detail-config-item:nth-child(4) { transition-delay: 0.21s; }
.pv-detail-config-item:nth-child(5) { transition-delay: 0.28s; }
.pv-detail-config-item:nth-child(6) { transition-delay: 0.35s; }

/* ── Other model cards: stagger ── */
.pv-detail-other-card:nth-child(1) { transition-delay: 0s; }
.pv-detail-other-card:nth-child(2) { transition-delay: 0.08s; }
.pv-detail-other-card:nth-child(3) { transition-delay: 0.16s; }
.pv-detail-other-card:nth-child(4) { transition-delay: 0.24s; }

/* ── Hero copy: hero title line reveal ── */
.pv-detail-h1 {
  overflow: hidden;
}

/* ── Metric value hover pulse ── */
.pv-detail-metric:hover .pv-detail-metric-value {
  color: oklch(72% 0.22 290);
  transition: color 0.35s ease;
}

/* ── Spec row hover highlight ── */
.pv-spec-row {
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              background 0.25s ease;
}

.pv-spec-row:hover {
  background: rgba(139, 92, 246, 0.05) !important;
}

[data-theme="dark"] .pv-spec-row:hover,
html[data-theme="dark"] .pv-spec-row:hover {
  background: rgba(139, 92, 246, 0.08) !important;
}

/* ── Config item hover ── */
.pv-detail-config-item {
  transition: opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.35s ease;
  cursor: default;
}

.pv-detail-config-item:hover {
  box-shadow: inset 0 0 0 1px oklch(60% 0.22 290 / 0.35) !important;
}

/* ── Light mode color fixes ── */
html:not([data-theme="dark"]) .pv-detail-config-band,
body:not([data-theme="dark"]) .pv-detail-config-band {
  background: #f8f8fb;
}

html:not([data-theme="dark"]) .pv-detail-config-item,
body:not([data-theme="dark"]) .pv-detail-config-item {
  background: #ffffff;
}

html:not([data-theme="dark"]) .pv-detail-config-name,
body:not([data-theme="dark"]) .pv-detail-config-name {
  color: #0d0e14;
}

html:not([data-theme="dark"]) .pv-detail-config-desc,
body:not([data-theme="dark"]) .pv-detail-config-desc {
  color: #5a5b6a;
}

html:not([data-theme="dark"]) .pv-detail-specs-band,
body:not([data-theme="dark"]) .pv-detail-specs-band {
  background: #f8f8fb;
}

html:not([data-theme="dark"]) .pv-detail-other-band,
body:not([data-theme="dark"]) .pv-detail-other-band {
  background: #f2f2f7;
}

html:not([data-theme="dark"]) .pv-detail-other-card,
body:not([data-theme="dark"]) .pv-detail-other-card {
  background: #ffffff;
  border-color: #e2e2ea;
}

html:not([data-theme="dark"]) .pv-detail-other-name,
body:not([data-theme="dark"]) .pv-detail-other-name {
  color: #0d0e14;
}

html:not([data-theme="dark"]) .pv-detail-other-eyebrow,
body:not([data-theme="dark"]) .pv-detail-other-eyebrow {
  color: #6b6c7e;
}

html:not([data-theme="dark"]) .pv-detail-h2,
body:not([data-theme="dark"]) .pv-detail-h2 {
  color: #0d0e14;
}

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: #6b6c7e;
}

html:not([data-theme="dark"]) .pv-spec-value,
body:not([data-theme="dark"]) .pv-spec-value {
  color: #0d0e14;
}

html:not([data-theme="dark"]) .pv-spec-row,
body:not([data-theme="dark"]) .pv-spec-row {
  border-bottom-color: #e2e2ea;
}

html:not([data-theme="dark"]) .pv-spec-group-title,
body:not([data-theme="dark"]) .pv-spec-group-title {
  border-bottom-color: #e2e2ea;
}

/* ── Feature band parallax hint (CSS only) ── */
@media (prefers-reduced-motion: no-preference) {
  .pv-detail-feature-band {
    will-change: transform;
  }
}

/* ── Light mode comprehensive fixes ── */
/* Hero and metrics strip stay dark always (intentional) */
/* Feature bands stay dark always (intentional) */

/* Config band in light mode */
html:not([data-theme="dark"]) .pv-detail-kicker,
body:not([data-theme="dark"]) .pv-detail-kicker {
  color: oklch(45% 0.01 240);
}

html:not([data-theme="dark"]) .pv-detail-h2,
body:not([data-theme="dark"]) .pv-detail-h2 {
  color: #0d0e14;
}

/* Spec table light mode */
html:not([data-theme="dark"]) .pv-spec-table-inner,
body:not([data-theme="dark"]) .pv-spec-table-inner {
  color: #0d0e14;
}

html:not([data-theme="dark"]) .pv-spec-group-title,
body:not([data-theme="dark"]) .pv-spec-group-title {
  color: oklch(45% 0.01 240);
  border-bottom-color: #d8d8e2;
}

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: #6b6c7e;
  background: #f4f4f8;
}

html:not([data-theme="dark"]) .pv-spec-value,
body:not([data-theme="dark"]) .pv-spec-value {
  color: #0d0e14;
  background: #fff;
}

html:not([data-theme="dark"]) .pv-spec-row,
body:not([data-theme="dark"]) .pv-spec-row {
  border-bottom-color: #e2e2ea;
}

/* Other models band light mode */
html:not([data-theme="dark"]) .pv-detail-other-band,
body:not([data-theme="dark"]) .pv-detail-other-band {
  background: #f4f4f8;
}

html:not([data-theme="dark"]) .pv-detail-other-card,
body:not([data-theme="dark"]) .pv-detail-other-card {
  background: #fff;
  border-color: #dcdce8;
}

html:not([data-theme="dark"]) .pv-detail-other-eyebrow,
body:not([data-theme="dark"]) .pv-detail-other-eyebrow {
  color: #6b6c7e;
}

html:not([data-theme="dark"]) .pv-detail-other-name,
body:not([data-theme="dark"]) .pv-detail-other-name {
  color: #0d0e14;
}

/* Specs band light mode */
html:not([data-theme="dark"]) .pv-detail-specs-band,
body:not([data-theme="dark"]) .pv-detail-specs-band {
  background: #f8f8fb;
}

html:not([data-theme="dark"]) .pv-detail-specs-band .spec-label,
body:not([data-theme="dark"]) .pv-detail-specs-band .spec-label {
  color: #6b6c7e;
}

html:not([data-theme="dark"]) .pv-detail-specs-band .spec-value,
body:not([data-theme="dark"]) .pv-detail-specs-band .spec-value {
  color: #0d0e14;
}

html:not([data-theme="dark"]) .pv-detail-specs-band .specs-group-title,
body:not([data-theme="dark"]) .pv-detail-specs-band .specs-group-title {
  color: oklch(60% 0.22 290) !important;
  border-bottom-color: #d8d8e2 !important;
}

html:not([data-theme="dark"]) .pv-detail-specs-band .spec-row,
body:not([data-theme="dark"]) .pv-detail-specs-band .spec-row {
  border-bottom-color: #e2e2ea !important;
}

/* Config band light mode */
html:not([data-theme="dark"]) .pv-detail-config-band,
body:not([data-theme="dark"]) .pv-detail-config-band {
  background: #f8f8fb;
}

html:not([data-theme="dark"]) .pv-detail-config-item,
body:not([data-theme="dark"]) .pv-detail-config-item {
  background: #fff;
}

html:not([data-theme="dark"]) .pv-detail-config-name,
body:not([data-theme="dark"]) .pv-detail-config-name {
  color: #0d0e14;
}

html:not([data-theme="dark"]) .pv-detail-config-desc,
body:not([data-theme="dark"]) .pv-detail-config-desc {
  color: #5a5b6a;
}

/* ── Responsive: reduce animation distance on mobile ── */
@media (max-width: 640px) {
  .pv-detail-hero-alpi-copy,
  .pv-detail-metric,
  .pv-detail-feature-copy,
  .pv-detail-config-item,
  .pv-detail-other-card {
    transform: translateY(16px);
  }

  .pv-detail-hero-alpi-media,
  .pv-detail-feature-visual {
    transform: translateY(16px);
  }
}