/* ==========================================================================
   DECK ENGINE — stylesheet.  Engine only: slide design belongs to the slides.
   --------------------------------------------------------------------------
   MARKUP
     <html lang="lv" data-palette="karmins" data-type="plakats">
     <div class="deck">
       <div class="deck-bg"></div>                     full-viewport background (crossfades per slide)
       <div class="stage">                             1920x1080 logical px, scaled to fit the viewport
         <section class="slide" data-bg="var(--night)"> ... </section>
         <div class="progress"></div>
       </div>
     </div>

   SLIDE BACKGROUND   data-bg="<any CSS background value>"  e.g. "var(--brand)", "#222",
                      "linear-gradient(160deg, var(--brand), var(--night))", "url(assets/x.jpg) center/cover"
   ENTRANCE ANIMATION data-anim="rise|fade|scale|wipe|draw|cells"
                      data-delay="ms"  data-dur="ms"  data-step="ms" (cells)  data-order="n" (on a .cell)
                      Base state of every element is its FINAL state; animations are Web Animations
                      (see deck.js), so a slide is complete even in the overview / without JS.
   THEME              [data-set-palette="name"] / [data-set-type="name"] on any element = auto-wired switch
                      (gets .is-on while active).  JS: Deck.setPalette(name) / Deck.setType(name).
   UTILITIES          .t-display  .t-text

   CSS VARIABLES
     palette  --brand --brand-deep --accent --metal --paper --ink --night      (:root[data-palette])
     type     --f-display --f-display-wdth --f-display-wght --f-text            (:root[data-type])
              --f-display-axes   extra axes for the display face, e.g. "SOFT" 100, "WONK" 0
     chrome   --deck-paper --deck-ink --deck-carmine --deck-amber --deck-night --deck-silver
     timing   --t-out --t-in --t-in-delay --t-bg --t-theme       (JS reads the first four)
     runtime  --stage-scale (on .deck) --progress (on <html>, 0..1)
   ========================================================================== */


/* ---------- 1. Palette tokens ------------------------------------------------
   Registered as <color> so that a palette switch is TRANSITIONED once, on :root,
   and every consumer follows frame by frame: backgrounds, borders, fills, strokes,
   text, gradients, box-shadows, the .deck-bg layers. No per-element transition rules.
   (Needs @property: Chrome/Edge 85+, Safari 16.4+, Firefox 128+. Older = instant switch.) */
