/* ============================================================
   ROCKWOOD — Product Detail (PDP) · "The Schematic"
   An annotated blueprint: an oversized, unframed product with
   glowing leader lines out to labelled feature callouts.
   ============================================================ */

.pdp { position: relative; z-index: var(--z-content); padding-top: calc(var(--nav-h) + 2.5rem); padding-bottom: 5rem; min-height: 100svh; }

.crumb { display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap; margin-bottom: 2.2rem; color: var(--text-lo); }
.crumb a { color: var(--text-lo); transition: color var(--dur-fast); }
.crumb a:hover { color: var(--accent, var(--signal)); }
.crumb .sep { color: var(--text-faint); }
.crumb .current { color: var(--text-mid); }

/* ---- Header ---------------------------------------------------- */
.pdp__header {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 4vw, 4rem); align-items: end;
  padding-bottom: clamp(1.5rem, 4vh, 3rem);
  border-bottom: 1px solid var(--hairline);
}
.pdp__lead .eyebrow { color: var(--accent, var(--signal)); margin-bottom: 1.1rem; }
.pdp__name { font-size: var(--fs-h1); margin-bottom: 0.7rem; }
.pdp__tagline {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3);
  color: var(--text-hi); letter-spacing: -0.01em;
}
.pdp__side { min-width: 0; }
.pdp__code {
  display: inline-block; margin-bottom: 1rem;
  color: var(--accent, var(--signal));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--r-pill); padding: 0.35em 0.85em; background: rgba(4,6,12,0.5);
}
.pdp__side .lede { margin-bottom: 0; }
.pdp__actions { margin-top: 1.8rem; display: flex; gap: 0.9rem; flex-wrap: wrap; }

/* ---- Schematic ------------------------------------------------- */
.schematic {
  /* Oversized subject: only a slice of the product is in view at a time, so
     the system reveals itself part by part as you scroll. The exact height is
     measured in product.js — see fitSubject(). */
  position: relative;
  max-width: 1060px; margin: clamp(2rem, 6vh, 4.5rem) auto clamp(2.5rem, 7vh, 5rem);
}
.schematic.is-schematic { max-width: none; }

/* Scroll invitation — the page asks you to travel down the tower */
.schematic__hint {
  position: absolute; top: -2.2rem; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.6em; z-index: 4;
  color: var(--text-lo); white-space: nowrap;
}
.schematic__hint::after {
  content: "↓"; color: var(--accent, var(--signal));
  animation: hintDrop 2s var(--ease-cinematic) infinite;
}
@keyframes hintDrop { 0%,100% { transform: translateY(-2px); opacity: 0.6; } 50% { transform: translateY(3px); opacity: 1; } }

/* Stage — the product floats free; no frame, just a pool of light under it */
.schematic__stage {
  position: relative; z-index: 1;
  width: fit-content; max-width: min(46%, 460px);
  margin-inline: auto;
  display: grid; place-items: center;
  padding: 0;
  background: radial-gradient(58% 42% at 50% 50%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 72%);
}
.schematic.is-list .schematic__stage { max-width: min(88%, 460px); }
/* Schematic mode: the stage spans the column and crops the oversized subject */
.schematic.is-schematic .schematic__stage {
  width: 100%; max-width: none;
  overflow: hidden;
  padding-block: 0;
}
.schematic__img {
  position: relative; z-index: 1;
  width: auto; height: auto; max-width: 100%;
  max-height: min(66vh, 600px); object-fit: contain;
  filter: drop-shadow(0 26px 42px rgba(0,0,0,0.55));
  animation: floaty 8s var(--ease-cinematic) infinite;
}
/* Tall products get the oversized treatment; wide ones (monitors) stay in frame.
   JS sets the exact height — this is the fallback, and it never overflows the
   stage, so the product cannot crop before (or without) that measurement. */
.schematic.is-schematic.is-portrait .schematic__img {
  width: auto; height: auto;
  max-width: 100%; max-height: none;
  animation: none;   /* a floating 2000px subject reads as drift, not life */
}
.schematic.is-list.is-portrait .schematic__img { max-height: 78vh; }
@keyframes floaty { 0%,100% { transform: translateY(-5px); } 50% { transform: translateY(5px); } }
.schematic__code {
  position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2;
  color: var(--accent, var(--signal));
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: var(--r-pill); padding: 0.3em 0.7em; background: rgba(4,6,12,0.55);
}
/* Fallback orb for image-less products */
.schematic__orb {
  width: 220px; max-width: 60vw; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, color-mix(in srgb, var(--accent) 85%, #fff 5%), color-mix(in srgb, var(--accent) 40%, #05070d) 70%, #05070d 100%);
  box-shadow: 0 0 90px -10px color-mix(in srgb, var(--accent) 70%, transparent), inset -10px -14px 40px -10px rgba(0,0,0,0.7);
  display: grid; place-items: center;
  animation: floaty 7s var(--ease-cinematic) infinite;
}
.schematic__orb span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.85); box-shadow: 0 0 16px 3px rgba(255,255,255,0.6); }
/* "Coming soon" tag over the fallback orb */
.schematic__soon {
  position: absolute; z-index: 3; left: 50%; bottom: -0.4rem; transform: translateX(-50%);
  white-space: nowrap; text-transform: uppercase; letter-spacing: 0.22em;
  color: var(--text-hi);
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--r-pill); padding: 0.4em 1em;
  background: rgba(4, 6, 12, 0.7); backdrop-filter: blur(6px);
}

