/* ============================================================================
   felixihno.com 2027 · home.css · rules only the homepage needs
   Loaded after site.css on index.html (body.home). Tokens only: no colour value
   below this line. Every motion here keeps the end state as the default, is off
   under prefers-reduced-motion, and sits behind @supports where not baseline.

   Contents
     00 bands + demo        (surface bands for the two proofs, the 40-bar wave)
     01 hero                (Zielgruppen-Zeile, phone portrait, text-box)
     02 the three fields    (Gefunden werden, tool rows with drawn stills)
     04 Zahlen              (the report counts in, square by square, on scroll)
     05 Ablauf              (one thread, open at Loslassen; decision mark + its legend)
     07 Wer das macht       (two-tone statement)
     08 FAQ                 (<details name>, ::details-content)
     09 closing band        (door + footer on night)
   Moved to site.css on 2026-10-14: demo label again-a, split head margin, inline arrow
   links, edge-to-edge card stills, .monoline, page transitions, grow keyframes, hero settle.
   Removed 2026-10-14: the example-card figures (Beispiele is a placeholder for now).
   ========================================================================== */


/* ── 00 bands + demo ────────────────────────────────────────────────────────────
   The two proofs (demo, Zahlen) sit on surface bands, the telling sections on canvas,
   so the page alternates between showing and telling. The first band meets the night
   hero without a light rule on its top edge.                                      */
.hero + main > .section--surface:first-child, main > .hero + .section--surface { box-shadow: 0 1px 0 var(--c-line); }
/* the voice note's wave runs the full card width (40 bars, evenly spread) */
.home .demo__wave { justify-content: space-between; gap: 0; }


/* ── 01 hero ───────────────────────────────────────────────────────────────────
   The audience line is part of the hero (sans, 15 px, ink-2), not a code label; mono
   stays for echt / erfunden marks and data. Layout (phone cover, desktop anchor) and
   entrance motion live in site.css §08.                                            */
.home .hero .eyebrow { font: var(--w-med) var(--fs-ui)/1.4 var(--font-sans); color: var(--c-text-2); text-wrap: balance; }
/* Signatur A (js/signatur.js): a canvas over the portrait (same box, same crop) lets the dots
   gather once, then fades out over the image (.is-done) and is removed. The canvas paints
   the night ground itself, so the image underneath is never hidden or touched: it stays the
   LCP element and keeps its alt. It fades in over 200 ms on arrival. Without the script, nothing. */
.hero__portrait canvas { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity var(--dur) var(--ease); }
@starting-style { .hero__portrait canvas { opacity: 0; } }
.hero__portrait.is-done canvas { opacity: 0; }
@supports (text-box: trim-both cap alphabetic) {
  .home .hero .h1 { text-box: trim-end cap alphabetic; }   /* new copy 15.10.: trim-start removed, overlapped the eyebrow once the H1 wraps */
  @media (min-width: 900px) {
    .home .hero__title { gap: var(--s-7); }
    .home .hero__body { gap: var(--s-8); }
  }
}


/* ── 02 the three fields ───────────────────────────────────────────────────── */
/* "Gefunden werden": same column, one rule above, the H3 opens it */
.found { display: grid; gap: var(--s-4); margin-top: var(--s-12); padding-top: var(--s-10); box-shadow: inset 0 1px 0 var(--c-line); }
.found .section__foot { margin-top: var(--s-2); }
.found__text { max-width: var(--measure); color: var(--c-text-2); }

