/* =========================================================
   Home page only (index.html). Loaded after tokens.css and system.css.
   Nothing here belongs in the shared system. Blur stays on fixed things and hero chips.
   Animate transform and opacity only. Every animation is gated by prefers-reduced-motion.
   ========================================================= */

/* ---------- Shared section bits ---------- */
.section-head { max-width: 40rem; margin-bottom: clamp(28px, 4vw, 52px); }
.section-head .lead { margin-top: 14px; }
.section-head h2 { font-size: var(--fs-d2); }

/* =========================================================
   Hero: the heart world
   ========================================================= */
.hero {
  --fs-giant: min(31vw, 27rem);
  display: flex;
  flex-direction: column;
  padding-top: calc(16px + var(--nav-h) + 4px);
  padding-bottom: clamp(20px, 4vw, 32px);
  background:
    radial-gradient(58% 52% at 50% 44%, var(--world-2), transparent 72%),
    radial-gradient(70% 60% at 8% 100%, color-mix(in oklab, var(--world-1) 85%, transparent), transparent 70%),
    var(--world-0);
}
.hero .world__word { --word-top: calc(16px + var(--nav-h) + 28px); }

.hero__stage {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  min-height: 0;
}
.hero .hero-heart { width: min(100%, 460px); }
.hero .hero-heart::before { display: none; } /* the stage carries its own contact shadow */
/* Tinted contact shadow: the poster's heart ends at about 91% of its square */
.hero__floor {
  position: absolute;
  left: 50%;
  bottom: 3.5%;
  width: min(46%, 220px);
  height: 5%;
  min-height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in oklab, color-mix(in oklab, var(--world-1) 55%, var(--ink)) 42%, transparent), transparent);
  filter: blur(6px);
  pointer-events: none;
}
.hero__copy { position: relative; margin-top: clamp(-40px, -6vw, -8px); }
.nowrap { white-space: nowrap; }
.hero__title {
  font-size: clamp(2.05rem, 4.1vw, 3.6rem);
  line-height: 1;
  max-width: 15ch;
}
.hero__title span { display: block; }
.hero__sub {
  margin-top: 14px;
  max-width: 34ch;
  font-size: var(--fs-body-lg);
  line-height: 1.5;
  color: var(--ink-2);
}
.hero__copy .cluster { margin-top: 22px; }

