/* ============================================================
   BINDER — "THE SHEET"
   The binder is a real 3-ring binder and the 9-pocket sheet
   hinges on the spine. Everything here exists to make that one
   object feel physical.

   STRUCTURE RULE (load-bearing):
   Every rule that positions, rotates, perspectives or animates
   lives behind html[data-bndr="on"]. The un-prefixed base rules
   must produce the static page, verbatim.

   Linked AFTER shared/tokens.css. tokens.css is never touched.
   ============================================================ */

/* ---------- 1.1 easings — two springs, no more ---------- */
:root {
  --bndr-ease-out:    cubic-bezier(.22, 1, .36, 1);
  --bndr-ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --bndr-spring-firm: cubic-bezier(.34, 1.16, .34, 1);
  --bndr-spring-soft: cubic-bezier(.3, 1.1, .4, 1);
  --bndr-gap: 8px;          /* the one gap the sheet + sizer share */
  --bndr-hinge: 30px;       /* width of the leaf's own hinge gutter */
}
/* @supports, NOT a redeclaration: a linear() value parses as a valid
   token stream everywhere and only fails at var() substitution time,
   which falls back to `ease` — not to the cubic-bezier above. */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    /* damped spring, zeta .68 / omega 12.5 -> 5.4% overshoot */
    --bndr-spring-firm: linear(0, 0.145, 0.425, 0.691, 0.884, 0.996, 1.044, 1.054, 1.044, 1.029, 1.015, 1.005, 1, 0.997, 0.997, 0.998, 0.999, 0.999, 1, 1, 1);
    /* damped spring, zeta .78 / omega 11.0 -> 2.0% overshoot */
    --bndr-spring-soft: linear(0, 0.135, 0.389, 0.63, 0.809, 0.923, 0.984, 1.012, 1.02, 1.018, 1.013, 1.008, 1.004, 1.002, 1.001, 1, 1, 1, 1);
  }
}

/* ---------- 5.1 the light source: one write, nine readers ---------- */
@property --mx { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --my { syntax: '<number>'; inherits: true; initial-value: 0; }

/* ============================================================
   BASE TIER — no JS, or reduced motion. This is the static page.
   Everything below is either display:none or normal flow.
   ============================================================ */

.bndr-root [hidden] { display: none !important; }

.bndr-rings,
.bndr-edges,
.bndr-gutter,
.bndr-cover,
.bndr-sizer,
.bndr-sheen,
.bndr-shadow,
.bndr-lip,
.bndr-ghost,
.bndr-gapchip,
.bndr-stamp,
.bndr-shock { display: none; }

/* leaves page via the hidden attribute; in flow otherwise */
.bndr-leaf { position: static; }
.bndr-back { display: none; }

/* ============================================================
   MOTION TIER — html[data-bndr="on"]
   ============================================================ */

/* ---------- 3. the shell: CSS-drawn binder chrome, zero assets ---------- */
html[data-bndr="on"] .bndr-shell {
  position: relative;
  z-index: 0;
  isolation: isolate;
  overflow: clip;
  padding: 24px 12px;              /* headroom: a lifted card must not be clipped */
  border-radius: 14px;
  perspective: 1400px;              /* for the cover swing */
  perspective-origin: 0% 50%;
  background:
    radial-gradient(120% 90% at 30% 20%, rgba(255,255,255,.045), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    repeating-linear-gradient( 0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #17171a, #101013);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -18px 26px rgba(0,0,0,.5);
}

html[data-bndr="on"] .bndr-stage {
  position: relative;
  perspective: 1400px;
  perspective-origin: 0% 50%;       /* origin AT the hinge */
  transform-style: flat;
  --mx: 0; --my: 0;                 /* the foil light source */
}

/* the sizer is the ONLY in-flow child of the stage: it gives the shell
   its height at any width with zero magic numbers, and no 100vh. */
html[data-bndr="on"] .bndr-sizer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bndr-gap);
  margin-left: var(--bndr-hinge);
  visibility: hidden;
  pointer-events: none;
}
html[data-bndr="on"] .bndr-sizer i { aspect-ratio: 5 / 7; }

/* ---------- rings: 3 chrome rings on the shell, they never move ---------- */
html[data-bndr="on"] .bndr-rings {
  display: block;
  position: absolute; left: 0; top: 0; bottom: 0; width: 42px;
  z-index: 7; pointer-events: none;
}
html[data-bndr="on"] .bndr-rings i {
  position: absolute; left: 16px;
  width: 12px; height: 30px; border-radius: 6px;
  background: linear-gradient(100deg, #6b6b6b, #e8e8e8 45%, #5a5a5a);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.6);
}
html[data-bndr="on"] .bndr-rings i:nth-child(1) { top: 16%; }
html[data-bndr="on"] .bndr-rings i:nth-child(2) { top: 50%; margin-top: -15px; }
html[data-bndr="on"] .bndr-rings i:nth-child(3) { bottom: 16%; }

/* ---------- page-edge stack, right: the binder has depth ---------- */
html[data-bndr="on"] .bndr-edges {
  display: block;
  position: absolute; right: 0; top: 8px; bottom: 8px; width: 8px;
  z-index: 1; pointer-events: none;
}
html[data-bndr="on"] .bndr-edges i {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 2px; border-radius: 2px;
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.05));
  transform: translate3d(calc(var(--d, 3) * var(--k) * 1px), 0, 0);
  opacity: calc(.5 - var(--k) * .13);
  transition: transform 300ms var(--bndr-ease-out), opacity 300ms linear;
}
html[data-bndr="on"] .bndr-edges i:nth-child(1) { --k: 1; }
html[data-bndr="on"] .bndr-edges i:nth-child(2) { --k: 2; }
html[data-bndr="on"] .bndr-edges i:nth-child(3) { --k: 3; }

