/* ══════════════════════════════════════════════════════════════════════
   LaFa 2.0 · landing.css — Preloader, Atmosphäre, Kopf, 3 Portal-Kacheln
   ══════════════════════════════════════════════════════════════════════ */

/* ══ 1 · Preloader ═══════════════════════════════════════════════════ */
.boot {
  position: fixed; inset: 0; z-index: 180;
  display: grid;
  place-items: center;
  background: var(--sand-50);
  transition: opacity .7s var(--ease-out), visibility .7s;
}
.boot.is-done { opacity: 0; visibility: hidden; }

.boot__inner { display: grid; justify-items: center; gap: 1.5rem; }

.boot__mark {
  width: 60px; height: 60px;
  object-fit: contain;
  animation: boot-breathe 2.4s var(--ease-io) infinite;
}
@keyframes boot-breathe {
  0%, 100% { transform: scale(1);    opacity: .82; }
  50%      { transform: scale(1.09); opacity: 1; }
}

.boot__bar {
  position: relative;
  width: 190px; height: 2px;
  border-radius: var(--r-pill);
  background: var(--sand-200);
  overflow: hidden;
}
.boot__fill {
  position: absolute; inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--spice), var(--spice-glow), var(--dusk));
  transition: transform .3s var(--ease-out);
}

.boot__num { color: var(--ink-mute); font-size: .64rem; letter-spacing: .3em; }

/* ══ 2 · Atmosphäre (Hintergrund-Ebenen) ═════════════════════════════ */
.atmos {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* WebGL/Canvas: driftende Licht- und Sandfelder */
#field {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: .92;
}

/* Statischer Verlauf – trägt die Seite auch ohne WebGL */
.atmos__wash {
  position: absolute; inset: -10%;
  background:
    radial-gradient(58% 46% at 14% 8%,  color-mix(in oklab, var(--spice-glow) 30%, transparent) 0%, transparent 62%),
    radial-gradient(50% 44% at 88% 16%, color-mix(in oklab, var(--sky) 26%, transparent) 0%, transparent 60%),
    radial-gradient(64% 52% at 72% 96%, color-mix(in oklab, var(--mint) 24%, transparent) 0%, transparent 64%),
    radial-gradient(46% 40% at 30% 88%, color-mix(in oklab, var(--violet) 15%, transparent) 0%, transparent 60%);
  filter: blur(24px);
  animation: wash-drift 34s var(--ease-io) infinite alternate;
}
@keyframes wash-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2.5%, 1.6%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -2%, 0) scale(1.03); }
}

/* Hairline-Raster */
.atmos__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right,  var(--line-hair) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-hair) 1px, transparent 1px);
  background-size: 82px 82px;
  mask-image: radial-gradient(80% 70% at 50% 42%, #000 20%, transparent 88%);
}

/* Orbitale Ringe – Anleihe an die Referenz, hier in Sand statt Nacht */
.atmos__orbits {
  position: absolute;
  top: 50%; left: 50%;
  width: min(148vh, 138vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  opacity: .5;
}
.atmos__orbits circle { fill: none; stroke: var(--line); stroke-width: 1; }
.atmos__orbits .orbit--dashed { stroke-dasharray: 2 12; opacity: .75; }
.atmos__orbits g { transform-origin: 50% 50%; animation: orbit-spin 130s linear infinite; }
.atmos__orbits g:nth-of-type(2) { animation-duration: 210s; animation-direction: reverse; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }

/* Wandernder Lichtfleck, folgt dem Zeiger */
.atmos__spot {
  position: absolute;
  width: 46rem; aspect-ratio: 1;
  translate: -50% -50%;
  left: var(--mx, 50%); top: var(--my, 45%);
  background: radial-gradient(circle, color-mix(in oklab, #fff 72%, transparent) 0%, transparent 66%);
  opacity: .58;
  transition: opacity var(--t-slow) var(--ease-out);
}

/* Sich hebende Staubkörner */
.atmos__dust { position: absolute; inset: 0; }
.dust {
  position: absolute;
  bottom: -6vh;
  width: 3px; aspect-ratio: 1;
  border-radius: 50%;
  background: color-mix(in oklab, var(--spice) 55%, transparent);
  animation: dust-rise linear infinite;
}
@keyframes dust-rise {
  0%   { transform: translate3d(0, 0, 0) scale(.4); opacity: 0; }
  12%  { opacity: .55; }
  88%  { opacity: .35; }
  100% { transform: translate3d(var(--dx, 6vw), -112vh, 0) scale(1.1); opacity: 0; }
}

/* ══ 3 · Kopfzeile ═══════════════════════════════════════════════════ */
.top {
  position: fixed; inset: 0 0 auto;
  z-index: 60;
  padding: 1.3rem 0;
  transition: background var(--t-mid), border-color var(--t-mid), backdrop-filter var(--t-mid);
  border-bottom: 1px solid transparent;
}
.top.is-stuck {
  background: var(--glass);
  border-bottom-color: var(--line-soft);
  backdrop-filter: blur(16px) saturate(140%);
}

.top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand { display: inline-flex; align-items: center; gap: .72rem; }
.brand__logo {
  width: 34px; height: 34px;
  object-fit: contain;
  transition: transform var(--t-slow) var(--ease-spring);
}
.brand:hover .brand__logo { transform: rotate(-12deg) scale(1.1); }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.1;
}
.brand__ver {
  display: block;
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .28em;
  color: var(--spice);
}

.top__meta { display: flex; align-items: center; gap: 1.4rem; }
.top__coord { color: var(--ink-faint); }
@media (max-width: 620px) { .top__coord { display: none; } }

/* Pulsierender Status-Punkt */
.status { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink-mute); }
.status__dot {
  position: relative;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--leaf);
}
.status__dot::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--leaf);
  animation: ping 2.2s var(--ease-out) infinite;
}
@keyframes ping {
  0%   { transform: scale(1);   opacity: .6; }
  70%  { transform: scale(3.4); opacity: 0; }
  100% { opacity: 0; }
}

