/* AI Enablement Suite — coverflow gallery.
   Shared by the standalone /enablement-suite page and the in-book suite leaf, so the two
   can't drift. A premium, center-focused horizontal slider: the middle cover stands full
   size and elevated, its neighbours recede (scale + fade + a slight drop), and the whole
   track snaps, drags with momentum, and reads with arrows / dots / keyboard. Motion (the
   Framer team's vanilla library) drives the scroll-linked coverflow and the readout
   cross-fade; suite.js degrades to native scroll if the CDN is unavailable.
   Covers are 16:9 landscape (assets/covers); a book with no art falls back to a tinted card. */

[data-suite] {
  --cover-ratio: 16 / 9;
  --slide-w: clamp(300px, 40vw, 500px);
  --gap: clamp(22px, 3vw, 40px);
}

.suite-gallery { position: relative; }

/* ------------------------------------------------------------- the viewport */
.gallery-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  padding-block: clamp(26px, 4.4vh, 46px);
  cursor: grab;
  /* premium: no scrollbar chrome; the covers dissolve at the container edges */
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6.5%, #000 93.5%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6.5%, #000 93.5%, transparent);
}
.gallery-viewport::-webkit-scrollbar { display: none; }
.gallery-viewport.dragging { cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; }
.gallery-viewport.gliding { scroll-snap-type: none; }   /* programmatic glide in flight */

.gallery-track {
  display: flex;
  align-items: center;
  gap: var(--gap);
  width: max-content;
  padding-inline: var(--edge, 0px);
}

