/* ══ Het eerste scherm op de telefoon: "Stilte" (28-09-2026) ═══════════
   Ontwerp L16 uit de ronde met eerste schermen: alleen het label, de kop in
   drie regels, één zin, de knop en de zijdeur. Zwart, wit en één blauw
   (de punt en de knop), veel lucht. De logo-intro speelt eerst, op dubbele
   snelheid (data-tempo-mobiel op /nomad-preloader.js); zodra die wegvaagt
   komen de regels als een filmtitel van onder een onzichtbare rand omhoog.

   Alles hier geldt onder 640 px. De computer verandert niet: daar doen
   .st-r (het masker om een woordgroep) en .st-br (de regelbreuk van de
   telefoon) niets. */

.sys-title .st-br{display:none}

@media (max-width:640px){
  section.hero{padding:0;min-height:0;text-align:left}
  section.hero .hero-inner{
    container-type:inline-size;
    display:flex;flex-direction:column;
    /* Eén scherm min de balk en de kop, en nooit hoger dan 740 px, zodat
       het dashboard op een lange telefoon niet te ver wegzakt. */
    min-height:min(calc(100svh - 86px),740px);
    padding:24px 12px 32px;box-sizing:border-box;text-align:left;
  }

  /* De oude binnenkomst van de hero (a1 t/m a5) maakt plaats voor de
     filmtitel hieronder. */
  section.hero .a1,section.hero .a2,section.hero .a3,section.hero .a4,section.hero .a5{
    opacity:1;animation:none;transform:none}

  /* Het label: klein, grijs, links, zonder de lijntjes. */
  section.hero .sys-eyebrow{justify-content:flex-start;margin:0;overflow:hidden;padding:.2em 0}
  section.hero .sys-eyebrow i{display:none}
  section.hero .sys-eyebrow span{display:inline-block;font-size:10.5px;letter-spacing:.3em;color:rgba(238,241,248,.5)}

  /* De kop: drie regels die de breedte vullen, gewone letters, wit. */
  section.hero .sys-title{
    margin:auto 0 0;padding-top:48px;
    font-family:var(--display);font-weight:700;font-size:21.5cqw;
    line-height:.92;letter-spacing:-.05em;word-spacing:.05em;text-transform:none;color:#fff}
  section.hero .sys-title .ln{display:inline;background:none;-webkit-text-fill-color:#fff;color:#fff}
  section.hero .sys-title .st-br{display:inline}
  section.hero .sys-title .dot{color:var(--blue);-webkit-text-fill-color:var(--blue)}

  /* Het masker: elke woordgroep staat in een vak dat alles eronder
     afknipt; de woorden schuiven er van onderen in. */
  section.hero .st-r{display:inline-block;overflow:hidden;vertical-align:top;
    padding:.14em 0 .08em;margin:-.14em 0 -.08em}
  section.hero .st-r>span{display:inline-block}

  /* De zin: alleen de eerste, de rest staat in .kort-rest. */
  section.hero .sys-sub{margin:24px 0 auto;padding-bottom:56px;max-width:none;
    font-family:var(--body);font-size:17px;line-height:1.4;color:rgba(238,241,248,.62)}
  section.hero .sys-sub .kort-rest{display:none}
  section.hero .sys-sub .st-r{display:block}

  /* De knop over de hele breedte, de zijdeur als rustige link eronder. */
  section.hero .sys-cta{margin:0;gap:0}
  section.hero .sys-cta .btn{width:100%;justify-content:center;gap:10px;margin:0;
    min-height:56px;font-size:16px;border-radius:12px}
  section.hero .cta-note{display:none}
  section.hero .hero-inner>p.a5:last-of-type{margin-top:0!important;text-align:center}
  /* De logostrook onder de zijdeur: gecentreerd zoals de zijdeur zelf. */
  section.hero .merken{margin-top:28px;text-align:center}
  section.hero .link-quiet.zacht{display:inline-flex;align-items:center;justify-content:center;
    width:auto;min-height:48px;margin-top:8px;padding:0;border:0;border-radius:0;
    font-family:var(--body);font-size:15px;color:rgba(238,241,248,.62);
    text-decoration:underline;text-decoration-color:rgba(238,241,248,.22);text-underline-offset:6px}
  section.hero .link-quiet.zacht svg{display:none}

  /* De markt achter de kop (29-09-2026, ontwerp C12): een canvas uit
     /nomad-kop-grafiek.js als eerste kind van .hero-inner, achter de tekst. */
  section.hero .hero-inner>.gr-doek{display:block;position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:0}
  section.hero .hero-inner>*:not(.gr-doek){position:relative;z-index:1}
}
.gr-doek{display:none}

/* De filmtitel: de regels komen kort na elkaar van onder hun rand omhoog,
   de punt als laatste, dan de zin; de knoppen komen zacht op. */
@media (max-width:640px) and (prefers-reduced-motion:no-preference){
  @keyframes st-op{from{transform:translateY(1.3em)}to{transform:none}}
  @keyframes st-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  section.hero .st-r>span,
  section.hero .sys-eyebrow span{animation:st-op .8s cubic-bezier(.16,1,.3,1) both}
  section.hero .sys-eyebrow span{animation-duration:.7s}
  section.hero .st-1>span{animation-delay:.05s}
  section.hero .st-2>span{animation-delay:.14s}
  section.hero .st-3>span{animation-delay:.23s}
  section.hero .st-p>span{animation-duration:.7s;animation-delay:.5s}
  section.hero .sys-sub .st-r>span{animation-duration:.7s;animation-delay:.36s}
  section.hero .sys-cta,
  section.hero .hero-inner>p.a5:last-of-type,
  section.hero .merken{animation:st-in .6s cubic-bezier(.2,.7,.2,1) .1s both}

  /* Zolang de logo-intro speelt, staat dit alles stil op het eerste beeld
     (de intro ligt eroverheen). Speelt de intro niet, dan is de class er
     nooit en loopt het meteen. */
  html.nomad-intro-speelt section.hero *{animation-play-state:paused!important}
}