/* =========================================================
   The Art of Better Decisions (better-decisions.html)
   Loaded after style.css and case-study.css: the page uses the NOOK case study layout
   as is (frame, intro, section lines, cards, contents list). This file only adds the
   before/after slider and the few bits this page has on top.
   ========================================================= */

/* Section eyebrow: what kind of product it is */
.bd-cat {
  font-size: 12px; line-height: 16px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--pink);
}
.cs-sec > .bd-cat + .cs-h2 { margin-top: 8px; }

/* The page name is the title, so it starts the intro (NOOK has its app name above) */
.bd-page .cs-title { margin-top: 0; color: var(--pink); }
/* intro line under it, spaced like a section heading and its lead */
.bd-page .cs-intro .cs-lead { margin-top: 24px; }
@media (min-width: 768px) { .bd-page .cs-intro .cs-lead { margin-top: 40px; } }

/* Cover: the teaser video in the NOOK cover frame */
.bd-cover video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* View in Figma + Back to portfolio close the last study */
.cs-sec > .cs-card + .cs-figma { margin-top: 40px; }
.bd-page .cs-sec--last { padding-bottom: 100px; }
@media (min-width: 768px) {
  .cs-sec > .cs-card + .cs-figma { margin-top: 50px; }
  .bd-page .cs-sec--last { padding-bottom: 120px; }
}

/* ---------- Before / after ---------- */
/* White frame like the NOOK screen showcases; the slider sits in the middle at the
   screen's own shape, as tall as --h allows */
.bd-shot {
  --h: 520px;
  display: flex; justify-content: center;
  padding: 16px;
  border-radius: 8px;
  background: #fff;
}
@media (min-width: 768px) { .bd-shot { --h: 600px; padding: 32px; } }

.cmp {
  --p: 0;              /* 0 = redesign only, 100 = original only */
  --well: #fff;        /* behind the redesign */
  --well-before: #fff; /* behind the original */
  position: relative;
  width: min(100%, calc(var(--h) * var(--ar)));
  aspect-ratio: var(--ar);
  overflow: hidden;
  border-radius: 8px;
  background: var(--well);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 14px 26px -12px rgba(0, 0, 0, .16);
  cursor: ew-resize;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.cmp:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.bd-shot--dark .cmp { --well: #18181B; --well-before: #18181B; }

.cmp img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
}
/* phone screenshots are a hair narrower than the redesigns: fill the frame instead of
   leaving thin bars at the sides */
.bd-shot--phone .cmp-before img { object-fit: cover; }

.cmp-before {
  position: absolute; inset: 0; z-index: 2;
  background: var(--well-before);
  clip-path: inset(0 calc(100% - var(--p) * 1%) 0 0);
  transition: clip-path .6s cubic-bezier(.25, 1, .5, 1);
  pointer-events: none;
}
.cmp-handle {
  position: absolute; top: 0; bottom: 0; z-index: 3;
  left: calc(var(--p) * 1%);
  width: 2px; margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 6px rgba(0, 0, 0, .1);
  transition: left .6s cubic-bezier(.25, 1, .5, 1);
  pointer-events: none;
}
/* grip: six dots in a frosted vertical pill */
.cmp-grip {
  position: absolute; top: 50%; left: 50%;
  display: grid; grid-template-columns: repeat(2, 3px); gap: 5px;
  place-content: center;
  width: 26px; height: 48px;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
  transform: translate(-50%, -50%);
}
.cmp-grip i { width: 3px; height: 3px; border-radius: 50%; background: rgba(34, 34, 34, .7); }
/* while the pointer drives it: follow instantly, no easing lag */
.cmp.is-live .cmp-before, .cmp.is-live .cmp-handle { transition: none; }