/* boot.css — Intro/Boot-Animation + 3D-Hero-Canvas */

/* ---------- 3D HERO CANVAS (Three.js Pastell-Kristalle) ---------- */
#hero3d {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity 1.2s var(--ease-soft);
}
#hero3d.on { opacity: 0.85; }
@media (prefers-reduced-motion: reduce) { #hero3d { display: none; } }

/* ---------- BOOT / INTRO OVERLAY ---------- */
#boot {
  position: fixed; inset: 0; z-index: 9999;
  display: grid; place-items: center;
  background:
    radial-gradient(900px 700px at 50% 35%, #EAF0FF 0%, rgba(234,240,255,0) 60%),
    radial-gradient(700px 600px at 80% 80%, #F0FDFA 0%, rgba(240,253,250,0) 60%),
    radial-gradient(700px 600px at 18% 78%, #F3F0FF 0%, rgba(243,240,255,0) 60%),
    #F4F7FC;
  overflow: hidden;
  transition: opacity .6s var(--ease-soft), transform .6s var(--ease-soft), filter .6s var(--ease-soft);
  perspective: 1000px;
}
#boot.done { opacity: 0; transform: scale(1.08); filter: blur(10px); pointer-events: none; }

.boot-stage { position: relative; display: grid; place-items: center; transform-style: preserve-3d; }

/* expanding halo ring behind the logo */
.boot-halo {
  position: absolute; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,156,255,0.30) 0%, rgba(124,156,255,0) 70%);
  animation: bootHalo 1.6s var(--ease-soft) .15s both;
}
.boot-halo::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(124,156,255,0.5);
  animation: bootRing 1.4s var(--ease-soft) .2s both;
}

.boot-logo {
  width: 132px; height: 132px;
  filter: drop-shadow(0 16px 40px rgba(91,124,250,0.45));
  animation: bootLogo 1.15s cubic-bezier(0.34,1.56,0.64,1) both, bootFloat 3s var(--ease-soft) 1.1s infinite;
  transform-style: preserve-3d;
}

.boot-word {
  position: absolute; bottom: -64px;
  font-family: var(--font-sans); font-weight: 800; font-size: 30px; letter-spacing: -.02em;
  color: var(--ink);
  opacity: 0; animation: bootWord .7s var(--ease-soft) .55s both;
  white-space: nowrap;
}

.boot-bar {
  position: absolute; bottom: -112px; width: 180px; height: 4px;
  background: rgba(91,124,250,0.14); border-radius: 999px; overflow: hidden;
  opacity: 0; animation: bootWord .4s var(--ease-soft) .7s both;
}
.boot-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent-gradient-vivid); animation: bootBar 1.5s var(--ease-soft) .75s both; }

/* sparkles */
.boot-spark { position: absolute; width: 12px; height: 12px; opacity: 0;
  background:
    linear-gradient(currentColor, currentColor) center/2px 100% no-repeat,
    linear-gradient(currentColor, currentColor) center/100% 2px no-repeat;
  border-radius: 2px; }
.boot-spark.s1 { color: #5B7CFA; top: -36px; left: -52px; animation: bootSpark 1.1s var(--ease-soft) .5s both; }
.boot-spark.s2 { color: #2DD4BF; top: -20px; right: -64px; animation: bootSpark 1.1s var(--ease-soft) .72s both; }
.boot-spark.s3 { color: #A78BFA; bottom: 0px; left: -70px; animation: bootSpark 1.1s var(--ease-soft) .64s both; }
.boot-spark.s4 { color: #FF9BB8; bottom: -8px; right: -48px; animation: bootSpark 1.1s var(--ease-soft) .85s both; }

@keyframes bootLogo {
  0%   { opacity: 0; transform: rotateY(-90deg) scale(0.5); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: rotateY(0deg) scale(1); }
}
@keyframes bootFloat { 50% { transform: translateY(-8px); } }
@keyframes bootHalo { 0% { transform: scale(0.3); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes bootRing { 0% { transform: scale(0.5); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes bootWord { 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes bootBar { 0% { width: 0; } 100% { width: 100%; } }
@keyframes bootSpark { 0% { opacity: 0; transform: scale(0) rotate(0deg); } 40% { opacity: 1; transform: scale(1.2) rotate(45deg); } 100% { opacity: 0; transform: scale(0.6) rotate(90deg); } }

@media (prefers-reduced-motion: reduce) {
  #boot { display: none !important; }
}

/* ---------- MOBILE-Anpassungen ---------- */
@media (max-width: 760px) {
  body { background-attachment: scroll; } /* iOS: vermeidet ruckelnden fixed-Hintergrund */
  #hero3d.on { opacity: 0.7; }
  .boot-logo { width: 108px; height: 108px; }
  .boot-word { font-size: 26px; bottom: -56px; }
  .boot-bar { width: 150px; bottom: -100px; }
}