/**
 * Intranet-Intro — Startanimation (Plan docs/PLAN_INTRANET_INTRO_ANIMATION_2026-10-18.md, v0.3)
 * Schneider Kabelsatzbau | intro v1.1.0
 */

/* Deckel bis intro.js das Overlay gebaut hat — verhindert, dass das Portal aufblitzt */
html.intro-aktiv body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: #11182B;
}

.intro {
  position: fixed;
  inset: 0;
  z-index: 99991;
  overflow: hidden;
  /* exakt der Grund des Kupfer-Schriftzugs (intranet2): RGB 17/24/43 */
  background: #11182B;
  color: #fff;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}

/* Lichtkegel, Schein hinter der Münze, Vignette, Korn */
.intro-licht,
.intro-schein,
.intro-vignette,
.intro-korn {
  position: absolute;
  pointer-events: none;
}
.intro-licht {
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(ellipse 60% 55% at 50% 46%, rgb(37 99 168 / .42), rgb(17 24 43 / 0) 70%),
    radial-gradient(ellipse 30% 26% at 50% 44%, rgb(120 170 230 / .16), rgb(17 24 43 / 0) 70%);
}
.intro-schein {
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  opacity: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(74 134 186 / .5), rgb(74 134 186 / .16) 38%, rgb(74 134 186 / 0) 70%);
  will-change: transform, opacity;
}
.intro-vignette {
  inset: 0;
  background: radial-gradient(ellipse 85% 80% at 50% 50%, rgb(0 0 0 / 0) 55%, rgb(0 0 0 / .45) 100%);
}
/* feines Rauschen gegen Farbstufen im dunklen Verlauf */
.intro-korn {
  inset: 0;
  opacity: .07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}

.intro-inhalt {
  position: absolute;
  inset: 0;
  will-change: transform, filter;
}
.intro-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.intro-muenze-statisch {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}
.intro.statisch .intro-muenze-statisch { display: block; }
.intro.statisch .intro-canvas { display: none; }

.intro-wortmarke {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  --auf: 0%;
  /* Aufdecken von links mit weicher Kante (--auf wird je Bild gesetzt) */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--auf) - 18%), transparent var(--auf));
  mask-image: linear-gradient(90deg, #000 calc(var(--auf) - 18%), transparent var(--auf));
  will-change: opacity, filter;
}
.intro-wortmarke img {
  display: block;
  width: 100%;
  height: auto;
}
/* Lichtreflex: helles Band, nur innerhalb der Buchstaben sichtbar */
.intro-wortmarke-glanz {
  position: absolute;
  inset: 0;
  opacity: 0;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  background: linear-gradient(105deg, rgb(255 236 214 / 0) 38%, rgb(255 236 214 / .75) 50%, rgb(255 236 214 / 0) 62%);
  background-size: 250% 100%;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
}
.intro-unterzeile {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  font-family: 'Open Sans', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: .06em;
  color: rgb(255 255 255 / .74);
  opacity: 0;
}

.intro-skip {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 99992;
  padding: 8px 14px;
  border: 1px solid rgb(255 255 255 / .22);
  border-radius: 10px;
  background: rgb(15 23 42 / .35);
  color: rgb(255 255 255 / .75);
  font: 600 .8rem/1 'Open Sans', system-ui, sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
  opacity: 0;
  animation: intro-skip-ein .4s ease-out .8s forwards;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.intro-skip:hover { background: rgb(255 255 255 / .1); color: #fff; border-color: rgb(255 255 255 / .4); }
.intro-skip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes intro-skip-ein { to { opacity: 1; } }

/* Portal kommt beim Ausstieg mit 8 px Aufwärtsbewegung (eigene Eigenschaft `translate`,
   damit bestehende transform-Regeln unberührt bleiben) */
html.intro-aktiv #app-content,
html.intro-aktiv #app-main,
html.intro-aktiv #login-screen .login-card {
  translate: 0 8px;
}
html.intro-aus #app-content,
html.intro-aus #app-main,
html.intro-aus #login-screen .login-card {
  translate: 0 0;
  transition: translate .6s cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .intro-skip { animation: none; opacity: 1; }
  html.intro-aktiv #app-content,
  html.intro-aktiv #app-main,
  html.intro-aktiv #login-screen .login-card { translate: none; }
}