/* Leader-line overlay */
.schematic__leaders {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  width: 100%; height: 100%; overflow: visible;
}
.schematic.is-list .schematic__leaders { display: none; }
.leader__line {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 42%, transparent);
  stroke-width: 1; stroke-dasharray: 4 5;
  opacity: 0;
  transition: stroke var(--dur-fast), stroke-width var(--dur-fast), opacity var(--dur-slow) var(--ease-cinematic);
}
.leader__line.is-in { opacity: 1; }
.leader__line.is-active {
  stroke: var(--accent, var(--signal)); stroke-dasharray: none; stroke-width: 1.5;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 70%, transparent));
}
.leader__ring {
  fill: none; stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 1;
  opacity: 0; transform-box: fill-box; transform-origin: center;
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-precise);
}
.leader__ring.is-in { opacity: 0.5; }
.leader__ring.is-in.is-active { opacity: 1; transform: scale(1.25); }
.leader__dot { fill: var(--accent, var(--signal)); opacity: 0; transition: opacity var(--dur-mid) var(--ease-cinematic); }
.leader__dot.is-in { opacity: 1; }
.leader__dot.is-active { filter: drop-shadow(0 0 6px var(--accent)); }

/* Callouts */
.callout {
  display: inline-flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.5rem 0.7rem; border-radius: var(--r-md);
  border: 1px solid transparent; background: transparent;
  text-align: left; max-width: 240px; line-height: 1.32;
  transition: border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast) var(--ease-precise);
}
/* Instrument plate: a machined panel milled from the same metal as the
   wordmark. Frosted glass body, a platinum hairline edge that catches light
   along one side, and a bevel highlight across the top. */
