/* Advanced Mystics – Raum & Tiefe (ergänzt style.css)
   Die Seite ist eine Ebene in einem Raum: dahinter Sternenfeld, Fotos und Astrolabium,
   davor schwebende Teilchen. space.js bewegt die Kamera, hier stehen Ebenen und Übergänge.
   Leistung: Keine Glas-Unschärfe über bewegtem Hintergrund (nur mit .am-glass), keine Mischmodi,
   3D-Startlagen erst kurz vor dem Sichtbarwerden (.pre), Sterne/Teilchen als verschobene Kachelbilder. */

/* Weiches Scrollen (Lenis) – natives smooth-scroll würde sich mit Lenis prügeln */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}

/* ───────── Ebenen der Kamera ───────── */
/* Sternenhintergrund: Verlauf + Filmkorn in einer Ebene (das Korn war vorher eine eigene Vollbild-Ebene) */
#stars{z-index:-3;overflow:hidden;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.05'/></svg>");
  background:var(--grain),radial-gradient(120% 90% at 50% 0%,var(--bg-top) 0%,var(--bg) 55%)}
.am-nograin #stars{--grain:none}
.grain{display:none}
.stars canvas.gl,.dust canvas.gl{position:absolute;inset:0;width:100%;height:100%}
.star-lines{position:absolute;left:0;top:0;width:360px;height:360px;pointer-events:none}
.shoot{position:absolute;width:150px;height:1.4px;margin-left:-150px;transform-origin:100% 50%;pointer-events:none;border-radius:2px;
  background:linear-gradient(90deg,rgba(255,240,207,0),rgba(255,240,207,.95))}
.lantern{position:fixed;left:0;top:0;width:1100px;height:1100px;margin:-550px 0 0 -550px;z-index:-2;pointer-events:none;border-radius:50%;
  background:radial-gradient(closest-side,rgba(var(--gold-rgb),.075),rgba(var(--lav-rgb),.035) 45%,transparent 72%);opacity:0;transition:opacity 1.6s;will-change:transform}
.lantern.on{opacity:var(--l,1)}
.dust{position:fixed;inset:0;z-index:45;pointer-events:none;overflow:hidden}
.dust[hidden]{display:none}

/* ───────── Auftauchen aus der Tiefe ───────── */
/* Ruhelage ohne Verschiebung; .pre setzt die Startlage kurz vor dem Sichtbarwerden, .in gleitet ruhig an den Platz */
.reveal{opacity:0;transform:none;transition:none}
.reveal.pre{transform:translateY(26px) scale(.985);transform-origin:50% 100%}
.reveal.in{opacity:1;transform:none;transition:opacity 1.2s var(--ease),transform 1.6s var(--ease);transition-delay:var(--rd,0s)}
.reveal:nth-child(2){--rd:.1s}.reveal:nth-child(3){--rd:.2s}.reveal:nth-child(4){--rd:.3s}

/* Überschriften: Wort für Wort an Ort und Stelle aus der Unschärfe – kein Schweben, kein Gleiten über die Zeile */
.display .w{display:inline-block;opacity:0}
.pre .display .w,.display.pre .w{transform:translateY(.12em);filter:blur(7px)}
.in .display .w,.display.in .w{opacity:1;transform:none;filter:none;
  transition:opacity .9s var(--ease),transform 1.1s var(--ease),filter 1s var(--ease);transition-delay:calc(var(--i) * 60ms + 100ms)}
.display .wp{opacity:0}
.in .display .wp,.display.in .wp{opacity:1;transition:opacity 1s var(--ease);transition-delay:calc(var(--i) * 75ms + 600ms)}

