/* Deskrune v4 Phase D — Kit-card scroll choreography
 *
 * Two upgrades:
 *
 *   1. Sticky-cover layout on /buy/preview/{kit}/ — the kit cover stays
 *      pinned in a left column while the details (chapters, samples, FAQ)
 *      scroll past on the right. The Apple product-page move, calibrated
 *      for an editorial cream-paper feel.
 *
 *   2. Native scroll-timeline reveals on kit cards across /buy/, /kits/,
 *      /buy/preview/all/. As cards enter the viewport, the cover fades up
 *      with a clip-path inset reveal — driven by the cards' own scroll
 *      progress, no JS, no IntersectionObserver.
 *
 * Both honor `prefers-reduced-motion: reduce` (animations off; sticky stays
 * because pinning is just layout, not motion).
 */


/* ─── 1. Sticky-cover layout on /buy/preview/{kit}/ ────────────────────── */

/* Wrap the article in a 2-column grid: cover sticky on the left, content
 * flowing on the right. We don't need to touch HTML for the sticky cover
 * because the existing `<article>` becomes the grid container; the cover
 * gets injected by JS or sits as the first child.
 *
 * Structure assumption (matches v2.6 preview pages):
 *   <main id="main">
 *     <article>
 *       <header>...</header>      ← spans both columns
 *       <section class="preview-toc">...</section>
 *       <section class="preview-samples">...</section>
 *       <section class="preview-honest">...</section>
 *       ...
 *     </article>
 *   </main>
 *
 * On wide screens we promote `<main>` to a grid and pin the kit cover.
 */

@media (min-width: 1024px) {
  /* Only on the kit-preview page subset */
  body.kit-preview-page main#main {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr);
    gap: 64px;
    align-items: start;
    max-width: 1180px;
    margin: 0 auto;
    padding: 48px 32px 80px;
  }
  body.kit-preview-page main#main > article {
    grid-column: 1 / -1;        /* default: full width */
    display: contents;            /* unwrap so children land in grid directly */
  }
  /* The header (eyebrow + h1 + lede + meta) spans both columns */
  body.kit-preview-page main#main > article > header {
    grid-column: 1 / -1;
    margin-bottom: 24px;
  }
  /* The cover (whichever element exists) gets sticky-pinned in column 1 */
  body.kit-preview-page main#main > article > .kit-cover-frame,
  body.kit-preview-page main#main > article > .preview-cover {
    grid-column: 1;
    position: sticky;
    top: 96px;        /* below sticky nav */
    align-self: start;
    width: 100%;
  }
  /* All the editorial sections live in column 2, in order */
  body.kit-preview-page main#main > article > section,
  body.kit-preview-page main#main > article > .preview-samples,
  body.kit-preview-page main#main > article > .preview-toc,
  body.kit-preview-page main#main > article > .preview-honest {
    grid-column: 2;
  }
}

