/* ============================================================
   EnergyEng V2 — journey.css · Startseite „Reise"
   Lädt nach style.css und motion.css; Index-Selektoren dürfen
   style.css hier überschreiben. Tokens (--t-*, --ease-*) werden
   nur benutzt, nie überschrieben. Abweichende Dauern stehen nur
   an den Signature-Momenten S1–S6 und sind dort begründet.
   Zustände, die journey.js steuert, hängen an html.jr (setzt
   journey.js selbst): fällt das Skript aus, bleibt alles sichtbar.
   Jeder Ausgangszustand ist unten im Statik- UND im Reduced-
   Block neutralisiert.
   ============================================================ */

/* Hilfsklassen */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
.nb{text-transform:none;white-space:nowrap;}
.d-3{--rd:.3s;}

/* ---------- S1/S2 Hero ---------- */
/* Zwei Scrims in einer Ebene: oben Nav-Zone .55, links Lesefläche.
   Die senkrechte Ebene liegt oben und endet deckend in #14161C. */
.hero-bg::after{
  background:
    linear-gradient(180deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.16) 22%,rgba(10,10,10,.22) 40%,rgba(10,10,10,.3) 64%,rgba(13,14,17,.94) 96%,#14161C 100%),
    linear-gradient(90deg,rgba(10,10,10,.62) 0 45%,transparent 75%);
}
/* Naht zur Reise: liegt fest auf der Szene, auch wenn das Bild per Parallaxe sinkt */
.scene-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(20,22,28,0),rgba(20,22,28,.9) 72%,#14161C);}
/* S1: Bild fährt von 1.12 auf 1.06. Helligkeit .55 → 1 übernimmt eine schwarze Ebene
   (opacity .45 → 0, rechnerisch gleich, aber ohne Filter auf der großen Fläche) */
.hero-bg::before{content:"";position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;}
/* Startbild Erdseilspitze: Mastspitze sitzt rechts — im Hochformat Ausschnitt nach rechts */
@media(max-width:640px){ .hero-bg img{object-position:72% 50%;} }
html.js .hero-bg img{transform:scale(1.12);}
html.js .hero-bg::before{opacity:.45;}
html.js body.ready .hero-bg img{transform:scale(1.06);transition:transform var(--t-4) var(--ease-out);}
html.js body.ready .hero-bg::before{opacity:0;transition:opacity var(--t-4) var(--ease-out);}
/* S1-Nachlauf (Kenburns): 16 s, mobil 8 s. Läuft unter dem Lesen, daher kein Token */
html.js body.seq-done .hero-bg img{animation:ee-kb 16s var(--ease-out) forwards;}
@media(max-width:640px){ html.js body.seq-done .hero-bg img{animation-duration:8s;} }
@keyframes ee-kb{from{transform:scale(1.06);}to{transform:scale(1);}}

/* Scroll-Marke unten rechts unter dem Höhenmesser */
.hero-scroll{left:auto;right:calc(var(--pad) * .55);transform:none;align-items:flex-end;}
.hero-scroll.gone{opacity:0;transition:opacity var(--t-2) var(--ease-in);}


/* ---------- S2/S3/S6 Höhenmesser ---------- */
.hud{
  gap:10px;
  translate:24px 0;
  /* S2: fährt beim Abflug in 0,5 s von rechts ein */
  transition:opacity .5s var(--ease-out),translate .5s var(--ease-out);
}
.hud.show{opacity:1;translate:none;}
/* S6: Landung 0,5 s In */
.hud.land{opacity:0;translate:24px 0;transition:opacity .5s var(--ease-in),translate .5s var(--ease-in);}
body.menu-open .hud{opacity:0;}
/* Höhenmesser: nur das Rad (Trommel mit Teilung) und der rote Strich (Ablesekante).
   Hülse, Stift, Rändel und Ratsche entfallen (Sebastian, 29.09.). Die Teilung setzt journey.js. */
