/* Mesa Andina – Einladung Santiago Andrade
   Eine Reise durch Bildwelten: Nacht über den Anden, Abendrot am Chimborazo, Pachamama, Stein, Pflanze, Kondor,
   Mensch, Humus, Nebelwald, Wasser, Nelken. Jeder Abschnitt hat seine Farbe; beim Scrollen wandern Hintergrund
   und Goldton mit (--bgc/--acc, gesetzt von main.js). Schriften lokal (keine Anfrage an Google). */
@font-face{font-family:'MA Sans';font-weight:400;font-display:swap;src:url(../assets/fonts/montserrat-latin-400.woff2) format('woff2')}
@font-face{font-family:'MA Serif';font-weight:300;font-display:swap;src:url(../assets/fonts/cormorant-latin-300.woff2) format('woff2')}
@font-face{font-family:'MA Serif';font-weight:400;font-display:swap;src:url(../assets/fonts/cormorant-latin-400.woff2) format('woff2')}
@font-face{font-family:'MA Serif';font-weight:500;font-display:swap;src:url(../assets/fonts/cormorant-latin-500.woff2) format('woff2')}
@font-face{font-family:'MA Serif';font-weight:300;font-style:italic;font-display:swap;src:url(../assets/fonts/cormorant-latin-300-italic.woff2) format('woff2')}
@font-face{font-family:'MA Serif';font-weight:400;font-style:italic;font-display:swap;src:url(../assets/fonts/cormorant-latin-400-italic.woff2) format('woff2')}