/* The cover frame itself: aspect-ratio + drop-shadow that reads as paper */
.kit-cover-frame {
  aspect-ratio: 2 / 3;
  background: var(--bg-deep, #f5efe4);
  border: 1px solid var(--rule, #e8e6dc);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 24px 60px -32px rgba(20, 20, 19, 0.18),
              0 8px 24px -16px rgba(20, 20, 19, 0.10);
  transition: transform 360ms cubic-bezier(0.45, 0, 0.55, 1),
              box-shadow 360ms cubic-bezier(0.45, 0, 0.55, 1);
}
.kit-cover-frame img,
.kit-cover-frame svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (hover: hover) and (pointer: fine) {
  .kit-cover-frame:hover {
    transform: translateY(-2px) rotate(-0.3deg);
    box-shadow: 0 32px 72px -28px rgba(20, 20, 19, 0.22),
                0 12px 32px -12px rgba(20, 20, 19, 0.12);
  }
}

:root[data-theme="dark"] .kit-cover-frame {
  background: rgba(245, 239, 228, 0.04);
  border-color: rgba(245, 239, 228, 0.12);
  box-shadow: 0 24px 60px -32px rgba(0, 0, 0, 0.6),
              0 8px 24px -16px rgba(0, 0, 0, 0.4);
}


/* ─── 2. Scroll-timeline reveals on kit cards ──────────────────────────── */

/* The cards on /buy/, /kits/, and /buy/preview/all/ all carry one of these
 * class names. We attach a scroll-driven reveal that uses native CSS
 * scroll-timeline (Chrome 115+) with a JS-fallback class `.in-view` for
 * older browsers. Reduced motion = static visible immediately.
 */

.dr-card-reveal,
.live-product,
.qi-card,
.kit-card {
  /* Initial state — slightly translated and clipped */
  opacity: 0;
  transform: translateY(28px);
  clip-path: inset(8% 4% 0 4% round 6px);
  transition: opacity 700ms cubic-bezier(0.25, 0, 0.2, 1),
              transform 700ms cubic-bezier(0.25, 0, 0.2, 1),
              clip-path 700ms cubic-bezier(0.25, 0, 0.2, 1);
}

/* Visible state via either: (a) scroll-timeline, (b) .in-view class added
 * by the existing dramatic-effects.js IntersectionObserver, (c) just being
 * past the fold on first paint */
.dr-card-reveal.in-view,
.dr-card-reveal.dr-revealed,
.live-product.in-view,
.qi-card.in-view,
.kit-card.in-view {
  opacity: 1;
  transform: translateY(0);
  clip-path: inset(0 0 0 0 round 6px);
}

/* Native scroll-timeline opt-in for browsers that ship it.
   The `view()` timeline drives the reveal as the card enters the viewport. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dr-card-reveal,
    .live-product,
    .qi-card,
    .kit-card {
      animation: dr-card-reveal-anim 1.2s linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 30%;
      transition: none;  /* let animation-timeline drive */
      opacity: 0;        /* starts hidden, anim brings it in */
      transform: translateY(28px);
      clip-path: inset(8% 4% 0 4% round 6px);
    }
  }
  @keyframes dr-card-reveal-anim {
    to {
      opacity: 1;
      transform: translateY(0);
      clip-path: inset(0 0 0 0 round 6px);
    }
  }
}

/* Reduced-motion: skip all reveal mechanics, render visible immediately */
@media (prefers-reduced-motion: reduce) {
  .dr-card-reveal,
  .live-product,
  .qi-card,
  .kit-card {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
  }
}


/* ─── 3. Hover state: kit-card lift + cover scale + accent ────────────── */

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .live-product,
  .qi-card,
  .kit-card {
    transition: transform 280ms cubic-bezier(0.45, 0, 0.55, 1),
                box-shadow 280ms cubic-bezier(0.45, 0, 0.55, 1),
                border-color 280ms cubic-bezier(0.45, 0, 0.55, 1);
    will-change: transform;
  }
  .live-product:hover,
  .qi-card:hover,
  .kit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 44px -16px rgba(20, 20, 19, 0.12),
                0 6px 18px -8px rgba(201, 97, 63, 0.10);
    border-color: rgba(201, 97, 63, 0.36);
  }
  /* Cover image inside the card — subtle scale */
  .live-product:hover img,
  .qi-card:hover img,
  .kit-card:hover .kit-cover-frame {
    transform: scale(1.02);
  }
  .live-product img,
  .qi-card img,
  .kit-card .kit-cover-frame {
    transition: transform 320ms cubic-bezier(0.45, 0, 0.55, 1);
  }
}


/* ─── 4. Section-level scroll cues on /buy/preview/{kit}/ ────────────── */

/* TOC, samples, and honest sections each animate in as they enter view */
@media (min-width: 1024px) {
  body.kit-preview-page .preview-toc,
  body.kit-preview-page .preview-samples,
  body.kit-preview-page .preview-honest {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms cubic-bezier(0.25, 0, 0.2, 1),
                transform 600ms cubic-bezier(0.25, 0, 0.2, 1);
  }
  body.kit-preview-page .preview-toc.in-view,
  body.kit-preview-page .preview-samples.in-view,
  body.kit-preview-page .preview-honest.in-view {
    opacity: 1;
    transform: translateY(0);
  }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      body.kit-preview-page .preview-toc,
      body.kit-preview-page .preview-samples,
      body.kit-preview-page .preview-honest {
        animation: dr-section-reveal 1s linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 25%;
      }
      @keyframes dr-section-reveal {
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  body.kit-preview-page .preview-toc,
  body.kit-preview-page .preview-samples,
  body.kit-preview-page .preview-honest {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}