/* ---------- spine crease: opacity only, never box-shadow ---------- */
html[data-bndr="on"] .bndr-gutter {
  display: block;
  position: absolute; left: 12px; top: 0; bottom: 0; width: 38%;
  z-index: 8; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.62), transparent 78%);
  opacity: var(--crease, 0);
}

/* ---------- kill the expensive filters inside the 3D context ---------- */
html[data-bndr="on"] .bndr-shell .card-back::before {
  filter: none; mix-blend-mode: normal; opacity: .30;
}
html[data-bndr="on"] .bndr-shell .card-back::after {
  animation: none; background: none;   /* replaced by .bndr-sheen */
}
html[data-bndr="on"] .bndr-shell .mono {
  backdrop-filter: none; -webkit-backdrop-filter: none;
  background: rgba(0,0,0,.45);
}

/* ---------- 4.1 the leaf: rigid hinge, three-leaf window ---------- */
html[data-bndr="on"] .bndr-leaf {
  position: absolute; inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;          /* ONLY here */
  transform: rotateY(var(--f, 0deg));
  z-index: var(--z, 2);
  touch-action: pan-y;                   /* browser owns vertical scroll */
}
html[data-bndr="on"] .bndr-leaf.is-flipping { z-index: 6; will-change: transform; }

html[data-bndr="on"] .bndr-face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  background-repeat: no-repeat;
  background-position: 4px 16%, 4px 50%, 4px 84%;
  background-size: 12px 22px;
}
/* three punched holes, riding the rings — they move WITH the page.
   The sheet is opaque enough that the leaf beneath it never bleeds
   through an empty pocket. */
html[data-bndr="on"] .bndr-front {
  border-radius: 10px;
  background-color: #131317;
  background-image:
    radial-gradient(closest-side ellipse, rgba(0,0,0,.86) 0 66%, rgba(255,255,255,.14) 70%, transparent 100%),
    radial-gradient(closest-side ellipse, rgba(0,0,0,.86) 0 66%, rgba(255,255,255,.14) 70%, transparent 100%),
    radial-gradient(closest-side ellipse, rgba(0,0,0,.86) 0 66%, rgba(255,255,255,.14) 70%, transparent 100%);
}
/* the reverse of the sheet: translucent plastic, not nine more pockets */
html[data-bndr="on"] .bndr-back {
  display: block;
  transform: rotateY(180deg);
  border-radius: 10px;
  background-image:
    radial-gradient(closest-side ellipse, rgba(0,0,0,.86) 0 66%, rgba(255,255,255,.14) 70%, transparent 100%),
    radial-gradient(closest-side ellipse, rgba(0,0,0,.86) 0 66%, rgba(255,255,255,.14) 70%, transparent 100%),
    radial-gradient(closest-side ellipse, rgba(0,0,0,.86) 0 66%, rgba(255,255,255,.14) 70%, transparent 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 33.33%, rgba(255,255,255,.02) 33.33% 66.66%, rgba(255,255,255,.05) 66.66% 100%),
    linear-gradient(160deg, rgba(226,226,232,.13), rgba(180,180,190,.06));
  background-position: 4px 16%, 4px 50%, 4px 84%, 0 0, 0 0;
  background-size: 12px 22px, 12px 22px, 12px 22px, auto, auto;
}