/* Chips. On a phone only the live rate stays, over the heart. */
.hero .hero__chip { position: absolute; z-index: var(--z-raised); }
.hero__chip--bpm { right: 14px; top: calc(16px + var(--nav-h) + 372px); }
.hero__chip--pump { display: none; }
.hero__chip--pump:hover { background: #fff; }

/* Phone: the rate chip sits in the flow, pulled up over the bottom right corner of the
   heart's square (the poster leaves the bottom 9% empty), so it can never land on the
   headline whatever the screen height. */
@media (max-width: 599.98px) {
  .hero .hero__chip--bpm { position: relative; right: auto; top: auto; align-self: flex-end; margin: -52px 14px 10px 0; }
  .hero__copy { margin-top: 0; }
}

@media (min-width: 900px) {
  .hero { display: block; min-height: max(100dvh, 640px); padding: 0; }
  .hero .world__word { --word-top: clamp(96px, 16dvh, 170px); }
  .hero__stage {
    position: absolute;
    left: 50%;
    top: calc(50% + 28px);
    width: min(68dvh, 54vw, 740px);
    transform: translate(-50%, -52%);
    display: block;
  }
  .hero .hero-heart { width: 100%; }
  .hero__copy {
    position: absolute;
    inset-inline: 0;
    bottom: clamp(24px, 6dvh, 64px);
    margin: 0 auto;
  }
  .hero__title { font-size: clamp(2.4rem, 3.9vw, 3.6rem); }
  .hero__chip--pump { display: inline-flex; }
  .hero__chip--bpm { right: clamp(24px, 9vw, 170px); top: 25%; }
  .hero__chip--pump { right: clamp(24px, 9vw, 170px); bottom: clamp(24px, 6dvh, 64px); }
}
/* Tablet portrait: the stack is tall, so give the heart the room */
@media (min-width: 600px) and (max-width: 899.98px) {
  .hero .hero-heart { width: min(100%, 560px); }
  .hero__chip--bpm { right: clamp(24px, 12vw, 120px); top: 30%; }
  .hero__copy { margin-top: -24px; }
}

/* =========================================================
   World stack
   ========================================================= */
.panels { display: grid; gap: clamp(18px, 2.6vw, 30px); }
.home-panel { --pad: clamp(28px, 3.4vw, 48px); }
.home-panel .world-panel__body { gap: 14px; max-width: 42ch; }
.home-panel .world-panel__body h3 { font-size: var(--fs-d2); line-height: 1; }
.home-panel .world-panel__body > .cluster:last-child { margin-top: 4px; }
.home-chips { gap: 10px; margin-top: 2px; }
.home-panel .world-panel__word sub {
  font-size: 0.5em;
  vertical-align: baseline;
  position: relative;
  bottom: -0.12em;
  line-height: 0;
}

/* Phone: object first, then text. */
.home-panel .world-panel__object { height: clamp(260px, 78cqi, 380px); margin-top: clamp(12px, 3vw, 28px); }
.panel-halogen .world-panel__object { height: clamp(320px, 100cqi, 460px); }
.panel-heart .world-panel__object { height: clamp(220px, 66cqi, 320px); }

/* ----- Heart: compact, the object on the right and cropped by the frame ----- */
@media (min-width: 900px) {
  .panel-heart { min-height: clamp(360px, 31vw, 440px); }
  .panel-heart .world-panel__object {
    left: auto;
    right: -3%;
    top: -14%;
    width: 47%;
    height: 128%;
    transform: none;
  }
  .panel-heart .world-panel__body { top: 50%; bottom: auto; transform: translateY(-50%); left: var(--pad); }
}

/* ----- Acids: flask on the left, text and the live pH control on the right ----- */
.ph-card {
  position: relative;
  z-index: var(--z-raised);
  align-self: center;
  width: min(100%, 380px);
  margin: 4px 0 14px;
  padding: 12px 16px 14px;
  border-radius: var(--r-core);
  background: linear-gradient(160deg, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0.74));
  border: 1px solid rgb(255 255 255 / 0.85);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px var(--hairline), 0 18px 36px -16px var(--tint);
}
.ph-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ph-card__row label { font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); }
.ph-card__value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 1.05rem; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.ph-card__control { position: relative; height: 44px; margin-top: 4px; }
.ph-card__track {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 15px;
  height: 14px;
  border-radius: var(--r-pill);
  /* the same stops as PH_STOPS; home.js sets --scale from the real list */
  background: var(--scale, linear-gradient(90deg, #a01f24 0%, #c0272d 7.14%, #d9541f 21.43%, #dc9a1f 35.71%, #3f9e4f 50%, #1f8fa0 64.29%, #2166c4 78.57%, #6a3f9e 92.86%, #52316e 100%));
  box-shadow: inset 0 0 0 1px rgb(18 23 34 / 0.22);
}
.ph-range { position: absolute; inset: 0; --c: #d9541f; }
.ph-range::-webkit-slider-runnable-track { height: 44px; background: transparent; box-shadow: none; }
.ph-range::-moz-range-track { height: 44px; background: transparent; box-shadow: none; }
.ph-range::-webkit-slider-thumb {
  width: 44px;
  height: 44px;
  margin-top: 0;
  border: 3px solid var(--ink);
  background: radial-gradient(circle at 50% 50%, var(--c) 0 9px, #fff 10px);
  box-shadow: 0 6px 14px -4px rgb(18 23 34 / 0.4), inset 0 1px 0 #fff;
}
.ph-range::-moz-range-thumb {
  width: 38px;
  height: 38px;
  border: 3px solid var(--ink);
  background: radial-gradient(circle at 50% 50%, var(--c) 0 9px, #fff 10px);
  box-shadow: 0 6px 14px -4px rgb(18 23 34 / 0.4), inset 0 1px 0 #fff;
}
.ph-card__ticks { position: relative; height: 16px; margin-top: 2px; font-family: var(--font-mono); font-size: var(--fs-xs); line-height: 1; color: var(--ink-2); }
.ph-card__ticks span { position: absolute; top: 0; left: calc(22px + (100% - 44px) * var(--t)); transform: translateX(-50%); }

@media (min-width: 900px) {
  .panel-acids { --word-top: 7%; }
  .panel-acids .world-panel__word { right: auto; width: 56%; }
  .panel-acids .world-panel__object { left: 28%; top: 4%; width: 40%; height: 82%; }
  .panel-acids .ph-card { position: absolute; right: var(--pad); top: var(--pad); width: min(380px, 38%); margin: 0; }
  .panel-acids .world-panel__body { right: var(--pad); left: auto; }
}

/* ----- Halogen: tube in the middle, text below left (CARTOON composition) ----- */
.hal-callout {
  position: relative;
  z-index: var(--z-raised);
  align-self: center;
  margin-top: -34px;
  background: linear-gradient(160deg, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0.74));
}
.tb-drop { transform-box: fill-box; transform-origin: 50% 0; }
@media (prefers-reduced-motion: no-preference) {
  /* Reason: it shows the action, bromine water being added to the tube. */
  @keyframes tb-drip {
    0%   { opacity: 0; transform: scale(0.4); }
    20%  { opacity: 1; transform: scale(1); }
    38%  { opacity: 1; transform: translateY(0); }
    62%  { opacity: 1; transform: translateY(142px); }
    66%  { opacity: 0; transform: translateY(142px); }
    100% { opacity: 0; transform: translateY(142px); }
  }
  .tb-drop { animation: tb-drip 3.2s cubic-bezier(0.4, 0, 0.9, 0.7) infinite; }
}
@media (min-width: 900px) {
  .panel-halogen { min-height: clamp(660px, 54vw, 800px); --word-top: 7%; }
  .panel-halogen .world-panel__object { left: 50%; top: 2%; width: 34%; height: 88%; }
  .hal-callout {
    position: absolute;
    left: calc(50% + 10%);
    top: 46%;
    margin: 0;
  }
}

/* =========================================================
   Coming next
   ========================================================= */
.next { overflow: clip; padding-bottom: clamp(150px, 19vw, 300px); }
.next__word { --fs-giant: min(26vw, 21rem); top: auto; bottom: -0.08em; }
.planned { display: grid; gap: clamp(28px, 4vw, 56px); }
.planned__group { font-size: var(--fs-d3); letter-spacing: -0.02em; margin-bottom: 8px; }
.planned__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline-2); }
.planned__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
  font-weight: 500;
  color: var(--ink);
}
.planned__list .icon { width: 26px; height: 26px; color: var(--ink-2); }
.planned__tag { margin-left: auto; font-size: var(--fs-sm); font-weight: 400; color: var(--ink-2); }
@media (min-width: 768px) {
  .planned { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 7vw, 112px); max-width: 980px; }
}