@property --brand      { syntax: "<color>"; inherits: true; initial-value: #9D2235; }
@property --brand-deep { syntax: "<color>"; inherits: true; initial-value: #6E1426; }
@property --accent     { syntax: "<color>"; inherits: true; initial-value: #E3A23C; }
@property --metal      { syntax: "<color>"; inherits: true; initial-value: #C5CBCC; }
@property --paper      { syntax: "<color>"; inherits: true; initial-value: #E5E1D7; }
@property --ink        { syntax: "<color>"; inherits: true; initial-value: #221E1B; }
@property --night      { syntax: "<color>"; inherits: true; initial-value: #0B171D; }
@property --night-hi   { syntax: "<color>"; inherits: true; initial-value: #183743; }
@property --star       { syntax: "<color>"; inherits: true; initial-value: #F7F3EC; }

/* Lins (pelēcīgs, nebalināts — ne krēmkrāsa), karoga karmīns, Daugavas nakts.
   --star = zvaigznes uz A apļa (Zils un zelts: zelts kā vecajā emblēmā). */
:root,
:root[data-palette="karmins"] {
  --brand: #9D2235; --brand-deep: #6E1426; --accent: #E3A23C; --metal: #C5CBCC;
  --paper: #E5E1D7; --ink: #221E1B; --night: #0B171D; --night-hi: #183743; --star: #F7F3EC;
}
:root[data-palette="zils-zelts"] {
  --brand: #1D3E78; --brand-deep: #10264D; --accent: #E2B13C; --metal: #C3CAD3;
  --paper: #E2E4E1; --ink: #131B29; --night: #09121F; --night-hi: #1B3155; --star: #E2B13C;
}
:root[data-palette="daugava"] {
  --brand: #0E5561; --brand-deep: #083A42; --accent: #EC9F3A; --metal: #BFCBC9;
  --paper: #E3E3DB; --ink: #0F2125; --night: #061A1F; --night-hi: #11414A; --star: #F3B45A;
}

:root {
  transition:
    --brand      var(--t-theme) ease,
    --brand-deep var(--t-theme) ease,
    --accent     var(--t-theme) ease,
    --metal      var(--t-theme) ease,
    --paper      var(--t-theme) ease,
    --ink        var(--t-theme) ease,
    --night      var(--t-theme) ease,
    --night-hi   var(--t-theme) ease,
    --star       var(--t-theme) ease;
}


/* ---------- 2. Type sets -----------------------------------------------------
   10.10.2026 (Jāņa izvēle no 10 paraugiem): visi SIL OFL, latviešu burti pārbaudīti renderējumā katrā biezumā. */
:root,
:root[data-type="plakats"]     { --f-display: "Alfa Slab One";    --f-display-wdth: 100; --f-display-wght: 400; --f-text: "Atkinson Hyperlegible Next"; }
:root[data-type="ziemeli"]     { --f-display: "Familjen Grotesk"; --f-display-wdth: 100; --f-display-wght: 700; --f-text: "Familjen Grotesk"; }
:root[data-type="piemineklis"] { --f-display: "Marcellus";        --f-display-wdth: 100; --f-display-wght: 400; --f-text: "Proza Libre"; }

/* Extra variation axes for the display face (none of the current faces need them; unknown axes are ignored).
   Override per type set or per element, e.g.  --f-display-axes: "SOFT" 100, "WONK" 0; */
:root { --f-display-axes: "SOFT" 0; }

.t-display {
  font-family: var(--f-display), system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: var(--f-display-wght);
  font-variation-settings: "wdth" var(--f-display-wdth), "wght" var(--f-display-wght), var(--f-display-axes);
  font-optical-sizing: auto;
}
.t-text {
  font-family: var(--f-text), system-ui, -apple-system, "Segoe UI", sans-serif;
}


/* ---------- 3. Deck chrome tokens and timings (independent of the palette) ---- */
:root {
  --deck-paper:   #EEF1F1;
  --deck-ink:     #10242E;
  --deck-carmine: #9D2235;
  --deck-amber:   #E9A23B;
  --deck-night:   #0E2A33;
  --deck-silver:  #C4C9CC;

  --t-out:      300ms;    /* outgoing slide fade                                  */
  --t-in:       500ms;    /* incoming slide fade + 12px rise                      */
  --t-in-delay: 180ms;    /* incoming starts when the outgoing is mostly gone;    */
                          /*   data-anim delays are counted from this moment      */
  --t-bg:       600ms;    /* .deck-bg crossfade                                   */
  --t-theme:    600ms;    /* palette switch                                       */
}


/* ---------- 4. Page, deck, stage ---------------------------------------------- */
html {
  background: var(--deck-night);
  overscroll-behavior: none;
}
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.deck {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.deck :is(input, textarea, [contenteditable]) {
  -webkit-user-select: text;
  user-select: text;
}

/* Engine defaults below use :where() = specificity 0, so ANY slide rule (a plain class is enough) overrides them. */
:where(.deck, .deck *) { box-sizing: border-box; }
:where(.deck *)::before,
:where(.deck *)::after { box-sizing: border-box; }

/* Background layer: ALWAYS fills the whole viewport, so letterbox areas are never black bars.
   JS stacks one .deck-bg-layer per background change and fades the newest in. */
.deck-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.deck-bg-layer {
  position: absolute;
  inset: 0;
}

/* The 1920x1080 stage, centred and scaled by JS (--stage-scale = min(vw/1920, vh/1080)).
   No will-change here on purpose: text stays crisp at any scale. */
.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  margin: -540px 0 0 -960px;
  transform: scale(var(--stage-scale, 1));
  transform-origin: 50% 50%;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--f-text), system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 32px;
  line-height: 1.35;
}
:where(.stage) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote) { margin: 0; }

/* SVG children scale / rotate about their own centre, not the SVG's top-left corner */
:where(.stage svg) :where([data-anim], .cell) {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}


/* ---------- 5. Slides ---------------------------------------------------------
   idle      hidden, 12px low, no transition (so it can be reset instantly)
   .is-active   incoming: fades in 500ms ease-out + rises 12px (after --t-in-delay)
   .is-leaving  outgoing: fades out 300ms ease-in, stays in place; JS removes the class afterwards */
.slide {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}
.slide.is-active {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  z-index: 2;
  transition:
    opacity   var(--t-in) ease-out var(--t-in-delay),
    transform var(--t-in) ease-out var(--t-in-delay);
}
.slide.is-leaving {
  visibility: visible;
  opacity: 0;
  transform: none;
  z-index: 1;
  transition: opacity var(--t-out) ease-in;
}


/* ---------- 6. Progress bar (pinned to the bottom of the stage; restyle freely) -- */
.progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 8px;
  z-index: 50;
  pointer-events: none;
}
.progress::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--deck-amber);
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  transition: transform 600ms cubic-bezier(.2, .7, .2, 1);
}


/* ---------- 7. Counter (C) ----------------------------------------------------- */
.deck-counter {
  position: fixed;
  right: 16px;
  bottom: 14px;
  z-index: 60;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(14, 42, 51, .78);
  color: var(--deck-paper);
  font: 600 14px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.deck-counter.is-on { opacity: 1; }


/* ---------- 8. Overview (O) ------------------------------------------------------
   Every thumbnail is a clone of the slide inside its own .stage (class "stage ov-stage"),
   so selectors like ".stage .slide h1" still match. Style slides by class / attribute, not :nth-child. */
.overview {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: auto;
  padding: 56px 56px 72px;
  background: var(--deck-night);                    /* opaque: no ghost of the live slide behind the thumbnails */
  touch-action: pan-y;
  animation: ov-in 160ms ease-out;
}
@keyframes ov-in { from { opacity: 0; } }

.overview-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px 24px;
  max-width: 2400px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .overview { padding: 24px; }
  .overview-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; }
}

.ov-item {
  display: block;
  cursor: pointer;
  border-radius: 8px;
}
.ov-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(196, 201, 204, .28);
  transition: box-shadow .15s ease;
}
.ov-item:hover .ov-frame      { box-shadow: 0 0 0 3px var(--deck-silver); }
.ov-item.is-current .ov-frame { box-shadow: 0 0 0 4px var(--deck-amber); }
.ov-item:focus-visible        { outline: none; }                  /* the ring moves onto the frame, not the frame + label */
.ov-item:focus-visible .ov-frame { box-shadow: 0 0 0 4px var(--deck-amber), 0 0 0 9px rgba(233, 162, 59, .35); }
.ov-num {
  display: block;
  margin-top: 9px;
  color: var(--deck-silver);
  font: 600 14px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variant-numeric: tabular-nums;
}
.ov-item.is-current .ov-num { color: var(--deck-amber); }

.ov-frame .stage {                                  /* a miniature stage, scaled by --ov-scale (set by JS) */
  left: 0;
  top: 0;
  margin: 0;
  transform-origin: 0 0;
  transform: scale(var(--ov-scale, .18));
  pointer-events: none;
}
.deck .ov-stage > .slide {                          /* show the slide in its final state, static */
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: none;
  pointer-events: none;
}


/* ---------- 9. Focus, idle cursor ------------------------------------------------ */
:focus-visible {
  outline: 4px solid var(--deck-amber);
  outline-offset: 4px;
}
html.is-idle,
html.is-idle * { cursor: none !important; }


/* ---------- 10. Reduced motion: no movement (translate / scale / clip), quick fades only
   (deck.js switches every data-anim type to a plain opacity fade as well) ----------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-out: 150ms;
    --t-in: 200ms;
    --t-in-delay: 0ms;
    --t-bg: 250ms;
    --t-theme: 200ms;
  }
  .slide { transform: none; }
  .progress::after { transition: none; }
  .overview { animation: none; }
}