html[data-bndr="on"] .bndr-page { margin-left: var(--bndr-hinge); }

/* ---------- 4.4 seat-in: transform + opacity, zero JS scheduling ---------- */
html[data-bndr="on"] .bndr-settling .bndr-pocket {
  animation: bndr-seat 260ms var(--bndr-ease-out) both;
  animation-delay: calc(var(--n) * 22ms);
}
html[data-bndr="on"] .bndr-seen .bndr-settling .bndr-pocket {
  animation-delay: calc(var(--n) * 12ms);
}
@keyframes bndr-seat {
  from { opacity: 0; transform: translate3d(0, 10px, 0) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 5.5 the pocket: a well, a card, a lip, a shadow ---------- */
html[data-bndr="on"] .bndr-pocket {
  position: relative; z-index: 0;
  overflow: visible;
  -webkit-touch-callout: none;
  user-select: none; -webkit-user-select: none;
}
html[data-bndr="on"] .bndr-pocket::before {          /* the debossed well */
  content: ""; position: absolute; inset: 0; z-index: 0; border-radius: 10px;
  background: linear-gradient(160deg, rgba(0,0,0,.34), rgba(0,0,0,.12));
  box-shadow: inset 0 1px 2px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.05);
}
html[data-bndr="on"] .bndr-card {
  position: absolute; inset: 0; z-index: 2;
  transition: transform 240ms var(--bndr-ease-out);
}
html[data-bndr="on"] .bndr-shadow {
  display: block;
  position: absolute; left: 6%; right: 6%; bottom: -2%; height: 22%; z-index: 1;
  border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 50%, rgba(0,0,0,.62), transparent 72%);
  transition: opacity 240ms linear, transform 240ms var(--bndr-ease-out);
}
html[data-bndr="on"] .bndr-lip {
  display: block;
  position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: 3;
  border-radius: 0 0 10px 10px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.09) 40%, rgba(255,255,255,.04));
  border-top: 1px solid rgba(255,255,255,.16);
}

/* press -> lift -> settle back. One gesture, one state machine. */
html[data-bndr="on"] .bndr-pocket.bndr-press .bndr-card {
  transform: translate3d(0,-4px,0);
  transition-duration: 120ms;
}
html[data-bndr="on"] .bndr-pocket.is-lifted { z-index: 9; }
html[data-bndr="on"] .bndr-pocket.is-lifted .bndr-card   { transform: translate3d(0,-16px,0) scale(1.06) rotateX(7deg); }
html[data-bndr="on"] .bndr-pocket.is-lifted .bndr-sheen  { --travel: 40%; }
html[data-bndr="on"] .bndr-pocket.is-lifted .bndr-shadow { opacity: .55; transform: scale(.9); }
html[data-bndr="on"] .bndr-pocket.bndr-settle .bndr-card {
  transition: transform 320ms var(--bndr-spring-soft);
}
html[data-bndr="on"] .bndr-pocket.is-lifted ~ .bndr-pocket,
html[data-bndr="on"] .bndr-page:has(.is-lifted) .bndr-pocket:not(.is-lifted) {
  transform: scale(.97); opacity: .55;
  transition: transform 240ms var(--bndr-ease-out), opacity 240ms linear;
}

/* ---------- 5.3 the rarity ladder — you learn rarity by tilting ---------- */
html[data-bndr="on"] .bndr-sheen {
  display: block;
  position: absolute; inset: -40%; z-index: 4; pointer-events: none;
  transform: translate3d(calc(var(--mx,0) * var(--travel, 12%)), calc(var(--my,0) * 10%), 0) rotate(-16deg);
}
html[data-bndr="on"] .r-raw  .bndr-sheen { --travel:  8%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.10) 50%, transparent 60%); }
html[data-bndr="on"] .r-holo .bndr-sheen { --travel: 18%;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.22) 50%, transparent 62%); }
html[data-bndr="on"] .r-sir  .bndr-sheen { --travel: 30%;
  background: linear-gradient(105deg,
    transparent 34%,
    color-mix(in srgb, var(--holo-a) 55%, transparent) 44%,
    rgba(255,255,255,.34) 50%,
    color-mix(in srgb, var(--holo-c) 55%, transparent) 56%,
    transparent 66%); }