.hud-scale{width:auto;height:auto;border:0;overflow:visible;}
.hud-scale::after{display:none;}
.mic{position:relative;display:flex;align-items:center;filter:drop-shadow(0 12px 24px rgba(0,0,0,.5));}
.mic-drum{
  position:relative;z-index:2;width:50px;height:132px;border-radius:5px;overflow:hidden;
  background:linear-gradient(90deg,#1E2126 0%,#2F333A 55%,#272A31 100%);
}
.mic-bevel{position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(255,255,255,.07));}
.mic-g{position:absolute;left:0;top:0;overflow:visible;}
.mic-g line{stroke-width:1.1;}
.mic-g .t-maj{stroke:rgba(255,255,255,.95);}
.mic-g .t-min{stroke:rgba(255,255,255,.66);}
.mic-g .t-fine{stroke:rgba(255,255,255,.4);}
.mic-g text{font-family:var(--mono);font-size:11px;font-weight:600;fill:#fff;dominant-baseline:central;font-variant-numeric:tabular-nums;}
.mic-g .mk{fill:var(--red);}
/* Zylinder-Schattierung: Kanten dunkel, Lichtkante knapp über der Mitte */
.mic-shade{
  position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.2) 20%,rgba(255,255,255,.09) 44%,rgba(255,255,255,.02) 56%,rgba(0,0,0,.2) 80%,rgba(0,0,0,.7) 100%);
}
/* Ablesekante: roter Strich, kommt von links und reicht bis in die Teilung der Trommel */
.mic-ref{position:absolute;left:-30px;top:50%;width:52px;height:1.5px;margin-top:-.75px;z-index:3;background:var(--red);box-shadow:0 0 8px rgba(232,51,31,.8);}
.hud-read{position:relative;margin-top:4px;}
.hud-read b{font-size:24px;}
.hud-phase{
  writing-mode:horizontal-tb;position:relative;overflow:hidden;width:15em;height:1.7em;line-height:1.7em;margin-top:-4px;
}
.hud-phase .hp{position:absolute;right:0;top:0;white-space:nowrap;transition:transform var(--t-2) var(--ease-inout);}
.hud-phase .hp.pre{transform:translateY(100%);transition:none;}
.hud-phase .hp.out{transform:translateY(-100%);}
/* S5: unter 0 m blinken Ablesekante und Phase einmal (.6 s, Signature) */
.hud.blink .mic-ref,.hud.blink .hud-phase{animation:ee-blink .6s var(--ease-inout);}
@keyframes ee-blink{0%,100%{opacity:1;}50%{opacity:.15;}}
/* Licht-Modus, falls das HUD im Übergang noch steht */
body.on-light-zone .hud-read b{color:var(--ink);}
body.on-light-zone .hud-read span{color:var(--mut-l);}
@media(max-width:1100px){ .mic{transform:scale(.84);transform-origin:right center;} }
@media(max-width:900px){
  /* Mobil: kompakte Kapsel unten rechts, verdeckt keinen Text */
  .hud{
    display:flex;flex-direction:row;align-items:center;gap:0;
    top:auto;bottom:calc(14px + env(safe-area-inset-bottom));left:auto;right:14px;transform:none;
    background:rgba(12,13,16,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    padding:7px 14px 7px 12px;border:1px solid var(--line-d);border-radius:var(--r-pill);
  }
  .hud::before{content:"";flex:none;width:8px;height:8px;margin-right:9px;border-radius:50%;background:var(--red);}
  .hud-scale,.hud-phase{display:none;}
  .hud-read{margin:0;line-height:1;}
  .hud-read b{font-size:15px;line-height:1;}
  .hud-read span{font-size:10px;line-height:1;}
  body.on-light-zone .hud-read b{color:#fff;}
  body.on-light-zone .hud-read span{color:var(--mut-d);}
}

/* ---------- S3 Abstieg ---------- */
/* --lx: x der roten Linie = Inhaltskante; --jg: Gasse zwischen Linie und Text */
.journey{--jg:36px;--lx:calc(max(0px,(100% - var(--w)) / 2) + var(--pad));}
/* Kopf, Schweif und Glühen bleiben innerhalb der Reise (nicht im Hero), unten darf der Kopf ganz stehen */
.jline{left:calc(var(--lx) + .5px);z-index:3;clip-path:inset(-20px -40px -24px -40px);}   /* oben 20 px Luft: Kopf und Glühen in Startstellung ganz (Sebastian, 29.09.) */
.jline .jline-fill{box-shadow:0 0 10px rgba(232,51,31,.4);}
.jline-head{position:absolute;left:0;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4px;border-radius:50%;background:var(--red);}
.jline-head::before{content:"";position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:radial-gradient(closest-side,rgba(232,51,31,.42),rgba(232,51,31,0));}
.jline-head::after{content:"";position:absolute;left:4px;bottom:4.5px;width:1px;height:96px;background:linear-gradient(180deg,rgba(255,112,92,0),rgba(255,112,92,.95));}
/* Gittermast: steht auf der Bodenlinie, baut sich per clip-path von oben auf (journey.js) */
.mast-layer{bottom:auto;}
.mast-layer svg{top:0;right:-8%;width:560px;height:auto;}
.mast-layer svg *{vector-effect:non-scaling-stroke;}
.mast-layer .iso{stroke:rgba(255,255,255,.18);stroke-width:8;stroke-linecap:round;}
html.jr:not(.static) .mast-layer{clip-path:inset(0 0 100% 0);}
@media(max-width:1100px){ .mast-layer svg{width:440px;} }
@media(max-width:640px){ .mast-layer{display:none;} }

/* Stationen: verdichtet, Text neben der Linie, Punkt exakt auf der Linie */
.wp{padding:var(--sp-2) 0;}
html.static .wp{padding:90px 0;}
.wp .wrap{align-items:start;}
.wp .wrap > :first-child{padding-left:var(--jg);}
.wp-alt{position:relative;margin-left:calc(-1 * var(--jg));gap:calc(var(--jg) - 5px);margin-bottom:16px;}
.wp h2{margin-bottom:14px;}
.wp-alt::after{content:"";position:absolute;left:-4px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;border:1px solid var(--red);opacity:0;pointer-events:none;}
/* S3: Station erreicht, der Ring pulst einmal (.9 s, Signature) */
.wp.here .wp-alt::after{animation:ee-ring .9s var(--ease-out) forwards;}
@keyframes ee-ring{from{scale:.4;opacity:.6;}to{scale:2.2;opacity:0;}}
.wp-media.tall .frame{max-width:380px;}
@media(min-width:901px){
  /* Gespiegelte Stationen: Stationsschild steht auf der Linie über dem Bild */
  .wp.flip .wrap{position:relative;}
  .wp.flip .wrap > :first-child{padding-left:0;}
  .wp.flip .wp-alt{position:absolute;left:var(--pad);top:0;margin:0;}
  .wp.flip .wp-media{margin-left:var(--jg);margin-top:36px;}
  .wp.flip .wp-media .frame{aspect-ratio:16/10;}
  /* Lesefläche: die Mastlinien laufen hinter der Textspalte weich aus */
  .wp.flip::before{content:"";position:absolute;top:0;bottom:0;right:0;width:58%;pointer-events:none;background:radial-gradient(62% 58% at 44% 52%,rgba(15,16,20,.94),rgba(15,16,20,.78) 52%,rgba(15,16,20,0) 100%);}
}
/* Listen: Trennlinien zeichnen sich mit dem Stagger der Zeilen */
.wp-list{margin-top:18px;}
.wp-list li{position:relative;border-bottom:0;padding:9px 0;}
.wp-list li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line-d);transform-origin:left center;}
html.js .wp-list.rev-row:not(.on) li::after{scale:0 1;}
html.js .wp-list.rev-row.on li::after{transition:scale .7s var(--ease-out);transition-delay:calc((var(--rd, 0s) + .1s + var(--i, 0) * var(--stagger)) * var(--dk));}
/* Bildparallaxe ±4 %: Bild 8 % höher als der Rahmen */
.journey .frame.prlx img{position:absolute;left:0;top:-4%;height:108%;}