/* ══ 4 · Bühne ═══════════════════════════════════════════════════════ */
.stage {
  position: relative;
  z-index: 10;
  /* Bühne plus Fußzeile ergeben zusammen einen Bildschirm — bei nur drei
     Kacheln soll nichts unter der Kante liegen. */
  min-height: calc(100dvh - 5.6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.8rem, 4vh, 3.2rem);
  padding: 6.4rem 0 1.2rem;
}

.intro { display: grid; gap: 1.15rem; max-width: 60ch; }

.intro__title {
  font-size: clamp(2.7rem, 7.4vw, 5.9rem);
  letter-spacing: -.045em;
}
/* Zeilenweiser Masken-Reveal */
.line { display: block; overflow: hidden; }
.line > span {
  display: block;
  transform: translateY(105%);
  will-change: transform;
}
.no-js .line > span { transform: none; }

/* Verlaufsschrift für die zweite Zeile */
.grad {
  background: linear-gradient(102deg,
              var(--spice-deep) 0%, var(--spice) 28%,
              var(--ember) 52%, var(--dusk) 78%, var(--leaf-deep) 100%);
  background-size: 165% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: grad-slide 11s var(--ease-io) infinite alternate;
}
@keyframes grad-slide {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

.intro__lead {
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  color: var(--ink-soft);
  max-width: 46ch;
  text-wrap: pretty;
}

/* ══ 5 · Die drei Portale ════════════════════════════════════════════ */
.portals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.35rem;
  perspective: 1600px;
}
@media (max-width: 1080px) { .portals { grid-template-columns: 1fr; gap: 1.1rem; } }