html[data-bndr="on"] .r-slab .bndr-sheen { --travel: 26%;
  background: linear-gradient(102deg,
    transparent 46%, rgba(255,255,255,.46) 49%, rgba(255,255,255,.46) 51%, transparent 54%); }
html[data-bndr="on"] .r-slab .bndr-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }

/* Tier C — idle. Transform-only (never background-position), so the
   binder is never dead and never repaints. Killed the moment a real
   driver (pointer / tilt) takes over. */
@keyframes bndr-idle {
  0%   { transform: translate3d(0, 0, 0) rotate(-16deg); }
  25%  { transform: translate3d(calc(var(--travel, 12%) * -1), 0, 0) rotate(-16deg); }
  75%  { transform: translate3d(var(--travel, 12%), 0, 0) rotate(-16deg); }
  100% { transform: translate3d(0, 0, 0) rotate(-16deg); }
}
html[data-bndr="on"] .bndr-shell:not(.bndr-driven) .bndr-sheen {
  animation: bndr-idle 5.5s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * .45s);
}

/* ---------- 7.1 the gap that wants something ---------- */
html[data-bndr="on"] .bndr-pocket.is-empty::before {
  box-shadow: inset 0 2px 5px rgba(0,0,0,.6);
}
html[data-bndr="on"] .bndr-ghost {
  display: block;
  position: absolute; inset: 9%; border-radius: 8px; z-index: 1; pointer-events: none;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  animation: bndr-breathe 4s ease-in-out infinite;
  animation-delay: calc(var(--n) * .5s);
}
@keyframes bndr-breathe { 0%, 100% { opacity: .42; } 50% { opacity: .92; } }
html[data-bndr="on"] .bndr-slot { opacity: .35; }
html[data-bndr="on"] .bndr-gapchip {
  display: block;
  position: absolute; left: 5%; right: 5%; bottom: 6%; z-index: 4;
  opacity: 0; transform: translate3d(0, 8px, 0);
  transition: opacity 220ms linear, transform 220ms var(--bndr-spring-soft);
  font-size: 9px; font-weight: 800; text-align: center;
  padding: 4px 2px; border-radius: 6px;
  background: var(--surface-3); border: 1px solid var(--hairline); color: var(--ink-2);
}
html[data-bndr="on"] .is-gap .bndr-gapchip { opacity: 1; transform: none; }
html[data-bndr="on"] .is-gap .bndr-ghost   { animation: none; opacity: .92; }
html[data-bndr="on"] .is-gap .bndr-slot    { opacity: 0; }   /* the chip takes its place */

/* only the page you are looking at breathes */
html[data-bndr="on"] .bndr-leaf:not(.is-current) .bndr-ghost,
html[data-bndr="on"] .bndr-leaf:not(.is-current) .bndr-sheen { animation-play-state: paused; }
html.bndr-paused .bndr-ghost,
html.bndr-paused .bndr-sheen { animation-play-state: paused; }