@property --bgc{syntax:'<color>';inherits:true;initial-value:#020a26}
@property --acc{syntax:'<color>';inherits:true;initial-value:#f1ca8f}
:root{
  --bgc:#020a26; --acc:#f1ca8f;
  --gold:#f1ca8f; --gold-rgb:241,202,143; --aqua-rgb:127,214,238; --moon:#cfdcf6;
  --ink:#f6f4ff; --text:#dfe3f2; --mute:#a3acc8;
  --serif:'MA Serif',Georgia,'Times New Roman',serif;
  --sans:'MA Sans','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shade:0 1px 2px rgba(0,4,20,.8),0 0 18px rgba(0,4,20,.85),0 0 40px rgba(0,4,20,.55);
  transition:--bgc 1.6s ease,--acc 1.6s ease;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:var(--bgc);color:var(--text);font-family:var(--serif);font-weight:400;line-height:1.7;overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--acc);color:#0a0a1a}
:focus-visible{outline:1px solid var(--acc);outline-offset:3px}
main p,main h2{text-shadow:var(--shade)}

/* Bühne hinter allem */
.stage{position:fixed;inset:0;z-index:-3;overflow:hidden;opacity:0;transition:opacity 1.4s ease}
.stage.on{opacity:1}
.bd{position:absolute;inset:-6%;background:center/cover no-repeat;opacity:0;transition:opacity 1.4s ease;will-change:opacity,transform;
  animation:drift 52s ease-in-out infinite alternate}
.bd.on{opacity:1}
.bd:nth-child(even){animation-direction:alternate-reverse;animation-duration:61s}
@keyframes drift{from{transform:scale(1.02) translate3d(-1.2%,.6%,0)}to{transform:scale(1.13) translate3d(1.6%,-1.4%,0)}}
.bd[data-key=condor]{filter:brightness(1.4) contrast(1.05)}
.bd[data-key=wald],.bd[data-key=paramo]{filter:brightness(1.15)}
.veil{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(125% 95% at 50% 50%,transparent 38%,color-mix(in srgb,var(--bgc) 82%,transparent) 100%),
    linear-gradient(180deg,color-mix(in srgb,var(--bgc) 45%,transparent),transparent 22%,transparent 78%,color-mix(in srgb,var(--bgc) 55%,transparent))}
/* ziehende Nebelschleier (Anden, Páramo, Nebelwald) */
.mist{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease;pointer-events:none}
.stage[data-mist] .mist{opacity:1}
.mist i{position:absolute;width:90vmax;height:40vmax;border-radius:50%;filter:blur(40px);
  background:radial-gradient(closest-side,rgba(225,235,245,.16),rgba(225,235,245,.05) 60%,transparent);animation:fog 38s ease-in-out infinite alternate}
.mist i:nth-child(1){left:-30vmax;top:46%}
.mist i:nth-child(2){right:-35vmax;top:62%;animation-duration:47s;animation-delay:-12s}
.mist i:nth-child(3){left:10vmax;top:72%;width:70vmax;height:28vmax;animation-duration:55s;animation-delay:-25s}
@keyframes fog{from{transform:translate3d(-8vmax,0,0) scale(1)}to{transform:translate3d(14vmax,-3vmax,0) scale(1.15)}}

.sky,.fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-2;opacity:0;transition:opacity 1.2s ease}
.sky.on,.fx.on{opacity:1}
.glow{position:fixed;left:0;top:0;width:760px;height:760px;margin:-380px 0 0 -380px;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s;
  background:radial-gradient(closest-side,rgba(var(--aqua-rgb),.08),color-mix(in srgb,var(--acc) 5%,transparent) 45%,transparent);mix-blend-mode:screen}
.glow.on{opacity:1}
@media (pointer:coarse){.glow{display:none}}

/* Mond am Rand: nimmt beim Scrollen bis zum Vollmond zu */
.moon{position:fixed;right:22px;bottom:22px;width:32px;height:32px;z-index:40;opacity:0;transition:opacity 1.2s;pointer-events:none;
  filter:drop-shadow(0 0 8px rgba(244,236,214,.35))}
.moon.on{opacity:.92}
.moon svg{width:100%;height:100%;display:block}
.moon-dark{fill:rgba(4,8,30,.55)}
.moon-lit{fill:#f5eedb}
.moon-rim{fill:none;stroke:rgba(var(--gold-rgb),.55);stroke-width:.7}

/* Einstieg */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden;background:#020a26;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-1;will-change:transform;
  -webkit-mask-image:linear-gradient(180deg,#000 70%,rgba(0,0,0,.55) 86%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,rgba(0,0,0,.55) 86%,transparent 100%)}
.hero-media img,.hero-media canvas,.shore-media img,.shore-media canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
canvas.water{opacity:0;transition:opacity 1.4s ease}
canvas.water.on{opacity:1}
.hero-top,.hero-bottom{position:absolute;left:0;right:0;text-align:center;padding:0 20px;will-change:opacity}
.hero-top{top:0;height:31.5%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:2vh}
.hero-bottom{top:79%}
.hero-bottom::before{content:"";position:absolute;left:50%;top:-10%;width:min(860px,120%);height:150%;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(1,8,34,.5),rgba(1,8,34,.2) 60%,transparent)}
.hero-title{font-weight:300;font-size:clamp(52px,min(9vw,11.5vh),132px);line-height:.95;letter-spacing:.01em;color:var(--gold);
  text-shadow:0 2px 3px rgba(0,8,40,.35),0 6px 26px rgba(0,8,40,.6),0 0 70px rgba(0,8,40,.6)}
.hero-sub{font-style:italic;font-weight:300;font-size:clamp(21px,min(2.5vw,3.6vh),34px);color:var(--moon);margin-top:clamp(4px,.8vh,10px);text-shadow:0 2px 14px rgba(0,8,40,.85)}
.hero-kind,.hero-with,.hero-origin{font-family:var(--sans);font-weight:400;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--moon);text-shadow:var(--shade)}
.hero-kind{margin-top:clamp(8px,1.4vh,16px);color:var(--text)}
.hero-name{font-weight:400;font-size:clamp(28px,min(3.4vw,4.8vh),48px);line-height:1.15;color:var(--gold);margin:clamp(6px,1vh,12px) 0 clamp(4px,.8vh,10px);
  text-shadow:0 2px 16px rgba(0,8,40,.9),0 0 40px rgba(0,8,40,.6)}
.hero-cue{position:absolute;left:50%;bottom:0;width:1px;height:46px;margin-left:-.5px;background:linear-gradient(transparent,rgba(207,220,246,.45))}
.hero-cue i{position:absolute;left:-2px;top:0;width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px 2px rgba(var(--gold-rgb),.5);animation:cue 2.8s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0}25%{opacity:1}100%{transform:translateY(40px);opacity:0}}
.rise{opacity:0;filter:blur(12px);transform:translateY(10px);animation:rise 1.6s var(--ease) var(--d,0s) forwards}
.hero-cue.rise{transform:none;filter:none}
@keyframes rise{to{opacity:1;filter:blur(0);transform:none}}

