/* The home, after the designer's feedback of 01/10 (src/assets/home-anim.js draws and moves it). The devices keep the
   board's style: ink only, graphite on the light page, silver on the dark one. The accent (--acc, site.css) lights the
   scene: the halo behind the Duo and the history's device, the system's controls in the generic app, the slider.
   Fills take the accent (--acc); strokes, outlines and symbols its line shade (--acc-line), text its text shade
   (--acc-text): a light accent reads a touch deeper in lines and text (site.css).
   Default: the still picture (no JavaScript, or reduced motion): the Duo open in landscape, its bars on the side, the
   halo still; the six cards of the history. The script adds .is-live. */

.ha, .ha-history, .hp {
  --m1: var(--ink); --m2: var(--ink-2); --m3: var(--ink-3); --m4: #a3a29b;
  --glass: #0b0b0a; --off: #1b1b19; --speaker: #2b2a27; --cam: #030303; --key: #121211;
  --glint: rgba(251, 251, 249, .5); --glyph: rgba(236, 235, 230, .5);
  --edge: rgba(20, 20, 18, .55); --shadow-l: rgba(20, 20, 18, .22); --shadow-c: rgba(20, 20, 18, .42);
  --gleam: #fbfbf9; --gleam-o: .085;
  --drop: rgba(20, 20, 18, .34);
  /* The light behind the devices: the accent, clearly visible (designer, 01/10: « je veux voir le halo »). */
  --glow-1: color-mix(in srgb, var(--acc, #c2410c) 50%, transparent);
  --glow-2: color-mix(in srgb, var(--acc, #c2410c) 34%, transparent);
  --glow-3: color-mix(in srgb, var(--acc, #c2410c) 14%, transparent);
  --ha-ease: cubic-bezier(.22, 1, .36, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.ha, .ha-history, .hp) {
    --m1: #7a7973; --m2: var(--ink-3); --m3: var(--ink-2); --m4: #fbfbf9;
    --glass: #060605; --off: #141412; --speaker: #262523; --cam: #020202; --key: #0c0c0b;
    --edge: rgba(0, 0, 0, .55); --shadow-l: rgba(0, 0, 0, .5); --shadow-c: rgba(0, 0, 0, .75); --gleam-o: .06;
    --drop: rgba(0, 0, 0, .6);
    --glow-1: color-mix(in srgb, var(--acc, #fb923c) 44%, transparent);
    --glow-2: color-mix(in srgb, var(--acc, #fb923c) 28%, transparent);
    --glow-3: color-mix(in srgb, var(--acc, #fb923c) 11%, transparent);
  }
}
:root[data-theme="dark"] :is(.ha, .ha-history, .hp) {
  --m1: #7a7973; --m2: var(--ink-3); --m3: var(--ink-2); --m4: #fbfbf9;
  --glass: #060605; --off: #141412; --speaker: #262523; --cam: #020202; --key: #0c0c0b;
  --edge: rgba(0, 0, 0, .55); --shadow-l: rgba(0, 0, 0, .5); --shadow-c: rgba(0, 0, 0, .75); --gleam-o: .06;
  --drop: rgba(0, 0, 0, .6);
  --glow-1: color-mix(in srgb, var(--acc, #fb923c) 44%, transparent);
  --glow-2: color-mix(in srgb, var(--acc, #fb923c) 28%, transparent);
  --glow-3: color-mix(in srgb, var(--acc, #fb923c) 11%, transparent);
}

/* ---- the devices */
.ha-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ha-s1 { stop-color: var(--m1); } .ha-s2 { stop-color: var(--m2); } .ha-s3 { stop-color: var(--m3); } .ha-s4 { stop-color: var(--m4); }
.ha-sg { stop-color: var(--gleam); } .ha-sgo { stop-opacity: var(--gleam-o); }
.ha-edge { fill: none; stroke: var(--edge); stroke-width: .22; }
.ha-bevel { fill: none; stroke: var(--m4); stroke-opacity: .55; stroke-width: .16; }
.ha-rim { fill: var(--m2); }
.ha-glass, .ha-dark { fill: var(--glass); }
.ha-off { fill: var(--off); }
.ha-speaker { fill: var(--speaker); }
.ha-cam { fill: var(--cam); }
.ha-glint { fill: var(--glint); }
.ha-key { fill: var(--key); }
.ha-ring { fill: none; stroke: var(--m2); stroke-opacity: .7; stroke-width: .2; }
.ha-glyph { fill: none; stroke: var(--glyph); stroke-width: .22; }
.ha-crease { stroke: var(--gleam); stroke-opacity: .05; stroke-width: .3; }
.ha-shadow-l { fill: var(--shadow-l); }
.ha-shadow-c { fill: var(--shadow-c); }
.ha-shade { fill: #000; }

/* ---- the generic app, as in the pattern demos: grey shapes, the system's controls in the accent (points) */
.hu-bg { fill: var(--bg); }
.hu-soft { fill: var(--bg-3); }
.hu-faint { fill: color-mix(in srgb, var(--bg-3) 55%, var(--bg)); }
.hu-line { fill: var(--line); }
.hu-bar { fill: color-mix(in srgb, var(--bg-2) 80%, var(--bg)); }
.hu-ink { fill: var(--ink); }
.hu-ink-soft { fill: color-mix(in srgb, var(--ink) 72%, var(--bg)); }
.hu-btn, .hu-cap { fill: color-mix(in srgb, var(--acc, #c2410c) 10%, var(--raised, var(--bg))); stroke: var(--acc-line, var(--acc, #c2410c)); stroke-width: 3.4; }
.hu-main { fill: var(--acc, #c2410c); }
.hu-gl { fill: none; stroke: var(--acc-line, var(--acc, #c2410c)); stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.hu-gl-sel { stroke-width: 2.8; }
.hu-gl-on { stroke: var(--acc-ink, var(--bg)); stroke-width: 2.6; }
.hu-gl-ink { stroke: var(--ink); stroke-width: 2.4; }
.hu-time { fill: var(--ink); font-family: var(--font); font-weight: 600; letter-spacing: -0.02em; }
/* The screen's content, « cards » (the designer's choice, 01/10; piste 1 of the board): empty cards on the site's grey
   surfaces, filter pills, the first one in ink, the last one dashed. */
.hu-card1 { fill: var(--bg-2); }
.hu-card2 { fill: var(--bg-3); }
.hu-card3 { fill: color-mix(in srgb, var(--ink) 4%, var(--bg)); }
.hu-pill { fill: var(--raised, var(--bg)); stroke: var(--line); stroke-width: 1.2; }
.hu-pill-i { fill: var(--ink-3); }
.hu-pill-t { fill: color-mix(in srgb, var(--ink) 55%, var(--bg)); }
.hu-pill-on { fill: var(--ink); }
.hu-pill-on-i, .hu-pill-on-t { fill: var(--bg); }
.hu-pill-soon { fill: none; stroke: var(--ink-3); stroke-width: 1.2; stroke-dasharray: 3 3; }
.hu-pill-soon-i, .hu-pill-soon-t { fill: color-mix(in srgb, var(--ink-3) 60%, var(--bg)); }

/* ---- the first screen: the promise on the left; iPhone Duo on the right, its stage running on to the window's right
   edge. The stage is a container: --mm is one millimetre of the device, so the whole tour (the open device turning,
   202.4 mm across) fits a square of 206 mm. */
.ha {
  position: relative; display: grid; grid-template-columns: var(--cols); column-gap: var(--col-gap);
  grid-template-rows: minmax(0, 1fr); align-items: center;
  min-height: calc(100svh - var(--head-h, 64px)); padding-block: 12px 28px;
}
.ha-head { grid-column: 1; grid-row: 1; align-self: center; position: relative; z-index: 2; padding-bottom: 24px; }
/* The H1 keeps the size every other page gives it (site.css, h1 and .page-head; designer, 01/10: it read smaller). */
.ha-head h1 { margin: 0 0 22px; }
.ha-head h1 > span { display: block; }
.ha-head .answer { max-width: 30rem; margin: 0 0 18px; }
.ha-stage { margin-right: calc(-1 * max(0px, var(--gutter) + (100vw - var(--wide) - 2 * var(--gutter)) / 2 - 24px)); }
.ha-stage {
  grid-column: 2; grid-row: 1; align-self: stretch; position: relative; min-height: 420px;
  container-type: size; --mm: calc(min(100cqw, 100cqh) / 206);
}

/* The light: a radial glow in the accent, centred on the Duo. Once the tour has played it shrinks and grows back,
   slowly, forever (designer, 01/10); still without JavaScript or with reduced motion. At its largest it stops short of
   the window's edges (the stage is at least 16 px from them), so the page never scrolls sideways. */
.ha-glow {
  position: absolute; left: 50%; top: 50%; width: min(calc(var(--mm) * 236), calc(100cqw + 32px)); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--glow-1) 0%, var(--glow-2) 45%, var(--glow-3) 75%, transparent 100%);
}
.ha-glow.is-breathing { animation: ha-breathe 5.5s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
@keyframes ha-breathe { from { scale: 1; opacity: 1; } to { scale: .8; opacity: .8; } }

/* The depth: real 3D. The scene tilts a few degrees with the pointer; the device turns in the page's plane; its cover
   swings on the hinge, toward the viewer. */
.ha-view { position: absolute; inset: 0; perspective: calc(var(--mm) * 700); transition: opacity .18s ease; }
.ha-view.is-fading { opacity: 0; }
.ha-scene { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.hd { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.hd-dev {
  position: absolute; left: 0; top: 0; width: calc(var(--mm) * 164.6); height: calc(var(--mm) * 117.8);
  transform-origin: 0 0; transform-style: preserve-3d;
  transform: translate(calc(var(--mm) * -82.3), calc(var(--mm) * -58.9));
}
.hd-half { position: absolute; top: 0; width: 50%; height: 100%; transform-style: preserve-3d; }
.hd-right { left: 50%; }
.hd-left { left: 0; transform-origin: 100% 50%; }
.hd-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.hd-back { transform: rotateY(180deg); }
.hd svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* The shadow the device casts on the light behind it: its footprint, blurred, a little lower in the page. */
.hd-shadow {
  position: absolute; left: 0; top: 0; width: calc(var(--mm) * 158.6); height: calc(var(--mm) * 111.8);
  transform-origin: 0 0; border-radius: calc(var(--mm) * 12); background: var(--drop); filter: blur(calc(var(--mm) * 4.5));
  transform: translate(0, calc(var(--mm) * 5)) translate(calc(var(--mm) * -79.3), calc(var(--mm) * -55.9)) translateZ(calc(var(--mm) * -4));
}
/* Under the Duo, no caption (designer, 01/10): the label of its pose, then the Replay button. The group hangs just
   under the device: --ha-low is the device's lower edge in mm from the stage's centre (set by the script as the device
   moves; the still picture's by default), plus a gap of 9 mm. */
.ha-under {
  position: absolute; left: 50%; top: calc(50% + var(--mm) * (var(--ha-low, 58.9) + 9)); translate: -50% 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 12px; pointer-events: none;
}
.ha-pose { margin: 0; font: 400 var(--fs-label)/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.ha-pose [hidden] { display: none; }
.ha-replay { display: inline-flex; align-items: center; gap: 8px; pointer-events: auto; transition: opacity .45s var(--ha-ease), background .15s, border-color .15s, color .15s; }
.ha-replay[hidden] { display: none; }
.ha-replay.is-waiting { opacity: 0; pointer-events: none; }
.ha-replay svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ha-replay:hover { background: var(--acc, #c2410c); border-color: var(--acc, #c2410c); color: var(--acc-ink, #fff); }

/* Before the script runs, with scripting on and motion welcome: the tour's first frame, closed in portrait (the closed
   device's centre at the stage's centre, the cover on the open device, the inner display off). */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .ha-stage:not(.is-live) .hd-dev { transform: translate(calc(var(--mm) * -122.55), calc(var(--mm) * -58.9)); }
  .ha-stage:not(.is-live) .hd-left { transform: rotateY(180deg); }
  .ha-stage:not(.is-live) .hd-right { transform: translateZ(calc(var(--mm) * -1.6)); }
  .ha-stage:not(.is-live) [data-layer^="inner"] { opacity: 0; }
  .ha-stage:not(.is-live) .hd-shadow { width: calc(var(--mm) * 78.1); transform: translate(0, calc(var(--mm) * 5)) translate(calc(var(--mm) * -39.05), calc(var(--mm) * -55.9)) translateZ(calc(var(--mm) * -4)); }
  .ha-stage:not(.is-live) .ha-pose { opacity: 0; }
  .ha-head h1, .ha-head .answer, .ha-head .page-meta, .ha-stage { animation: ha-in .7s var(--ha-ease) both; }
  .ha-head .answer, .ha-head .page-meta { animation-delay: 80ms; }
  .ha-stage { animation-delay: 160ms; }
}
@keyframes ha-in { from { opacity: 0; filter: blur(10px); transform: translateY(12px); } to { opacity: 1; filter: none; transform: none; } }

/* Narrower: the promise first, then the Duo across the column. */
@media (max-width: 900px) {
  /* The bottom padding keeps the label and the Replay button off the next section's rule. */
  .ha { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; min-height: 0; padding-block: 28px 44px; }
  .ha-head { grid-column: 1; grid-row: 1; padding-bottom: 8px; }
  /* The stage takes its height from its aspect ratio, so it is not stretched to its row: stretched in a row of auto
     height, Safari takes the stage's width from that height through the ratio, and the stage collapses to 0 × 0. */
  .ha-stage { grid-column: 1; grid-row: 2; align-self: start; margin-right: 0; min-height: 0; aspect-ratio: 1 / .82; }
}
@media (max-width: 600px) {
  .ha-head h1 { margin-bottom: 16px; }
  .ha-stage { aspect-ratio: 1; }
}

/* ---- the history: one device and a slider, one card at a time (with the script); the six cards without it. */
.hh-stage { position: relative; height: clamp(300px, 46vw, 460px); }
.hh-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* The halo follows the device (eraGlow in home-anim.js, designer, 01/10): the hero's light, the same stops; the last
   one is the accent at no opacity, so the edge does not grey as an SVG gradient fades. */
.hh-halo { fill: url(#hh-glow); }
.hh-g1 { stop-color: var(--glow-1); } .hh-g2 { stop-color: var(--glow-2); } .hh-g3 { stop-color: var(--glow-3); }
.hh-g0 { stop-color: var(--acc, #c2410c); stop-opacity: 0; }
.hh-control { margin-top: 18px; }
.hh-control .lbl { display: block; margin: 0 0 10px; color: var(--ink-3); }
.hh-range input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--acc) var(--hh-p, 0%), var(--bg-3) var(--hh-p, 0%)); }
.hh-range input[type="range"]::-moz-range-track { background: var(--bg-3); }
.hh-range input[type="range"]::-moz-range-progress { height: 4px; border-radius: 99px; background: var(--acc); }
.hh-range input[type="range"]::-webkit-slider-thumb { background: var(--raised); box-shadow: 0 0 0 2px var(--acc-line, var(--acc)), var(--shadow-sm); }
.hh-range input[type="range"]::-moz-range-thumb { background: var(--raised); box-shadow: 0 0 0 2px var(--acc-line, var(--acc)), var(--shadow-sm); }
.hh-range input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--acc-line, var(--acc)), 0 0 0 5px color-mix(in srgb, var(--acc) 30%, transparent); }
.hh-range input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--acc-line, var(--acc)), 0 0 0 5px color-mix(in srgb, var(--acc) 30%, transparent); }
.hh-range .tick.is-current { color: var(--acc-text, var(--acc)); }
.hh-range .tick.is-current::before { background: var(--acc-line, var(--acc)); }
@media (max-width: 520px) { .hh-range .tick:not(:first-child):not(:last-child) { font-size: var(--fs-label); } }

.ha-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.ha-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-top: 18px; border-top: 1px solid var(--line); }
.ha-card-art { height: 220px; margin-bottom: 8px; display: flex; align-items: flex-end; justify-content: center; }
.ha-card-art svg { height: 100%; width: auto; overflow: visible; }
.ha-card-text { display: flex; flex-direction: column; gap: 8px; }
.ha-card-year { margin: 0; font: 400 var(--fs-label)/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); }
.ha-card-year .year { font: inherit; color: var(--acc-text, var(--acc)); }
.ha-card h3 { margin: 0; font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.02em; }
.ha-card p { margin: 0; color: var(--ink-2); font-size: var(--fs-ui); line-height: 1.55; }
.ha-card .ha-card-meta { font: 400 var(--fs-mono)/1.5 var(--mono); color: var(--ink-3); }
.ha-card .ha-card-src { padding-top: 6px; font: 400 var(--fs-mono)/1.5 var(--mono); color: var(--ink-3); }
.ha-card-src .src a { color: var(--ink-2); }
@media (max-width: 960px) { .ha-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ha-cards { grid-template-columns: minmax(0, 1fr); } .ha-card-art { height: 200px; } }

/* Live: the device and the slider on the left, the era's card on the right; stacked on a phone. */
.hh.is-live { display: grid; grid-template-columns: var(--cols); column-gap: var(--col-gap); align-items: center; }
.hh.is-live .hh-stage { grid-column: 1; grid-row: 1; }
.hh.is-live .hh-control { grid-column: 1; grid-row: 2; }
.hh.is-live .ha-cards { grid-column: 2; grid-row: 1 / span 2; display: block; align-self: center; }
.hh.is-live .ha-card { padding-top: 0; border-top: 0; gap: 10px; }
.hh.is-live .ha-card[hidden] { display: none; }
.hh.is-live .ha-card-art { display: none; }
.hh.is-live .ha-card h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -0.025em; }
.hh.is-live .ha-card p:not(.ha-card-year):not(.ha-card-meta):not(.ha-card-src) { font-size: var(--fs-body); }
@media (prefers-reduced-motion: no-preference) {
  .hh.is-live .ha-card.is-current { animation: ha-in .5s var(--ha-ease) both; }
}
@media (max-width: 760px) {
  .hh.is-live { grid-template-columns: minmax(0, 1fr); }
  .hh.is-live .hh-stage { grid-column: 1; grid-row: 1; }
  .hh.is-live .hh-control { grid-column: 1; grid-row: 2; }
  .hh.is-live .ha-cards { grid-column: 1; grid-row: 3; margin-top: 28px; }
}