/* ---------- 7.2 the gild — completion you can replay ---------- */
html[data-bndr="on"] .bndr-leaf.is-gilding .bndr-face::after {
  content: ""; position: absolute; inset: -2px; border-radius: 12px; z-index: 5;
  pointer-events: none;
  border: 2px solid var(--tier-legendary);
  transform: scaleX(0); transform-origin: left center;
  animation: bndr-gild 520ms 120ms var(--bndr-ease-out) forwards;
}
@supports (mask-composite: exclude) {
  html[data-bndr="on"] .bndr-leaf.is-gilding .bndr-face::after {
    border: 0; padding: 2px;
    background: linear-gradient(100deg, var(--tier-legendary), #fff5cc 45%, var(--tier-legendary));
    mask: linear-gradient(#000,#000) content-box, linear-gradient(#000,#000);
    mask-composite: exclude;
  }
}
@keyframes bndr-gild { to { transform: scaleX(1); } }

html[data-bndr="on"] .bndr-stamp {
  display: block;
  position: absolute; left: 50%; top: 50%; z-index: 6; pointer-events: none;
  transform: translate(-50%, -50%);
  padding: 8px 16px; border-radius: 10px;
  font-size: 18px; font-weight: 900; letter-spacing: .10em;
  color: #2a1e00;
  background: linear-gradient(100deg, var(--tier-legendary), #fff5cc 45%, var(--tier-legendary));
  box-shadow: 0 6px 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.5);
}
html[data-bndr="on"] .is-gilding .bndr-stamp {
  animation: bndr-stamp 420ms 380ms var(--bndr-spring-firm) both;
}
@keyframes bndr-stamp {
  from { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
html[data-bndr="on"] .bndr-shock {
  display: block;
  position: absolute; left: 50%; top: 50%; z-index: 5; pointer-events: none;
  width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 50%;
  border: 2px solid var(--tier-legendary);
  opacity: 0;
}
html[data-bndr="on"] .is-gilding .bndr-shock {
  animation: bndr-shock 620ms 420ms var(--bndr-ease-out) both;
}
@keyframes bndr-shock {
  from { opacity: .5; transform: scale(.2); }
  to   { opacity: 0;  transform: scale(2.4); }
}

/* ---------- 6. the cold open ---------- */
html[data-bndr="on"] .bndr-cover {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  position: absolute; inset: 0; z-index: 12;
  pointer-events: none;                 /* from frame ONE, forever */
  transform-origin: left center;
  backface-visibility: hidden;
  will-change: transform;
  border-radius: 14px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.020) 0 1px, transparent 1px 4px),
    radial-gradient(130% 100% at 25% 15%, rgba(255,255,255,.05), transparent 62%),
    linear-gradient(155deg, #1c1c20, #0e0e11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset -18px 0 30px rgba(0,0,0,.6);
  animation: bndr-cover-open 720ms 200ms both;
}
@keyframes bndr-cover-open {
  0%   { transform: rotateY(0deg);    animation-timing-function: cubic-bezier(.5,0,.9,.4); }
  12%  { transform: rotateY(-4deg);   animation-timing-function: cubic-bezier(.2,0,.2,1); }
  72%  { transform: rotateY(-176deg); animation-timing-function: cubic-bezier(.3,0,.3,1); }
  100% { transform: rotateY(-168deg); visibility: hidden; }
}
html[data-bndr="on"] .bndr-cover.bndr-preopened {
  animation: none; transform: rotateY(-168deg); visibility: hidden; will-change: auto;
}
html[data-bndr="on"] .bndr-cover.bndr-done { will-change: auto; }

html[data-bndr="on"] .bndr-plate {
  font-size: 26px; font-weight: 900; letter-spacing: -.02em;
  padding: 10px 22px; border-radius: 12px;
  background-color: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 0 rgba(0,0,0,.9);
}
html[data-bndr="on"] .bndr-stamp-foil {
  font-size: 18px; font-weight: 800; letter-spacing: .04em;
  color: transparent;
  background: linear-gradient(100deg, #8a7a45, #e6d79a 45%, #8a7a45);
  -webkit-background-clip: text; background-clip: text;
  text-shadow: 0 1px 0 rgba(0,0,0,.55);
}

@keyframes bndr-rise {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to   { opacity: 1; transform: translateX(-50%); }
}
html[data-bndr="on"] .bndr-summary-rise {
  animation: bndr-rise 380ms 640ms var(--bndr-spring-soft) both;
}

/* ---------- 0. chrome discipline: no live backdrop-filter under a 3D layer ---------- */
body.bndr-motion-active .topbar {
  backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--page);
}
body.bndr-motion-active .tabbar,
body.bndr-motion-active .summary-bar {
  backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--surface-2);
}

/* ---------- 5.6 view transitions ---------- */
html[data-bndr="on"] .topbar { view-transition-name: bndr-topbar; }
html[data-bndr="on"] .tabbar { view-transition-name: bndr-tabbar; }
::view-transition-group(bndr-hero-card) {
  animation-duration: 420ms;
  animation-timing-function: cubic-bezier(.2, .9, .25, 1);
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
::view-transition-group(bndr-topbar), ::view-transition-group(bndr-tabbar) { animation-duration: 180ms; }