/* ═══════════════════════════════════════════════════════════════════
   components.css — Vanilla-Ports moderner React-Library-Patterns
   (React Bits / Kokonut UI / Magic UI). Jedes FEATURE ist ein in sich
   geschlossener Block: Block löschen (+ zugehöriger Block in
   js/components.js) = Feature restlos entfernt.
   ═══════════════════════════════════════════════════════════════════ */

/* FEATURE 1: SPOTLIGHT-HOVER (Kokonut/Magic-UI-Stil) — System-Karten.
   JS setzt --mx/--my per mousemove; der Glow liegt auf ::after.
   Nur für echte Zeiger-Geräte, aus bei reduced motion. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-spotlight] { position: relative; }
  [data-spotlight]::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none; opacity: 0;
    transition: opacity .35s var(--ease);
    background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%),
      rgba(201, 162, 74, .10), transparent 65%);
  }
  [data-spotlight]:hover::after { opacity: 1; }
  [data-spotlight]:hover { border-color: rgba(201, 162, 74, .45); }
}

/* FEATURE 2: TILT-HOVER (React-Bits-Stil) — Portal-Karten + Beweis-Blöcke.
   JS setzt den perspective/rotate-Transform inline; die kurze
   transform-Transition hier macht die Neigung träge und das
   Zurückgleiten beim Verlassen weich. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-tilt] {
    transition: transform .2s var(--ease), border-color .35s var(--ease), box-shadow .4s var(--ease);
    will-change: transform;
  }
}

/* FEATURE 3: AUFKLAPP-KARTEN (Kokonut-Stil) — FAQ als Karten.
   Optik: details-Elemente werden Karten mit Gold-Schimmer beim Hover.
   Die Höhen-Animation macht js/components.js (WAAPI auf dem details-
   Element — kein Struktur-Umbau nötig); die native Chromium-Transition
   aus sections.css wird hier deaktiviert, damit nichts doppelt animiert. */
#faq .faq { border-top: none; display: flex; flex-direction: column; gap: .8rem; }
#faq .faq__i {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  border-bottom: 1px solid var(--line); /* sections.css-Reset bleibt konsistent */
  padding: 0 1.6rem; box-shadow: var(--shadow-card);
  transition: border-color .35s var(--ease), box-shadow .4s var(--ease);
}
#faq .faq__i:hover { border-color: var(--gold-line); box-shadow: var(--shadow-card), 0 0 40px rgba(201, 162, 74, .07); }
#faq .faq__i summary { padding: 1.3rem 0; }
#faq .faq__i p { padding-bottom: 1.4rem; }
#faq .faq__i::details-content { transition: none; opacity: 1; block-size: auto; }

/* FEATURE 4: SPOTLIGHT-CARDS V2 (Kokonut SpotlightCards, Gold-Port) —
   System-Karten: Akzent-Tönung, Shimmer-Sweep, Akzent-Grundlinie,
   Fokus dimmt Geschwister. Entfernen: diesen Block löschen. */
