/* Shared structure for all four options. Each option sets its own tokens and
   look; this file only holds behaviour-bound styles (skim, compare, reveal)
   and resets. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body { margin: 0; min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus, currentColor); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--skip-bg, #000); color: var(--skip-fg, #fff); border-radius: 8px; }
.skip:focus { top: 16px; }

/* Logo: the client's mark as a mask so it takes any palette colour. */
.logo {
  display: inline-block;
  aspect-ratio: 1143 / 300;
  height: var(--logo-h, 34px);
  background: currentColor;
  -webkit-mask: url(img/logo-mask.png) no-repeat center / contain;
          mask: url(img/logo-mask.png) no-repeat center / contain;
}

/* ---------- Skim ---------- */
[data-skim] { position: relative; }
.skim { position: absolute; inset: var(--skim-inset, 0); pointer-events: none; z-index: 2; }
.skim-crack { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0; }
.skim-crack path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
.skim-crack-line { stroke: var(--skim-crack, currentColor); stroke-width: var(--skim-w, 2.2px); }
.skim-crack-lip { stroke: var(--skim-lip, rgba(255,255,255,.55)); stroke-width: calc(var(--skim-w, 2.2px) + 1.6px); transform: translate(0, 1.5px); }
.skim-crack-branch { stroke: var(--skim-crack, currentColor); stroke-width: calc(var(--skim-w, 2.2px) * .55); opacity: .8; }
.skim-track { position: absolute; top: 0; bottom: 0; left: 0; width: 0; }
.skim-knife {
  position: absolute; left: 0; top: 50%;
  height: var(--skim-knife-h, 88%); max-height: 180px; min-height: 64px;
  aspect-ratio: 120 / 170;
  translate: -97% -50%;
  transform-origin: 90% 50%;
  opacity: 0;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.28));
}
.skim-knife svg { width: 100%; height: 100%; display: block; }
/* Photographic knife (data-skim-knife): blade edge is the image's right edge. */
.skim-knife--img { aspect-ratio: 640 / 423; filter: drop-shadow(0 14px 18px rgba(0,0,0,.35)); }
.skim-knife--img img { width: 100%; height: 100%; display: block; }
.skim-sheen {
  position: absolute; top: 0; bottom: 0; right: 0; width: clamp(60px, 14vw, 180px);
  background: linear-gradient(90deg, transparent, var(--skim-sheen, rgba(255,255,255,.28)) 85%, transparent);
  opacity: 0; mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

/* ---------- Compare ---------- */
.compare { --pos: 50%; position: relative; margin: 0; overflow: hidden; isolation: isolate; user-select: none; touch-action: pan-y; }
.compare img { width: 100%; height: 100%; object-fit: cover; }
.compare-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.compare input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 3; -webkit-appearance: none; appearance: none; touch-action: pan-y; }
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; translate: -1px 0; background: var(--compare-line, #fff); z-index: 2; pointer-events: none; }
.compare-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; translate: -50% -50%;
  border-radius: 50%; background: var(--compare-knob, rgba(255,255,255,.22)); border: 1px solid var(--compare-line, #fff);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E");
  background-size: 22px; background-position: center; background-repeat: no-repeat;
}
.compare:has(input:focus-visible) .compare-handle::after { outline: 2px solid var(--focus, #fff); outline-offset: 3px; }
.compare-tag { position: absolute; bottom: 14px; z-index: 2; pointer-events: none; }
.compare-tag--before { left: 14px; }
.compare-tag--after { right: 14px; }

/* ---------- Reveal ---------- */
.js [data-reveal] { opacity: 0; translate: 0 22px; transition: opacity .8s cubic-bezier(.2,.7,.2,1), translate .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}