.schematic.is-schematic .callout {
  position: absolute; z-index: 3; transform: translateY(-50%);
  width: clamp(164px, 20vw, 232px);
  padding: 0.8rem 0.95rem;
  border: 1px solid transparent;
  background:
    linear-gradient(158deg, rgba(17, 22, 34, 0.94), rgba(6, 9, 15, 0.96)) padding-box,
    linear-gradient(150deg,
      rgba(244, 246, 249, 0.44) 0%,
      rgba(200, 204, 212, 0.15) 27%,
      rgba(139, 147, 160, 0.08) 52%,
      rgba(217, 222, 229, 0.32) 78%,
      rgba(174, 181, 192, 0.12) 100%) border-box;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),      /* bevel catch */
    0 26px 54px -34px rgba(0, 0, 0, 0.95);
  /* revealed as you scroll past the part it points at */
  opacity: 0; translate: var(--rx, 0) 0;
  transition: opacity var(--dur-slow) var(--ease-cinematic) calc(var(--i, 0) * 40ms),
              translate var(--dur-slow) var(--ease-cinematic) calc(var(--i, 0) * 40ms),
              box-shadow var(--dur-fast) var(--ease-precise),
              transform var(--dur-fast) var(--ease-precise);
}
/* Accent spine on the edge that faces the product — ties plate to leader line */
.schematic.is-schematic .callout::before {
  content: ""; position: absolute; top: 16%; bottom: 16%; width: 2px;
  border-radius: 2px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--accent, var(--signal)), transparent);
  opacity: 0.5; transition: opacity var(--dur-fast);
}
.schematic.is-schematic .callout--right::before { left: 0; }
.schematic.is-schematic .callout--left::before { right: 0; }
/* Light sweeping across the metal on hover / when centred in the viewport */
.schematic.is-schematic .callout::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.09) 47%, transparent 63%);
  opacity: 0; transform: translateX(-28%);
  transition: opacity var(--dur-mid) ease, transform 0.9s var(--ease-cinematic);
}
.schematic.is-schematic .callout:hover::after,
.schematic.is-schematic .callout:focus-visible::after,
.schematic.is-schematic .callout.is-active::after { opacity: 1; transform: translateX(28%); }
.schematic.is-schematic .callout:hover,
.schematic.is-schematic .callout.is-active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 26px 54px -30px rgba(0, 0, 0, 0.95),
    0 0 32px -14px color-mix(in srgb, var(--accent) 70%, transparent);
}
.schematic.is-schematic .callout:hover::before,
.schematic.is-schematic .callout.is-active::before { opacity: 1; }
.schematic.is-schematic .callout--left { --rx: -14px; }
.schematic.is-schematic .callout--right { --rx: 14px; }
.schematic.is-schematic .callout.is-in { opacity: 1; --rx: 0px; }
.schematic.is-schematic .callout--left { left: 0; flex-direction: row-reverse; text-align: right; }
.schematic.is-schematic .callout--right { right: 0; }
/* Etched index plate */
.callout__num {
  font-family: var(--font-mono); font-size: var(--fs-readout);
  letter-spacing: 0.12em; flex: none; margin-top: 0.15em;
  padding: 0.22em 0.45em; border-radius: 4px;
  border: 1px solid rgba(200, 204, 212, 0.20);
  background: rgba(255, 255, 255, 0.045);
  color: var(--steel-200);
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.callout.is-active .callout__num,
.callout:hover .callout__num {
  color: var(--accent, var(--signal));
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.callout__body { display: flex; flex-direction: column; gap: 0.22rem; min-width: 0; }
/* Milled platinum — the one place the metal is literal. This is a lifted
   version of --chrome-grad: the stock gradient's darkest stop falls to 4.4:1
   against the plate when it sits over the white product, just under AA. */
.callout__label {
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  letter-spacing: -0.005em;
  background: linear-gradient(150deg,
    #f8fafc 0%, #dfe3e9 27%, #b4bcc8 52%, #eef1f5 78%, #c9d0da 100%);
  background-size: 200% 200%;
  background-position: 0% 0%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  transition: background-position var(--dur-slow) var(--ease-cinematic);
}
.callout:hover .callout__label,
.callout.is-active .callout__label { background-position: 100% 100%; }
/* Punchline: plain language, sized to actually be read */
.callout__note { font-family: var(--font-body); font-size: 0.83rem; line-height: 1.45; color: var(--text-mid); }
.callout:hover, .callout:focus-visible, .callout.is-active {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, rgba(6,9,16,0.6));
  transform: translateY(-50%) translateX(0);
  outline: none;
}
.callout.is-active .callout__label { color: var(--accent, var(--signal)); }
.schematic.is-schematic .callout:hover, .schematic.is-schematic .callout.is-active { transform: translateY(-50%); }

/* Mobile / reduced-motion list */
.schematic__list { display: none; }
.schematic.is-list .schematic__list {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.7rem;
  margin-top: 2rem;
}
.schematic.is-list .callout {
  position: static; transform: none; width: auto; max-width: none;
  border: 1px solid var(--hairline); border-left: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  background: rgba(14,20,36,0.5); padding: 0.9rem 1rem;
}
.schematic.is-list .callout--left { flex-direction: row; text-align: left; }
.schematic.is-list .callout:hover, .schematic.is-list .callout.is-active { transform: none; }

/* ---- Trust hooks ---------------------------------------------- */
.trust { margin-bottom: clamp(3rem, 7vh, 5rem); }
.trust .eyebrow { margin-bottom: 1.4rem; color: var(--accent, var(--signal)); }
.trust__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px; background: var(--hairline);
  border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden;
}
.trust__cell {
  background: rgba(10,14,26,0.6); padding: 1.6rem 1.4rem;
  display: flex; flex-direction: column; gap: 0.7rem;
}
.trust__i { color: var(--accent, var(--signal)); }
.trust__t { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; color: var(--text-hi); line-height: 1.25; }

/* ---- Specs ------------------------------------------------------ */
.pdp__specs { border-top: 1px solid var(--hairline); padding-top: 2.5rem; margin-bottom: clamp(3rem, 7vh, 5rem); }
.pdp__specs-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 1.8rem; flex-wrap: wrap; }
.pdp__specs-head .eyebrow { color: var(--accent, var(--signal)); }
.pdp__specs-head .readout { color: var(--text-faint); }
.specgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; margin: 0; }
.specrow { background: rgba(10,14,26,0.55); padding: 1.3rem 1.5rem; display: flex; flex-direction: column; gap: 0.4rem; transition: background var(--dur-fast); }
.specrow:hover { background: color-mix(in srgb, var(--accent) 8%, rgba(10,14,26,0.55)); }
.specrow dt { font-family: var(--font-mono); font-size: var(--fs-readout); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-lo); }
.specrow dd { margin: 0; color: var(--text-hi); font-size: 1.05rem; font-family: var(--font-display); font-weight: 600; }