@media (hover: hover) and (pointer: fine) {
  .sys__card { position: relative; overflow: hidden;
    transition: transform .25s var(--easeOut), opacity .3s var(--ease), border-color .3s var(--ease); }
  /* Statische Akzent-Tönung oben links */
  .sys__card::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background: radial-gradient(ellipse at 18% 14%, color-mix(in srgb, var(--card-accent, #C9A24A) 9%, transparent), transparent 62%);
  }
  /* Shimmer-Sweep beim Hover */
  .sys__card .sys__media::after {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 55%;
    transform: translateX(-130%) skewX(-12deg);
    background: linear-gradient(90deg, transparent, rgba(244,239,232,.06), transparent);
    transition: transform .7s var(--easeOut); pointer-events: none;
  }
  .sys__card:hover .sys__media::after { transform: translateX(300%) skewX(-12deg); }
  .sys__media { position: relative; }
  /* Akzent-Grundlinie wächst beim Hover */
  .sys__card::after { z-index: 2; }
  .sys__card .sys__no { color: var(--card-accent, var(--gold)); position: relative; z-index: 1; }
  .sys__card > *:not(.sys__media) { position: relative; z-index: 1; }
  .sys__underline { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; z-index: 3;
    background: linear-gradient(90deg, var(--card-accent, #C9A24A) , transparent);
    transition: width .5s var(--easeOut); border-radius: 999px; }
  .sys__card:hover .sys__underline { width: 100%; }
  /* Fokus dimmt Geschwister (reines CSS via :has) */
  .sys:has(.sys__card:hover) .sys__card:not(:hover) { opacity: .45; transform: scale(.97); }
}
@media (prefers-reduced-motion: reduce) {
  .sys__card, .sys__card .sys__media::after, .sys__underline { transition: none; animation: none; }
}

/* FEATURE 5: GROSSE MOMENTE (ScrollText-Idee) — Problem-Sektion:
   drei große Text-Momente, der aktive leuchtet, die anderen dimmen.
   Entfernen: diesen Block + FEATURE-5-Block in components.js. */
.moments { display: flex; flex-direction: column; gap: clamp(3rem, 8vh, 5.5rem); padding: 2rem 0 1rem; max-width: 56rem; }
.moment { opacity: .28; transform: translateY(10px); filter: saturate(.6);
  transition: opacity .6s var(--ease), transform .6s var(--easeOut), filter .6s var(--ease); }
.moment.is-live { opacity: 1; transform: none; filter: none; }
.moment__time { font-size: clamp(1rem, 1.6vw, 1.3rem); color: var(--gold); letter-spacing: .18em; margin-bottom: .6rem; }
.moment__p { font-family: var(--display); font-size: clamp(1.6rem, 3.4vw, 2.9rem); line-height: 1.18; color: var(--ink); max-width: 52rem; }
.moment__p .em { font-size: .82em; }
.moment__inst { color: var(--ink-4); margin-top: .8rem; font-size: .62rem; letter-spacing: .16em; }
@media (prefers-reduced-motion: reduce) { .moment { opacity: 1; transform: none; filter: none; transition: none; } }

/* FEATURE 6: HEX-WABEN (Rubric-Stil) — Final-CTA-Hintergrund: Bienenwaben-
   Gitter, Waben leuchten unter der Maus auf und federn zurück.
   Entfernen: diesen Block + FEATURE-6-Block in components.js + das canvas. */
.final { position: relative; overflow: hidden; }
.final__hex { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .8; }
.final__inner { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .final__hex { display: none; } }

/* FEATURE 7: HORIZONTALE STATIONEN (Pales-Idee, größer) — "Der Weg" scrollt
   horizontal durch große Karten, dann vertikal weiter.
   Entfernen: Block hier + FEATURE-7-Block in components.js + Sektion #weg zurückbauen. */
.wayh { position: relative; height: 340vh; background: var(--raised); }
.wayh__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.wayh__track { display: flex; gap: clamp(1.5rem, 3vw, 3rem); align-items: center; flex: 1;
  padding: 2rem var(--pad) 3rem; will-change: transform; }
.wayh__card { flex: 0 0 auto; width: min(44rem, 74vw); min-height: 24rem;
  background: #141210; border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(2rem, 4vw, 3.4rem); position: relative; overflow: hidden;
  box-shadow: var(--shadow-deep); display: flex; flex-direction: column; justify-content: center; }
.wayh__card::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 16% 12%, color-mix(in srgb, var(--wa) 10%, transparent), transparent 60%); }
.wayh__no { color: var(--wa); letter-spacing: .2em; margin-bottom: 1rem; }
.wayh__t { font-family: var(--display); font-size: clamp(1.9rem, 3.4vw, 3rem); color: var(--ink); }
.wayh__p { color: var(--ink-2); margin-top: 1.1rem; max-width: 34rem; font-size: 1.05rem; }
.wayh__tag { color: var(--ink-4); margin-top: 1.6rem; font-size: .62rem; letter-spacing: .18em; }
.wayh__line { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--wa), transparent 70%); opacity: .8; }
.wayh__card--cta { align-items: flex-start; background: #17130d; border-color: var(--gold-line); }
@media (max-width: 880px) {
  .wayh { height: auto; background: var(--raised); }
  .wayh__pin { position: static; height: auto; }
  .wayh__track { flex-direction: column; align-items: stretch; transform: none !important; }
  .wayh__card { width: auto; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wayh { height: auto; } .wayh__pin { position: static; height: auto; }
  .wayh__track { flex-wrap: wrap; transform: none !important; }
}

/* FEATURE 4b: Karten default dunkler, Akzent erst beim Hover voll */
.sys__card { background: #131110; }
.sys__card::before { opacity: .5; transition: opacity .4s var(--ease); }
.sys__card:hover::before { opacity: 1; }

/* FEATURE 8: FAQ mittig */
#faq .sec__head, #faq .faq { max-width: 46rem; margin-inline: auto; }
#faq .sec__head { text-align: center; }
#faq .sec__head .sec__sub { margin-inline: auto; }

/* FEATURE 9: Momente-Parallax — Bühnenbild wandert sanft mit */
.sec--stage .stagebg img { will-change: transform; transform: translateY(var(--par, 0px)) scale(1.06); }

/* FEATURE 10: PARTNER-SEKTION (ENTWURF — Linus-Freigabe ausstehend).
   Entfernen: Sektion #partner + dieser Block. */
.partner { text-align: center; position: relative; }
.partner__marks { display: flex; align-items: center; justify-content: center;
  gap: clamp(1.4rem, 4vw, 3rem); margin-top: 2.6rem; flex-wrap: wrap; }
.partner__verselo { font-family: var(--display); font-size: clamp(2rem, 4vw, 3.2rem); color: var(--ink); }
.partner__verselo i { font-style: normal; color: var(--gold); }
.partner__x { font-family: var(--mono); color: var(--ink-4); font-size: 1.4rem; }
/* Partnerlogo. Die Datei selbst ist unkenntlich gemacht (gblur sigma 100) — der
   Filter hier macht daraus einen hellen Fleck auf dunklem Grund, damit klar wird,
   dass dort ein Logo steht. Nach der Freigabe wird nur die Bilddatei getauscht. */
.partner__logo { height: clamp(2.2rem, 4vw, 3.4rem); width: auto;
  filter: grayscale(1) brightness(1.7); opacity: .78; }
/* Textplatzhalter, falls das Logo doch wieder entfallen muss */
.partner__tbd { color: var(--ink-3); font-size: clamp(.7rem, 1.4vw, .9rem);
  letter-spacing: .22em; border: 1px solid var(--line-2); border-radius: 999px;
  padding: .7rem 1.4rem; }
.partner__sub { color: var(--ink-4); margin-top: 2rem; font-size: .6rem; letter-spacing: .16em; }

/* FEATURE 11: Beweis-Karten versetzt (Rhythmus statt gleicher Reihe) */
@media (min-width: 900px) {
  .proof { align-items: start; }
  .proof__b:nth-child(2) { margin-top: 3.2rem; }
  .proof__b:nth-child(3) { margin-top: 6.4rem; }
}

/* FEATURE 7b: Stationen größer + Riesen-Zahl + Verbindungs-Punkte wandern */
.wayh { height: 380vh; }
.wayh__card { width: min(52rem, 80vw); min-height: 28rem; }
.wayh__track { gap: 0; }
.wayh__big { position: absolute; right: -1rem; bottom: -3.4rem; z-index: 0;
  font-family: var(--display); font-weight: 600; font-size: clamp(11rem, 20vw, 17rem);
  line-height: 1; color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in srgb, var(--wa) 34%, transparent);
  pointer-events: none; user-select: none; }
.wayh__card > *:not(.wayh__big):not(.wayh__line) { position: relative; z-index: 1; }
.wayh__link { flex: 0 0 auto; width: clamp(4rem, 7vw, 7rem); display: flex;
  align-items: center; justify-content: center; gap: .9rem; position: relative; }
.wayh__link::before { content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--gold-line); }
.wayh__link b { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-deep);
  position: relative; animation: waylink 1.8s var(--ease) infinite; }