/* ---------- S4 Bodenniveau ---------- */
.groundline{height:64px;}
.groundline::before,.groundline::after{content:"";position:absolute;left:calc(var(--lx) - 4px);top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;z-index:4;pointer-events:none;}
.groundline::before{background:var(--red);box-shadow:0 0 0 5px rgba(232,51,31,.15);}
.groundline::after{border:1px solid var(--red);opacity:0;}
.groundline.here::after{animation:ee-ring .9s var(--ease-out) forwards;}
.groundline .gl-tag{left:calc(var(--lx) + var(--jg));max-width:calc(100% - var(--lx) - var(--jg) - var(--pad));--rd:.2s;}
/* S4: Bodenlinie 1,1 s (trägt die ganze Breite, länger als .rev-line) */
html.js .groundline .gl.rev-line.on{transition-duration:calc(1.1s * var(--mk));}

/* Trackway-Band: rote Fläche rollt von links aus, Bohlentextur 12 px */
.tw-band{background:transparent;z-index:4;}
.tw-band::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,transparent 1px 12px),var(--red);}
html.jr:not(.static) .tw-band::before{clip-path:inset(0 100% 0 0);}
/* S4: Ausrollen 1,2 s (Signature) */
html.jr .tw-band.roll::before{clip-path:inset(0);transition:clip-path calc(1.2s * var(--mk)) var(--ease-out);}
html.jr:not(.static) .tw-band:not(.roll) [data-rev]{opacity:0;}
.tw-mark{z-index:1;}
.tw-band .h2 .d{color:var(--ink);}
.tw-band .wrap,html.static .tw-band .wrap{padding-top:64px;padding-bottom:64px;}
.tw-band .h2{max-width:20ch;}
.tw-band .tw-grid p{font-size:17.5px;font-weight:500;max-width:54ch;}
.tw-stats{margin-top:30px;}
.tw-stats .st{padding:16px 18px 16px 0;}
.tw-band .tw-media .frame{--rd:.15s;}
.tw-band .eyebrow{--rd:.4s;}
.tw-band .h2{--rd:.46s;}
.tw-band .tw-grid p{--rd:.58s;}
.tw-band .tw-stats{--rd:.66s;--stagger:80ms;}
.tw-band .tw-grid .mt-32{--rd:.8s;}

