/* ============================================================
   FEATURE SHOWCASE — sticky 01–05
   ------------------------------------------------------------
   Loaded only by the homepage. Built entirely from the existing
   tokens: --ct-red for the accent, --ct-graphite for surfaces,
   --chamfer for the corner cut, the three existing typefaces.
   No new red, no new font, no new card shape.

   The homepage is the cinematic film page, so pages.css is not
   loaded there — everything this section needs is declared here.
   ============================================================ */

.show {
  --s-surf: var(--ct-graphite);
  --s-ink: var(--ct-white);
  --s-dim: rgba(255, 255, 255, 0.66);
  --s-edge: var(--line);

  position: relative; z-index: 2;
  padding: 12vh var(--gutter) 12vh;
  padding-right: calc(var(--gutter) + var(--hud-w));
  background: var(--ct-black);
}
.show-head { margin-bottom: 8vh; }
.show-head .kicker { color: var(--ct-red); }

/* ------------------------------------------------------------
   DESKTOP LAYOUT — rail · blocks · pinned stage
   ------------------------------------------------------------ */
.show-grid { display: grid; grid-template-columns: 58px 1fr; gap: 0 34px; }

.show-rail { list-style: none; margin: 0; padding: 0; display: none; }
.show-blocks { display: grid; gap: 0; }
.show-stage { display: none; }

@media (min-width: 981px) {
  .show-grid { grid-template-columns: 58px minmax(0, 1fr) minmax(0, 1.05fr); gap: 0 5vw; }
  .show-rail { display: block; }
  .show-stage { display: block; }
  /* The photo lives in the stage on desktop, so the copy of it
     inside each block is redundant here. */
  .show-block-photo { display: none; }
}

/* ---------- numbered rail ---------- */
.show-rail-item {
  display: grid; grid-template-rows: auto 1fr; justify-items: center;
  min-height: 46vh;
}
.show-rail-n {
  font-size: 13px; letter-spacing: .12em; color: var(--s-dim);
  padding: 6px 0; transition: color .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.show-rail-item.is-active .show-rail-n { color: var(--ct-red); transform: scale(1.25); }
/* Passed numbers stay lit — the rail is a progress indicator, so
   it should read as a trail, not a single moving dot. */
.show-rail-item.is-past .show-rail-n { color: rgba(255,90,31,.55); }
.show-rail-line { width: 1px; background: var(--s-edge); position: relative; justify-self: center; }
.show-rail-line i {
  position: absolute; inset: 0; background: var(--ct-red);
  transform: scaleY(0); transform-origin: 50% 0;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.show-rail-item.is-past .show-rail-line i,
.show-rail-item.is-active .show-rail-line i { transform: scaleY(1); }

/* ---------- copy blocks ---------- */
.show-block {
  min-height: 46vh; display: flex; flex-direction: column; justify-content: center;
  padding: 4vh 0; position: relative; outline: none;
}
.show-block:focus-visible { outline: 2px solid var(--ct-red); outline-offset: 12px; }
.show-n { font-size: 11px; letter-spacing: .28em; color: var(--ct-red); }
.show-title {
  margin: 14px 0 16px; font-family: var(--font-head); font-stretch: 112%;
  font-size: clamp(24px, 3.2vw, 40px); line-height: 1.1;
}
.show-body { font-size: 16px; line-height: 1.7; color: var(--s-dim); max-width: 46ch; }
.show-sub {
  margin-top: 16px; font-size: 11px; line-height: 1.7; letter-spacing: .04em;
  color: var(--ct-red); border: 1px dashed currentColor; padding: 12px 14px; max-width: 46ch;
}
.show-stats { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; max-width: 46ch; }
.show-stats li {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: 14.5px; line-height: 1.6; color: var(--s-ink);
}
.show-stats li::before {
  content: ''; flex: none; width: 8px; height: 8px; margin-top: 8px;
  background: var(--ct-red); transform: rotate(45deg);
}
.show-stat-num { font-family: var(--font-mono); font-weight: 600; color: var(--ct-red); font-variant-numeric: tabular-nums; }

/* Blocks that are not the active one recede, so the eye always
   knows which copy the stage is showing. */
@media (min-width: 981px) {
  .show-block { opacity: .38; transition: opacity .4s ease; }
  .show-block.is-active { opacity: 1; }
}

/* ---------- pinned stage ---------- */
.show-stage-inner {
  position: sticky; top: 18vh; height: 64vh;
  background: var(--s-surf); overflow: hidden;
  clip-path: polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));
}
.show-frame {
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
  transform: scale(1.03);
}
.show-frame.is-on { opacity: 1; transform: scale(1); }
.show-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* A frame whose source is too small to fill the stage is contained
   rather than cropped and blown up. Better a smaller, sharp,
   complete image than a full-bleed soft one with its subject cut off. */