.wayh__link b:nth-child(2) { animation-delay: .3s; }
.wayh__link b:nth-child(3) { animation-delay: .6s; }
@keyframes waylink {
  0%, 100% { background: var(--gold-deep); box-shadow: none; transform: scale(1); }
  30% { background: var(--gold-bright); box-shadow: 0 0 12px rgba(231,194,109,.8); transform: scale(1.35); }
}
@media (max-width: 880px) { .wayh__link { display: none; } .wayh__track { gap: 1.5rem; } .wayh__big { font-size: 9rem; bottom: -2rem; } }
@media (prefers-reduced-motion: reduce) { .wayh__link b { animation: none; } }

/* FEATURE 12: 50-50-SCROLL (Beweis) — links scrollen die Beweise durch,
   rechts bleibt das Medium sticky und wechselt. */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.split__steps { display: flex; flex-direction: column; }
.split__step { min-height: 62vh; display: flex; flex-direction: column; justify-content: center;
  gap: 1rem; opacity: .3; transition: opacity .5s var(--ease); }
.split__step.is-on { opacity: 1; }
.split__stick { position: sticky; top: calc(50vh - 14rem); }
.split__media { margin: 0; position: relative; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--gold-line); box-shadow: var(--shadow-deep); }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.04); transition: opacity .6s var(--ease), transform .8s var(--easeOut); }
.split__media img.is-on { opacity: 1; transform: none; }
.split__cap { color: var(--ink-4); font-size: .58rem; letter-spacing: .16em; margin-top: .8rem; }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split__stick { position: static; order: -1; }
  .split__step { min-height: 0; padding: 1.4rem 0; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .split__step { opacity: 1; } }