/* Auftauchen: ganze Absätze aus der Unschärfe, ausgewählte Zeilen Wort für Wort */
[data-reveal]{opacity:0;filter:blur(8px);transform:translateY(16px);transition:opacity 1.1s var(--ease) var(--d,0s),filter 1.1s var(--ease) var(--d,0s),transform 1.1s var(--ease) var(--d,0s)}
[data-reveal].in{opacity:1;filter:none;transform:none}
[data-words] .w{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(.35em);
  transition:opacity .9s var(--ease),filter .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i) * 35ms + .05s)}
[data-words].in .w{opacity:1;filter:none;transform:none}

.chakana{display:block;width:54px;height:54px;margin:0 auto 46px;color:var(--acc);overflow:visible}
.chakana path,.chakana circle{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2s var(--ease) .1s}
.chakana.in path,.chakana.in circle{stroke-dashoffset:0}
.chakana.in{animation:float 9s ease-in-out 2s infinite}
@keyframes float{50%{transform:translateY(-6px)}}

/* Einladung unter dem Sternenhimmel */
.s-open{min-height:110svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:18vh 24px;text-align:center}
.opening{font-weight:300;font-size:clamp(28px,3.7vw,52px);line-height:1.42;color:var(--ink);max-width:1000px;text-wrap:balance}

/* Zwei Fragen im Abendrot, je ein Bildschirm */
.s-ask{display:grid;grid-auto-rows:minmax(100vh,auto);grid-auto-rows:minmax(100svh,auto);align-items:center;justify-items:center;padding:0 24px}
.ask{position:relative;font-style:italic;font-weight:300;font-size:clamp(26px,3vw,44px);line-height:1.45;color:var(--ink);max-width:880px;text-align:center;text-wrap:balance}
.ask em{color:var(--acc);font-weight:400}
.ask::before{content:"";position:absolute;left:50%;top:-38px;width:70px;height:1px;margin-left:-35px;background:linear-gradient(90deg,transparent,var(--acc),transparent);transform:scaleX(0);transition:transform 1.4s var(--ease) .2s}
.ask.in::before{transform:none}

/* Pachamama: die Erde ganz, mittig hinter dem Text; bei „als einen Organismus“ leuchtet sie auf (--glow von main.js) */
.s-earth{display:grid;grid-template-columns:1fr;padding:6vh 0}
.earth-stick,.earth-text{grid-row:1;grid-column:1}
.earth-stick{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;align-self:start}
.earth{--glow:0;position:relative;width:min(84vw,66vh,640px);aspect-ratio:1;filter:drop-shadow(0 0 calc(50px + 60px * var(--glow)) rgba(120,170,255,calc(.18 + .22 * var(--glow))))}
.earth-spin{position:absolute;inset:0;animation:spin 300s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.globe{position:absolute;inset:0;border-radius:50%;background:url(../assets/img/bg/erde.webp) center/cover;filter:brightness(calc(.4 + .12 * var(--glow))) saturate(.9)}
.earth-halo{position:absolute;inset:-9%;border-radius:50%;opacity:calc(.2 + .8 * var(--glow));pointer-events:none;
  background:radial-gradient(closest-side,transparent 82%,rgba(var(--aqua-rgb),.28) 89%,rgba(var(--gold-rgb),.12) 93%,transparent);animation:breathe 6s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.04);filter:brightness(1.3)}}
