/* FyreFly Systems: the home page (/scientific/). Loaded by scripts/scientific-pages/home.html only.
   Tokens only, one weight. The hero window, the split and the slot headline come from
   /shared/ff/bundle.css and bundle.js (stage); this file adds what the home page needs on top:
   the video panel, accessible term tooltips and the tiles. No scroll snapping: the live site's snap makes
   wheel scrolling through the hero sticky, so the hero scrubs with the scroll and the button and dots jump.
   Prefix home-. */

body[data-page="home"] {
  /* One place to follow the accent if the global tokens rename it. */
  --home-accent: var(--ff-accent, var(--accent));
  --home-accent-ink: var(--ff-accent-ink, var(--accent-ink));
}

/* ===== Story split: the video panel ===== */
.home-media { background: var(--stage-300); }
.home-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  background: var(--stage-300);
}
.home-video__toggle {
  position: absolute;
  z-index: 3;
  right: var(--space-4);
  bottom: var(--space-4);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--stage-100) 85%, transparent);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-hover) var(--ease-plain), border-color var(--dur-hover) var(--ease-plain);
}
.home-video__toggle[hidden] { display: none; }
.home-video__toggle:hover { background: var(--stage-100); border-color: var(--home-accent); }
.ff-page .home-video__toggle:focus-visible { outline: 3px solid var(--focus-on-image, var(--focus)); outline-offset: 3px; }
.home-video__toggle svg { display: block; width: 16px; height: 16px; fill: currentColor; }
.home-video__toggle .is-play { display: none; }
.home-video__toggle[data-state="paused"] .is-play { display: block; }
.home-video__toggle[data-state="paused"] .is-pause { display: none; }

/* The story column has to hold its text inside the one-screen stage: tighten the vertical
   padding with the screen's height instead of letting overflow hide the last lines. */
.ff-stage.is-staged .ff-split__text {
  padding-top: clamp(var(--space-5), 8vh, var(--space-9));
  padding-bottom: clamp(var(--space-5), 8vh, var(--space-9));
}
.home-more { margin-top: var(--space-5); }
@media (min-width: 861px) and (max-height: 820px) {
  .ff-stage.is-staged .ff-lore { margin-top: var(--space-5); }
  .ff-stage.is-staged .ff-lore__card { padding: var(--space-4) var(--space-5); }
  .ff-stage.is-staged .ff-lore__body { font-size: 15px; line-height: 1.6; }
}
@media (min-width: 861px) and (max-height: 700px) {
  .ff-stage.is-staged .ff-headline { font-size: 32px; }
  .ff-stage.is-staged .ff-lore__body { font-size: 14px; line-height: 1.55; }
}

/* ===== Term tooltips (SOTA, HPC): reachable by keyboard and touch =====
   home.js links each term to its tip (aria-describedby), opens it on tap for touch,
   closes it with Escape and keeps it inside the column (--tip-x). */
body[data-page="home"] .ff-term:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }
body[data-page="home"] .ff-term__tip {
  transform: translateX(calc(-50% + var(--tip-x, 0px))) translateY(4px);
}
body[data-page="home"] .ff-term__tip::before {   /* bridge over the gap so the pointer can reach the tip */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
}
body[data-page="home"] .ff-term__tip::after { left: calc(50% - var(--tip-x, 0px)); }
body[data-page="home"] .ff-term:hover .ff-term__tip,
body[data-page="home"] .ff-term:focus-visible .ff-term__tip,
body[data-page="home"] .ff-term.is-open .ff-term__tip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(calc(-50% + var(--tip-x, 0px)));
}
/* Touch has no hover: a tap toggles the tip, and the emulated hover must not hold it open. */
@media (hover: none) {
  body[data-page="home"] .ff-term:hover:not(.is-open):not(:focus-visible) .ff-term__tip { opacity: 0; visibility: hidden; pointer-events: none; }
}
/* Escape dismisses it while the pointer or focus stays on the term. */
body[data-page="home"] .ff-term.is-dismissed .ff-term__tip { opacity: 0; visibility: hidden; pointer-events: none; }

/* ===== Tiles: the whole card is the link ===== */
.home-tile {
  display: block;
  color: inherit;
  text-decoration: none;
  /* ff-item already carries the hairline; give the tile room to breathe on hover. */
  padding-bottom: var(--space-5);
  transition: color var(--dur-hover) var(--ease-plain);
}
.home-tile h3::after {
  content: '→';
  content: '→' / '';
  display: inline-block;
  margin-left: var(--space-2);
  color: var(--home-accent-ink);
  transition: transform var(--dur-cta) var(--ease-out-quart);
}
.home-tile:hover h3, .home-tile:focus-visible h3 { color: var(--home-accent-ink); }
.home-tile:hover h3::after, .home-tile:focus-visible h3::after { transform: translateX(var(--space-2)); }
.ff-page .home-tile:focus-visible { outline-offset: 8px; }

/* ===== Phonos split: scientific.css centres the old head-in-profile photo at 20%; the chip render is centred ===== */
#platform .ff-split__media img { object-position: center; }

/* ===== Alef teaser ===== */
.home-alef { margin-top: var(--space-5); }
.home-alef .ff-note { margin-top: var(--space-4); }

@media (max-width: 860px) {
  /* Not staged on small screens: the video is a normal block under the story. */
  .home-media { min-height: 0; aspect-ratio: 4 / 5; }
  .home-video__toggle { right: var(--space-3); bottom: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .home-tile h3::after, .home-video__toggle { transition: none; }
  .home-tile:hover h3::after, .home-tile:focus-visible h3::after { transform: none; }
}

/* Scrolling on the landing page: three stops (hero, mission, contact) the scroll settles on, and a
   contact block that fills the screen so the page ends on it instead of on a sliver of footer. */
/* Mouse and trackpad only: on touch screens snapping fights momentum scrolling, and
   overscroll-behavior: none would also switch off pull-to-refresh. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  html:has(.ff-stage) { scroll-snap-type: y proximity; }
}
@media (hover: hover) and (pointer: fine) {
  html:has(.ff-stage) body { overscroll-behavior-y: none; }
}
.ff-stage { scroll-snap-align: start; }
body[data-page="home"] .ff-contact,
.ff-stage ~ .ff-contact {
  scroll-snap-align: start;
  min-height: calc(var(--ff-vh) - var(--topbar-height) - var(--ff-footer-h, 0px));
  align-content: center;
}