/* OBSIDIAN · paint correction (site/css/paint-correction.css, owned by the paint-correction page)
   The hero dive, the swirl-finder panel, the 50/50 tape, the steps with the clear coat in cross-section, who it's for,
   the ceramic pairing film and the questions. Shared parts come from site.css. */

/* which words to show: a mouse, or a finger */
.pc-touch { display: none; }
@media (hover: none), (pointer: coarse) { .pc-fine { display: none; } .pc-touch { display: inline; } }
.tag.ice { color: var(--ice); }

/* ---------- hero: the dive into the paint ---------- */
.pc-hero .phero-media > video, .pc-hero .phero-media > picture, .pc-hero .phero-media > picture img { position: absolute; inset: 0; width: 100%; height: 112%; object-fit: cover; object-position: 50% 50%; }
.pc-hero .phero-media > video { z-index: 1; background: var(--bg); }
@media (prefers-reduced-motion: reduce) { .pc-hero .phero-media > video { display: none; } }
.pc-hero .mega { max-width: 12ch; }
.pc-hero .crumbs { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.9); }
.pc-hero .crumbs a { color: rgba(243, 245, 247, 0.78); }
/* the dive ends on bright swirls: a little more shade behind the words than the shared hero has */
.pc-hero::before {
  background:
    radial-gradient(80% 75% at 10% 88%, rgba(4, 5, 6, 0.9), transparent 70%),
    linear-gradient(180deg, rgba(4, 5, 6, 0.7) 0%, rgba(4, 5, 6, 0.14) 28%, rgba(4, 5, 6, 0.34) 60%, var(--bg) 100%);
}
/* a title-left / lead-right head with room for each beat on one line */
@media (min-width: 901px) {
  .head.row.pc-head { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
  .head.row.pc-head .display { font-size: clamp(33px, 5.2vw, 78px); }
}
.pc-replay {
  position: absolute; z-index: 3; top: calc(var(--hdr-h) + 22px); right: var(--pad); display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px 0 14px;
  border: 0; border-radius: 999px; cursor: pointer; font: 500 12.5px/1 var(--mono); letter-spacing: 0.04em; color: var(--ink);
  background: rgba(4, 5, 6, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; transform: translateY(-8px); transition: opacity 0.5s, transform 0.6s var(--ease), color 0.25s, box-shadow 0.25s;
}
.pc-replay[hidden] { display: none; }
.pc-replay.show { opacity: 1; transform: none; }
.pc-replay svg { width: 18px; height: 18px; color: var(--ice); }
.pc-replay:hover { color: var(--ice-hi); box-shadow: inset 0 0 0 1px rgba(139, 233, 255, 0.7), 0 0 24px rgba(139, 233, 255, 0.18); }

/* ---------- the paint panels (canvas) ---------- */
.pc-panel {
  position: relative; isolation: isolate; overflow: hidden; width: 100%; aspect-ratio: 16 / 8.4; max-height: 84vh; border-radius: var(--r-lg);
  background: #060708; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07), 0 60px 130px rgba(0, 0, 0, 0.72), 0 0 140px rgba(139, 233, 255, 0.05);
}
/* the panel's edge catches the light */
.pc-panel::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(172deg, rgba(255, 255, 255, 0.05), transparent 20%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.pc-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (hover: hover) and (pointer: fine) { .pc-panel { cursor: none; } }
.pc-panel .caption { z-index: 3; top: 16px; bottom: auto; pointer-events: none; transition: opacity 0.3s; }
/* the torch's LED: off until the panel switches on */
.pc-led { width: 7px; height: 7px; border-radius: 50%; background: rgba(243, 245, 247, 0.25); transition: background 0.3s 0.4s, box-shadow 0.3s 0.4s; }
.pc-panel.lit .pc-led { background: #fff; box-shadow: 0 0 8px #fff, 0 0 18px var(--ice); }
html.motion .pc-panel.lit .pc-led { animation: pc-blink 2.4s ease-in-out infinite 1s; }
@keyframes pc-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.pc-hint {
  position: absolute; z-index: 3; left: 50%; bottom: 18px; display: inline-flex; align-items: center; gap: 11px; padding: 11px 17px; border-radius: 999px; white-space: nowrap; pointer-events: none;
  font: 500 12.5px/1 var(--mono); letter-spacing: 0.04em; color: var(--ink); background: rgba(4, 5, 6, 0.55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateX(-50%); transition: opacity 0.6s, transform 0.6s var(--ease);
}
.pc-hint i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px #fff, 0 0 22px var(--ice); }
.pc-panel.used .pc-hint { opacity: 0; transform: translate(-50%, 10px); }
/* "you're the light": a ring that rides on the light while it wanders by itself, pulsing, until someone takes it */
.pc-you { position: absolute; z-index: 2; left: 0; top: 0; width: 0; height: 0; pointer-events: none; opacity: 0; transition: opacity 0.5s; will-change: transform; }
.pc-you::before, .pc-you::after { content: ""; position: absolute; left: -44px; top: -44px; width: 88px; height: 88px; border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(214, 249, 255, 0.85), 0 0 18px rgba(139, 233, 255, 0.45), inset 0 0 14px rgba(139, 233, 255, 0.25); }
.pc-you::after { opacity: 0; }
.pc-panel.lit.is-auto:not(.used) .pc-you { opacity: 1; transition-delay: 0.9s; }
html.motion .pc-panel.lit .pc-you::after { animation: pc-you 2s var(--ease) infinite; }
@keyframes pc-you { 0% { opacity: 0.8; transform: scale(1); } 75%, 100% { opacity: 0; transform: scale(1.7); } }

/* where swirls come from */
.pc-causes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); margin-top: clamp(44px, 5vw, 76px); }
.pc-causes > .tag { grid-column: 1 / -1; margin-bottom: 22px; color: var(--ice); }
.pc-cause { position: relative; display: grid; gap: 10px; align-content: start; padding-top: 22px; }
.pc-cause::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.5), var(--faint) 40%, transparent); }
.pc-cause .step-n { color: var(--ice); }
.pc-cause h3 { font-size: clamp(20px, 1.55vw, 25px); }
.pc-cause p { color: var(--dim); font-size: 16.5px; line-height: 1.5; max-width: 26em; }

