/* ═══════════════════════════════════════════════════════════════════════════
   STOCK BRIGHTER rev13 — #proof video coverflow + #channel chain rotator
   CONFORMANCE CHROME LAYER (BRI-539)
   Additive. Enqueue AFTER stock-brighter-rev12-02-page-styles.css (the
   renamed sell-brighter rev11 stylesheet). rev12 files untouched.
   Pairs with stock-brighter-rev13-08-hcar-tilt.js.

   ⚠️ DESIGN CONSTRAINT, STATED PER LESSON 1: the page stylesheet
   (sell-brighter-rev11-02-page-styles.css, 42,242 bytes) is unreadable in
   the chat lane (M365 connector rejects .css by MIME), so R1/R2/R3 defect
   state is UNVERIFIED and the existing coverflow geometry is UNKNOWN.
   This layer therefore touches NO positioned-item transforms, NO stage
   heights, NO widths — the portrait 9:16 dimensions the page shipped with
   ARE the adapted dimensions per Austen's ruling. Everything below is
   pure additive chrome on inner elements and overlays:
   · pointer tilt on the front .bnl-pcard (inner figure, not the item —
     vars initial 0deg, so zero visual change until a fine pointer moves)
   · cursor-tracked specular glare on the front card's media / chain node
   · 18% conformance glow behind the #proof stage
   · canonical .66s transition timing on the items (property-additive)
   Idle float and halo are deliberately OMITTED here — both would require
   writing to transforms/pseudo-elements this lane cannot inspect. The
   Claude Code lane (which can read the CSS) can graduate this page to the
   full layer; flagged on BRI-539.
   #promotions is a .bnl-slideshow, not a .bnl-rot — excluded.
   ═══════════════════════════════════════════════════════════════════════════ */

@property --bnl-ry { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --bnl-rx { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ── CANONICAL TRANSITION TIMING — additive property on the items ── */
.bnl-page--stock-brighter #proof .bnl-rot__item{
  transition:transform .66s cubic-bezier(.22,.61,.36,1), opacity .66s ease, filter .66s ease;
}
.bnl-page--stock-brighter #proof .bnl-rot__stage.is-drag .bnl-rot__item{transition:none}

/* ── 18% CONFORMANCE GLOW — background only, geometry untouched ── */
.bnl-page--stock-brighter #proof .bnl-rot__glow{
  background:radial-gradient(ellipse at center,
    color-mix(in srgb, var(--color-primary, #22c7ee) 18%, transparent) 0%, transparent 68%);
}

/* ── FRONT-CARD POINTER TILT — on the inner figure, never the item ── */
.bnl-page--stock-brighter #proof .bnl-rot__item[data-pos="0"] .bnl-pcard{
  transform:rotateY(var(--bnl-ry,0deg)) rotateX(var(--bnl-rx,0deg));
  transform-style:preserve-3d;
  transition:transform .3s ease;
  will-change:transform;
}
.bnl-page--stock-brighter #proof .bnl-rot__item[data-pos="0"].is-tracking .bnl-pcard{
  transition:transform .12s linear;
}

/* ── SPECULAR GLARE — overlay on the media box (front card only) ── */
.bnl-page--stock-brighter #proof .bnl-rot__item[data-pos="0"] .bnl-pcard__media{position:relative}
.bnl-page--stock-brighter #proof .bnl-rot__item[data-pos="0"] .bnl-pcard__media::after{
  content:"";display:block;position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:3;
  background:radial-gradient(240px circle at var(--bnl-mx,50%) var(--bnl-my,26%),
             rgba(255,255,255,.16), rgba(255,255,255,.05) 38%, transparent 64%);
  opacity:0;transition:opacity .32s ease;mix-blend-mode:screen;
}
.bnl-page--stock-brighter #proof .bnl-rot__item[data-pos="0"].is-tracking .bnl-pcard__media::after{opacity:1}

/* ── CHAIN ROTATOR (#channel) — conservative subset: glare only.
      The chain nodes are the positioned items themselves and their pos
      transforms are invisible to this lane, so no tilt is imposed. ── */
.bnl-page--stock-brighter .bnl-rot--chain .bnl-rot__item[data-pos="0"]::after{
  content:"";display:block;position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:3;
  background:radial-gradient(300px circle at var(--bnl-mx,50%) var(--bnl-my,26%),
             rgba(255,255,255,.10), rgba(255,255,255,.03) 38%, transparent 64%);
  opacity:0;transition:opacity .32s ease;mix-blend-mode:screen;
}
.bnl-page--stock-brighter .bnl-rot--chain .bnl-rot__item[data-pos="0"].is-tracking::after{opacity:1}

/* ── REDUCED MOTION — everything this layer adds, off ── */
@media (prefers-reduced-motion:reduce){
  .bnl-page--stock-brighter #proof .bnl-rot__item[data-pos="0"] .bnl-pcard{transform:none;transition:none}
  .bnl-page--stock-brighter #proof .bnl-rot__item[data-pos="0"] .bnl-pcard__media::after{display:none}
  .bnl-page--stock-brighter .bnl-rot--chain .bnl-rot__item[data-pos="0"]::after{display:none}
}