/* WOLKA EMPIRE – Bewegungsebene (Preloader, Seitenübergang, Cursor, Partikel, Glanz).
   Alles nur unter html.js-motion aktiv; ohne JS oder bei Reduced Motion bleibt die Seite statisch und vollständig sichtbar. */

/* ---------- Preloader (nur Startseite, einmal pro Sitzung) ---------- */
.pre{display:none}
.has-pre .pre{display:block;position:fixed;inset:0;z-index:400;pointer-events:none;animation:fxKill 0s 3.2s forwards}
.pre-panel{position:absolute;left:0;right:0;height:50.5%;background:#0e0d0c}
.pre-panel--a{top:0}.pre-panel--b{bottom:0}
.pre-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:22px}
.pre-sig{width:clamp(64px,7vw,92px);height:auto;overflow:visible;filter:drop-shadow(0 0 18px rgba(230,180,120,.35))}
.pre-ring{stroke-dasharray:1;stroke-dashoffset:1}
.pre-w path{opacity:0}
.pre-line{display:block;width:clamp(120px,14vw,200px);height:1px;background:linear-gradient(90deg,rgba(230,199,156,0),#e6c79c,rgba(230,199,156,0));transform:scaleX(0)}
.pre-word{font:500 11px/1 var(--text);letter-spacing:.42em;text-indent:.42em;color:#e6c79c;opacity:0}
@keyframes fxKill{to{visibility:hidden;opacity:0}}

/* ---------- Seitenübergang: Vorhang mit Bronzelinie ---------- */
.pt{display:none}
.js-motion .pt{display:block;position:fixed;inset:0;z-index:390;pointer-events:none;background:#0e0d0c;visibility:hidden;transform:translateY(100%)}
.js-motion.pt-in .pt{visibility:visible;transform:none;animation:fxKill 0s 2.6s forwards}
.pt-line{position:absolute;left:0;right:0;top:50%;height:1px;background:linear-gradient(90deg,rgba(230,199,156,0),#e6c79c 50%,rgba(230,199,156,0));transform:scaleX(0);box-shadow:0 0 18px rgba(230,180,120,.55)}
.pt-in .pt-line{transform:none}
.pt-sig{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-70px 0 0 -23px;color:#e6c79c;opacity:0}
.pt-in .pt-sig{opacity:.9}

/* ---------- Hero: Vorbereitung, damit nichts aufblitzt ---------- */
.js-motion .hero-title{visibility:hidden}
.js-motion .hero-title .lm-i{transform:none}
.hero-title .ch{display:inline-block;will-change:transform,opacity,filter}
.hf-rule{position:absolute;left:16px;right:16px;top:0;height:1px;background:linear-gradient(90deg,rgba(230,199,156,0),#e6c79c,rgba(230,199,156,0));transform-origin:left center}
.js-motion .hf-rule{transform:scaleX(0)}
.hf-sweep{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;mix-blend-mode:screen}
.hf-sweep i{position:absolute;top:-10%;bottom:-10%;left:0;width:40%;background:linear-gradient(100deg,rgba(255,230,190,0),rgba(255,226,180,.2) 42%,rgba(255,246,228,.36) 50%,rgba(255,226,180,.2) 58%,rgba(255,230,190,0));transform:translateX(-120%) skewX(-14deg)}
.hf-pic{position:relative}
.hero-cue{position:absolute;z-index:6;left:50%;bottom:22px;display:flex;flex-direction:column;align-items:center;gap:10px;transform:translateX(-50%);color:#e6c79c;text-decoration:none}
.hero-cue-line{position:relative;display:block;width:1px;height:46px;overflow:hidden;background:rgba(230,199,156,.22)}
.hero-cue-line i{position:absolute;left:-1px;top:0;width:3px;height:14px;border-radius:3px;background:linear-gradient(#fff6e6,#e6c79c);box-shadow:0 0 10px rgba(240,200,140,.9);animation:cue 2.2s cubic-bezier(.6,0,.3,1) infinite}
.hero-cue-txt{font:500 10px/1 var(--text);letter-spacing:.32em;text-indent:.32em;text-transform:uppercase;opacity:.8}
@keyframes cue{0%{transform:translateY(-16px)}70%,100%{transform:translateY(48px)}}
.js-motion .hero-cue{opacity:0}
@media (prefers-reduced-motion:reduce){.hero-cue-line i{animation:none;transform:translateY(16px)}}
@media (max-width:900px){.hero-cue{display:none}}

/* ---------- Metall: einmaliger Lichtlauf (zweite Hintergrundebene) ---------- */
.js-motion .metal{background-image:linear-gradient(100deg,rgba(255,250,236,0) 42%,rgba(255,250,236,.95) 50%,rgba(255,250,236,0) 58%),linear-gradient(100deg,#b9834f 0%,#f1dcb6 36%,#c99460 58%,#f6e6c8 80%,#b98551 100%);
  background-size:300% 100%,100% 100%;background-position:100% 0,0 0;background-repeat:no-repeat}

/* ---------- Glas: Glanzlicht beim Eintreten ---------- */
.fx-sheen{position:absolute;inset:0;z-index:4;border-radius:inherit;overflow:hidden;pointer-events:none}
.fx-sheen i{position:absolute;top:-30%;bottom:-30%;left:0;width:38%;background:linear-gradient(100deg,rgba(255,240,215,0),rgba(255,240,215,.1) 40%,rgba(255,250,240,.22) 50%,rgba(255,240,215,.1) 60%,rgba(255,240,215,0));transform:translateX(-130%) skewX(-16deg)}

/* ---------- USP: Strahlkopf, Wellen, Glühen ---------- */
.tl-headwrap{position:absolute;inset:0;pointer-events:none}
.tl-head{position:absolute;left:100%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;opacity:0;
  background:radial-gradient(closest-side,#fffaf0,rgba(255,222,176,.75) 34%,rgba(230,170,100,.25) 62%,rgba(230,170,100,0));box-shadow:0 0 30px 8px rgba(230,170,100,.35)}
.tl-ripple{position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(246,214,170,.85);box-shadow:0 0 12px rgba(240,190,130,.5);opacity:0;pointer-events:none}
.usp-fig{position:relative}
.usp-num{position:relative}
.fig-glow{position:absolute;left:-12%;top:50%;width:80%;height:220%;margin-top:-110%;pointer-events:none;opacity:0;border-radius:50%;
  background:radial-gradient(closest-side,rgba(246,206,150,.42),rgba(230,170,100,.14) 55%,rgba(230,170,100,0))}
.fig-glow{margin-top:0;transform:translateY(-50%)}

/* ---------- Header: Glas verdichtet sich, Fortschrittslinie ---------- */
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;transform-origin:left center;transform:scaleX(var(--sp,0));
  background:linear-gradient(90deg,rgba(192,138,85,.2),#e6c79c 85%,#fff1dc);box-shadow:0 0 10px rgba(230,180,120,.5);opacity:var(--hv,0);transition:opacity .4s}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(14,13,12,.38),rgba(14,13,12,.12));opacity:var(--hg,0)}
.site-header.is-scrolled:not(.is-dark)::before{background:linear-gradient(180deg,rgba(243,238,229,.4),rgba(243,238,229,.1))}
.site-header .header-inner{position:relative}

/* Navigation: wandernde Unterstreichung */
.nav-ink{position:absolute;left:0;bottom:-2px;width:100px;height:1px;pointer-events:none;transform-origin:left center;opacity:0;
  background:linear-gradient(90deg,#c08a55,#f1dcb6,#c08a55);box-shadow:0 0 8px rgba(230,180,120,.6)}
.has-ink .main-nav ul{position:relative}
.has-ink .main-nav ul a,.has-ink .main-nav ul a:hover,.has-ink .main-nav ul a.is-current{background-size:0 1px}
.has-ink .main-nav ul a.is-active{opacity:1}

/* Abschnittsanzeige rechts (Startseite, Desktop) */
.sp-rail{position:fixed;right:clamp(14px,1.6vw,28px);top:50%;z-index:90;display:flex;flex-direction:column;align-items:center;gap:14px;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .6s}
.sp-rail.is-on{opacity:1;pointer-events:auto}
.sp-rail a{position:relative;display:block;width:14px;height:14px;border-radius:50%}
.sp-rail a::before{content:"";position:absolute;left:5px;top:5px;width:4px;height:4px;border-radius:50%;background:rgba(230,199,156,.38);transition:transform .5s cubic-bezier(.2,.7,.2,1),background-color .5s,box-shadow .5s}
.sp-rail a.is-on::before{background:#f1dcb6;transform:scale(1.9);box-shadow:0 0 10px rgba(240,190,130,.9)}
.sp-rail a span{position:absolute;right:22px;top:50%;transform:translate(6px,-50%);white-space:nowrap;font:500 10px/1 var(--text);letter-spacing:.24em;text-transform:uppercase;color:#e6c79c;opacity:0;transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1)}
.sp-rail a.is-on span,.sp-rail a:hover span,.sp-rail a:focus-visible span{opacity:.9;transform:translate(0,-50%)}
.sp-rail.on-light a::before{background:rgba(138,90,50,.35)}
.sp-rail.on-light a.is-on::before{background:#8a5a32;box-shadow:0 0 8px rgba(192,138,85,.5)}
.sp-rail.on-light a span{color:#8a5a32}
@media (max-width:1100px){.sp-rail{display:none}}

/* ---------- Cursor (nur feine Zeiger, Desktop) ---------- */
.cur{position:fixed;left:0;top:0;z-index:380;pointer-events:none}
.cur-dot,.cur-ring,.cur-label{position:absolute;left:0;top:0;will-change:transform}
.cur-dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#f6e3c2;box-shadow:0 0 10px 2px rgba(230,170,100,.75)}
.cur-ring{width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;border:1px solid rgba(230,199,156,.5);box-shadow:0 0 22px rgba(214,160,100,.18)}
.cur-label{margin:0;transform:translate(-50%,-50%);font:500 10.5px/1 var(--text);letter-spacing:.24em;text-transform:uppercase;color:#f6efe3;opacity:0;white-space:nowrap}
.cur.is-hidden{opacity:0}
.cur{transition:opacity .3s}
.has-cursor,.has-cursor a,.has-cursor button,.has-cursor [role="tab"],.has-cursor label,.has-cursor summary{cursor:none}
.has-cursor input,.has-cursor textarea,.has-cursor select{cursor:auto}

/* ---------- Partikel ---------- */
.fx-bokeh{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:.9}
.fx-host{isolation:isolate}
.fx-host > .fx-bokeh{z-index:-1}

/* Bilder: Zoom-Ebene */
.js-motion .fx-img picture{will-change:transform}
.js-motion .hf-pic,.js-motion .hero-title,.js-motion .hf-stage{will-change:transform}
/* Performance: kein Backdrop-Blur über dem laufenden Film (kostete ~50 ms/Frame bei Software-Rendering) – weicher Verlauf statt Unschärfe */
.hero-veil{-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(90deg,rgba(14,13,12,.34),rgba(14,13,12,.16) 38%,rgba(14,13,12,0) 58%)}
/* Partikel schweben vor dem Inhalt (sehr dezent), damit Glasflächen ihren Hintergrund nicht pro Frame neu filtern müssen */
.fx-host > .fx-bokeh{z-index:6;opacity:.75}