/* tool rows: a small drawn still, then the text; the whole row is the link */
.tools { list-style: none; padding: 0; display: grid; max-width: 40rem; }
.tool {
  position: relative; display: grid; grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--s-4); align-items: start; padding-block: var(--s-5);
  box-shadow: inset 0 -1px 0 var(--c-line);
}
.tool:first-child { box-shadow: inset 0 1px 0 var(--c-text), inset 0 -1px 0 var(--c-line); }
.tool--plain { grid-template-columns: minmax(0, 1fr); }
.tool__thumb {
  aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden;
  display: grid; place-items: center; color: var(--c-text-3);
  background: var(--c-inset); box-shadow: inset 0 0 0 1px var(--c-hairline);
  transition: box-shadow var(--dur) var(--ease);
}
.tool__thumb svg { width: 100%; height: 100%; }
.tool__ink { color: var(--c-text); fill: currentColor; }
path.tool__ink { fill: none; stroke: currentColor; }
.tool__body { display: grid; gap: var(--s-1); padding-top: 2px; }
.tool__title { font-size: 1.0625rem; line-height: var(--lh-snug); font-weight: var(--w-semi); letter-spacing: var(--track-tight); }
.tool__link { color: inherit; text-decoration: none; }
.tool__link::after { content: "\2009→"; display: inline-block; transition: transform var(--dur) var(--ease); }
.tool__link::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.tool__link:focus-visible { outline: 2px solid var(--c-text); outline-offset: 3px; }
.tool:has(.tool__link:focus-visible) { outline: 2px solid var(--c-text); outline-offset: 3px; border-radius: var(--r-sm); }
@media (hover: hover) and (pointer: fine) {
  .tool:has(.tool__link):hover .tool__link::after { transform: translateX(3px); }
  .tool:has(.tool__link):hover .tool__thumb { box-shadow: inset 0 0 0 1px var(--c-text-3); }
}
.tool__text { color: var(--c-text-2); font-size: var(--fs-ui); line-height: var(--lh-body); }
.tools__close { margin-top: var(--s-6); max-width: 40rem; font-weight: var(--w-med); }
@media (min-width: 560px) {
  .tool { grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s-6); }
  .tool--plain { grid-template-columns: 8.5rem minmax(0, 1fr); }
  .tool--plain .tool__text { grid-column: 2; }
}


/* ── 04 Zahlen: the report counts in ──────────────────────────────────────────
   One square per inquiry appears at a time, in reading order (--i), while the figure
   scrolls through: rows first, then the strip (grey baseline, then the new ones in ink),
   then "+4". Squares only fade in place, they are never scaled. The end state is the
   default: without view() (Firefox), under reduced motion, or once a script arms the
   figure (#bericht-figur.is-armed, it then runs its own count) nothing here applies. */
.report-after { margin-top: var(--s-5); max-width: var(--measure); color: var(--c-text-2); font-size: var(--fs-ui); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .home .report { view-timeline: --bericht block; }
    .home .report:not(.is-armed) .marks > i {
      animation: report-tick linear both;
      animation-timeline: --bericht;
      animation-range: cover calc(16% + var(--i) * .6%) cover calc(16.4% + var(--i) * .6%);
    }
    .home .report:not(.is-armed) .report__strip-diff {
      animation: fade linear both;
      animation-timeline: --bericht;
      animation-range: cover 43% cover 45%;
    }
  }
}
@keyframes report-tick { from { opacity: 0; translate: 0 -3px; } }
/* Signatur B (js/signatur.js): the script arms the figure (.is-armed: the scroll count above
   stands down, the squares wait unseen) and runs it once when half of it is in view (.is-run):
   the rows square by square (--i, 240 ms each, 55 ms apart), then the week-1 baseline at once,
   then the new squares one by one (42 = --i of the first new square), then "+4".
   "Nochmal zählen" restarts it; the button exists only where the script runs: with scripting its
   place is kept from the first paint (no shift), under reduced motion it is gone (site.css). */
@media (prefers-reduced-motion: no-preference) {
  .report.is-armed:not(.is-run) :is(.marks > i, .report__strip-base, .report__strip-diff) { opacity: 0; }
  .report.is-run .marks > i { animation: report-tick 240ms var(--ease) calc(var(--i) * 55ms) both; }
  .report.is-run .report__strip .is-base { animation-delay: 1500ms; }
  .report.is-run .report__strip .is-new { animation-delay: calc(1700ms + (var(--i) - 42) * 55ms); }
  .report.is-run .report__strip-base { animation: fade 240ms var(--ease) 1500ms both; }
  .report.is-run .report__strip-diff { animation: fade 240ms var(--ease) 2150ms both; }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .report__replay[hidden] { display: inline-flex; visibility: hidden; }
}
.report__replay { margin-top: var(--s-3); padding: 0; border: 0; background: none; font-family: inherit; }
@media (hover: hover) and (pointer: fine) {
  .report__replay:hover { color: var(--c-text-2); }
  .report__replay:hover svg { transform: translateX(2px); }
}