.earth-text{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:60vh;padding:42vh 24px 48vh;text-align:center}
.earth-text p{font-size:clamp(20px,1.75vw,26px);line-height:1.8;color:var(--ink);max-width:680px}
.hl{font-style:italic;color:var(--acc)}
.earth-text .turn{font-style:italic;font-weight:300;font-size:clamp(25px,2.3vw,34px);line-height:1.5;color:var(--ink)}

/* Die vier Reiche – je ein Bildschirm */
.s-realm{min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:14vh 24px;text-align:center}
.realm{font-style:italic;font-weight:300;font-size:clamp(32px,4.8vw,70px);line-height:1.22;color:var(--ink);max-width:1060px;text-wrap:balance}
.realm em{font-style:normal;font-weight:300;color:var(--acc)}
.s-human{grid-template-columns:1fr;justify-items:center;align-content:center;gap:clamp(48px,6vh,72px);text-align:center}
.arch{width:min(64vw,34vh,340px);aspect-ratio:3/4;border-radius:50% 50% 6px 6px / 36% 36% 6px 6px;overflow:hidden;outline:1px solid color-mix(in srgb,var(--acc) 70%,transparent);outline-offset:12px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 120px -20px rgba(90,120,255,.35)}
.arch img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;animation:drift 40s ease-in-out infinite alternate}

/* Humus Sapiens */
.s-humus{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:16vh 24px;text-align:center}
.morph{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:0 .34em;margin-bottom:8vh;
  font-weight:300;font-size:clamp(38px,7vw,104px);line-height:1.08;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.m-word{display:inline-grid;justify-items:center}
.m-word>span{grid-area:1/1;transition:opacity 1.6s var(--ease),filter 1.6s var(--ease),transform 1.6s var(--ease)}
.m-b{opacity:0;filter:blur(14px);transform:translateY(.16em);color:var(--acc)}
.morph.on .m-a{opacity:0;filter:blur(14px);transform:translateY(-.16em)}
.morph.on .m-b{opacity:1;filter:none;transform:none}
.column{max-width:680px;margin:0 auto;font-size:clamp(21px,1.9vw,27px);line-height:1.8;color:var(--ink)}
.column p+p{margin-top:1.3em}

/* Naturgeister im Nebelwald */
.s-geist{min-height:120vh;min-height:120svh;display:grid;place-items:center;padding:16vh 24px}
.dropcap{max-width:700px;font-size:clamp(20px,1.85vw,26px);line-height:1.85;color:var(--ink)}
.dropcap::first-letter{float:left;font-size:4.9em;line-height:.78;font-weight:300;padding:.07em .1em 0 0;color:var(--acc);text-shadow:0 0 30px color-mix(in srgb,var(--acc) 35%,transparent)}

/* Schlusszeile am Horizont, ihr Spiegelbild im bewegten Wasser */
.shore{position:relative;padding-top:18vh;text-align:center}
.one{font-weight:400;font-size:clamp(26px,3.4vw,46px);letter-spacing:.06em;line-height:1;color:var(--acc);padding:0 16px .32em;
  text-shadow:0 0 30px color-mix(in srgb,var(--acc) 30%,transparent),var(--shade)}
.shore-media{position:relative;height:max(34vw,380px);overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 45%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 4%,#000 45%,transparent 100%)}
.one-reflect{position:absolute;left:0;right:0;top:calc(2.5% + 1px);font-weight:400;font-size:clamp(26px,3.4vw,46px);letter-spacing:.06em;line-height:1;color:var(--gold);padding:0 16px .32em;
  transform:scaleY(-1);opacity:.5;mix-blend-mode:screen;filter:url(#ripple) blur(.5px);text-shadow:none !important;
  -webkit-mask-image:linear-gradient(0deg,#000 15%,rgba(0,0,0,.35) 60%,transparent 100%);mask-image:linear-gradient(0deg,#000 15%,rgba(0,0,0,.35) 60%,transparent 100%)}

/* Wo und Wann – drei Torbögen im tiefen Wasser */
.when{position:relative;margin-top:calc(max(34vw,380px) * -.42);padding:0 20px 16vh;text-align:center}
.when h2,.join h2{font-weight:300;font-style:italic;font-size:clamp(36px,4vw,54px);color:var(--ink);margin-bottom:clamp(44px,6vw,72px)}
.places{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(24px,3vw,44px);max-width:1120px;margin:0 auto}
.place{position:relative;flex:1 1 280px;max-width:340px;padding:clamp(70px,7vw,96px) 26px 40px;
  border:1px solid color-mix(in srgb,var(--acc) 38%,transparent);border-radius:999px 999px 16px 16px / 170px 170px 16px 16px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.01) 55%,transparent);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:border-color .6s,transform .9s var(--ease)}
.place::before{content:"";position:absolute;left:50%;top:30px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--acc);box-shadow:0 0 14px 3px color-mix(in srgb,var(--acc) 45%,transparent)}
.place::after{content:"";position:absolute;inset:7px;border-radius:999px 999px 11px 11px / 165px 165px 11px 11px;border:1px solid color-mix(in srgb,var(--acc) 14%,transparent);pointer-events:none}
.place:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--acc) 70%,transparent)}
.day{font-size:21px;color:var(--acc)}
.day span{display:block;font-size:17px;color:var(--moon)}
.where{font-size:27px;line-height:1.25;color:var(--ink);margin-top:16px}
.claim{font-style:italic;font-weight:300;color:var(--moon);margin-top:4px}
.addr{font-size:17px;line-height:1.6;color:var(--text);margin-top:14px}
.addr a{border-bottom:1px solid color-mix(in srgb,var(--acc) 30%,transparent);transition:color .3s,border-color .3s}
.addr a:hover{color:var(--acc);border-color:var(--acc)}