/* ───────── Hero: Astrolabium im Raum ───────── */
.hero-space{position:absolute;inset:0;pointer-events:none;overflow:hidden}
/* Deckkraft nur auf der Hülle: opacity auf dem 3D-Element selbst würde seine Ebenen flachdrücken */
.astro-wrap{position:absolute;inset:0;perspective:1500px;perspective-origin:50% 44%;opacity:0;will-change:opacity}
.astro{--s:min(135vmin,1200px);--spin:1;position:absolute;left:50%;top:50%;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  transform-style:preserve-3d;will-change:transform}
.astro .ring-w,.astro .ring-s{position:absolute;inset:0}
.astro .ring-s{will-change:transform;animation:spin linear infinite}
.astro .ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.astro .r0{animation-duration:calc(257s * var(--spin))}
.astro .r1{animation-duration:calc(164s * var(--spin));animation-direction:reverse}
.astro .r2{animation-duration:calc(90s * var(--spin))}
.astro.still .ring-s{animation-play-state:paused}
.astro-glow{position:absolute;inset:31%;border-radius:50%;transform:translateZ(30px);
  background:radial-gradient(closest-side,rgba(var(--gold-rgb),.13),rgba(var(--lav-rgb),.05) 55%,transparent)}
.hero-inner{will-change:transform,opacity}

/* Marquee als Band im Raum */
.marquee{will-change:transform;transform-origin:50% 50%}

/* Fotos als ferne Fenster: Maske steht fest am Abschnitt, nur das Bild darin wandert */
.band-bg{inset:0;background:none;overflow:hidden;will-change:auto;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 20%,#000 80%,transparent)}
.band-bg::before{content:"";position:absolute;inset:-14% -6%;background:var(--bg-img) center/cover no-repeat;filter:var(--img-f,none);
  transform:translate3d(var(--tx,0px),var(--ty,0px),0) scale(var(--sc,1.1));will-change:transform}

/* Navigation: deckend statt Unschärfe über dem bewegten Inhalt */
.nav.solid{background:rgba(var(--bg-rgb),.9);backdrop-filter:none;-webkit-backdrop-filter:none}
.am-glass .nav.solid{background:rgba(var(--bg-rgb),.72);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}
/* Endlos-Animationen nur, solange ihr Abschnitt im Bild ist (space.js setzt .vis) */
main>[data-sec]:not(.vis) .astro .ring-s,main>[data-sec]:not(.vis) .track,main>[data-sec]:not(.vis) .portal .pr,main>[data-sec]:not(.vis) .portal .pe,
main>[data-sec]:not(.vis) .hero-logo,main>[data-sec]:not(.vis) .scroll-hint span{animation-play-state:paused}

/* ───────── Glas: ohne Hintergrund-Unschärfe deckender (Unschärfe über bewegtem Himmel kostet viel) ───────── */
.pillar{background:rgba(var(--bg-rgb),.8);backdrop-filter:none;-webkit-backdrop-filter:none}
.reading-card{background:rgba(var(--bg-rgb),.86);backdrop-filter:none;-webkit-backdrop-filter:none}
.const-info{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(var(--bg-rgb),.9)}
.marquee{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(var(--bg-rgb),.72)}
.am-glass .pillar,.am-glass .reading-card,.am-glass .const-info{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* ───────── Orakel: Nachthimmel + Wolkentor ───────── */
/* Anker „Orakel“ landet genau dort, wo das Wolkentor einrastet (hebt scroll-padding-top auf) */
.oracle{padding:0 0 clamp(140px,20vw,260px);isolation:isolate;scroll-margin-top:-70px}
.sky-scene{position:absolute;inset:0;z-index:-1;pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 50vh),transparent);mask-image:linear-gradient(#000 calc(100% - 50vh),transparent)}
.sky-stage{--edge:1;position:sticky;top:0;height:100vh;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 calc(var(--edge) * 48vh));mask-image:linear-gradient(transparent,#000 calc(var(--edge) * 48vh))}
.sky-stage::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 85% at 50% 42%,transparent 45%,rgba(var(--bg-rgb),.6))}
/* knapper Rand nur für Parallaxe/Zeiger – mehr Überstand vergrößert das Bild (Sterne wirkten zu groß und weich) */
.sky-far{position:absolute;left:-2%;right:-2%;top:-4%;height:118%;transform-origin:50% 30%;will-change:transform}
.sky-far img{width:100%;height:100%;object-fit:cover;object-position:50% 38%}

.oracle-intro{position:relative;height:calc(var(--cloud-run,175) * 1vh)}
.oracle-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;justify-items:center;align-items:start;padding:max(108px,23vh) clamp(20px,5vw,56px) 0}
.oracle-head{position:relative;z-index:1;margin:0;max-width:820px;will-change:transform}
.oracle-head .lead{text-shadow:0 2px 24px rgba(4,4,20,.7)}
.sky-light{position:absolute;left:50%;top:64%;width:min(1300px,150vw);aspect-ratio:1.7;translate:-50% -50%;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,246,228,.26),rgba(var(--gold-rgb),.1) 38%,rgba(155,190,209,.04) 62%,transparent);opacity:.15;will-change:transform,opacity}
/* ein einziges Wolkenbild; die Lücke (46,3 % der Bildbreite) steht immer in der Mitte.
   Die unscharfe Fassung ist vorberechnet (wolken-weich.png) statt eines Laufzeit-Filters. */