/* ---- Related ---------------------------------------------------- */
.pdp__related { border-top: 1px solid var(--hairline); padding-top: 2.5rem; }
.pdp__related .eyebrow { margin-bottom: 1.6rem; color: var(--accent, var(--signal)); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.rcard a {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; height: 100%;
  padding: 1rem 1.2rem; border: 1px solid var(--hairline); border-radius: var(--r-md);
  background: rgba(14,20,36,0.5); transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-precise), background var(--dur-fast);
}
.rcard a:hover { border-color: color-mix(in srgb, var(--accent) 55%, transparent); transform: translateY(-4px); background: rgba(20,28,48,0.7); }
.rcard__thumb {
  width: 56px; height: 56px; flex: none; border-radius: var(--r-sm); overflow: hidden;
  display: grid; place-items: center;
  background: radial-gradient(60% 60% at 50% 40%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 72%), rgba(6,9,16,0.5);
  border: 1px solid var(--hairline);
}
.rcard__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.rcard__thumb--dot { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 60%, #0a0e1a), #0a0e1a); }
.rcard__text { min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.rcard__name { font-family: var(--font-display); font-weight: 600; color: var(--text-hi); }
.rcard__meta { font-family: var(--font-mono); font-size: var(--fs-readout); letter-spacing: 0.14em; color: var(--text-lo); }
.rcard__arrow { color: var(--accent, var(--signal)); font-size: 1.1rem; transition: transform var(--dur-fast) var(--ease-precise); }
.rcard a:hover .rcard__arrow { transform: translateX(4px); }

/* ---- Missing ---------------------------------------------------- */
.pdp__missing { text-align: center; padding: 6rem 0; display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.pdp__missing .display { font-size: var(--fs-h1); }

/* ---- Responsive ------------------------------------------------- */
@media (max-width: 900px) {
  .pdp__header { grid-template-columns: 1fr; align-items: start; gap: 1.5rem; }
  .related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .schematic.is-list .schematic__list { grid-template-columns: 1fr; }
  .specgrid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
}

/* ---- Reduced motion -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .schematic__img, .schematic__orb { animation: none; }
}

/* Hint belongs to the scroll-through view only */
.schematic.is-list .schematic__hint { display: none; }

/* Wide subjects (monitors) keep their proportions but still fill the frame */
.schematic.is-schematic:not(.is-portrait) .schematic__img {
  max-height: min(82vh, 760px);
}

/* Stacked view: give the subject the full column so it still reads as the hero */
@media (max-width: 900px) {
  .schematic.is-list .schematic__stage { max-width: 100%; width: 100%; padding: 0.9rem; }
  .schematic.is-list.is-portrait .schematic__img { max-height: 70vh; }
}

/* ---- Ambient background ---------------------------------------- *
   Same stack as the landing page (fallback → video → tint → starfield
   → vignette), plus one layer the landing cannot have: the room takes
   on the colour of the specialty this product belongs to.
 * ---------------------------------------------------------------- */
.bg__accent {
  position: absolute; inset: 0;
  background:
    radial-gradient(62% 46% at 16% 20%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
    radial-gradient(54% 42% at 86% 74%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: auroraIn 2s var(--ease-cinematic) 0.25s both,
             auroraDrift 30s var(--ease-cinematic) 2s infinite;
}
@keyframes auroraIn { to { opacity: 0.6; } }
@keyframes auroraDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-2.5%, 2%, 0) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .bg__accent { animation: none; opacity: 0.45; }
}

/* ---- Product reel (PDP) ---------------------------------------- *
   Reuses the landing page's reel, retuned to the page rhythm and to
   the specialty accent rather than the fixed signal cyan.
 * ---------------------------------------------------------------- */
.reel--pdp {
  padding: 2.5rem 0 0;
  margin-bottom: clamp(3rem, 7vh, 5rem);
  border-top: 1px solid var(--hairline);
}
.reel--pdp .reel__head { max-width: 640px; margin-bottom: 1.8rem; }
.reel--pdp .eyebrow { color: var(--accent, var(--signal)); }
.reel--pdp .reel__title { font-size: var(--fs-h3); margin: 0.9rem 0 0.9rem; }
.reel--pdp .reel__stage::before,
.reel--pdp .reel__stage::after {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}
.reel--pdp .reel__main .reel__stage {
  box-shadow: var(--shadow-lift), 0 0 80px -30px color-mix(in srgb, var(--accent) 65%, transparent);
}
.reel--pdp .reel__toggle:focus-visible,
.reel--pdp .reel__stage:hover .reel__toggle {
  border-color: var(--accent, var(--signal));
  color: var(--accent, var(--signal));
}

/* Portrait reel (phone-shot footage) — a tall, centred 9:16 stage so the
   video fills its frame instead of being cropped to a slice in a 16:9 box. */
.reel--portrait .reel__main { display: flex; flex-direction: column; align-items: center; }
.reel--portrait .reel__stage {
  aspect-ratio: 9 / 16;
  width: 100%; max-width: min(400px, 82vw);
}
.reel--portrait .reel__cap { text-align: center; }