/* Anmeldung zwischen den Nelken */
.join{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:16vh 20px;text-align:center}
.join h2{margin-bottom:26px}
.name{font-size:clamp(34px,4vw,52px);color:var(--ink);line-height:1.2}
.tel{display:inline-block;margin-top:12px;font-size:clamp(26px,2.8vw,36px);letter-spacing:.04em;color:var(--acc);text-shadow:var(--shade);transition:color .3s,text-shadow .4s}
.tel:hover{color:#fff;text-shadow:0 0 26px color-mix(in srgb,var(--acc) 70%,transparent),var(--shade)}
.listen{margin-top:clamp(60px,8vw,96px);font-style:italic;font-size:21px}
.listen a{color:var(--moon);border-bottom:1px solid rgba(207,220,246,.35);transition:color .3s,border-color .3s}
.listen a:hover{color:var(--acc);border-color:var(--acc)}

.foot{padding:30px 20px 70px;text-align:center;color:var(--mute);font-size:15px;text-shadow:var(--shade)}
.foot-mark{width:38px;height:38px;color:var(--acc);margin:0 auto 12px;display:block;opacity:.85}
.credits{max-width:760px;margin:22px auto 0;font-size:12.5px;line-height:1.7}
.credits summary{cursor:pointer;list-style:none;font-family:var(--sans);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute)}
.credits summary::-webkit-details-marker{display:none}
.credits p{margin-top:12px}
.credits a{border-bottom:1px solid rgba(255,255,255,.18)}

@media (max-width:820px){
}
@media (max-width:640px){
  .hero-kind,.hero-origin{font-size:9.5px;letter-spacing:.2em}
  .hero-with{font-size:9px;letter-spacing:.14em;white-space:nowrap}
  .one,.one-reflect{font-size:clamp(20px,6.4vw,26px);letter-spacing:.03em}
  .moon{right:14px;bottom:14px;width:26px;height:26px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise,[data-reveal],[data-words] .w{opacity:1;filter:none;transform:none;animation:none;transition:none}
  .bd,.arch img,.mist i,.earth-spin,.earth-halo,.chakana.in,.hero-cue i{animation:none}
  .ask::before{transition:none;transform:none}
  .chakana path,.chakana circle{stroke-dashoffset:0;transition:none}
  .m-word>span{transition:none}
  .one-reflect{filter:blur(.4px)}
}