/*
 * frontiers-deck-slides (spec FR-005 to FR-016): a deck of slides drawn on a 1920x1080 canvas that scales with the box holding it,
 * colored only by the brand's theme roles (0019-design-systems FR-044). Load the brand's brand.css first, then this file.
 * Faces: Inter and Source Serif 4, SIL OFL 1.1, in ../fonts/. Sizes are written in design pixels: "calc(36 * var(--u))" is 36px
 * on a canvas 1920px wide. Where the box is narrower than 700px, slides flow at reading size instead (FR-012).
 */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-variable-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/source-serif-4-variable-latin.woff2") format("woff2");
}

@layer decks {
  .deck {
    container-type: inline-size;
    --deck-fg: var(--brand-text);
    --deck-bg: var(--brand-surface);
    --deck-paper: var(--brand-paper, var(--brand-surface));
    --deck-muted: color-mix(in oklab, var(--brand-text) 72%, var(--brand-surface));
    --deck-rule: color-mix(in oklab, var(--brand-text) 18%, var(--brand-surface));
    --deck-accent: var(--brand-primary);
    color: var(--deck-fg);
    background: var(--deck-bg);
    border: 1px solid var(--deck-rule);
    font-family: var(--brand-font-sans), system-ui, sans-serif;
    min-width: 0;
    max-width: 100%;
  }
  .deck * { box-sizing: border-box; }
  .deck__stage { --u: calc(100cqw / 1920); display: grid; min-width: 0; position: relative; isolation: isolate; overflow: hidden; }
  .deck-slide { min-width: 0; }
  .deck.is-ready .deck-slide { grid-area: 1 / 1; }
  .deck-wash { position: absolute; inset: -4%; z-index: -2; width: 108%; height: 108%; object-fit: cover; filter: blur(calc(14 * var(--u))); pointer-events: none; }

  .deck [data-unit="capital"] { --unit: var(--brand-unit-capital); }
  .deck [data-unit="ip"] { --unit: var(--brand-unit-ip); }
  .deck [data-unit="press"] { --unit: var(--brand-unit-press); }
  .deck [data-unit="studios"] { --unit: var(--brand-unit-studios); }
  .deck [data-unit="network"] { --unit: var(--brand-unit-network); }

  /* Image: one picture, whole and unchanged (FR-009). */
  .deck-slide[data-layout="image"] { margin: 0; background: var(--deck-paper); display: grid; }
  .deck-slide[data-layout="image"] figure { margin: 0; display: grid; }
  .deck-slide[data-layout="image"] img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
  .deck-slide[data-layout="image"] figcaption { padding: 0.4rem 0.75rem; text-align: right; font-size: 1rem; background: var(--deck-bg); border-block-start: 1px solid var(--deck-rule); }
  .deck-slide[data-layout="image"] a { color: var(--brand-link); }

  /* Problem and ask: the customer's situation first. */
  .deck-slide[data-layout="problem"], .deck-slide[data-layout="ask"] {
    position: relative; isolation: isolate; overflow: hidden;
    min-height: calc(1080 * var(--u)); align-self: stretch;
    padding: calc(96 * var(--u)) calc(120 * var(--u)) calc(260 * var(--u));
    display: flex; flex-direction: column; align-items: flex-start;
  }
  .deck-slide[data-layout="problem"]::after, .deck-slide[data-layout="ask"]::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: color-mix(in oklab, var(--deck-bg) 82%, transparent);
  }
  .deck-kicker { margin: 0 0 calc(22 * var(--u)); font-size: calc(24 * var(--u)); line-height: 1.2; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--deck-accent); }
  .deck-slide h2 {
    margin: 0; max-width: 1560px; max-width: calc(1560 * var(--u));
    font-family: var(--brand-font-serif), Georgia, serif; font-weight: 500;
    font-size: calc(68 * var(--u)); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance;
    color: color-mix(in oklab, var(--brand-text) 92%, var(--brand-primary));
  }
  .deck-body { margin-top: calc(34 * var(--u)); max-width: calc(1240 * var(--u)); }
  .deck-body p { margin: 0 0 calc(18 * var(--u)); font-size: calc(36 * var(--u)); line-height: 1.45; }
  .deck-chips { list-style: none; margin: calc(18 * var(--u)) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(14 * var(--u)) calc(40 * var(--u)); }
  .deck-chip { display: inline-flex; align-items: center; gap: calc(14 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--unit); }
  .deck-flag { display: inline-block; width: calc(34 * var(--u)); height: calc(24 * var(--u)); background: var(--unit, var(--deck-muted)); clip-path: polygon(0 0, 100% 0, 82% 50%, 100% 100%, 0 100%); flex: none; }

  /* The trail: every unit the deck lists, along the foot of the slide, marking the ones this slide names. */
  .deck-trail {
    list-style: none; margin: 0; padding: 0;
    position: absolute; left: 0; right: 0; bottom: calc(120 * var(--u)); height: calc(150 * var(--u));
    display: flex; justify-content: space-around; align-items: flex-end;
    border-block-end: calc(4 * var(--u)) dotted var(--deck-rule);
  }
  .deck-trail li { display: grid; justify-items: start; gap: calc(6 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--deck-muted); transform: translateY(calc(var(--lift, 0) * var(--u))); }
  .deck-trail li:nth-child(1) { --lift: -6; } .deck-trail li:nth-child(2) { --lift: -34; } .deck-trail li:nth-child(3) { --lift: -12; }
  .deck-trail li:nth-child(4) { --lift: -28; } .deck-trail li:nth-child(5) { --lift: -4; }
  .deck-trail li[aria-current="true"] { color: var(--unit); font-weight: 700; }
  .deck-trail .deck-flag { background: color-mix(in oklab, var(--brand-text) 22%, var(--brand-surface)); }
  .deck-trail li[aria-current="true"] .deck-flag { background: var(--unit); }
  .deck-foot { position: absolute; inset-inline: calc(120 * var(--u)); bottom: calc(40 * var(--u)); display: flex; justify-content: space-between; font-size: calc(24 * var(--u)); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500; color: var(--deck-muted); }

  /* Ask: one button and the desks. */
  .deck-button { display: inline-block; margin-top: calc(10 * var(--u)); padding: calc(26 * var(--u)) calc(52 * var(--u)); background: var(--brand-text); color: var(--brand-surface); font-family: var(--brand-font-serif), Georgia, serif; font-weight: 500; font-size: calc(46 * var(--u)); text-decoration: none; }
  .deck-button:hover { background: var(--brand-primary); }
  .deck-address { margin: calc(18 * var(--u)) 0 0; font-size: calc(32 * var(--u)); font-weight: 600; color: var(--brand-text); }
  .deck-desks-title { margin: calc(36 * var(--u)) 0 0; font-size: calc(24 * var(--u)); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--deck-muted); }
  .deck-desks { list-style: none; margin: calc(14 * var(--u)) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: calc(14 * var(--u)) calc(40 * var(--u)); }
  .deck-desks li { background: color-mix(in oklab, var(--deck-bg) 92%, transparent); border: 1px solid var(--deck-rule); border-block-start: calc(6 * var(--u)) solid var(--brand-primary); padding: calc(14 * var(--u)) calc(22 * var(--u)); }
  .deck-desks b { display: block; font-size: calc(24 * var(--u)); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-primary); }
  .deck-desks a { font-size: calc(28 * var(--u)); color: var(--brand-text); }
  .deck-slide[data-layout="ask"] { padding-bottom: calc(120 * var(--u)); }

  /* Controls (FR-014, FR-015). */
  .deck__controls { display: none; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; border-block-start: 1px solid var(--deck-rule); background: var(--deck-bg); }
  .deck.is-ready .deck__controls { display: flex; }
  .deck__controls button { font: 600 1rem/1 var(--brand-font-sans), system-ui, sans-serif; min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.9rem; border: 1px solid var(--deck-rule); background: var(--deck-bg); color: var(--deck-fg); cursor: pointer; }
  .deck__controls button:hover { border-color: var(--deck-fg); }
  .deck__progress { flex: 1 1 auto; min-width: 0; display: flex; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
  .deck__progress li { flex: 1 1 0; min-width: 0; }
  .deck__progress button { display: block; width: 100%; min-width: 0; padding: 0; height: 2.75rem; border: 0; background: transparent; position: relative; }
  .deck__progress button::after { content: ""; position: absolute; inset: calc(50% - 3px) 0 auto; height: 6px; background: var(--deck-rule); }
  .deck__progress button[aria-current="true"]::after { background: var(--deck-accent); }
  .deck__progress button[data-seen="true"]:not([aria-current="true"])::after { background: color-mix(in oklab, var(--deck-accent) 45%, var(--deck-rule)); }
  .deck__count { font-size: 1rem; color: var(--deck-muted); min-width: 3.5rem; text-align: center; font-variant-numeric: tabular-nums; }
  .deck button:focus-visible, .deck a:focus-visible { outline: 3px solid var(--deck-accent); outline-offset: 2px; }

  /* With the script: one slide shows at a time, in the room the tallest needs; without it every slide shows, in order (FR-016). */
  .deck.is-ready .deck-slide { transition: opacity 0.4s ease; }
  .deck.is-ready .deck-slide:not([aria-current="true"]) { opacity: 0; visibility: hidden; pointer-events: none; }
  .deck:not(.is-ready) .deck__stage { gap: 1px; background: var(--deck-rule); }
  @media (prefers-reduced-motion: reduce) { .deck.is-ready .deck-slide { transition: none; } }

  /* Narrow boxes: slides stop scaling and flow at reading size (FR-012). */
  @container (max-width: 700px) {
    .deck__stage { --u: 1px; }
    .deck-slide[data-layout="problem"], .deck-slide[data-layout="ask"] { min-height: 0; padding: 1.25rem 1rem 1.25rem; }
    .deck-wash { filter: blur(8px); }
    .deck-kicker { font-size: 1rem; margin-bottom: 0.6rem; }
    .deck-slide h2 { font-size: 1.65rem; max-width: none; }
    .deck-body { margin-top: 1rem; max-width: none; }
    .deck-body p { font-size: 1.125rem; margin-bottom: 0.8rem; }
    .deck-chips { margin-top: 0.4rem; gap: 0.5rem 1.25rem; }
    .deck-chip, .deck-trail li, .deck-foot, .deck-desks b, .deck-desks-title { font-size: 1rem; }
    .deck-flag { width: 1.4rem; height: 1rem; }
    .deck-trail { position: static; align-self: stretch; height: auto; margin-top: 1.25rem; flex-wrap: wrap; gap: 0.5rem 1rem; justify-content: flex-start; align-items: flex-start; border: 0; }
    .deck-trail li { transform: none; grid-auto-flow: column; align-items: center; justify-items: start; gap: 0.4rem; }
    .deck-foot { position: static; margin-top: 0.75rem; align-self: stretch; gap: 1rem; }
    .deck-button { font-size: 1.25rem; padding: 0.9rem 1.4rem; }
    .deck-address { font-size: 1.0625rem; }
    .deck-desks { grid-template-columns: 1fr; }
    .deck-desks a { font-size: 1rem; overflow-wrap: anywhere; }
  }
}