/* ══ lueftungstool.com: Bewegung (09.10.2026, Rahmen-Beschriftung „Protokoll“, Baustein 50) ═══
   Ergaenzt app.css, aendert sie nicht. Leitplanken:
   - Bewegung traegt den Inhalt: kein Intro, Hero-Text steht nach spaetestens 0,6 s.
   - Animiert werden nur transform und opacity (Ausnahme: das einmalige Zeichnen der
     28-px-Bildmarke ueber stroke-dashoffset).
   - prefers-reduced-motion: ALLE Bewegung steht im Block (screen and no-preference) unten. Ohne ihn
     gelten nur die Grundregeln = Endzustand, statisch und vollstaendig lesbar.
   - Zustaende, die Skript brauchen, haengen an html.mo (setzt assets/motion.js nur, wenn
     Bewegung erwuenscht ist). Ohne Skript bleibt alles sichtbar.
   - CSP: keine Inline-Styles; Werte pro Element setzt motion.js ueber CSSOM (--i, --st).
   Versal-Sperrschrift gibt es AUSSCHLIESSLICH in der Rahmen-Beschriftung (.reel*, .r-*).
   ══════════════════════════════════════════════════════════════════════════════ */
:root{--mo-ease:cubic-bezier(.2,.8,.2,1);--mo-snap:cubic-bezier(.3,1.55,.5,1);}

/* ── Rahmen-Beschriftung „Protokoll“: im Hero und im Abschluss ── */
.reel{position:absolute;left:16px;right:16px;top:12px;pointer-events:none;
  height:calc(100vh - 68px - 24px);height:calc(100svh - 68px - 24px);max-height:calc(100% - 24px);}
.reel--end{top:16px;bottom:16px;height:auto;max-height:none;}
/* Ecken und Linie liegen UNTER dem Inhalt (Bildschirmfoto deckt sie ab), die Beschriftung darueber. */
.reel__c{position:absolute;width:18px;height:18px;border:0 solid var(--brand);}
.reel__c--tl{top:0;left:0;border-top-width:1.5px;border-left-width:1.5px;}
.reel__c--tr{top:0;right:0;border-top-width:1.5px;border-right-width:1.5px;}
.reel__c--bl{bottom:0;left:0;border-bottom-width:1.5px;border-left-width:1.5px;}
.reel__c--br{bottom:0;right:0;border-bottom-width:1.5px;border-right-width:1.5px;}
.reel__lab,.reel-edge{font:600 10.5px/1 var(--f-sans);letter-spacing:.14em;text-transform:uppercase;
  font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--dim);}