/* FEATURE 13: BENTO-GRID (Kokonut-UI-Stil) — Portale als 2/3+1/3-Raster.
   Reihe 1: [Websites breit][Eigentum], Reihe 2: [Terminal][Workspace breit].
   Rahmen-/Knoten-Motive werden aus .portal--web/.portal--ws wiederverwendet. */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.bento__card {
  position: relative; display: flex; flex-direction: column; gap: 1rem; overflow: hidden;
  min-width: 0; max-width: 100%;
  text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 2.1rem 2rem; box-shadow: var(--shadow-card);
  transition: transform .45s var(--easeOut), border-color .4s var(--ease), box-shadow .45s var(--ease);
}
.bento__card:hover { transform: translateY(-5px); border-color: var(--gold-line);
  box-shadow: var(--shadow-deep), 0 0 70px rgba(201, 162, 74, .09); }
.bento--wide { grid-column: span 2; }
.bento__no { color: var(--gold); }
.bento__p { color: var(--ink-2); flex: 1; }
.bento__hint, .bento__mods { color: var(--ink-4); font-size: .6rem; }
.bento__card .link { align-self: flex-start; }
.bento__media { margin: .4rem 0 .6rem; overflow: hidden; border-radius: 10px; border: 1px solid var(--line); }
.bento__media img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover;
  object-position: top; transition: transform .6s var(--easeOut); }
.bento__card:hover .bento__media img { transform: scale(1.03); }
/* Terminal-Karte: dunkles Mono-Fenster, JS tippt die Zeilen (FEATURE 13 in components.js) */
.bento__term { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: .65rem;
  min-height: 9rem; background: #131110; border: 1px solid var(--line); border-radius: 10px;
  padding: 1.2rem 1.3rem; }
