/* src/static/styles/pages/home.css: owner H (design-spec §E.1).
   Home-only components and the home's adjustments of shared ones, in
   alphabetical order. The page layer wins over the shared layers without
   extra specificity. Values: mockup C (restore round, c-diff-home). */
@layer page {
  /* Package cards, teaser variant (components/packages.njk; home only) */
  .packages--teaser .package { gap: var(--space-2); }
  .packages--teaser .package__name { line-height: 1.45; }
  /* Teaser (C .price-list, restore H-58 to H-66; owner S, moved here from
     style.css for its 60 KB budget): "per maand", a serif fit line, the terms line */
  .packages--teaser .package__price { margin-block-start: var(--space-3); font-size: 1rem; line-height: 1.45; } /* C's line box */
  .packages--teaser .package__period { margin-inline-start: 0.15em; font-size: 1rem; }
  .package__fit { margin-block-start: var(--space-2); font: 400 1rem/1.5 var(--font-serif); }
  .packages__terms { margin-block-start: var(--space-4); color: var(--ink-2); font: 400 var(--text-small)/1.45 var(--font-sans); }
  /* Phones: one bordered list, a row per package. The rows share the
     list's columns (subgrid), so the amounts line up whatever the width of
     "1 site" and "tot 2 sites"; the name column never shrinks under the
     name. Without subgrid each row keeps its own columns. */
  @container content (max-width: 47.99rem) {
    .packages--teaser { grid-template-columns: minmax(max-content, 1fr) auto auto; gap: 0; border: var(--control-border); }
    .packages--teaser .package { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(max-content, 1fr) auto auto; grid-template-columns: subgrid; grid-template-areas: "name price sites" "label label label"; align-items: center; gap: 0 var(--space-4); min-block-size: 3.5rem; padding: var(--space-3) var(--space-4); border: 0; }
    .packages--teaser .package + .package { border-block-start: var(--control-border); }
    .packages--teaser .package--labelled { outline: var(--rule); outline-offset: -2px; }
    .packages--teaser .package__head { display: contents; }
    .packages--teaser .package__name { grid-area: name; min-inline-size: max-content; font-size: 1.125rem; } /* "per maand" wraps, never the name */
    .packages--teaser .package__label { grid-area: label; margin-block-start: var(--space-1); }
    .packages--teaser .package__price { grid-area: price; margin: 0; } /* the amount is .nowrap; at 320 the period drops under it, in every row */
    .packages--teaser .package__amount { font: 700 1.25rem/1.45 var(--font-sans); letter-spacing: 0; }
    .packages--teaser .package__period { margin: 0; font-size: var(--text-small); white-space: nowrap; }
    .packages--teaser .package__meta { grid-area: sites; text-align: end; }
    .packages--teaser :is(.package__fit, .package__features) { display: none; }
  }

  /* Packages: the one link under the terms line (C .price-more, 16 px) */
  .price-more { margin-block-start: var(--space-4); }

  /* "Ook voor teams" (C .team-card img grid-row 1 / 3): the icon spans the
     title and text rows only, so no empty third row adds a gap (107 px
     cards at 1440, as C). Change request to style.css (boxed cards):
     then this rule goes. */

  /* "Wat je van mij krijgt" (C .pillars__list): 48 px between stacked
     pillars, 64 / 48 px in two columns */
  .section--pillars .card-grid { gap: var(--space-7); }
  @container content (min-width: 48rem) {
    .section--pillars .card-grid { gap: var(--space-8) var(--space-7); }
  }
  /* A pillar's panel keeps the readout's own 24 px under the text (C
     .pillar; style.css gives a ruled card's panel 16) */
  .section--pillars .card > .readout { margin-block-start: var(--space-4); }
  /* The guides line closes the section, not the last pillar: 64 px, at
     least the gap between two pillars */
  .section--pillars > .section__more { margin-block-start: var(--space-8); }

  /* "Voor wie dit is" (C .recognition__list): 32 px between stacked
     situations, 32 / 24 px in three columns; "Bij mij" 16 px under the
     situation, the answer 4 px under the label */
  .section--recognition .card-grid { gap: var(--space-6); }
  @container content (min-width: 60rem) {
    .section--recognition .card-grid { gap: var(--space-6) var(--space-5); }
  }
  /* Three up from 60rem, as C's .recognition__list and .reviews (shared
     rules: 56rem, which a document column beside the rail needs) */
  :is(.section--recognition .card-grid, .section--reviews .reviews) { grid-template-columns: none; }
  @container content (min-width: 60rem) {
    :is(.section--recognition .card-grid, .section--reviews .reviews) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .section--recognition .card { gap: 0; }
  .section--recognition .card__label { margin-block-start: var(--space-4); }
  .section--recognition .card__answer { margin-block-start: var(--space-1); }

  /* Phones, "Twee stemmen" (docs/research/v2/mobiele-hero.md, chosen by
     Jorijn 2026-10-21, a deliberate deviation from C below 30rem): the
     column is kicker, h1, lede, button, then one small print (the note and
     the facts in the same 14 px and --ink-2, the tick a plain glyph) and
     the packages link last on the button's 48 px line, so under the button
     only one treatment competes with it instead of three. The DOM and the
     focus order (button, link) do not change: .cta becomes display:
     contents and order moves the note and link. Nothing changes from
     30rem up (pixel diff 0 at 768 and 1440). */
  @container content (max-width: 29.99rem) {
    .page-head--home { padding-block-end: var(--space-4); } /* the 48 px link line fills the rest of C's 32 */
    .page-head--home .page-head__main { display: flex; flex-direction: column; }
    .page-head--home .cta { display: contents; }
    .page-head--home .cta .button { margin-block-start: var(--space-5); }
    .page-head--home .cta__note { order: 1; flex-basis: auto; margin-block-start: var(--space-2); color: var(--ink-2); }
    .page-head--home .facts { order: 2; flex-direction: column; gap: 0; margin-block-start: 0; font-size: var(--text-small); }
    .page-head--home .facts li::before { color: inherit; font-weight: 400; }
    .page-head--home .cta__alt { order: 3; display: flex; align-items: center; min-block-size: 3rem; margin-block-start: var(--space-2); }
  }

  /* The strip ends the hero (C .ritual margin-top 32 px): the page head's
     own 32 px bottom padding is the whole gap */
  .section--ritual { padding-block-start: 0; }

  /* "Doorloop" (docs/research/v2/strip-animatie.md §5, Jorijn 2026-10-21):
     main.js (initRitualPass) plays the ritual once per session, only under
     this media query, which is also the only place the play/pause button
     (ritual_strip play=true) takes its 44 px, so nothing shifts. Every
     keyframe ends on the static strip: stopping is dropping .is-playing. */
  .ritual__play, .ritual__patience, .ritual__ring { display: none; }
  @media (prefers-reduced-motion: no-preference) and (update: fast) and (forced-colors: none) {
    .js .ritual__play { display: grid; place-items: center; visibility: hidden; inline-size: 2.75rem; block-size: 2.75rem; margin: 0 0 0 auto; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; }
    .ritual.is-ready .ritual__play { visibility: visible; }
    .ritual__play svg { display: block; inline-size: 1rem; block-size: 1rem; }
    .ritual:not(.is-playing) .ritual__play-stop, .ritual.is-playing .ritual__play-again { display: none; }
    /* Row 3, right: the glyph's edge on the arrow link's ((44 − 16) / 2),
       its centre 12 px over the bracket's foot; row 3 stays 36 px */
    @container content (min-width: 48rem) {
      .js .ritual__play { grid-column: 6; grid-row: 3; align-self: end; justify-self: end; margin: 0 calc((1rem - 2.75rem) / 2) -0.625rem 0; }
    }

    /* Strip C (docs/research/v2/motion/02-update-strip.md): A's timeline from
       the tokens: a 0.4 s track, then per step a ring, a line and a pause; 04
       takes twice as long and carries the safety net; a double pause before
       06 ("half an hour later"). ≈ 13.5 s */
    .ritual { position: relative; }
    .ritual.is-playing {
      --t0: calc(var(--duration-slow) + var(--pause));
      --p: calc(var(--duration-scene) + var(--duration-slow) + var(--pause));
      --tb: calc(var(--t0) + 3 * var(--p) + var(--duration-base));
      --nb: calc(1.5 * var(--duration-scene));
    }
    .is-playing .ritual__step { --w: var(--duration-scene); --s: calc(var(--t0) + var(--i) * var(--p)); --e: calc(var(--s) + var(--w)); }
    .is-playing .ritual__step:nth-child(4) { --w: calc(2 * var(--duration-scene)); }
    .is-playing .ritual__step:nth-child(5) { --s: calc(var(--t0) + var(--i) * var(--p) + var(--duration-scene)); }
    .is-playing .ritual__step:nth-child(6) { --s: calc(var(--t0) + var(--i) * var(--p) + var(--duration-scene) + var(--pause)); }
    /* Work: the orange ring grows from 12 o'clock to closed over the step
       (ritual_strip draws svg.ritual__ring in each number; one round, 04's
       over its double time); done: the tint comes in from 0.94 under it and
       both fade in the pause */
    .is-playing .ritual__ring { display: block; position: absolute; inset: -1.5px auto auto -1.5px; inline-size: calc(100% + 3px); block-size: calc(100% + 3px); transform: rotate(-90deg); fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; pointer-events: none;
      animation: ritual-grow var(--w) var(--ease-in-out) var(--s) forwards, ritual-out var(--duration-fast) var(--ease-in) calc(var(--e) + var(--duration-slow)) forwards; }
    .is-playing .ritual__num::before { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: var(--radius-round); background: var(--accent-tint); opacity: 0; pointer-events: none;
      animation: ritual-tick var(--duration-base) var(--ease-out) calc(var(--e) - var(--duration-fast)) forwards, ritual-tick-out var(--duration-fast) var(--ease-in) calc(var(--e) + var(--duration-slow)) forwards; }
    /* One means for every line, solid or dashed: a veil in paper colour puts
       the line at 30 %, then scales away */
    .is-playing .ritual__step:not(:last-child)::after { content: ""; position: absolute; inset-inline-start: calc(1.125rem - 1px); inset-block: 2.25rem 0; inline-size: 2px; background: var(--paper); opacity: 0; transform-origin: 50% 100%; pointer-events: none;
      animation: ritual-veil var(--duration-slow) var(--ease-in-out) forwards, ritual-unveil-y var(--duration-slow) var(--ease-in-out) var(--e) forwards; }
    @container content (min-width: 48rem) {
      .is-playing .ritual__step:not(:last-child)::after { inset-inline: calc(2.25rem + 6px) calc(-1 * var(--space-5) + 6px); inset-block: calc(1.125rem - 1px) auto; inline-size: auto; block-size: 2px; transform-origin: 100% 50%; animation-name: ritual-veil, ritual-unveil-x; }
    }
    /* The safety net: one stroke from 04 back to 01 (main.js draws
       .ritual__trace over the bracket); the riser of 02 rises as the stroke
       passes (--rd, a share of the time); the loop icon turns along */
    .is-playing .ritual__bracket { animation: ritual-dim var(--duration-slow) var(--ease-in-out) forwards, ritual-show var(--duration-base) var(--ease-out) calc(var(--tb) + var(--nb)) forwards; }
    .is-playing .ritual__riser { transform-origin: 50% 0; animation: ritual-dim var(--duration-slow) var(--ease-in-out) forwards, ritual-rise var(--duration-fast) var(--ease-in-out) calc(var(--tb) + var(--rd, 0.6) * var(--nb) - var(--duration-fast)) forwards; }
    .ritual__trace { position: absolute; inset: 0 auto auto 0; overflow: visible; pointer-events: none; fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ritual-trace var(--nb) var(--ease-in-out) var(--tb) forwards; }
    .is-playing .ritual__loop .icon { animation: ritual-back var(--nb) var(--ease-in-out) var(--tb); }
    .ritual.is-paused, .ritual.is-paused *, .ritual.is-paused ::before, .ritual.is-paused ::after { animation-play-state: paused; }
    /* C: the hero avatar's eyes follow the working step (main.js sets the
       offset, ≤ 2.4 px) and come back to you at the end */
    .avatar.is-watching .avatar__eyes { transition: transform var(--duration-slow) var(--ease-in-out); }
    /* C, Geduld: on the third start one line in the button's row, taking no
       space (phones: left of the button; wide: columns 5 and 6 of row 3) */
    .js .ritual__patience { display: block; block-size: 0; margin: 0; padding-inline-end: 3rem; color: var(--ink-2); font: 400 var(--text-small)/1.4 var(--font-sans); translate: 0 -2.75rem; }
    .ritual__patience.is-shown { animation: ritual-in var(--duration-base) var(--ease-out) both; }
    .ritual__patience.is-gone { animation: ritual-out var(--duration-fast) var(--ease-in) forwards; }
    @container content (min-width: 48rem) {
      .js .ritual__patience { position: absolute; grid-column: 5 / 7; grid-row: 3; inset: 0 0 auto; block-size: auto; translate: none; line-height: 1.3; }
    }
  }
  @keyframes ritual-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes ritual-out { from { opacity: 1; } to { opacity: 0; } }
  @keyframes ritual-tick-out { from { opacity: 1; } to { opacity: 0; } }
  @keyframes ritual-grow { to { stroke-dashoffset: 0; } }
  @keyframes ritual-tick { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
  @keyframes ritual-veil { to { opacity: 0.7; } }
  @keyframes ritual-unveil-x { to { transform: scaleX(0); } }
  @keyframes ritual-unveil-y { to { transform: scaleY(0); } }
  @keyframes ritual-dim { to { opacity: 0.3; } }
  @keyframes ritual-show { from { opacity: 0.3; } to { opacity: 1; } }
  @keyframes ritual-rise { from { opacity: 1; transform: scaleY(0); } to { opacity: 1; transform: none; } }
  @keyframes ritual-trace { to { stroke-dashoffset: 0; } }
  @keyframes ritual-back { to { transform: rotate(-1turn); } }
}