/* ============================================================
   RIET QUADEN MAKELAARS — RQ2 "De Telefoonlijn" (Taak 9)

   Eén doorlopend, zelfgetekend telefoon-krulsnoer dat bij het
   hero-portret begint (Riet hangt letterlijk aan de telefoon) en
   met de scroll meetekent langs de secties, tot een getekende
   stekker die bij de belknop (#bel-riet) in een stopcontact klikt.

   Aanpak: ÉÉN absolute full-page SVG in een wrapper die exact
   over <main> ligt (inset: 0 op een relative #hoofd). De viewBox
   wordt door telefoonlijn.js 1-op-1 op de pixelmaat van <main>
   gezet en bij resize herrekend; het pad gebruikt
   vector-effect="non-scaling-stroke". Zo bestaat er geen enkele
   laag die hoger is dan zijn sectie en kan slice-schaal niets
   opblazen (LESSEN-regel, robuuste variant).

   Fluisterstil: 1,5px, steungrijs met lage opacity (wit-alpha op
   het zwarte #contact), pointer-events none, aria-hidden, en de
   laag reserveert géén ruimte (geen CLS). Alleen ≥ 1280px: pas
   daar is de goot naast de container (max-width 1180) ten minste
   ~40px breed, zodat de lijn nooit binnen de contentkolom valt
   (review-besluit C2). Onder 1280px staat er enkel een klein
   statisch detail (krulsnoer + ingeplugde stekker) bij #contact,
   absoluut gepositioneerd onder de knoppen (ook geen CLS).

   Reduced motion: de JS bouwt de lijn dan meteen volledig
   getekend op (eindstand); de scrub is opt-in.
   ============================================================ */

/* anker voor de absolute laag; verandert niets aan de flow */
#hoofd { position: relative; }

.tel-lijn {
  position: absolute;
  inset: 0;
  /* boven de sectie-achtergronden, onder alle gepositioneerde
     content (etalage-biljetten, knoppen, medaillon enz.) */
  z-index: 0;
  pointer-events: none;
  display: none;
}

@media (min-width: 1280px) {
  .tel-lijn { display: block; }
}

/* Tijdens een herbouw (resize) verbergt de JS de laag even, anders rekt
   preserveAspectRatio="none" de oude tekening uit. Zonder overgang is dat
   een harde 1 → 0 → 1; met deze korte fade zakt de lijn zacht weg en komt
   hij zacht terug. Huisregel: entree ease-out, exit ease-in en korter. */
.tel-lijn { transition: opacity 150ms ease-out; }
.tel-lijn.is-herbouw { transition: opacity 100ms ease-in; }

@media (prefers-reduced-motion: reduce) {
  .tel-lijn { transition: none; }
}

.tel-lijn svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tel-lijn__pad {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- < 1280px: statisch detail bij #contact ----------
   Absoluut onder .contact__inhoud gehangen. Onder 880px zit daar
   de royale raster-gap (--ruimte-2xl = 120px) vóór de zijkaart;
   van 880-1279px is de gap smaller (clamp(48px, 6vw, 96px)) en
   meet telefoonlijn.js de werkelijk vrije ruimte: past het detail
   niet (< 84px vrij tot .contact__slot of .contact__zij), dan
   verbergt de JS het (review I1). Geen gereserveerde ruimte. */
.contact__inhoud { position: relative; }

.tel-lijn-mini {
  position: absolute;
  top: 100%;
  left: 2px;
  margin-top: 30px;
  width: 156px;
  pointer-events: none;
}
.tel-lijn-mini svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 1280px) {
  .tel-lijn-mini { display: none; }
}

/* Geen eigen @media prefers-reduced-motion nodig: zonder animatie
   tekent telefoonlijn.js de volledige eindstand (geen dash-setup,
   stekker ingeplugd) en maakt hij geen ScrollTrigger aan. */