/* ═══════════════════════════════════════════════════════════════════════════
   THEME DECK — scroll-driven fan of the appearance themes
   ───────────────────────────────────────────────────────────────────────────
   Ported from scene-deck-scroll-animation.md. deck.js writes one eased number
   (--e) onto .deck-stage per frame; every card transform below is derived
   from it. Cards are 16:9 desktop screenshots rather than phones, so the
   spread / tilt / card-size constants are re-solved for that ratio.

   Only the cards matching the site's current mode are shown (four of them).
   The closed stack sits centred with the last card on top; opening it deals
   the cards out from the centre, each later card overlapping the one before
   towards the end edge (left → right in LTR, mirrored in RTL).

   TO REMOVE: delete this file, deck.js, their two tags in index.html, the
   #themes section, and the `deck` blocks in i18n.js.
   ═══════════════════════════════════════════════════════════════════════════ */

.scene{position:relative}

/* .sec only so keynav.js picks the section up as a stop — undo its padding,
   the pin carries its own */
.sec.scene-deck{padding-block:0}
.scene-deck{min-height:280vh}
@media (max-width:900px){ .scene-deck{min-height:220vh} }

.deck-pin{
  position:sticky;inset-block-start:0;height:100vh;height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(14px,2.6svh,40px);
  padding-block:calc(72px + clamp(12px,2.4svh,32px)) clamp(20px,4svh,44px);
  padding-inline:var(--pad);
}

.deck-head{
  width:100%;max-width:820px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:14px;flex:none;
}
.deck-head .eyebrow{justify-content:center}
.deck-head .lede{margin-inline:auto}

/* ---------- the stage: a size container the fan is solved against ---------- */
.deck-stage{
  position:relative;flex:1 1 0%;min-block-size:0;width:100%;max-width:1800px;
  display:grid;place-items:center;
  container-type:size;

  /* 4 cards, 16:9. Open width ≈ 3·sf·w + w·cos(1.5·tilt) + h·sin(1.5·tilt)
     ≈ 1.88w at these constants → w ≤ ~53cqw → h ≤ ~30cqw. Vertically the
     outer card drops 1.5 lifts and its rotated corner reaches ~.6h below
     centre → h ≤ ~83cqh. */
  --cardh:min(82cqh, 29.5cqw);
  --cardw:calc(var(--cardh) * 16 / 9);
  --sf:.28;
  --spread:calc(var(--cardw) * var(--sf));
  --lift:calc(var(--cardh) * .03);
  --tilt:2.5deg;
  --dir:1;
}
[dir="rtl"] .deck-stage{--dir:-1}

/* narrow screens: a much tighter hand so each screenshot stays legible */
@media (max-width:899px){
  .deck-stage{
    --cardh:min(76cqh, 38cqw);
    --sf:.14;
    --lift:calc(var(--cardh) * .03);
    --tilt:2deg;
  }
}

/* ---------- one mode at a time: light cards in light, dark in dark ---------- */
.deck-card[data-deck-card="dark"]{display:none}
:root[data-theme="dark"] .deck-card[data-deck-card="light"]{display:none}
:root[data-theme="dark"] .deck-card[data-deck-card="dark"]{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .deck-card[data-deck-card="light"]{display:none}
  :root:not([data-theme="light"]) .deck-card[data-deck-card="dark"]{display:block}
}

/* ---------- the cards ---------- */
.deck-card{
  grid-area:1/1;position:relative;margin:0;
  block-size:var(--cardh);inline-size:auto;aspect-ratio:16/9;
  border-radius:clamp(10px,1.1vw,16px);
  border:1px solid var(--line-2);
  background:var(--panel-2);
  /* a tight contact shadow only — the cards stack on the same spot when
     closed, so any soft shadow here would pool into a halo */
  box-shadow:0 2px 6px rgba(13,19,26,.16);
  transform:
    translate3d(calc(var(--o,0) * var(--dir,1) * var(--spread) * var(--e,0)),
                calc(var(--ao,0) * var(--lift) * var(--e,0)), 0)
    rotate(calc(var(--o,0) * var(--dir,1) * var(--tilt) * var(--e,0)));
}
.deck-card img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* the soft drop shadow lives on its own layer and fades in with the fan —
   opacity, not box-shadow, so the compositor animates it without repaints */