.reel__lab{position:absolute;z-index:3;display:flex;align-items:center;gap:14px;}
.reel__lab b,.reel-edge b{display:inline-block;font-weight:700;color:var(--ink);}
.reel__lab--tl{top:12px;left:16px;}
.reel__lab--tr{top:12px;right:16px;}
.reel__lab--bl{bottom:16px;left:10px;padding:4px 6px;border-radius:4px;background:#fff;}
.reel__lab--br{bottom:16px;right:10px;padding:4px 6px;border-radius:4px;background:#fff;}
.reel__lab--tl::before{content:'';width:14px;height:1.5px;background:var(--brand);}
/* Datum im Rahmen („Protokoll vom …“): setzt motion.js einmal (Gerätedatum, keine laufende Uhr). Bis dahin
   (html.mo-datum fehlt) bleibt der Zusatz unsichtbar: ohne Skript steht dort kein falsches Datum. Der Stand
   („Stand …“) steht fest im Markup. */
.r-wartet{visibility:hidden;}
.mo-datum .r-wartet{visibility:visible;}
.r-sep{margin:0 -9px;color:var(--brand-strong);}   /* Etiketten-Abstand 14 px -> rund 5 px wie ein Leerzeichen */
.reel--end .r-sep{color:var(--brand);}              /* dunkles Band: --brand-strong waere dort kaum sichtbar */
/* Teile, die je nach Breite wechseln (Regeln unter „Responsiv“): .r-breit ab 1440 px, .r-oben 768 bis 1439 px,
   .r-klein bis 1439 px; .r-mittel-weg, .r-handy-weg bzw. .r-schmal-weg entfallen bis 767, 600 bzw. 380 px. */
.r-oben,.r-klein{display:none;}
.r-breit{display:inline-block;}
.reel__line{position:absolute;left:28px;right:28px;bottom:7px;height:1px;background:var(--line-strong);}
.reel__line i{position:absolute;left:0;right:0;top:-.5px;height:2px;background:var(--brand);transform-origin:0 50%;transform:scaleX(0);will-change:transform;}
/* Abspann (dunkles Band) */
.final__in{z-index:1;}
.reel--end .reel__lab{color:#9AA5AE;}
.reel--end .reel__lab b{color:#fff;}
.reel--end .reel__lab--bl,.reel--end .reel__lab--br{background:none;}

/* ── Kompakte Fassung nach dem Hero: Randleiste rechts + Linie ──
   Steht im rechten Seitenrand (Satzspiegel hat dort mind. 18 px Luft) und verdeckt keinen Inhalt. */
.reel-edge{position:fixed;right:4px;bottom:20px;z-index:40;pointer-events:none;display:flex;align-items:center;gap:12px;
  writing-mode:vertical-rl;transform:rotate(180deg);opacity:0;visibility:hidden;}
.reel-edge > i{inline-size:18px;block-size:1.5px;background:var(--brand);}
.reel-bar{position:fixed;left:0;right:0;bottom:0;height:2px;z-index:40;pointer-events:none;opacity:0;visibility:hidden;}
.reel-bar i{display:block;height:100%;background:var(--brand);transform-origin:0 50%;transform:scaleX(0);will-change:transform;}
.mo-kompakt .reel-edge,.mo-kompakt .reel-bar{opacity:1;visibility:visible;}
/* Unsichtbarer Waechter fuer den Scrollfortschritt (Lage/Hoehe setzt motion.js) */
.mo-wache{position:absolute;left:0;top:0;width:1px;height:0;visibility:hidden;pointer-events:none;}
/* Seiten- bzw. Positionsfeld und Normfeld dahinter: feste Groesse + contain:strict, damit der Textwechsel nichts
   verschiebt. Groessen bei 10,5 px Schrift und .14em Sperrung (rahmen-20261008/werkzeug/messen.js): laengster Text
   „Pos. 07 / 08 · Brandschutz“ 17,7 em, „VDI 2052 · VDI 6022 · VDI 2047-2“ 20,3 em. Im Rundgang die Position, davor
   und danach Seite mit Abschnittsname (data-szene, data-kapitel, setzt motion.js). */
.reel-edge__slot{display:inline-block;inline-size:18.4em;block-size:1.1em;contain:strict;text-align:end;}
.reel-edge__sz{display:none;}
.reel-edge.is-szene .reel-edge__kap{display:none;}
.reel-edge.is-szene .reel-edge__sz{display:inline;}
.reel-edge__end{display:inline-flex;align-items:center;inline-size:21em;block-size:1.1em;contain:strict;}
/* Normen nur auf dem Deckblatt und bei Pos. 03 bis 07 (data-norm); sonst Strich und Normfeld unsichtbar (die Groesse
   bleibt, nichts verschiebt sich) */
.reel-edge.is-leer > i,.reel-edge.is-leer .reel-edge__end{visibility:hidden;}
/* Abschluss hat einen eigenen Rahmen -> Randleiste dort ausblenden (Linie unten bleibt) */
.mo-abspann .reel-edge{opacity:0;visibility:hidden;}
/* Sobald die kompakte Fassung uebernimmt, verschwindet die untere Haelfte des Hero-Rahmens
   (sonst doppelte Angaben, doppelte Linie). Gilt auch bei reduzierter Bewegung. */
.mo-kompakt .hero .reel__lab--bl,.mo-kompakt .hero .reel__lab--br,.mo-kompakt .hero .reel__line,
.mo-kompakt .hero .reel__c--bl,.mo-kompakt .hero .reel__c--br{opacity:0;}
/* Fokussierte Elemente nicht unter der Fortschrittslinie */
html{scroll-padding-bottom:12px;}


/* ── Tool-Vorschau im Hero: Clip liegt ueber dem Standbild (gleiches erstes Bild, Steuerung in motion.js) ──
   Das Video ist absolut positioniert und erst nach „playing" sichtbar: kein Layout-Springen, kein Aufblitzen.
   Ohne Skript, bei reduzierter Bewegung oder Datensparen bleibt es beim Standbild (display:none -> nichts geladen). */
.demo{position:relative;}
.demo__vid{position:absolute;left:0;top:0;width:100%;height:100%;display:none;object-fit:cover;background:transparent;pointer-events:none;opacity:0;}
.demo.is-bereit .demo__vid{display:block;}
.demo.is-an .demo__vid{opacity:1;}
.stage .tel .demo__vid{border-radius:27px;}
/* Bildunterschrift lief schmal (<= 600 px) unter bzw. ueber das Handy (Handy ragt 76-80 px in die Textspalte);
   mit laufendem Clip fiel das auf. Freiraum rechts in Handybreite, auf breiten Schirmen ohne sichtbare Wirkung. */
.stage__note{padding-right:92px;}
/* Pause-Knopf (WCAG 2.2.2): dezent rechts in der Fensterleiste, haelt beide Clips an */
.demo__pause{position:absolute;top:3px;right:6px;z-index:2;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--dim);cursor:pointer;}
.demo__pause[hidden]{display:none;}
.demo__pause:hover{color:var(--ink);border-color:var(--line-strong);}
.demo__pause:focus-visible{outline-offset:-1px;border-radius:999px;}   /* .win schneidet sonst den Ring oben ab */
.demo__pause .i{width:12px;height:12px;stroke-width:2.4;}
.demo__pause .i--play,.demo__pause.is-pausiert .i--pause{display:none;}
.demo__pause.is-pausiert .i--play{display:block;}

/* ── Schwache Geraete (motion.js setzt html.mo-schwach): Ueberschriften ohne Masken ── */
.mo-ruhig .mo-w{clip-path:none!important;}
.mo-ruhig .mo-wi{transform:none!important;transition:none!important;}

/* ── Ueberschriften: Woerter in Masken (Struktur im h1 statisch, in h2/h3 von motion.js) ── */
.mo-w,.mo-wi{display:inline-block;}
h2 .u{color:var(--brand-strong);}

/* ── Rundgang ── */
.kap{position:relative;}
#rundgang{overflow-x:clip;}
.mo-wipe{position:absolute;left:0;right:0;top:-1px;height:2px;overflow:hidden;pointer-events:none;}
.mo-wipe::before{content:'';position:absolute;inset:0;background:var(--brand);transform:translateX(-101%);}
.mo-c{position:absolute;width:16px;height:16px;border:0 solid var(--brand);pointer-events:none;z-index:3;}
.mo-c--tl{top:-9px;left:-9px;border-top-width:1.5px;border-left-width:1.5px;}
.mo-c--tr{top:-9px;right:-9px;border-top-width:1.5px;border-right-width:1.5px;}
.mo-c--bl{bottom:-9px;left:-9px;border-bottom-width:1.5px;border-left-width:1.5px;}
.mo-c--br{bottom:-9px;right:-9px;border-bottom-width:1.5px;border-right-width:1.5px;}
/* Kapitel mit Handy: Rahmen umschliesst Fenster UND Handy (sonst laege eine Ecke auf dem Handy-Bildschirm).
   Erst ab 1200 px: darunter ist der Seitenrand nur 24 px breit (Ecke waere abgeschnitten); dort liegt die
   Ecke ueber dem Handy (z-index 3). */
@media (min-width:1200px){
  .kap__bild:has(> .tel) .mo-c--bl,.kap__bild:has(> .tel) .mo-c--br{bottom:-37px;}
  .kap--rev .kap__bild:has(> .tel) .mo-c--tl,.kap--rev .kap__bild:has(> .tel) .mo-c--bl{left:-27px;}
  .kap:not(.kap--rev) .kap__bild:has(> .tel) .mo-c--tr,.kap:not(.kap--rev) .kap__bild:has(> .tel) .mo-c--br{right:-27px;}
}
.kapnav a.is-on{border-color:var(--brand);color:var(--brand-strong);}

/* ── Kennzahlen: Breite steht waehrend des Zaehlens fest (motion.js setzt min-width) ── */
.out__v{text-align:right;}

/* ── Abschnittsmarke: kurze Linie vor der Dachzeile ── */
.head .kicker,.split .kicker,.two .kicker{display:flex;align-items:center;gap:10px;}
.head .kicker::before,.split .kicker::before,.two .kicker::before{content:'';flex:none;width:20px;height:1.5px;background:var(--brand);transform-origin:0 50%;}

/* ── Mikrointeraktionen: Pfeil rueckt vor, Linie laeuft unter dem Text an ── */
.btn{position:relative;}
.btn:active{transform:translateY(1px);}
.btn:not(:has(.i--go))::after{content:'';position:absolute;left:18px;right:18px;top:calc(50% + .78em);height:1.5px;border-radius:1px;
  background:currentColor;opacity:.45;transform:scaleX(0);transform-origin:100% 50%;}
.btn:hover::after,.btn:focus-visible::after{transform:scaleX(1);transform-origin:0 50%;}
.btn:hover .i--go,.btn:focus-visible .i--go{transform:translateX(4px);}
.nav__links a{position:relative;}
.nav__links a::after{content:'';position:absolute;left:12px;right:12px;bottom:4px;height:1.5px;background:var(--brand);transform:scaleX(0);transform-origin:100% 50%;}
.nav__links a:hover::after,.nav__links a:focus-visible::after{transform:scaleX(1);transform-origin:0 50%;}

/* ── Responsiv ── */
/* Unter 1440 px reicht der Seitenrand nicht fuer die unteren Hero-Etiketten (lagen sonst ueber dem Bildschirmfoto).
   Seite (.r-klein) und Stand (.r-oben) wandern dann in die obere Zeile, die Normzeile oben (.r-breit) entfaellt (die
   Normen stehen im Band darunter). Unter 768 px reicht die obere Zeile nicht fuer Stand bzw. Datum (gemessen am
   09.10.2026: Hero mit Stand bei 700 px nur 7 px Abstand, bei 601 px Ueberlappung; Abschluss mit Datum und „Ende des
   Protokolls“ bei 601 px Ueberlappung): Stand und „vom <Datum>“ entfallen dort, ab 1440 px steht der Stand unten. */
@media (max-width:1439px){
  .hero .reel__lab--bl,.hero .reel__lab--br,.r-breit{display:none;}
  .r-oben,.r-klein{display:inline-block;}
}
@media (max-width:767px){
  .r-oben,.r-mittel-weg{display:none;}
}
@media (max-width:600px){
  .reel{left:10px;right:10px;top:10px;height:calc(100vh - 60px - 20px);height:calc(100svh - 60px - 20px);}
  .reel--end{top:12px;bottom:12px;height:auto;}
  .reel__lab{font-size:9.5px;letter-spacing:.12em;}
  .reel__lab--tl{left:12px;}
  .reel__lab--tr{right:12px;}
  .reel__lab--bl,.reel__lab--br,.r-oben,.r-handy-weg{display:none;}
  .hero{padding-top:56px;}   /* Luft zwischen Rahmen-Zeile und Hinweis-Pille */
  .reel__line{left:22px;right:22px;}
  /* Handy: nur Seite bzw. Position + Linie unten */
  .reel-edge{right:1px;font-size:9.5px;}
  .reel-edge > i,.reel-edge__end{display:none;}
  .reel-edge__slot{text-align:start;}
  /* Am Handy laeuft nur der Handy-Clip (motion.js); das Handy-Mockup ist dafuer groesser (188 statt 120 px, Bildschirm
     180 px = 0,46-fach statt 0,31-fach) und ragt unter das Laptopfenster, das dort als Standbild dahinter steht.
     Feste Masse von Anfang an (kein Layout-Springen); die Bildunterschrift bleibt links neben dem Handy. */
  .stage{padding:0 52px 196px 0;}
  .stage .tel{width:188px;padding:4px;border-radius:24px;}
  .stage .tel img,.stage .tel .demo__vid{border-radius:20px;}
  .stage__note{padding-right:196px;text-wrap:balance;}
  .demo__pause{top:1px;right:4px;width:22px;height:22px;}   /* Leiste 24 px; Abstand zu anderen Zielen > 24 px (WCAG 2.5.8) */
}
@media (max-width:380px){
  .r-schmal-weg{display:none;}
  .reel__lab{letter-spacing:.09em;}   /* 320 px: Etiketten oben links/rechts sonst zu nah */
  /* Sehr schmale Handys (360 px): etwas kleineres Handy-Mockup, damit die Bildunterschrift nicht in Einzelwoerter zerfaellt */
  .stage{padding-bottom:176px;}
  .stage .tel{width:168px;}
  .stage__note{padding-right:176px;}
}
@media print{
  .reel,.reel-edge,.reel-bar,.mo-wipe,.mo-c,.mo-wache,.demo__vid,.demo__pause{display:none!important;}
  /* Sicherheitsnetz: Druck immer im Endzustand (der Bewegungsblock gilt ohnehin nur fuer screen) */
  .mo-w{clip-path:none!important;}
  .mo-wi,.kap__bild,.kap__bild .tel,.kap__bild .duo .win{transform:none!important;opacity:1!important;}
  /* Kein Uebergang beim Umschalten auf Druck: Endzustand sofort (auch .rv aus app.css) */
  .js .rv,.mo-wi,.kap__bild,.kap__bild .tel,.kap__bild .duo .win{transition:none!important;animation:none!important;}
  .js .rv{opacity:1!important;transform:none!important;}
}

/* ══ Bewegung — nur, wenn das System sie nicht abbestellt hat ══════════════════ */
@media screen and (prefers-reduced-motion:no-preference){
  @keyframes mo-rise{from{transform:translateY(120%);}to{transform:none;}}
  @keyframes mo-up{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
  @keyframes mo-in{from{opacity:0;}to{opacity:1;}}
  @keyframes mo-snap{from{opacity:0;transform:translate(var(--mx,0),var(--my,0)) scale(1.35);}to{opacity:1;transform:none;}}
  @keyframes mo-grow{from{transform:scaleX(0);}to{transform:scaleX(1);}}
  @keyframes mo-draw{from{stroke-dasharray:1 2;stroke-dashoffset:1.05;}to{stroke-dasharray:1 2;stroke-dashoffset:0;}}
  @keyframes mo-wipe{from{transform:translateX(-101%);}to{transform:translateX(101%);}}
  @keyframes mo-slide{from{opacity:0;transform:translateY(28px) scale(.985);}to{opacity:1;transform:none;}}

  /* Richtungen, aus denen die Ecken einrasten */
  .reel__c--tl,.mo-c--tl{--mx:-8px;--my:-8px;}
  .reel__c--tr,.mo-c--tr{--mx:8px;--my:-8px;}
  .reel__c--bl,.mo-c--bl{--mx:-8px;--my:8px;}
  .reel__c--br,.mo-c--br{--mx:8px;--my:8px;}

  /* Bildmarke zeichnet sich einmal (Pfade mit pathLength=1), danach ruhig */
  .nav .brand__mark path{animation:mo-draw .8s var(--mo-ease) both;}
  .nav .brand__mark path:nth-child(2){animation-delay:.12s;}
  .nav .brand__mark path:nth-child(3){animation-delay:.24s;animation-duration:.6s;}

  /* Hero: alles steht nach <= 0,6 s (Bild nach 0,75 s) */
  .hero__bg{animation:mo-in .9s ease both;}
  .hero .pill{animation:mo-up .45s var(--mo-ease) both;}
  .mo-h1 .mo-w{clip-path:inset(-.35em -.15em -.24em -.15em);}
  .mo-h1 .mo-wi{animation:mo-rise .44s var(--mo-ease) both;}
  /* Schwache Geraete: auch der Hero-Titel ohne Wort-Masken (Vorgabe 3c). Im Fall „bildrate" (nach rund 2 s
     gesetzt) ist die 0,6-s-Animation laengst vorbei - die Regel aendert dann nichts Sichtbares, kein Flackern. */
  .mo-schwach .mo-h1 .mo-w{clip-path:none;}
  .mo-schwach .mo-h1 .mo-wi{animation:none;}
  .mo-h1 > .mo-w:nth-child(2) .mo-wi{animation-delay:.035s;}
  .mo-h1 .u > .mo-w:nth-child(1) .mo-wi{animation-delay:.07s;}
  .mo-h1 .u > .mo-w:nth-child(2) .mo-wi{animation-delay:.105s;}
  .mo-h1 .u > .mo-w:nth-child(3) .mo-wi{animation-delay:.14s;}
  .hero .lead{animation:mo-up .45s var(--mo-ease) .1s both;}
  .hero .cta{animation:mo-up .45s var(--mo-ease) .15s both;}
  .hero .ticks{animation:mo-up .45s var(--mo-ease) .2s both;}
  .stage .win{animation:mo-slide .65s var(--mo-ease) .08s both;}
  .stage .tel{animation:mo-up .6s var(--mo-ease) .22s both;}
  .stage__note{animation:mo-in .4s ease .4s both;}
  .hero .reel__c{animation:mo-snap .5s var(--mo-snap) .12s backwards;}
  .hero .reel__lab{animation:mo-in .4s ease .25s backwards;}
  /* backwards statt both: nach dem Einrasten gilt wieder der normale Stil -> Ausblenden bei Kompakt wirkt */
  .hero .reel__lab--bl,.hero .reel__lab--br,.hero .reel__line,.hero .reel__c--bl,.hero .reel__c--br{transition:opacity .3s ease;}
  .hero .reel__line{transform-origin:0 50%;animation:mo-grow .7s var(--mo-ease) .1s both;}

  /* h2/h3: Woerter steigen gestaffelt aus der Maske, gesamt <= 0,6 s */
  .mo .mo-split .mo-w{clip-path:inset(-.35em -.15em -.24em -.15em);}
  .mo .mo-split .mo-wi{transition:transform .44s var(--mo-ease);transition-delay:calc(var(--i,0) * var(--st,40ms));}
  .mo .mo-split:not(.mo-in) .mo-wi{transform:translateY(120%);}

  /* Abschnittsmarke waechst mit dem Einblenden */
  .mo:not(.mo-leicht) .head .kicker::before,.mo:not(.mo-leicht) .split .kicker::before,.mo:not(.mo-leicht) .two .kicker::before{transition:transform .5s var(--mo-ease) .15s;}
  .mo:not(.mo-leicht) .rv:not(.in) .kicker::before{transform:scaleX(0);}

  /* Rundgang: Bild gleitet nach dem Text herein, Handy danach, Ecken rasten ein */
  /* Handy/Touch: Bild blendet ueber das normale .rv ein (app.css), ohne Zusatz-Staffel */
  .mo:not(.mo-leicht) .kap__bild.rv{transition:opacity .6s var(--mo-ease) .08s,transform .75s var(--mo-ease) .08s;}
  .mo:not(.mo-leicht) .kap__bild.rv:not(.in){transform:translateX(28px);}
  .mo:not(.mo-leicht) .kap--rev .kap__bild.rv:not(.in){transform:translateX(-28px);}
  .mo:not(.mo-leicht) .kap__bild .tel,.mo:not(.mo-leicht) .kap__bild .duo .win:last-child{transition:opacity .5s ease .3s,transform .65s var(--mo-ease) .3s;}
  .mo:not(.mo-leicht) .kap__bild:not(.in) .tel,.mo:not(.mo-leicht) .kap__bild:not(.in) .duo .win:last-child{opacity:0;transform:translateY(24px);}
  .mo .mo-c{transition:opacity .2s ease .42s,transform .45s var(--mo-snap) .42s;}
  .mo .kap__bild:not(.in) .mo-c{opacity:0;transform:translate(var(--mx),var(--my)) scale(1.4);}
  .kap.mo-wiped .mo-wipe::before{animation:mo-wipe 1s var(--mo-ease) both;}

  /* Abschluss: Einlauf des Rahmens (Ecken von aussen, einmalig) steht in abspann.css, Startsignal von abspann.js */

  /* Kompakte Fassung blendet weich um */
  .reel-edge,.reel-bar{transition:opacity .35s ease,visibility 0s linear .35s;}
  .mo-kompakt .reel-edge,.mo-kompakt .reel-bar{transition:opacity .35s ease,visibility 0s;}
  .mo-abspann .reel-edge{transition:opacity .35s ease,visibility 0s linear .35s;}

  /* Fortschrittslinie: setzt motion.js in groben Schritten (keine CSS-Scroll-Zeitleiste, s. motion.js). */

  /* Mikrointeraktionen */
  .btn .i--go{transition:transform .25s var(--mo-ease);}
  .btn::after,.nav__links a::after{transition:transform .3s var(--mo-ease);}
}