/* ---------- the 50/50: the tape ---------- */
.pc-split .pc-cap-r { left: auto; right: 16px; }
.pc-cap-r i { width: 7px; height: 7px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 10px var(--ice); }
.pc-tape { position: absolute; z-index: 4; top: 0; bottom: 0; left: calc(var(--cut) * 100%); width: 64px; margin-left: -32px; cursor: grab; touch-action: none; outline: none; }
/* paper masking tape: off-white, a fine crepe, soft shadow on the paint either side */
.pc-tape-strip {
  position: absolute; top: -6px; bottom: -6px; left: 50%; width: 24px; margin-left: -12px; overflow: hidden; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(60, 50, 35, 0.16), transparent 16%, transparent 84%, rgba(60, 50, 35, 0.18)),
    repeating-linear-gradient(177deg, rgba(255, 255, 255, 0.07) 0 1.5px, rgba(80, 70, 50, 0.05) 1.5px 3.5px),
    linear-gradient(180deg, #e7e1d2, #d8d0bd 40%, #e2dccb 70%, #d5cdb9);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.3), 7px 0 16px rgba(0, 0, 0, 0.5), -7px 0 16px rgba(0, 0, 0, 0.5);
}
.pc-tape-strip span { position: absolute; top: 0; left: 50%; writing-mode: vertical-rl; transform: translateX(-50%); white-space: nowrap; font: 600 8.5px/1 var(--mono); letter-spacing: 0.42em; color: rgba(60, 52, 40, 0.34); }
.pc-tape-knob {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; display: grid; place-items: center; color: var(--ice-ink);
  background: linear-gradient(180deg, #c8f6ff, var(--ice) 50%, #6ad8f2);
  box-shadow: 0 0 0 1px rgba(139, 233, 255, 0.6), 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 40px rgba(139, 233, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition: transform 0.4s var(--spring), box-shadow 0.3s;
}
.pc-tape-knob svg { width: 24px; height: 24px; }
/* a ring of light pulses out from the knob until someone grabs it */
.pc-tape-knob::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--ice); opacity: 0; pointer-events: none; }
html.motion .pc-split:not(.touched) .pc-tape-knob::after { animation: pc-ring 2.4s var(--ease) infinite 1.2s; }
@keyframes pc-ring { 0% { opacity: 0.9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.8); } }
@media (hover: hover) { .pc-tape:hover .pc-tape-knob { transform: scale(1.08); } }
.pc-split.dragging .pc-tape-knob { transform: scale(1.12); box-shadow: 0 0 0 1px rgba(170, 240, 255, 0.9), 0 12px 30px rgba(0, 0, 0, 0.55), 0 0 60px rgba(139, 233, 255, 0.6), inset 0 1px 0 #fff; }
.pc-split.dragging, .pc-split.dragging .pc-tape { cursor: grabbing; }
.pc-tape:focus-visible .pc-tape-knob { outline: 2px solid #fff; outline-offset: 5px; }
.pc-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px clamp(24px, 4vw, 64px); margin-top: clamp(36px, 4vw, 56px); }
.pc-compare > div { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 1px solid var(--line); }
.pc-compare > div:last-child { border-image: linear-gradient(90deg, var(--ice), transparent 70%) 1; }
.pc-compare p { color: var(--dim); max-width: 30em; }
.pc-compare b { color: var(--ink); font-weight: 650; }

/* ---------- the work: five steps, told on the clear coat in cross-section ---------- */
.pc-deck { display: grid; gap: clamp(20px, 2.2vw, 32px); }
.pc-deck-panel { position: relative; margin: 0; padding: clamp(16px, 1.5vw, 22px) clamp(16px, 1.8vw, 28px) 16px; border-radius: var(--r-lg);
  background: radial-gradient(70% 90% at 20% 0%, rgba(139, 233, 255, 0.07), transparent 70%), linear-gradient(180deg, #101317, #090b0d);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px var(--line), 0 40px 90px rgba(0, 0, 0, 0.45); }
.pc-deck-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; font: 500 12.5px/1 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--dim); }
.pc-deck-t { display: inline-flex; align-items: center; gap: 10px; }
.pc-deck-t i { width: 7px; height: 7px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 10px var(--ice); }
.pc-deck-n b { font-weight: 500; color: var(--ice); }
.pc-xsec-svg { border-radius: 12px; overflow: hidden; background: #07090b; }
.pc-xs { display: block; width: 100%; height: auto; }
/* the big drawing fits the screen with the row of steps under it, so the two hold together */
.pc-deck-panel .pc-xs { height: clamp(190px, calc(100vh - 530px), 420px); }
.pc-xs .xs-labels { font-family: var(--mono); font-weight: 500; fill: rgba(243, 245, 247, 0.62); }
.pc-xsec-note { margin-top: 12px; min-height: 1.45em; font: 500 13.5px/1.45 var(--mono); color: var(--dim); }
.pc-xsec-note::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 10px var(--ice); vertical-align: 1px; }
.pc-xsec-note.swap { animation: pc-note 0.6s var(--ease); }
@keyframes pc-note { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* the steps: a row of cards, each with its own LED segment that lights as the step does */
.pc-cards { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 28px); }
.pc-cards > li { position: relative; display: grid; gap: 9px; align-content: start; padding-top: 20px; transition: opacity 0.45s; }
.pc-cards > li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.14); transition: background 0.45s, box-shadow 0.45s, opacity 0.45s; }
.pc-cards > li.done::before { background: var(--ice); opacity: 0.45; }
.pc-cards > li.on::before { background: linear-gradient(90deg, #fff, var(--ice)); box-shadow: 0 0 10px var(--ice), 0 0 26px rgba(139, 233, 255, 0.45); }
.pc-cards .step-n { color: var(--mute); }
.pc-cards > li.on .step-n { color: var(--ice); }
.pc-cards h3 { font-size: clamp(18px, 1.5vw, 25px); }
.pc-cards p { font-size: 15.5px; line-height: 1.5; color: var(--dim); }
/* the whole card picks its step */
.pc-card-b { margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; text-align: left; cursor: pointer; }
.pc-card-b::after { content: ""; position: absolute; inset: -8px -8px -10px; border-radius: 14px; }
.pc-card-b:focus-visible { outline: none; }
.pc-card-b:focus-visible::after { outline: 2px solid var(--ice); outline-offset: 0; }
.pc-deck.is-live .pc-cards > li:not(.on) { opacity: 0.5; }
@media (hover: hover) { .pc-deck.is-live .pc-cards > li:not(.on):hover { opacity: 0.85; } }
.pc-deck.is-live .pc-cards > li:not(.on):focus-within { opacity: 1; } /* a focused step reads at full strength */
.pc-step-xs { display: none; }

/* ---------- who it's for ---------- */
.pc-tiles .tile { min-height: clamp(400px, 34vw, 560px); }
.pc-tiles .tile > img { filter: saturate(0.85) brightness(0.92); }
.pc-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); margin-top: clamp(14px, 1.6vw, 22px); }
.pc-note { display: grid; gap: 14px; align-content: start; overflow: hidden; }
.pc-note h3 { font-size: clamp(22px, 1.8vw, 30px); }
.pc-note p { color: var(--dim); max-width: 34em; }
.pc-sun { list-style: none; counter-reset: sun; display: grid; gap: 12px; }
.pc-sun li { counter-increment: sun; position: relative; padding-left: 44px; color: var(--dim); line-height: 1.45; }
.pc-sun li::before { content: counter(sun, decimal-leading-zero); position: absolute; left: 0; top: 0.12em; font: 500 13px/1.3 var(--mono); color: var(--ice); }
.pc-sun li:last-child { color: var(--ink); }

