/*
  Hero D prototype, on top of B4's hero.css (copied from site/www/css). The default is the final state: the poster with
  the stop labels. pre.js adds .intro on <html> when motion is allowed: the scene shows the clip's first frame (the broken
  path) with its gap tags; hero.js keeps .clip-wait while the clip loads, then .is-clip on the scene while it runs (video
  over the frames, gap tags leaving one by one, labels off) and .is-done when the second marble reaches the door.
  If the clip cannot play, both classes go and the final state shows.
  Positions of tags and labels are % of the 1080 x 1350 frame, from 3d/out/anim10/timeline.json (camera of v6 to v10).
*/

/* the H1 stays for search engines and screen readers; the poster line is the visible headline */
.hero-h1.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- The scene: poster (final state), the clip over it, tags and labels in % of the frame ---------- */
.scene { position: relative; aspect-ratio: 1080 / 1350; width: 100%; margin-inline: auto; }
.scene-first, .scene-poster, .scene-clip { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.scene-first, .scene-clip { display: none; background: var(--c-white); }
.scene.is-clip .scene-clip { display: block; }
.scene.is-clip .scene-poster { visibility: hidden; }
/* while the headline rises and the clip loads: the first frame, the broken path, its gap tags (hero.css hid the scene) */
.intro .win, .clip-wait .win { visibility: visible; }
.intro .scene-first, .clip-wait .scene-first { display: block; }
.intro .scene-poster, .clip-wait .scene-poster { visibility: hidden; }
.intro .stop, .clip-wait .stop { opacity: 0; pointer-events: none; }

.gap, .stop { position: absolute; z-index: 2; white-space: nowrap; }
.gap { display: none; font-size: .75rem; padding: .28rem .55rem; line-height: 1.2; transition: opacity var(--dur-ui-1) var(--ease-ui), transform var(--dur-ui-1) var(--ease-ui); }
.scene.is-clip .gap { display: inline-flex; opacity: 0; transform: var(--at) scale(.92); }
.scene.is-clip .gap.is-on { opacity: 1; transform: var(--at); }

.stop { text-decoration: none; box-shadow: var(--shadow-float); transition: opacity var(--dur-ui-2) var(--ease-ui), transform var(--dur-ui-2) var(--ease-ui), background-color var(--dur-ui-1) var(--ease-ui); }
.stop::after { content: ""; position: absolute; inset: -9px -6px; }          /* 44 px tap area around a 26 px tag */
.stop:hover { background: var(--c-menthe); }
.scene.is-clip .stop { opacity: 0; transform: var(--at) translateY(6px); pointer-events: none; }
.scene.is-clip.is-done .stop { opacity: 1; transform: var(--at); pointer-events: auto; }
#stop-pub { transition-delay: .06s; } #stop-google { transition-delay: .12s; } #stop-site { transition-delay: .18s; } #stop-porte { transition-delay: .3s; }

/* anchors: --at places the tag beside its point (right of it, left of it, or centred on it) */
.gap, .stop { transform: var(--at); }
.at-r { --at: translate(0, -50%); }
.at-l { --at: translate(-100%, -50%); }
.at-c { --at: translate(-50%, -50%); }

/* stop labels: beside each station on its outer side, never on its main object; « Chez vous » on the shop's roof,
   clear of the door and the two people. Positions from 3d/out/anim10/timeline.json (v10) */
#stop-reseaux { left: 77%; top: 74.5%; }
#stop-pub { left: 21%; top: 50%; }
#stop-google { left: 80%; top: 46.5%; }
#stop-site { left: 22.5%; top: 37%; }
#stop-porte { left: 45%; top: 8.5%; }

/* gap tags: problem then fix, one or two at a time, each on its station's side, clear of every station's main object
   and of the rail (the marbles' path); 12 px on phone, wrapped on two lines. Google sits right of the ring light and
   Site left of its table: the only room there on a phone. Both may run a little past the scene's edge (page margin). */
.gap { white-space: normal; max-width: 7.2em; line-height: 1.15; padding: .24rem .5rem; }
#gap-reseaux { left: 56%; top: 71%; }
#gap-pub { left: 44.5%; top: 62.6%; }
#gap-google { left: 84%; top: 48.5%; }
#gap-site { left: 20.5%; top: 45.7%; }

/* ---------- Phone: headline, scene, sub line, then the buttons (all on the first screen at 390 x 844) ---------- */
@media (max-width: 959.98px) {
  .title-grid { --fs: min(var(--t-poster), calc((100vw - 32px) / 8)); row-gap: 10px; }
  .hero-in { padding-bottom: 20px; }
  .win { margin-top: 0; }
  /* 390 x 844: as tall as leaves room for the sub line and the buttons; 390 x 664: headline + the whole scene */
  .scene { width: auto; max-width: 100%; height: max(min(calc(100svh - 434px), 440px), min(calc(100svh - 250px), 360px)); }
  .hero-side { gap: 14px; margin-top: 4px; }
  .hero-btns { order: 0; }
  .hero-sub { font-size: 1.0625rem; line-height: 1.45; }
}

/* ---------- Desktop: the scene on the left at full height, the headline and the rest on the right ---------- */
@media (min-width: 960px) {
  /* the scene runs to the hero's bottom edge, so the cropped phone seems to carry on below the fold */
  .hero-in { padding-bottom: 0; }
  .title-grid {
    --maq-h: max(460px, calc(100svh - 84px));
    --fs: clamp(48px, calc((100vw - var(--maq-h) * .8 - 2 * clamp(16px, 3.4vw, 64px) - clamp(32px, 5vw, 96px)) / 8.8), 120px);
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: clamp(32px, 5vw, 96px);
  }
  .win { grid-row: 1 / -1; grid-column: 1; margin: 0; align-self: end; }
  .scene { width: auto; height: var(--maq-h); }
  .stop { font-size: .9375rem; padding: .36rem .8rem; }
  .hero-title { grid-row: 2; grid-column: 2; max-width: 9em; margin-bottom: clamp(20px, 3vh, 36px); }
  .hero-side { grid-row: 3; grid-column: 2; }
  .gap { font-size: .8125rem; max-width: 9em; }
}

/* ---------- The wordmark (design-system/logo/svg/abscis-wordmark.svg), about 22 px high on phone ---------- */
.wm-logo { display: block; height: 26px; width: auto; }
@media (min-width: 960px) { .wm-logo { height: 30px; } }