/* ---------------------------------------------------------------- the slides */
.gslide {
  flex: none;
  width: var(--slide-w);
  scroll-snap-align: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.gslide:focus { outline: none; }
.gslide:focus-visible .gslide-card { outline: 2px solid var(--accent, #613896); outline-offset: 3px; }

.gslide-card {
  position: relative;
  /* suite.js builds this as a <span>, so it is inline by default. An inline box is a
     fragmented containing block: ::after resolved to half the card's width and the
     ring/shadow painted in pieces. Block layout is what makes inset:0 and box-shadow
     cover the whole cover. */
  display: block;
  width: 100%;
  aspect-ratio: var(--cover-ratio);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(140deg, #613896, #3a2560);
  /* JS drives transform + opacity per scroll frame; keep those off the transition
     list so the coverflow tracks the finger 1:1. Only the shadow eases. */
  transform-origin: center;
  will-change: transform, opacity;
  box-shadow:
    0 30px 60px -30px rgba(30, 27, 36, 0.55),
    0 10px 22px -14px rgba(30, 27, 36, 0.4);
  transition: box-shadow 0.45s ease;
}
.gslide-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* a hairline ring + a whisper of top light, so covers read as physical objects */
.gslide-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), inset 0 0 0 1px rgba(30, 27, 36, 0.07);
  pointer-events: none;
}
/* The one being talked about: a purple ring drawn around the cover, plus a lift, so the
   readout below has an obvious owner. The lift rides in the JS transform (suite.js
   drives it per frame); the ring and the deeper shadow are here. */
.gslide[aria-selected="true"] .gslide-card {
  box-shadow:
    0 0 0 3px var(--accent, #613896),
    0 0 0 8px rgba(97, 56, 150, 0.15),
    0 52px 92px -34px rgba(74, 42, 115, 0.52),
    0 18px 36px -18px rgba(30, 27, 36, 0.44);
}

/* shown until the real cover art lands (see .cover-fallback in suite.js) */
.cover-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
  padding: 18px 20px 22px 26px; color: #f5effa;
}
.cover-fallback .cf-num { font-family: 'Newsreader', serif; font-style: italic; font-size: 19px; color: rgba(255, 255, 255, 0.6); }
.cover-fallback .cf-title { font-size: 15px; font-weight: 600; line-height: 1.25; }

/* ------------------------------------------------------------- the readout */
.gallery-readout {
  text-align: center;
  margin-top: clamp(22px, 3.4vh, 36px);
  min-height: 1px;
}
.gr-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent, #613896); font-weight: 700; }
.gr-title {
  font-family: 'Newsreader', serif; font-weight: 400;
  font-size: clamp(26px, 3vw, 44px); line-height: 1.08; letter-spacing: -0.015em;
  margin: 10px 0 0; text-wrap: balance;
}
.gr-q {
  font-family: 'Newsreader', serif; font-style: italic;
  font-size: clamp(15px, 1.4vw, 19px); line-height: 1.5; color: var(--accent-deep, #4a2a73);
  margin: 9px 0 0; opacity: 0.92;
}

/* ------------------------------------------------------------- the controls */
.gallery-controls {
  display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.4vw, 26px);
  margin-top: clamp(18px, 2.6vh, 30px);
}
.g-arrow {
  width: 46px; height: 46px; flex: none;
  border-radius: 50%;
  border: 1px solid var(--hairline, #e7deec);
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  color: var(--ink, #2a2235);
  display: grid; place-items: center; cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease, opacity 0.25s ease, background 0.25s ease;
}
.g-arrow svg { width: 17px; height: 17px; display: block; }
.g-arrow:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--accent, #613896); color: var(--accent, #613896); background: #fff; }
.g-arrow:active:not(:disabled) { transform: translateY(0); }
.g-arrow:disabled { opacity: 0.28; cursor: default; }

/* "there is more this way" — a slow purple pulse on the next arrow until the visitor
   moves the gallery for the first time, then it stops for good (suite.js drops the
   class). An affordance, not decoration, so it doesn't outstay its welcome. */
@keyframes g-breathe {
  0%   { box-shadow: 0 0 0 0 rgba(97, 56, 150, 0.40); }
  70%  { box-shadow: 0 0 0 13px rgba(97, 56, 150, 0); }
  100% { box-shadow: 0 0 0 0 rgba(97, 56, 150, 0); }
}
.g-arrow.next-hint:not(:disabled) {
  border-color: var(--accent, #613896);
  color: var(--accent, #613896);
  animation: g-breathe 2.6s ease-out infinite;
}

.g-dots { display: flex; align-items: center; gap: 9px; }
.g-dot {
  width: 7px; height: 7px; flex: none; padding: 0; border: 0; border-radius: 50%;
  background: #d3c7e0; cursor: pointer;
  transition: width 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.3s ease;
}
.g-dot[aria-current="true"] { width: 24px; border-radius: 4px; background: var(--accent, #613896); }

/* --------------------------------------------------- compact (in-book leaf) */
.suite-compact { --slide-w: clamp(230px, 30vw, 340px); --gap: clamp(16px, 2vw, 26px); }
.suite-compact .gallery-viewport { padding-block: clamp(18px, 2.8vh, 32px); }
.suite-compact .gallery-readout { margin-top: clamp(16px, 2.2vh, 24px); }
.suite-compact .gr-title { font-size: clamp(22px, 2.4vw, 32px); }
.suite-compact .gr-q { display: none; }               /* a book page is a fixed box — save the height */
.suite-compact .gallery-controls { margin-top: clamp(14px, 1.8vh, 20px); }
.suite-compact .g-arrow { width: 40px; height: 40px; }
.suite-compact .g-arrow svg { width: 15px; height: 15px; }
.suite-compact .cf-title { display: none; }            /* the placeholder cover keeps only its number */

@media (max-width: 760px) {
  [data-suite] { --slide-w: clamp(228px, 76vw, 320px); }
  .gr-title { font-size: 26px; }
  .g-arrow { width: 42px; height: 42px; }
}

/* Reduced motion: no coverflow transforms, no smooth animation — just a plain,
   snap-to-center scroller. suite.js reads this and skips the per-frame transforms. */
@media (prefers-reduced-motion: reduce) {
  .gallery-viewport { scroll-behavior: auto; }
  .gslide-card { transition: none; }
  .g-dot { transition: none; }
  /* keep the arrow's purple emphasis, drop the pulse */
  .g-arrow.next-hint:not(:disabled) { animation: none; }
}