/* ── 05 Ablauf: one thread, open at Loslassen ──────────────────────────────────
   The segments of the kit's timeline grow in order as the list scrolls through and
   the last one fades out instead of ending in a box. Without view(): full thread. */
.steps--thread .step:last-child::before {
  content: "";
  -webkit-mask-image: linear-gradient(180deg, black 10%, transparent 90%);
          mask-image: linear-gradient(180deg, black 10%, transparent 90%);
}
@media (min-width: 900px) {
  .steps--thread .step:last-child::before {
    -webkit-mask-image: linear-gradient(90deg, black 10%, transparent 95%);
            mask-image: linear-gradient(90deg, black 10%, transparent 95%);
  }
}
/* the thread a shade firmer than a hairline, so its growth can be seen */
.steps--thread .step::before { background: color-mix(in oklab, var(--c-text-3) 45%, var(--c-line-strong)); }
/* the owner's decision inside "Bauen" (approval of the preview): the plan's ●, and its
   legend at the head of the foot line, so the red square is read, not guessed */
.decide, .steps__key::before {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  background: var(--c-verdict); vertical-align: .05em;
}
.decide { margin-inline-start: .3em; }
.steps--thread + .steps__foot { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-6); }
.steps__key { color: var(--c-text); }
.steps__key::before { content: ""; margin-inline-end: var(--s-2); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .steps--thread { view-timeline: --ablauf block; }
    .steps--thread .step::before {
      transform-origin: center top;
      animation: grow-y linear both;
      animation-timeline: --ablauf;
    }
    .steps--thread .step:nth-child(1)::before { animation-range: cover 12% cover 26%; }
    .steps--thread .step:nth-child(2)::before { animation-range: cover 26% cover 40%; }
    .steps--thread .step:nth-child(3)::before { animation-range: cover 40% cover 54%; }
    .steps--thread .step:nth-child(4)::before { animation-range: cover 54% cover 68%; }
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 900px) {
    .steps--thread .step::before { transform-origin: left center; animation-name: grow-x; }
    .steps--thread .step:nth-child(1)::before { animation-range: cover 20% cover 28%; }
    .steps--thread .step:nth-child(2)::before { animation-range: cover 28% cover 36%; }
    .steps--thread .step:nth-child(3)::before { animation-range: cover 36% cover 44%; }
    .steps--thread .step:nth-child(4)::before { animation-range: cover 44% cover 52%; }
  }
}


/* ── 07 Wer das macht ──────────────────────────────────────────────────────────
   One statement in two tones: the promise in ink, the background in grey.
   The mono fact line under it is .monoline (site.css §16).                       */
.who { display: grid; gap: var(--s-5); max-width: 40rem; }
.who__statement {
  font-size: var(--fs-h3); line-height: 1.4; font-weight: var(--w-med);
  letter-spacing: var(--track-tight); color: var(--c-text-2);
}
.who__lead { color: var(--c-text); }


/* ── 08 FAQ: one answer at a time, content breathes ────────────────────────────
   <details name="faq"> keeps one open. ::details-content fades (and in Chrome
   grows to auto height); without it, answers open at once.                       */
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .home .faq__item[open] > .faq__a { animation: none; }
    .home .faq__item::details-content {
      opacity: 0;
      transition: opacity var(--dur-slow) var(--ease), content-visibility var(--dur-slow) allow-discrete;
    }
    .home .faq__item[open]::details-content { opacity: 1; }
  }
}
@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .home { interpolate-size: allow-keywords; }
    .home .faq__item::details-content {
      block-size: 0; overflow: clip;
      transition: opacity var(--dur-slow) var(--ease), block-size var(--dur-slow) var(--ease), content-visibility var(--dur-slow) allow-discrete;
    }
    .home .faq__item[open]::details-content { block-size: auto; }
  }
}


/* ── 09 closing band: the door and the footer share the hero's night ─────────── */
.closing { padding-top: var(--section-y); }
.closing .section__head .link { color: var(--c-text); }
@media (min-width: 900px) {
  .closing .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s-16); align-items: end; }
  .closing .section__head { margin-bottom: 0; }
}