.deck-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 18px 40px rgba(13,19,26,.26);
  opacity:var(--e,0);
}
:root[data-theme="dark"] .deck-card::after{box-shadow:0 20px 44px rgba(0,0,0,.6)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .deck-card{box-shadow:0 2px 6px rgba(0,0,0,.45)}
  :root:not([data-theme="light"]) .deck-card::after{box-shadow:0 20px 44px rgba(0,0,0,.6)}
}
:root[data-theme="dark"] .deck-card{box-shadow:0 2px 6px rgba(0,0,0,.45)}

/* layers only while the fan is moving — name every animated property */
.is-live .deck-card{will-change:transform}
.is-live .deck-card::after{will-change:opacity}

/* ---------- foot: the accent palette ---------- */
.deck-foot{
  flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:8px 10px;
}
.deck-swatch{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--panel);font-size:.8125rem;font-weight:500;color:var(--ink-2);
  white-space:nowrap;
}
.deck-swatch i{width:10px;height:10px;border-radius:50%;flex:none;background:var(--sw)}
.deck-note{
  flex-basis:100%;text-align:center;
  font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);
}
[dir="rtl"] .deck-note{letter-spacing:0;text-transform:none;font-family:inherit;font-size:.8125rem}
@media (max-width:520px){
  .deck-swatch{padding:5px 10px;font-size:.75rem}
  .deck-head .lede{font-size:1rem}
}

/* short viewports: drop the lede so the fan keeps its room */
@media (max-height:640px){
  .deck-head .lede{display:none}
}

/* ---------- static version: small screens and reduced motion ----------
   No pin, no scroll travel, no transforms — the four screens are simply laid
   out with their theme name underneath. deck.js stands down at the same
   breakpoint (STATIC_MQ there must match the max-width here). */
.deck-card figcaption{display:none}

@media (max-width:720px), (prefers-reduced-motion:reduce){
  .scene-deck{min-height:0}
  .sec.scene-deck{padding-block:clamp(64px,9vw,132px)}
  .deck-pin{position:static;height:auto;overflow:visible;padding-block:0}
  .deck-head .lede{display:block}

  /* the pin is static, so the stage has no definite height — a size
     container would make every cqh zero and collapse the cards */
  .deck-stage{flex:0 0 auto;container-type:normal}

  /* the card becomes a plain figure; the frame moves onto the picture so
     the caption can sit underneath it */
  .deck-card{
    grid-area:auto;transform:none !important;will-change:auto !important;
    block-size:auto;inline-size:auto;aspect-ratio:auto;
    border:0;border-radius:0;background:none;box-shadow:none !important;
  }
  .deck-card::after{content:none}
  .deck-card img{
    height:auto;aspect-ratio:16/9;
    border:1px solid var(--line-2);border-radius:clamp(10px,1.1vw,16px);
    background:var(--panel-2);box-shadow:var(--shadow-md);
  }
  .deck-card figcaption{
    display:flex;align-items:center;gap:8px;margin-top:12px;
    font-size:.875rem;font-weight:600;color:var(--ink);
  }
  .deck-card figcaption i{width:10px;height:10px;border-radius:50%;flex:none;background:var(--sw)}
}

/* small screens: a swipeable row, edge to edge, the next card peeking in */
@media (max-width:720px){
  .deck-pin{padding-inline:0}
  .deck-head,.deck-foot{padding-inline:var(--pad)}
  .deck-stage{
    display:flex;gap:14px;max-width:none;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);
    padding:4px var(--pad) 18px;   /* room for the picture's shadow */
    scrollbar-width:none;
  }
  .deck-stage::-webkit-scrollbar{display:none}
  .deck-card{flex:0 0 min(84%,520px);scroll-snap-align:start}
}

/* reduced motion on larger screens: a 2 × 2 grid */
@media (prefers-reduced-motion:reduce) and (min-width:721px){
  .deck-stage{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 22px;
    max-width:1100px;
  }
}