/* Janssens Warmtetechniek — demo
   Idea: the thermal camera. Cool winter light, night-blue ink, one heat orange for the action.
   Type: Libre Franklin 700 / Source Serif 4 (self-hosted). Structure in common.css. */

@font-face { font-family: "Libre Franklin"; src: url("../fonts/libre-franklin-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --bg: #f1f3f5;
  --surface: #e3e8ed;
  --surface-2: #d5dde4;
  --ink: #0f1b26;
  --ink-faint: #75828f;
  --muted: #47545f;
  --accent: #c8102e;
  --accent-hover: #a10c25;
  --accent-ink: #ffffff;
  --display: "Libre Franklin", "Arial Black", Arial, sans-serif;
  --text: "Source Serif 4", Georgia, serif;
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --step-head: clamp(2.25rem, 1.2rem + 3.6vw, 4.75rem);
  --margin: clamp(20px, 3vw, 48px);
  --gap: 8px;
  --section: clamp(100px, 12vw, 180px);
  --radius: 10px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --t-fast: 160ms;
}

/* ---------- hero: thermal lens ---------- */
.hero { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(24px, 4vw, 64px); align-items: center; padding: 24px var(--margin) 64px; min-height: calc(100svh - 70px); }
.hero__name { font-size: clamp(3.25rem, 1rem + 6.5vw, 8rem); line-height: 0.9; letter-spacing: -0.05em; }
.hero__lead { margin-top: 24px; max-width: 34ch; font-size: var(--step-lead); line-height: 1.35; }
.hero__actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.thermo { position: relative; --r: clamp(70px, 11vw, 140px); }
.thermo__layer { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.thermo__heat { position: absolute; inset: 0; height: auto; }
.thermo.is-live .thermo__heat { clip-path: circle(var(--r) at var(--mx) var(--my)); }
.thermo:not(.is-live) .thermo__heat { clip-path: inset(0 0 0 50%); }
.thermo__ring { display: none; }
.thermo.is-live .thermo__ring { display: block; position: absolute; left: var(--mx); top: var(--my); width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1); border: 3px solid #fff; border-radius: 50%; pointer-events: none; }
.thermo__cap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; font-size: 0.9375rem; color: var(--muted); }
.thermo__pause { min-height: 44px; padding: 0 14px; border: 0; border-radius: var(--radius); background: var(--surface); color: var(--ink); font: 700 0.875rem/1 var(--display); cursor: pointer; }
.thermo__pause:hover { background: var(--surface-2); }

/* ---------- calculator ---------- */
.calc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; padding: var(--section) var(--margin) 0; }
.calc__head { grid-column: 1 / 13; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: end; }
.calc__head p { max-width: 42ch; font-size: var(--step-lead); line-height: 1.35; }
.calc__form { grid-column: 1 / 7; display: grid; gap: 26px; align-content: start; }
.calc__form .hint { margin-top: 2px; font-size: 0.9375rem; color: var(--muted); }
.calc__out { grid-column: 7 / 13; display: grid; gap: 14px; align-content: start; padding: clamp(20px, 3vw, 36px); border-radius: var(--radius); background: var(--surface); color: var(--accent); }
.calc__out[data-level="low"] { color: #2f80c9; }
.gauge { width: min(280px, 100%); height: auto; justify-self: center; }
.gauge__fill { transition: stroke-dashoffset 700ms var(--ease-out); }
.gauge__needle { transform-origin: 120px 120px; transform-box: view-box; transition: transform 900ms cubic-bezier(0.34, 1.4, 0.64, 1); }
.calc__fit { text-align: center; color: var(--ink); font: 700 1.25rem/1.25 var(--display); }
.calc__rows { display: grid; gap: 6px; color: var(--ink); }
.calc__rows div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 14px; border-radius: 8px; background: var(--bg); }
.calc__rows dd { font: 700 1.125rem/1.2 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc__rows .calc__save { background: var(--ink); color: var(--bg); }
.calc__rows .calc__save dd { font-size: 1.5rem; }
.calc__note { font-size: 0.875rem; color: var(--muted); }
.calc__out .btn { justify-self: start; }

/* ---------- scene 1: the cycle ---------- */
.cycle { margin-top: var(--section); background: var(--ink); color: var(--bg); }
.cycle__stage { display: grid; grid-template-columns: 1fr 1.3fr; gap: 48px; align-items: center; padding: 80px var(--margin); min-height: 100svh; }
.cycle__list { margin-top: 32px; display: grid; gap: 18px; }
.cycle__list li { max-width: 40ch; padding-left: 18px; border-left: 3px solid rgba(241,243,245,0.18); color: rgba(241,243,245,0.72); transition: color 300ms, border-color 300ms; }
.cycle__list b { font-family: var(--display); color: var(--bg); }
.cycle:not(.is-live) .cycle__list li,
.cycle[data-beat="0"] [data-step="0"], .cycle[data-beat="1"] [data-step="1"], .cycle[data-beat="2"] [data-step="2"], .cycle[data-beat="3"] [data-step="3"] { color: var(--bg); border-color: #ff8a5c; }
.cycle__fig { position: relative; padding: 24px; border-radius: var(--radius); background: var(--bg); color: var(--ink); }
.cycle__temp { font: 700 clamp(3rem, 1rem + 5vw, 6rem)/1 var(--display); letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.loop { width: 100%; height: auto; margin-top: 8px; }

.winter { margin-top: var(--section); }

@media (max-width: 1080px) {
  .calc__form, .calc__out { grid-column: 1 / 13; }
}
@media (max-width: 899px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-bottom: 40px; }
  .calc__head { grid-template-columns: 1fr; }
  .cycle__stage { grid-template-columns: 1fr; gap: 20px; padding: 48px var(--margin); }
  .cycle.is-live .cycle__list { margin-top: 12px; }
  .cycle.is-live .cycle__list li { display: none; }
  .cycle.is-live[data-beat="0"] [data-step="0"], .cycle.is-live[data-beat="1"] [data-step="1"], .cycle.is-live[data-beat="2"] [data-step="2"], .cycle.is-live[data-beat="3"] [data-step="3"] { display: block; }
}
@media (max-width: 767px) {
  .hero__name { font-size: 17vw; }
}