.clouds{position:absolute;left:50%;bottom:-2%;width:max(122%,158vh);aspect-ratio:2000/655;translate:-46.3% 0;transform-origin:46.3% 32%;z-index:2;pointer-events:none;will-change:transform;opacity:var(--cl-o,1)}
.clouds img{position:absolute;inset:0;width:100%;height:100%;max-width:none;user-select:none;-webkit-user-drag:none}
.clouds .cl-soft{opacity:0}
.clouds .cl-soft.blur{filter:blur(16px) brightness(1.06)}

.oracle>.wrap{margin-top:-16vh;z-index:3}
.oracle .fan{--cw:clamp(66px,15vw,176px);--cm:clamp(8px,1.4vw,20px);min-height:clamp(320px,44vw,500px);perspective:1300px;perspective-origin:50% 18%;padding-top:40px}
.oracle .tcard{width:var(--cw);margin-inline:calc(-1 * var(--cm))}
/* alle Kartenzustände mit derselben Funktionsliste, damit jeder Übergang sauber interpoliert */
.tcard{--cx:calc((2.5 - var(--k)) * (var(--cw) - 2 * var(--cm)));transform:translateX(var(--tx,0px)) rotate(var(--r)) translateY(calc(var(--y) - var(--up,0px))) translateZ(var(--lift,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .9s var(--ease),filter .5s,opacity .7s}
.fan:not(.dealt) .tcard{opacity:0;transform:translateX(0px) rotate(calc(var(--r) * -1.6)) translateY(170px) translateZ(-720px) rotateX(58deg) rotateY(0deg)}
.fan.dealt:not(.settled) .tcard{transition:transform 1.4s var(--ease),opacity 1s var(--ease);transition-delay:calc(var(--k) * 95ms)}
.fan:not(.chosen) .tcard:hover,.fan.settled:not(.chosen) .tcard:focus-visible{--up:22px;--lift:70px;
  transform:translateX(var(--tx,0px)) rotate(var(--r)) translateY(calc(var(--y) - var(--up,0px))) translateZ(var(--lift,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.fan.settled .tcard:hover{transition:transform .35s var(--ease),filter .5s,opacity .7s}
.tcard .face,.tcard .back{box-shadow:0 34px 60px -22px rgba(0,0,0,.85),0 0 0 1px rgba(var(--gold-rgb),.08)}
.tcard .back::after,.tcard .face::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s;
  background:radial-gradient(240px circle at var(--gx,50%) var(--gy,30%),rgba(255,240,210,.2),transparent 58%)}
.tcard:hover .back::after{opacity:1}
.tcard.flip .face::after{opacity:.5}
.fan.chosen .tcard.flip{transform:translateX(var(--cx)) rotate(0deg) translateY(-10px) translateZ(150px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));z-index:5}
.fan.chosen .tcard:not(.flip){opacity:.16;filter:blur(2px);transform:translateX(0px) rotate(var(--r)) translateY(var(--y)) translateZ(-180px) rotateX(0deg) rotateY(0deg);pointer-events:none}
@keyframes depthIn{from{opacity:0;transform:perspective(900px) translate3d(0,34px,-140px);filter:blur(8px)}}
.reading-card{animation:depthIn 1.2s var(--ease)}

/* ───────── Glas mit Neigung und Glanz ───────── */
.wrap,.pillars,.variants,.grade-row,.panel{perspective:1400px}
.tilt{position:relative;transition:rotate .8s var(--ease),translate .8s var(--ease),border-color .4s}
.tilt.tilting{transition:rotate .14s linear,translate .4s var(--ease),border-color .4s}
.tilt.reveal.in{transition:opacity 1.2s var(--ease),transform 1.6s var(--ease),rotate .8s var(--ease),translate .8s var(--ease),border-color .4s;
  transition-delay:var(--rd,0s),var(--rd,0s),0s,0s,0s}
.tilt.reveal.in.tilting{transition:opacity 1.2s var(--ease),transform 1.6s var(--ease),rotate .14s linear,translate .4s var(--ease),border-color .4s;
  transition-delay:var(--rd,0s),var(--rd,0s),0s,0s,0s}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s;
  background:radial-gradient(440px circle at var(--gx,50%) var(--gy,50%),rgba(255,236,200,.10),transparent 52%)}
.tilt.tilting::after{opacity:1}
.arch.tilt::after{z-index:1}
.arch img{scale:1.08;transition:opacity .5s,transform 1.4s var(--ease),translate .5s var(--ease)}
.arch.tilting img{transition:opacity .5s,transform 1.4s var(--ease),translate .15s linear}

/* ───────── Galerie als gewölbte Wand ───────── */
.strip{position:relative;perspective:1100px;perspective-origin:50% 42%}
.piece{transform-origin:50% 50%}

/* Konstellation in drei Dimensionen */
.node.active{opacity:1!important}

/* ───────── Warteliste: Portal ───────── */
.join-portal{position:absolute;inset:0;z-index:-1;perspective:800px;perspective-origin:50% 46%;overflow:hidden;pointer-events:none;will-change:opacity}
.portal{--s:min(880px,120vw);position:absolute;left:50%;top:46%;width:var(--s);height:var(--s);margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);transform-style:preserve-3d;will-change:transform}
.portal .pr{position:absolute;inset:0;border-radius:50%;border:1.5px dotted rgba(var(--gold-rgb),.34);transform:translateZ(var(--z));animation:spin var(--d) linear infinite}
.portal .pr.dash{border-width:1px;border-style:dashed;border-color:rgba(var(--lav-rgb),.3)}
.portal .pr.rev{animation-direction:reverse}
.portal .pe{position:absolute;inset:9%;width:82%;opacity:.085;animation:spin 150s linear infinite}
@keyframes spin{from{rotate:0deg}to{rotate:360deg}}

/* ───────── Schalter aus dem Editor ───────── */
.am-noreveal .reveal{opacity:1!important;transform:none!important}
.am-nowords .display .w,.am-nowords .display .wp{opacity:1!important;transform:none!important;filter:none!important}
.am-nocursor .cursor,.am-nocursor .spark{display:none!important}
.am-noastro .astro-wrap{display:none}
.am-noportal .join-portal{display:none}
.am-noclouds .clouds{display:none}
.am-noclouds .oracle-intro{height:auto}
.am-noclouds .oracle-pin{position:relative;height:auto;padding-bottom:40px}
.am-noclouds .oracle>.wrap{margin-top:0}
/* sparsamer Modus: keine Unschärfe-Übergänge, kein Funkeln */
.am-lite .pre .display .w,.am-lite .display.pre .w{filter:none}

/* Hochformat: Wolkenbild schmaler, damit beide Bänke neben der Lücke im Bild bleiben */
@media (max-aspect-ratio:4/5){
  .clouds{width:270vw}
}
@media (max-width:760px){
  .oracle-pin{padding-top:max(96px,20vh)}
  .oracle>.wrap{margin-top:-12vh}
}
@media (prefers-reduced-motion:reduce){
  .display .w,.display .wp{opacity:1;transform:none;filter:none}
  .clouds,.dust,.lantern{display:none}
  .oracle-intro{height:auto}
  .oracle-pin{position:relative;height:auto;padding:140px 20px 40px}
  .oracle>.wrap{margin-top:0}
  .astro-wrap{opacity:.9}
  .astro .ring-s{animation:none}
}