/* ---------- S5 Untergrund ---------- */
.under{isolation:isolate;background:linear-gradient(180deg,#0B0C0F 0,#08090B 30%);}
.under::before{background:repeating-linear-gradient(180deg,transparent 0 90px,rgba(255,255,255,.035) 90px 91px);z-index:1;}
/* Tiefenskala: Teilstriche 12 px auf der roten Linie, Raster 90 px wie die Haarlinien */
.under::after{
  content:"";position:absolute;top:0;bottom:0;z-index:1;pointer-events:none;left:calc(var(--lx) - 5px);width:12px;
  background:
    repeating-linear-gradient(180deg,transparent 0 89px,rgba(255,255,255,.3) 89px 90px) 0 0/12px 100% no-repeat,
    repeating-linear-gradient(180deg,transparent 0 17px,rgba(255,255,255,.16) 17px 18px) 3px 0/6px 100% no-repeat;
}
.under > .wrap,html.static .under > .wrap{padding-top:72px;padding-bottom:72px;}
.under > .wrap > .wp{padding:0;}
.under .wp > .wrap{padding:0;}
.ug-layer{position:absolute;left:0;right:0;bottom:-50%;z-index:0;pointer-events:none;}
.ug-layer:nth-child(1){top:8%;background:#0C0D10;clip-path:polygon(0 .7vw,34% .15vw,68% .85vw,100% .3vw,100% 100%,0 100%);translate:0 var(--ug1,0px);}
.ug-layer:nth-child(2){top:30%;background:#0A0B0E;clip-path:polygon(0 .2vw,22% .8vw,57% .1vw,81% .6vw,100% .2vw,100% 100%,0 100%);translate:0 var(--ug2,0px);}
.ug-layer:nth-child(3){top:52%;background:#08090B;clip-path:polygon(0 .9vw,41% .2vw,100% .75vw,100% 100%,0 100%);translate:0 var(--ug3,0px);}
.ug-layer:nth-child(4){top:74%;background:#060709;clip-path:polygon(0 .3vw,28% .9vw,63% .35vw,100% .95vw,100% 100%,0 100%);translate:0 var(--ug4,0px);}

/* ---------- S6 Auftauchen ---------- */
.resurface,html.static .resurface{overflow:hidden;height:150px;}
/* Erste Lichtsektion: der Marquee trägt schon den Abstand */
.resurface + .on-light .sec{padding-top:var(--sp-1);}
html.static .marq{padding:8px 0;}
.rs-horizon{position:absolute;inset:0;background:var(--paper);}
html.jr:not(.static) .rs-horizon{clip-path:inset(100% 0 0 0);}
.resurface .rs-tag{top:72%;z-index:2;color:var(--ink);mix-blend-mode:normal;background:var(--paper);border:1px solid var(--line-l);border-radius:var(--r-pill);padding:7px 16px;width:max-content;}
/* Nav im Licht: weißes Logo wird schwarz */
body:not(.menu-open) .nav.light .nav-logo img:only-child{filter:invert(1) brightness(.1);}

/* ---------- Licht-Sektionen (Klassen statt Inline-Styles) ---------- */
.on-light .case.case-home{border-top:1px solid var(--line-l);padding-bottom:0;}
.case-home > .wrap{padding-left:0;padding-right:0;}
.hire .h2{margin:16px 0 18px;max-width:14ch;}

/* ---------- Mobil ---------- */
@media(max-width:900px){
  .journey{--jg:28px;}
  .wp .wrap > .wp-media{margin-left:var(--jg);}
  .wp-media.tall .frame{max-width:none;aspect-ratio:16/10;}
}
@media(max-width:640px){
  .journey{--jg:22px;}
  .wp,html.static .wp{padding:64px 0;}
  .wp .wp-media,.wp.flip .wp-media{order:-1;margin-bottom:22px;}
  .wp-list li{font-size:15px;}
  .tw-band .wrap,html.static .tw-band .wrap,.under > .wrap,html.static .under > .wrap{padding-top:56px;padding-bottom:56px;}
}

/* ---------- Statik-Modus: alles sofort, Endzustände ---------- */
html.static .hero-bg img{transform:scale(1.06)!important;filter:none!important;animation:none!important;}
html.static .hero-bg::before{opacity:0!important;}
html.static .hero-bg,html.static .hero-inner{transform:none!important;opacity:1!important;}
html.static .hero-scroll{opacity:1!important;}
html.static .hud{translate:none!important;}
html.static .hud.land{opacity:0;}
@media(min-width:901px){ html.static .hud{transform:translateY(-50%);} }
html.static .hud-phase .hp{transform:none!important;}
html.static .mast-layer{clip-path:none!important;}
html.static .mast-layer svg{transform:none!important;}
html.static .jline .jline-fill{transform:none!important;}
html.static .jline-head{top:100%;transform:none!important;}
html.static .journey .frame.prlx img{transform:none!important;}
html.static .wp-list li::after{scale:none!important;}
html.static .wp-alt::after,html.static .groundline::after{animation:none!important;opacity:0!important;}
html.static .tw-band::before{clip-path:none!important;}
html.static .tw-band [data-rev]{opacity:1!important;}
html.static .tw-mark{transform:none!important;}
html.static .ug-layer{translate:none!important;}
html.static .rs-horizon{clip-path:none!important;}

/* ---------- Reduced Motion: jede Bewegung aus, Inhalt sofort sichtbar ---------- */
@media(prefers-reduced-motion:reduce){
  .hero-bg img,html.js .hero-bg img,html.js body.ready .hero-bg img{transform:scale(1.06)!important;filter:none!important;animation:none!important;transition:none!important;}
  .hero-bg::before,html.js .hero-bg::before{opacity:0!important;transition:none!important;}
  .hero-bg,.hero-inner{transform:none!important;opacity:1!important;}
  .hud,.hud.land,.hud-phase .hp{transition:none!important;}
  .hud{translate:none!important;}
  .hud.blink .mic-ref,.hud.blink .hud-phase{animation:none!important;}
  .mast-layer{clip-path:none!important;}
  .mast-layer svg{transform:none!important;}
  .jline .jline-fill{transform:none!important;}
  .jline-head{top:100%;transform:none!important;}
  .journey .frame.prlx img{transform:none!important;}
  .wp-list li::after{scale:none!important;transition:none!important;}
  .wp-alt::after,.groundline::after{animation:none!important;opacity:0!important;}
  .tw-band::before{clip-path:none!important;transition:none!important;}
  .tw-band [data-rev]{opacity:1!important;}
  .tw-mark{transform:none!important;}
  .ug-layer{translate:none!important;}
  .rs-horizon{clip-path:none!important;}
}

/* Ende der Reise: unsichtbare Höhenmarke −3 m am Fuß der Reise (Nr. 12/13) */
.jend{display:block;height:1px;margin-top:20vh;}

/* Bereichs-Kennung je Station: EPCM · Serviceleistungen · Trackway (Termin 29.09., Nr. 21) */
.wp-tag{display:inline-block;margin:6px 0 12px;padding:4px 9px;border:1px solid rgba(232,51,31,.55);border-radius:var(--r-pill);font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--red);}
.under .wp-tag{border-color:rgba(232,51,31,.55);}

/* Termin 29.09.: Höhenmesser zurücknehmen (Nr. 23), Spindel weg (Nr. 24) */
.mic{filter:none;opacity:.62;transform:scale(.86);transform-origin:right center;}
/* nur Desktop: am Handy ist der Zähler eine kleine Kapsel, die diese Werte nicht erben darf */
@media(min-width:901px){
  .hud-read b{font-size:22px;}
  .hud.show{opacity:.82;}
  @media(hover:hover){ .hud:hover{opacity:1;} .hud:hover .mic{opacity:.9;} }
}

/* Nr. 27 (Termin 29.09.): Notebooks mit niedrigem Bildschirm (14", 1366×768 / 1280×720).
   Früher rutschte der Hero-Inhalt oben hinter die Navigation; seit Leistungsleiste, Etikett und zweiter
   Button entfallen sind (29.09.), reicht die normale Lage. Hier nur noch engere Schrift und Abstände. */
@media(min-width:901px) and (max-height:840px){
  .hero-inner h1.display{font-size:clamp(40px,5.2vw,64px);line-height:.98;}
  .hero-sub{margin-top:14px;font-size:16px;}
  .hero-cta{margin-top:18px;}
}
@media(min-width:901px) and (max-height:740px){
  .hero-inner h1.display{font-size:clamp(36px,4.6vw,54px);}
  .hero-sub{font-size:15px;margin-top:10px;}
  .hero-cta{margin-top:14px;}
}

/* Sebastian, 29.09. abends: Punkte liegen sauber mittig auf der Linie, die Linie läuft nicht
   sichtbar durch die Kugeln. Stationspunkte exakt auf
   der Linienmitte (Linie beginnt bei --lx + .5 px, ist 1 px breit, Mitte also --lx + 1 px).
   Der helle Schweif der wandernden Kugel endet an ihrem oberen Rand. */
.wp-alt::before{margin-left:-3.5px;}
/* Mit Skript: Punkte als .jstop in der Linienebene (journey.js), die Textpunkte treten zurück */
.jstop{position:absolute;left:0;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px rgba(232,51,31,.15);pointer-events:none;}
.journey.js-stops .wp-alt::before{visibility:hidden;}
.jline-head::after{bottom:9px;}

/* Kopf in Ruhe (Startstellung): kein Schweif, der sonst in den Hero ragt; beim Losscrollen blendet er ein */
.jline-head::after{transition:opacity var(--t-2) var(--ease-out);}
.jline-head.ruht::after{opacity:0;}