.show-frame.contain { background: #0e0e0e; display: grid; place-items: center; padding: 6%; }
.show-frame.contain img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
/* The low-centre-of-gravity frame settles out of a slight lean —
   the one place a tilt says something about the product. */
.show-frame.lean.is-on img { animation: showLean .9s cubic-bezier(.16,1,.3,1); }
@keyframes showLean { from { transform: rotate(-2.2deg) scale(1.05); } to { transform: none; } }
.show-stage-tag {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  background: var(--ct-black); color: var(--ct-red);
  font-size: 9px; letter-spacing: .24em; padding: 10px 16px;
}

/* ---------- signatures ---------- */
.sig-arc { position: absolute; right: 0; top: 4vh; width: 92px; height: 92px; }
.sig-arc circle { fill: none; stroke-width: 3; transform: rotate(-90deg); transform-origin: 50% 50%; }
.sig-arc-track { stroke: var(--s-edge); }
.sig-arc-fill {
  stroke: var(--ct-red); stroke-linecap: round;
  stroke-dasharray: 327; stroke-dashoffset: 327;
  transition: stroke-dashoffset 1.1s cubic-bezier(.16,1,.3,1);
}
.show-block.is-active .sig-arc-fill { stroke-dashoffset: 245; }  /* ~25% — 10 min of a 40 min view */
.sig-arc text { fill: var(--s-dim); font-size: 13px; text-anchor: middle; }

.sig-boot {
  position: absolute; right: 0; top: 4vh; font-size: 54px; font-weight: 600;
  color: transparent; -webkit-text-stroke: 1px var(--ct-red);
  transition: color .6s ease .2s, -webkit-text-stroke-color .6s ease;
  font-variant-numeric: tabular-nums;
}
.sig-boot em { font-style: normal; font-size: 20px; margin-left: 3px; }
.show-block.is-active .sig-boot { color: rgba(255,90,31,.14); }
@media (max-width: 980px) { .sig-arc, .sig-boot { display: none; } }

/* ------------------------------------------------------------
   MOBILE — scroll-snap card stack
   ------------------------------------------------------------ */
@media (max-width: 980px) {
  .show { padding-right: var(--gutter); }
  .show-blocks {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    max-width: 100%; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .show-blocks::-webkit-scrollbar { display: none; }
  .show-block {
    flex: 0 0 84%; scroll-snap-align: center; min-height: 0;
    background: var(--s-surf); padding: 0 22px 28px;
    clip-path: polygon(var(--chamfer) 0,100% 0,100% calc(100% - var(--chamfer)),calc(100% - var(--chamfer)) 100%,0 100%,0 var(--chamfer));
  }
  .show-block-photo { margin: 0 -22px 22px; aspect-ratio: 16/10; overflow: hidden; background: #0e0e0e; }
  .show-block-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .show-block-photo.contain { display: grid; place-items: center; padding: 6%; }
  .show-block-photo.contain img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
  .show-title { font-size: 22px; }
  .show-body, .show-stats { max-width: none; }
}

/* Base is hidden; the mobile rule below turns them on. This
   pair used to be the other way round in the file, so the base
   `display:none` overrode the media query and the dots never
   appeared at any width. Source order is specificity too. */
.show-dots { list-style: none; margin: 26px 0 0; padding: 0; display: none; gap: 8px; justify-content: center; }
@media (max-width: 980px) { .show-dots { display: flex; } }
.show-dot { width: 7px; height: 7px; background: var(--s-edge); transform: rotate(45deg); transition: background .25s, transform .25s; }
.show-dot.is-on { background: var(--ct-red); transform: rotate(45deg) scale(1.35); }

/* ------------------------------------------------------------
   LIGHT THEME
   ------------------------------------------------------------
   The homepage film sections stay dark by design, but this
   section is ordinary page content, so it flips with the theme.
   ------------------------------------------------------------ */
html[data-theme="light"] .show {
  background: #f2f2ef;
  --s-surf: #ffffff; --s-ink: #17181b; --s-dim: rgba(23,24,27,.68);
}
html[data-theme="light"] .show-stage-tag { background: #17181b; }
html[data-theme="light"] .show-block-photo { background: #e9e9e4; }

/* ------------------------------------------------------------
   REDUCED MOTION — a plain stacked list, fully readable
   ------------------------------------------------------------
   No pinning, no cross-fade, no counters. Every frame is shown
   with its own block rather than stacked in a stage that only
   makes sense while it is animating.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .show *, .show *::before, .show *::after {
    animation: none !important; transition: none !important;
  }
  .show-grid { grid-template-columns: 1fr !important; }
  .show-rail, .show-stage, .show-dots, .sig-arc, .sig-boot { display: none !important; }
  .show-blocks { display: block !important; overflow: visible !important; }
  .show-block {
    opacity: 1 !important; min-height: 0; padding: 0 0 8vh;
    background: none; clip-path: none; flex: none;
  }
  .show-block-photo {
    display: block !important; margin: 0 0 22px; max-width: 620px;
    aspect-ratio: auto; overflow: visible;
  }
  .show-block-photo img { height: auto; }
}