.portal {
  --accent: var(--spice);
  --accent-2: var(--spice-glow);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.15rem;
  min-height: clamp(17rem, 38vh, 24rem);
  padding: 1.6rem;
  border-radius: var(--r-xl);
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  background:
    linear-gradient(168deg,
      color-mix(in oklab, var(--paper) 92%, transparent) 0%,
      color-mix(in oklab, var(--paper) 78%, transparent) 100%);
  border: 1px solid color-mix(in oklab, var(--ink) 9%, var(--glass-edge));
  box-shadow: var(--shadow-md), inset 0 1px 0 color-mix(in oklab, #fff 70%, transparent);
  backdrop-filter: blur(18px) saturate(150%);
  transition: box-shadow var(--t-slow) var(--ease-out),
              border-color var(--t-slow) var(--ease-out);
}
@media (max-width: 1080px) { .portal { min-height: 15.5rem; } }

.portal:hover, .portal:focus-visible {
  box-shadow: var(--shadow-xl),
              0 0 0 1px color-mix(in oklab, var(--accent) 26%, transparent),
              0 30px 80px color-mix(in oklab, var(--accent) 22%, transparent);
  border-color: color-mix(in oklab, var(--accent) 34%, transparent);
}

/* 5a · Accent-Wash im Kachelgrund */
.portal__wash {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(120% 88% at 50% 118%, color-mix(in oklab, var(--accent) 26%, transparent) 0%, transparent 68%),
    radial-gradient(84% 62% at 88% -12%, color-mix(in oklab, var(--accent-2) 30%, transparent) 0%, transparent 62%);
  opacity: .5;
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.portal:hover .portal__wash,
.portal:focus-visible .portal__wash { opacity: .85; transform: scale(1.09); }

/* 5b · Zeigerfolgender Spotlight */
.portal__glow {
  position: absolute; inset: -30%; z-index: -2;
  background: radial-gradient(17rem 17rem at var(--px, 50%) var(--py, 50%),
              color-mix(in oklab, #fff 62%, transparent) 0%, transparent 66%);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-out);
}
.portal:hover .portal__glow,
.portal:focus-visible .portal__glow { opacity: .62; }

/* 5c · Rotierende Konus-Kante beim Hover */
.portal__rim {
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--spin, 0deg),
              transparent 0deg,
              color-mix(in oklab, var(--accent) 82%, transparent) 46deg,
              transparent 116deg,
              transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease-out);
  animation: rim-spin 4.2s linear infinite;
}
.portal:hover .portal__rim, .portal:focus-visible .portal__rim { opacity: 1; }
@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes rim-spin { to { --spin: 360deg; } }

/* 5d · Kachel-Grafik (SVG-Szene je Portal) */
.portal__art {
  position: absolute;
  inset: 0 0 auto;
  height: 68%;
  z-index: -1;
  opacity: .95;
  transform: translateZ(24px);
  transition: transform var(--t-slow) var(--ease-out), opacity var(--t-slow);
  /* blendet aus, bevor Titel und Text beginnen */
  mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 92%);
}
.portal:hover .portal__art,
.portal:focus-visible .portal__art { transform: translateZ(38px) scale(1.05); }
.portal__art svg { width: 100%; height: 100%; }

/* 5e · Kopfzeile der Kachel: Index + Label */
.portal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: auto;
  transform: translateZ(30px);
}
.portal__idx {
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .22em;
  color: var(--ink-faint);
}
.portal__tag {
  padding: .3rem .68rem;
  border-radius: var(--r-pill);
  border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  background: color-mix(in oklab, var(--paper) 70%, transparent);
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--accent) 76%, var(--ink));
  white-space: nowrap;
}

/* 5f · Textkörper */
.portal__body {
  display: grid;
  gap: .5rem;
  transform: translateZ(42px);
  /* hebt den Text vom Verlauf darunter ab, ohne ihn zu kästeln */
  text-shadow: 0 1px 0 color-mix(in oklab, var(--paper) 85%, transparent);
}

.portal__title {
  font-size: clamp(1.5rem, 2.5vw, 2.05rem);
  letter-spacing: -.03em;
  line-height: 1.05;
}
.portal__desc {
  font-size: .875rem;
  color: var(--ink-soft);
  max-width: 34ch;
  text-wrap: pretty;
}

/* 5g · Fußzeile mit gleitendem Pfeil */
.portal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  transform: translateZ(30px);
}
.portal__cta {
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  transition: color var(--t-mid) var(--ease-out);
}
.portal:hover .portal__cta,
.portal:focus-visible .portal__cta { color: color-mix(in oklab, var(--accent) 80%, var(--ink)); }

.portal__arrow {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
  color: var(--ink);
  border: 1px solid var(--line);
  transition: color var(--t-mid) var(--ease-out), border-color var(--t-mid) var(--ease-out);
}
.portal__arrow::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  transform: scale(0);
  transition: transform var(--t-mid) var(--ease-spring);
}
.portal:hover .portal__arrow,
.portal:focus-visible .portal__arrow {
  color: var(--paper);
  border-color: transparent;
}
.portal:hover .portal__arrow::before,
.portal:focus-visible .portal__arrow::before { transform: scale(1); }
.portal__arrow svg {
  position: relative;
  width: 17px; height: 17px;
  transition: transform var(--t-mid) var(--ease-out);
}
.portal:hover .portal__arrow svg,
.portal:focus-visible .portal__arrow svg { transform: translate(2px, -2px); }

/* 5h · Sheen-Sweep über die ganze Kachel */
.portal::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: linear-gradient(108deg, transparent 38%, rgba(255,255,255,.5) 50%, transparent 62%);
  transform: translateX(-130%);
  transition: transform 1s var(--ease-out);
}
.portal:hover::after { transform: translateX(130%); }