/* ---------- pairs with ceramic: the film ---------- */
.pc-pair .split { align-items: center; }
.pc-pair .split .display { font-size: clamp(32px, 4.3vw, 64px); }
.pc-pair-copy .checks { margin: 6px 0 8px; }
.pc-pair-copy .checks li { color: var(--dim); }
.pc-pair-copy .cta-row { gap: 14px 26px; }
.pc-pair-film { aspect-ratio: 16 / 10.5; }
.pc-pair-film video { transition: opacity 0.5s; }
.pc-pair-film.dip video { opacity: 0; }
.pc-pair-film::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(4, 5, 6, 0.72), transparent 36%); }
.pc-film-steps { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pc-film-steps li { position: relative; padding-top: 12px; font: 500 12px/1.2 var(--mono); letter-spacing: 0.04em; color: rgba(243, 245, 247, 0.5); transition: color 0.4s; }
.pc-film-steps li::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); transition: background 0.4s, box-shadow 0.4s; }
.pc-film-steps li.on { color: var(--ink); }
.pc-film-steps li.on::before { background: var(--ice); box-shadow: 0 0 10px var(--ice); }

/* ---------- questions ---------- */
.pc-faq .stack { position: sticky; top: calc(var(--hdr-h) + 30px); }
.pc-slot { width: 100%; min-height: 200px; margin-top: 12px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .pc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  /* phones and tablets: no hold; the steps stack, each with its own close-up of the paint */
  .pc-deck-panel { display: none; }
  .pc-cards { grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 6vw, 52px); }
  .pc-cards > li { gap: 10px; padding-top: 22px; }
  .pc-cards > li::before { background: linear-gradient(90deg, var(--ice), rgba(139, 233, 255, 0.2) 40%, transparent); }
  .pc-cards .step-n { color: var(--ice); }
  .pc-cards h3 { font-size: clamp(22px, 4.4vw, 30px); }
  .pc-cards p { font-size: 17px; max-width: 34em; }
  .pc-card-b { cursor: default; }
  .pc-step-xs { display: grid; gap: 8px; max-width: 560px; margin-top: 6px; padding: 12px 12px 12px; border-radius: 14px; background: radial-gradient(80% 70% at 30% 0%, rgba(139, 233, 255, 0.06), transparent 70%), linear-gradient(180deg, #101317, #0a0c0e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px var(--line); }
  .pc-step-xs .pc-xs { border-radius: 8px; }
  .pc-step-xs p { font: 500 12px/1.45 var(--mono); color: var(--dim); max-width: none; }
  .pc-step-xs p::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--ice); box-shadow: 0 0 8px var(--ice); vertical-align: 1px; }
  .pc-faq .stack { position: static; }
  .pc-notes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .pc-panel { aspect-ratio: 4 / 5; max-height: 74svh; border-radius: 20px; }
  .pc-hint { bottom: 14px; padding: 10px 14px; font-size: 12px; }
  .pc-you::before, .pc-you::after { left: -32px; top: -32px; width: 64px; height: 64px; }
  .pc-panel .caption { top: 12px; }
  .pc-split .pc-cap-l { left: 12px; }
  .pc-split .pc-cap-r { right: 12px; }
  .pc-split .caption { padding: 7px 11px; font-size: 11.5px; }
  .pc-long { display: none; }
  .pc-causes, .pc-compare { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .pc-causes > .tag { margin-bottom: 0; }
  /* who it's for: a row to swipe through */
  .pc-tiles { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); margin-inline: calc(var(--pad) * -1); padding: 0 var(--pad) 6px; scrollbar-width: none; }
  .pc-tiles::-webkit-scrollbar { display: none; }
  .pc-tiles .tile { min-height: 400px; scroll-snap-align: start; }
  .pc-pair-film { aspect-ratio: 4 / 3.4; margin-inline: calc(var(--pad) * -1); border-radius: 0; }
  .pc-film-steps { left: var(--pad); right: var(--pad); }
  .pc-film-steps li { font-size: 11px; }
  .pc-replay { top: calc(var(--hdr-h) + 14px); padding: 0 14px 0 12px; font-size: 12px; }
  .pc-hero::before { background: radial-gradient(130% 62% at 20% 96%, rgba(4, 5, 6, 0.94), transparent 76%), linear-gradient(180deg, rgba(4, 5, 6, 0.72), rgba(4, 5, 6, 0.18) 26%, rgba(4, 5, 6, 0.5) 52%, var(--bg)); }
}