.bento__line { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em;
  color: var(--ink-2); min-height: 1.2em; overflow-wrap: anywhere; }
.bento__line.is-typing::after { content: ''; display: inline-block; width: .55em; height: .95em;
  margin-left: .18em; vertical-align: -.12em; background: var(--gold);
  animation: bentoCaret 1s steps(2, start) infinite; }
@keyframes bentoCaret { 50% { opacity: 0; } }
@media (max-width: 880px) {
  .bento { grid-template-columns: 1fr; }
  .bento--wide { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .bento__card:hover { transform: none; }
  .bento__line.is-typing::after { display: none; animation: none; }
}

/* FEATURE 5b/12b: Momente im 50-50-Split + strafferer Split-Einstieg */
.split--tight .split__step { min-height: 46vh; }
/* Nur die Problem-Sektion startet oben bündig — im Beweis-Split würde der
   verkürzte erste Schritt das Trigger-Band verfehlen (Bild bliebe schwarz). */
.split--tight .split__step:first-child { min-height: 34vh; justify-content: flex-start; padding-top: 1rem; }
/* Auslauf, damit der LETZTE Beweis noch mittig steht, bevor sticky endet. */
#beweis .split__steps { padding-bottom: 20vh; }
.split--tight .moment__p { font-size: clamp(1.4rem, 2.6vw, 2.2rem); }
.split--tight .split__media { aspect-ratio: 16 / 10; }

/* FEATURE 7c: Mini-Leiter + Trennlinie in den Stations-Karten */
.wayh__meter { display: flex; gap: .45rem; margin-bottom: 1.1rem; }
.wayh__meter b { width: 2rem; height: 3px; border-radius: 999px; background: var(--line-2); }
.wayh__meter b.on { background: var(--wa); box-shadow: 0 0 8px color-mix(in srgb, var(--wa) 60%, transparent); }
.wayh__sep { border: 0; border-top: 1px solid var(--line); margin: 1.2rem 0 0; width: 4.5rem; }

/* FEATURE 7d: Stations-Schiene — gerade Achse, vier Haltepunkte, Fortschritts-
   Füllung. (Vorher eine freie Wellenlinie; die las sich als Darstellungsfehler.) */
.wayh__rail { position: absolute; left: var(--pad); right: var(--pad); bottom: 3.4rem;
  height: 2px; background: var(--line-2); pointer-events: none; z-index: 1; }
.wayh__rail-fill { position: absolute; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  box-shadow: 0 0 12px rgba(201, 162, 74, .5); }
.wayh__stop { position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 11px; height: 11px; border-radius: 999px; background: var(--raised);
  border: 1.5px solid var(--line-2); transition: border-color .35s var(--ease),
    background .35s var(--ease), box-shadow .35s var(--ease); }
.wayh__stop b { position: absolute; top: -1.7rem; left: 50%; transform: translateX(-50%);
  font-family: var(--mono, 'JetBrains Mono', monospace); font-size: .58rem;
  letter-spacing: .18em; color: var(--ink-4); font-weight: 400; transition: color .35s var(--ease); }
.wayh__stop.is-on { background: var(--gold); border-color: var(--gold-bright);
  box-shadow: 0 0 14px rgba(231, 194, 109, .7); }
.wayh__stop.is-on b { color: var(--gold-bright); }
@media (max-width: 760px) { .wayh__rail { display: none; } }

/* FEATURE 14: DIE MASCHINE — echter Film-Scrub auf Canvas (Frame-Sequenz).
   Entfernbar: Sektion #maschine + dieser Block + FEATURE-14-Block in components.js. */
.mach { height: 620vh; background: #050403; }
.mach__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.mach__cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mach__poster { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: opacity .5s var(--ease); }
.mach--ready .mach__poster { opacity: 0; }
/* Vignette + Scrims: die Innen-Akte sind sehr hell, ohne die dunklen Bänder
   oben/unten wird das HUD auf goldenem Grund unlesbar. */
.mach__vignette { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(5, 4, 3, .78) 0%, rgba(5, 4, 3, .25) 16%, transparent 30%),
    linear-gradient(0deg, rgba(5, 4, 3, .85) 0%, rgba(5, 4, 3, .35) 20%, transparent 38%),
    radial-gradient(120% 90% at 50% 42%, transparent 52%, rgba(5, 4, 3, .82) 100%); }
.mach__grain { position: absolute; inset: -60px; pointer-events: none; opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation: machGrain 1.1s steps(3) infinite; }
@keyframes machGrain { 50% { transform: translate(18px, -12px); } }

/* HUD-Messpunkte */
.mach__labels { position: absolute; inset: 0; pointer-events: none; }
.mlab { position: absolute; font-family: 'JetBrains Mono', monospace; font-size: .6rem;
  letter-spacing: .16em; color: rgba(244, 239, 232, .85); white-space: nowrap;
  padding-left: 3.2rem; opacity: 0; text-shadow: 0 1px 8px rgba(5, 4, 3, .9);
  transition: opacity .45s var(--ease); }
.mlab.is-on { opacity: 1; }
.mlab::before { content: ''; position: absolute; left: .45rem; top: 50%; width: 2.3rem;
  height: 1px; background: rgba(244, 239, 232, .55); }
.mlab::after { content: ''; position: absolute; left: 0; top: 50%; width: 5px; height: 5px;
  border-radius: 999px; background: var(--gold-bright); transform: translateY(-50%);
  box-shadow: 0 0 8px rgba(231, 194, 109, .9); }
.mlab--r { padding-left: 0; padding-right: 3.2rem; }
.mlab--r::before { left: auto; right: .45rem; }
.mlab--r::after { left: auto; right: 0; }

/* Ecken-HUD */
.mach__c { position: absolute; z-index: 3; color: var(--ink-3); font-size: .6rem;
  letter-spacing: .18em; line-height: 1.7; text-shadow: 0 1px 8px rgba(5, 4, 3, .9); }
.mach__c span { color: var(--ink-4); }
.mach__c--tl { top: 5.5rem; left: var(--pad); }
.mach__c--tr { top: 5.5rem; right: var(--pad); text-align: right; }
.mach__c--bl { bottom: 1.6rem; left: var(--pad); color: var(--gold); }
.mach__c--br { bottom: 1.6rem; right: var(--pad); }

/* Akt-Copy */
.mach__copy { position: absolute; left: var(--pad); bottom: 5.5rem; z-index: 2;
  max-width: 30rem; opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--ease), transform .5s var(--easeOut); }
.mach__copy.is-on { opacity: 1; transform: none; }
.mach__copy .h2 { text-shadow: 0 2px 26px rgba(5, 4, 3, .9); }
.mach__copy p { margin-top: .8rem; color: var(--ink-2); font-size: 1.05rem;
  text-shadow: 0 1px 12px rgba(5, 4, 3, .9); }
.mach__hint { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%);
  color: var(--ink-4); z-index: 3; transition: opacity .4s var(--ease); }

@media (max-width: 760px) {
  .mach { height: 500vh; }
  .mach__c--tr { display: none; }
  .mlab { font-size: .52rem; padding-left: 2.2rem; }
  .mlab::before { width: 1.5rem; }
  .mlab--r { padding-left: 0; padding-right: 2.2rem; }
  .mach__copy { bottom: 4.5rem; right: var(--pad); }
}
@media (prefers-reduced-motion: reduce) {
  .mach { height: auto; }
  .mach__stage { position: relative; height: 100vh; }
  .mach__grain { animation: none; }
  .mach__cv { display: none; }
  .mach--ready .mach__poster { opacity: 1; }
}