/* 5i · Akzente je Portal */
.portal--core   { --accent: var(--spice); --accent-2: var(--spice-glow); }
.portal--dune   { --accent: var(--ember); --accent-2: var(--spice-glow); }
.portal--pal    { --accent: var(--leaf);  --accent-2: var(--mint); }

/* ══ 6 · Fußzeile ════════════════════════════════════════════════════ */
.foot {
  position: relative;
  z-index: 10;
  padding: 1rem 0 1.6rem;
}
.foot__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-soft);
  color: var(--ink-faint);
  flex-wrap: wrap;
}
.foot__nav { display: flex; gap: 1.4rem; }
.foot__nav a { transition: color var(--t-mid) var(--ease-out); }
.foot__nav a:hover { color: var(--spice); }

/* ══ 7 · Bewegung in den Kachel-Grafiken ═════════════════════════════ */
.portal__art g[class^="art-"],
.portal__art [class^="art-"] { transform-box: fill-box; transform-origin: center; }

/* Orbits im Kern-Portal */
.art-spin { animation: art-spin var(--dur, 50s) linear infinite; transform-origin: 200px 150px !important; transform-box: view-box !important; }
.art-spin--rev { animation-direction: reverse; }
@keyframes art-spin { to { transform: rotate(360deg); } }

/* Atmender Glorienschein */
.art-pulse { animation: art-pulse 6.5s var(--ease-io) infinite; }
@keyframes art-pulse {
  0%, 100% { opacity: .72; transform: scale(.94); }
  50%      { opacity: 1;   transform: scale(1.08); }
}

/* Schwebende Körper */
.art-float { animation: art-float var(--dur, 6s) var(--ease-io) infinite; }
.art-float--rev { animation-direction: reverse; }
@keyframes art-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* Sanft wandernde Dünen- und Hügelkämme */
.art-drift { animation: art-drift var(--dur, 18s) var(--ease-io) infinite; }
.art-drift--rev { animation-direction: reverse; }
@keyframes art-drift {
  0%, 100% { transform: translateX(calc(var(--amp, 6px) * -1)); }
  50%      { transform: translateX(var(--amp, 6px)); }
}

/* Hitzeflimmern über dem Wüstenhorizont */
.art-shimmer { animation: art-shimmer 3.4s var(--ease-io) infinite; }
@keyframes art-shimmer {
  0%, 100% { opacity: .14; transform: translateX(-3px) scaleX(.97); }
  50%      { opacity: .34; transform: translateX(3px)  scaleX(1.03); }
}

/* Aufblitzende Funken und Sporen */
.art-spark circle { animation: art-spark 4.2s var(--ease-io) infinite; }
.art-spark circle:nth-child(2) { animation-delay: -1.1s; }
.art-spark circle:nth-child(3) { animation-delay: -2.3s; }
.art-spark circle:nth-child(4) { animation-delay: -3.1s; }
@keyframes art-spark {
  0%, 100% { opacity: .18; transform: translateY(0)     scale(.7); }
  50%      { opacity: .95; transform: translateY(-11px) scale(1.25); }
}

/* Hüpfender Pal */
.art-hop { animation: art-hop 2.9s var(--ease-io) infinite; }
@keyframes art-hop {
  0%, 62%, 100% { transform: translateY(0)    scaleY(1); }
  70%           { transform: translateY(2px)  scaleY(.92); }
  82%           { transform: translateY(-13px) scaleY(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .portal__art [class^="art-"] { animation: none !important; }
}

/* ══ 8 · Enge Viewports ══════════════════════════════════════════════ */
@media (max-width: 1080px) {
  /* Die Kacheln sind hier breiter als hoch: das SVG wird beim „slice“
     stärker hochskaliert und liefe sonst in den Titel. */
  .portal__art {
    height: 58%;
    mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 86%);
  }
  .portal__wash { opacity: .42; }
}

@media (max-width: 620px) {
  :root { --page: min(1320px, 100% - 2.2rem); }

  .eyebrow { letter-spacing: .24em; font-size: .6rem; }
  .eyebrow::before { width: 1.5rem; }

  .stage { padding-top: 6.5rem; gap: 2rem; }
  .intro__title { font-size: clamp(2.5rem, 12vw, 3.4rem); }

  .portal { min-height: 14rem; padding: 1.3rem; border-radius: var(--r-lg); }
  .portal__art { height: 54%; }
  .portal__desc { font-size: .84rem; }

  .foot__inner { flex-direction: column; align-items: flex-start; gap: .8rem; }
}