/* ANKERHELD Hero: scroll-getriebener Plotterschnitt */
.stage{position:relative;height:var(--stage)}
.sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 44%,#1A1814 0%,var(--ink) 62%,#0C0B09 100%)}
.mat{position:absolute;inset:0;width:100%;height:100%;opacity:.5}
/* Jacht blendet im letzten Drittel des Scrollwegs ein */
.hbild{position:absolute;inset:0;opacity:0;pointer-events:none}
/* Leuchtturm liegt vor dem Scrollen da und blendet beim Scrollen aus */
.hbild--start{opacity:1}
.hbild--start img{object-position:center 52%}
.hschleier--start{background:
  radial-gradient(46% 42% at 50% 46%, rgba(18,17,14,.74) 0%, rgba(18,17,14,.46) 62%, rgba(18,17,14,.10) 100%),
  linear-gradient(to bottom, rgba(18,17,14,.48) 0%, rgba(18,17,14,.16) 44%, rgba(18,17,14,.46) 100%)}
.hbild img{width:100%;height:100%;object-fit:cover;object-position:center 44%}
.hschleier{position:absolute;inset:0;display:block;
  background:
    radial-gradient(58% 48% at 50% 48%, rgba(18,17,14,.86) 0%, rgba(18,17,14,.60) 55%, rgba(18,17,14,.40) 100%),
    linear-gradient(to bottom, rgba(18,17,14,.72) 0%, rgba(18,17,14,.34) 40%, rgba(18,17,14,.66) 100%)}
.matline{stroke:var(--line);stroke-width:.6;fill:none}
.reg{stroke:var(--machine);stroke-width:1.1;fill:none;opacity:.5}
/* Logo-Sperrsatz: Anker + Schriftzug in einem Koordinatensystem */
.lock{position:absolute;top:50%;left:50%;width:min(880px,86vw);
  transform:translate(-50%,-50%);will-change:transform}
.locksvg{width:100%;height:auto;overflow:visible;display:block}
.cutline{fill:none;stroke:var(--machine);stroke-width:5;stroke-linejoin:round;stroke-linecap:round;
  filter:drop-shadow(0 0 7px rgba(156,172,184,.45))}
.wordcut{stroke-width:3.2}
.fillgold{fill:var(--gold)}
.fillpaper{fill:var(--paper)}
.weed{fill:var(--mat);stroke:var(--line);stroke-width:2;opacity:0}
.blade{fill:var(--paper);opacity:0}
.bring{fill:none;stroke:var(--gold);stroke-width:3;opacity:0}
.beats{position:absolute;inset:0;pointer-events:none}
.beat{position:absolute;left:50%;transform:translateX(-50%);width:min(760px,86vw);text-align:center;
  font-family:var(--display);font-weight:300;font-size:clamp(25px,4.4vw,50px);line-height:1.18;
  letter-spacing:-.015em;opacity:0;text-shadow:0 2px 44px rgba(18,17,14,.96),0 1px 5px rgba(18,17,14,.85)}
.beat-1{top:11%}
.beat-2{bottom:11%}
.beat em{font-style:normal;color:var(--gold)}
.hud{position:absolute;left:clamp(18px,4vw,52px);bottom:clamp(18px,4vw,44px);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--mute);
  line-height:1.9;text-transform:uppercase;opacity:0;transition:opacity .6s ease}
.hud.on{opacity:.85}
.hud b{color:var(--machine);font-weight:500}
.hud .st{color:var(--gold)}
.hud{font-size:9.5px;bottom:14px}
.hud div:first-child{display:none}
.scrollcue{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);font-family:var(--mono);
  font-size:clamp(13px,1.5vw,16px);letter-spacing:.34em;color:var(--gold);text-transform:uppercase;
  transition:opacity .5s;text-indent:.34em}
.scrollcue span{display:block;width:1px;height:42px;margin:14px auto 0;
  background:linear-gradient(var(--gold),transparent);
  animation:cuepuls 3.4s ease-in-out infinite}
@keyframes cuepuls{0%,100%{opacity:1}50%{opacity:.55}}
@media(max-width:700px){.scrollcue{bottom:5%}.scrollcue span{height:30px}}
/* Ungeschnittene Kontur: das Material liegt schon auf dem Plotterbett */
.ghost{fill:none;stroke:#3A342B;stroke-width:4;stroke-linejoin:round;opacity:.9}
.settle{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  padding:0 24px;opacity:0;pointer-events:none}
.settle.on{pointer-events:auto}
.settle>div{margin-top:22vh}
.settle h1{font-family:var(--display);font-weight:300;font-size:clamp(30px,5.4vw,62px);
  line-height:1.08;letter-spacing:-.03em;max-width:24ch;margin:0 auto;text-wrap:balance}
.settle h1 em{font-style:normal;font-weight:700;color:var(--gold)}
.settle p{margin:22px auto 0;max-width:52ch;color:var(--mute);font-size:clamp(14px,1.5vw,17px);line-height:1.7}
.beat{display:none}
@media(max-width:700px){.hud{font-size:9.5px;bottom:14px}.hud div:first-child{display:none}}

:root{--stage:820vh}
@media(max-width:700px){:root{--stage:620vh}}
.settle .btn{margin-top:54px}
.settle p{margin-top:26px}
@media(prefers-reduced-motion:reduce){:root{--stage:100svh}.beat{display:none}}