/* amela.css v2.1 — Amela slide canvas with fixed 1920×1080 design coords,
 * scaled to fit viewport via CSS transform. This is the single most important
 * piece of CSS in the deck: it makes the design resolution-independent.
 *
 * Why this matters: with `width: 100vw` and fixed px text/padding, slides
 * break at non-design viewport sizes — text wraps in cards where it shouldn't,
 * absolute-positioned footers overlap content above. transform: scale solves
 * the whole class of those bugs by rendering internally at design coords and
 * scaling the painted output to fit the viewport.
 */

* { box-sizing: border-box; }

/* Force backgrounds/colors to print. Without this, browsers drop background
 * colors when printing or exporting PDF — and this deck is entirely
 * dark-navy themed, so every slide would render white. Non-negotiable. */
* {
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

/* Slide pages (any HTML where <section class="slide"> is a direct child of body).
 * Uses :has() — needs Chrome 105+ / Safari 15.4+ / Firefox 121+. Internal Amela
 * use, all modern browsers fine. */
html:has(> body > section.slide),
html:has(> body > section.slide) > body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  background: #DDD;
  font-family: 'Inter', 'Noto Sans JP', 'Be Vietnam Pro', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Index/non-slide pages (e.g., the deck index.html) — keep scrollable defaults */
html, body {
  margin: 0;
  font-family: 'Inter', 'Noto Sans JP', 'Be Vietnam Pro', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The slide canvas — always 1920×1080 in design coords, scaled via CSS transform.
 * top/left 50% + translate -50/-50 centers it in the viewport; the scale factor
 * is min(viewport-width/1920, viewport-height/1080) so the slide always fits
 * without distorting its aspect ratio. Children use raw px values relative to
 * this 1920×1080 logical canvas. */
.slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1920px;
  height: 1080px;
  transform-origin: center center;
  /* IMPORTANT: divisor MUST have a length unit (px), else `calc(length/number)`
   * returns a length and `scale()` silently fails. Slide would then render
   * unscaled and clip off-screen — the classic "slide appears in wrong corner"
   * symptom. Always: `calc(100vw / 1920px)` not `calc(100vw / 1920)`. */
  transform: translate(-50%, -50%) scale(min(calc(100vw / 1920px), calc(100vh / 1080px)));
  overflow: hidden;
}

/* ---- Print: A4 landscape, one slide per page ---------------------------- */
@page {
  size: A4 landscape;
  margin: 0;
}

@media print {
  html:has(> body > section.slide),
  html:has(> body > section.slide) > body {
    width: 297mm;
    height: 210mm;
    overflow: hidden;
    background: #FFF;
  }
  /* Scale to fit A4 landscape (1122×794px @ 96dpi). 16:9 slide will have small
   * top/bottom bars because A4 landscape is ~1.41:1, not 1.78:1. Acceptable
   * for proposal printing. */
  .slide {
    transform: translate(-50%, -50%) scale(min(calc(297mm / 1920px), calc(210mm / 1080px)));
    page-break-after: always;
  }
  .no-print, .print\:hidden { display: none !important; }
}

/* ---- Locked Amela logo position (inside the 1920×1080 canvas) ----------- */
.amela-logo {
  position: absolute;
  top: 28px;
  right: 48px;
  height: 36px;
  width: auto;
  z-index: 10;
  background: rgba(255, 255, 255, 0.96);
  padding: 4px 10px;
  border-radius: 8px;
}

/* ---- Cover gradient top bar -------------------------------------------- */
.cover-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  background: linear-gradient(90deg, #0E1A35 0%, #F4B826 100%);
}

/* ---- Iconify default sizing -------------------------------------------- */
iconify-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

/* ════════════════════════════════════════════════════════════════════════
   ANIMATION LAYER  (v2.1)
   ────────────────────────────────────────────────────────────────────────
   Two independent, opt-in, print-safe features:

   1. ENTRANCE / BUILD — pure CSS, zero JS. Any element with
      `data-anim="<name>"` eases in when the slide loads. Because every
      slide is its own HTML file, this doubles as a slide transition: the
      content of the slide you navigate to eases in on arrival. Stagger
      siblings with `data-anim-delay="1".."12"` OR wrap them in a parent
      with class `anim-stagger` (auto-staggers direct children).

   2. STEP REVEAL — click-through builds. `data-step="1".."N"` elements
      stay hidden until ArrowRight / Space reveals them one at a time.
      Needs `assets/anim.js` loaded in the slide <head>.

   PRINT / SCREENSHOT SAFETY — the whole reason this is safe to leave on
   by default:
     • @media print forces every animated / stepped element to its final
       visible state, so the printed PDF is never blank or mid-fade.
     • `<html class="anim-static">` (set by anim.js when the URL carries
       `#static`, used by screenshot.py and by index.html thumbnails) does
       the same for on-screen capture.
     • Entrance animations are short (≤1.6s incl. max stagger) so they
       finish well within Chrome's --virtual-time-budget during capture.
     • prefers-reduced-motion collapses every animation to near-instant
       while keeping the element visible.
   ──────────────────────────────────────────────────────────────────────── */

@keyframes amela-fade-in    { from { opacity: 0 }                                   to { opacity: 1 } }
@keyframes amela-fade-up    { from { opacity: 0; transform: translateY(36px) }       to { opacity: 1; transform: none } }
@keyframes amela-fade-down  { from { opacity: 0; transform: translateY(-36px) }      to { opacity: 1; transform: none } }
@keyframes amela-fade-left  { from { opacity: 0; transform: translateX(48px) }       to { opacity: 1; transform: none } }
@keyframes amela-fade-right { from { opacity: 0; transform: translateX(-48px) }      to { opacity: 1; transform: none } }
@keyframes amela-zoom-in    { from { opacity: 0; transform: scale(.86) }             to { opacity: 1; transform: none } }
@keyframes amela-rise       { from { opacity: 0; transform: translateY(64px) scale(.97) } to { opacity: 1; transform: none } }

/* Resting + timing — scoped to KNOWN values only, so a typo'd data-anim
 * leaves the element fully visible instead of stuck invisible. */
[data-anim="fade-in"], [data-anim="fade-up"], [data-anim="fade-down"],
[data-anim="fade-left"], [data-anim="fade-right"], [data-anim="zoom-in"],
[data-anim="rise"] {
  opacity: 0;
  animation-duration: .62s;
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}
[data-anim="fade-in"]    { animation-name: amela-fade-in }
[data-anim="fade-up"]    { animation-name: amela-fade-up }
[data-anim="fade-down"]  { animation-name: amela-fade-down }
[data-anim="fade-left"]  { animation-name: amela-fade-left }
[data-anim="fade-right"] { animation-name: amela-fade-right }
[data-anim="zoom-in"]    { animation-name: amela-zoom-in }
[data-anim="rise"]       { animation-name: amela-rise }

/* The `.slide` section carries its own `transform: translate scale` for
 * resolution-independent layout. A directional keyframe would overwrite
 * that transform and break scaling — so on the slide section itself,
 * force the opacity-only keyframe regardless of the value authored. */
section.slide[data-anim] { animation-name: amela-fade-in }

/* Stagger — explicit. `data-anim-delay="N"` => N × 90ms. */
[data-anim-delay="1"]  { animation-delay: .09s }
[data-anim-delay="2"]  { animation-delay: .18s }
[data-anim-delay="3"]  { animation-delay: .27s }
[data-anim-delay="4"]  { animation-delay: .36s }
[data-anim-delay="5"]  { animation-delay: .45s }
[data-anim-delay="6"]  { animation-delay: .54s }
[data-anim-delay="7"]  { animation-delay: .63s }
[data-anim-delay="8"]  { animation-delay: .72s }
[data-anim-delay="9"]  { animation-delay: .81s }
[data-anim-delay="10"] { animation-delay: .90s }
[data-anim-delay="11"] { animation-delay: .99s }
[data-anim-delay="12"] { animation-delay: 1.08s }

/* Stagger — automatic for direct children of `.anim-stagger`
 * (the child still needs its own `data-anim` to actually move). */
.anim-stagger > *:nth-child(1)  { animation-delay: 0s }
.anim-stagger > *:nth-child(2)  { animation-delay: .09s }
.anim-stagger > *:nth-child(3)  { animation-delay: .18s }
.anim-stagger > *:nth-child(4)  { animation-delay: .27s }
.anim-stagger > *:nth-child(5)  { animation-delay: .36s }
.anim-stagger > *:nth-child(6)  { animation-delay: .45s }
.anim-stagger > *:nth-child(7)  { animation-delay: .54s }
.anim-stagger > *:nth-child(8)  { animation-delay: .63s }
.anim-stagger > *:nth-child(9)  { animation-delay: .72s }
.anim-stagger > *:nth-child(10) { animation-delay: .81s }
.anim-stagger > *:nth-child(11) { animation-delay: .90s }
.anim-stagger > *:nth-child(12) { animation-delay: .99s }

/* ---- Step reveal (click-through builds) -------------------------------- */
/* `data-step` elements hold their final layout box (opacity:0, not
 * display:none) so revealing one never reflows the slide. anim.js adds
 * `.is-revealed` on each ArrowRight / Space. */
[data-step] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .42s ease, transform .42s cubic-bezier(.22, .61, .36, 1);
}
[data-step].is-revealed {
  opacity: 1;
  transform: none;
}

/* ---- prefers-reduced-motion: keep it functional, drop the motion ------- */
@media (prefers-reduced-motion: reduce) {
  [data-anim] {
    animation-duration: .001s !important;
    animation-delay: 0s !important;
  }
  .anim-stagger > * { animation-delay: 0s !important; }
  [data-step] { transition-duration: .001s !important; }
}

/* ---- Print + static capture: force every animated element visible ----- */
@media print {
  [data-anim], [data-step] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
.anim-static [data-anim],
.anim-static [data-step] {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}