/* MilMark Intro-Animation v2.1 (A-59, 4,0 s) – Website milmark.de. Identisch zur App (src/components/brand/Splash.tsx).
   Gesteuert von intro.js (einmal pro Besuch, 30-Min.-Pause, kein Überspringen). Ohne JS: läuft einmal ab und verschwindet. */

@font-face {
  font-family: "MilMark Inter";
  src: url("../fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ── A-59 Intro-Animation v2 (Splash, „cinematic“) ───────────────────────────────────────────────
   Zeitplan (gesamt 4,0 s – v2.1, Milad 31.10.: bisherige Animation unverändert + Glanz in der letzten Sekunde):
     0,00–0,30 s  Navy mit Vignette (Mitte heller) + feines Korn
     0,30–1,30 s  Haus-Linie zeichnet sich (Dach zuerst, dann Wand/Sockel), weicher Glow
     1,20–1,70 s  Fenster geht an wie Licht (Scale 0,6→1) + orangener Lichtschein in die Umgebung
     1,60–2,30 s  Wortmarke Buchstabe für Buchstabe (Tracking weit→normal, Blur/Fade), dann „GUTACHTER“ gesperrt
     2,10–2,70 s  Lichtkante streicht einmal über das Logo
     3,00–3,65 s  NEU: Glanz – schräger Lichtstreif mit Orange-Weiß-Schimmer über Bild- und Wortmarke
     3,60–4,00 s  Logo skaliert 1→1,06 + Blur/Fade, Overlay löst sich ab 3,65 s auf
   Läuft immer bis zum Ende – Tippen/Klicken überspringt NICHT (Wunsch Milad 31.10.). Das Overlay fängt in den 4 s die Klicks ab,
   danach visibility:hidden/display:none → Klicks gehen durch. Fixiert über allem → kein Layout-Shift; animiert werden fast nur
   transform/opacity. Endet bei visibility:hidden, auch ohne JS (Sicherheitsnetz im Skript zusätzlich nach 4,5 s). */
.mm-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(120% 85% at 50% 44%, #16335c 0%, #0f2747 32%, #0b1f3a 62%, #06142a 100%);
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  animation: mm-intro-out 0.35s cubic-bezier(0.5, 0, 0.6, 1) 3.65s forwards;
}
.mm-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("intro-grain.svg");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}
html.mm-intro-gesehen .mm-intro,
.mm-intro[data-state="done"] {
  display: none;
}
/* Nur für erneutes Laden in derselben Sitzung (Intro schon gesehen) – kein Überspringen per Tippen. */
.mm-intro[data-state="skip"] {
  animation: mm-intro-skip 0.28s ease-out forwards;
}
.mm-intro-inner {
  transform: translateY(-3%) scale(0.985);
  animation: mm-intro-push 2.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
.mm-intro-logo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  animation: mm-intro-exit 0.4s cubic-bezier(0.4, 0, 1, 1) 3.6s forwards;
}
.mm-intro-mark {
  position: relative;
  width: 148px;
  height: 90px;
}
.mm-intro-house {
  position: relative;
  display: block;
  width: 148px;
  height: 90px;
  overflow: visible;
  filter: drop-shadow(0 0 7px rgba(255, 255, 255, 0.22));
}
.mm-intro-house path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: mm-intro-draw 1s cubic-bezier(0.65, 0, 0.35, 1) 0.3s forwards;
}
.mm-intro-window {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.6);
  animation: mm-intro-light 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 1.2s forwards;
}
/* Lichtschein des Fensters (Fenstermitte = 54,8 % / 73,4 % der Bildmarke) */
.mm-intro-flare {
  position: absolute;
  left: 54.8%;
  top: 73.4%;
  width: 260px;
  height: 260px;
  margin: -130px 0 0 -130px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(242, 140, 40, 0.55) 0%, rgba(242, 140, 40, 0.2) 22%, rgba(242, 140, 40, 0.06) 45%, rgba(242, 140, 40, 0) 68%);
  opacity: 0;
  transform: scale(0.3);
  animation: mm-intro-flare 1.2s cubic-bezier(0.2, 0.7, 0.3, 1) 1.22s forwards;
}
.mm-intro-word {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.mm-intro-name {
  display: flex;
  font-family: "MilMark Inter", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 42px;
  font-weight: 850;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #fff;
}
.mm-intro-name > span {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateX(var(--mm-x, 0));
  animation: mm-intro-letter 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) var(--mm-d, 1.6s) forwards;
}
.mm-intro-name > span:nth-child(1) { --mm-d: 1.6s; --mm-x: -24px; }
.mm-intro-name > span:nth-child(2) { --mm-d: 1.65s; --mm-x: -16px; }
.mm-intro-name > span:nth-child(3) { --mm-d: 1.7s; --mm-x: -8px; }
.mm-intro-name > span:nth-child(4) { --mm-d: 1.75s; --mm-x: 0px; }
.mm-intro-name > span:nth-child(5) { --mm-d: 1.8s; --mm-x: 8px; }
.mm-intro-name > span:nth-child(6) { --mm-d: 1.85s; --mm-x: 16px; }
.mm-intro-name > span:nth-child(7) { --mm-d: 1.9s; --mm-x: 24px; }
.mm-intro-name > .mm-intro-o {
  color: #f28c28;
}
.mm-intro-sub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-family: "MilMark Inter", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  opacity: 0;
  transform: translateY(4px) scaleX(1.12);
  animation: mm-intro-sub 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) 2s forwards;
}
.mm-intro-sub svg {
  width: 15px;
  height: 15px;
  flex: none;
}
/* Lichtkante: weiche, schräge Lichtbahn, die einmal über das Logo streicht */
.mm-intro-sheenbox {
  position: absolute;
  inset: -12px -36px;
  pointer-events: none;
}
.mm-intro-sheen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 36%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.05) 70%, rgba(255, 255, 255, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 72%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(-100%) skewX(-14deg);
  animation: mm-intro-sheen 0.6s cubic-bezier(0.45, 0, 0.25, 1) 2.1s forwards;
}

/* Glanz (v2.1, 3,00–3,65 s): breiter, schräger Lichtstreif, Kern weiß, Ränder warm-orange – einmal über Bild- und Wortmarke.
   Als ::after der Lichtkanten-Box → kein zusätzliches Markup; nur transform/opacity. reduced motion: weg (Box display:none). */
.mm-intro-sheenbox::after {
  content: "";
  position: absolute;
  top: -14%;
  bottom: -14%;
  left: 0;
  width: 50%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(242, 140, 40, 0.08) 20%, rgba(255, 190, 130, 0.22) 38%, rgba(255, 246, 236, 0.4) 50%, rgba(255, 190, 130, 0.22) 62%, rgba(242, 140, 40, 0.08) 80%, rgba(255, 255, 255, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-100%) skewX(-20deg);
  animation: mm-intro-glanz 0.65s cubic-bezier(0.3, 0, 0.4, 1) 3s forwards;
}

@keyframes mm-intro-push {
  to { transform: translateY(-3%) scale(1); }
}
@keyframes mm-intro-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes mm-intro-light {
  0% { opacity: 0; transform: scale(0.6); }
  35% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes mm-intro-flare {
  0% { opacity: 0; transform: scale(0.3); }
  28% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.42; transform: scale(1.12); }
}
@keyframes mm-intro-letter {
  to { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes mm-intro-sub {
  to { opacity: 1; transform: none; }
}
@keyframes mm-intro-sheen {
  0% { opacity: 0; transform: translateX(-100%) skewX(-14deg); }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateX(280%) skewX(-14deg); }
}
@keyframes mm-intro-glanz {
  0% { opacity: 0; transform: translateX(-100%) skewX(-20deg); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateX(220%) skewX(-20deg); }
}
@keyframes mm-intro-exit {
  to { opacity: 0; transform: scale(1.06); filter: blur(6px); }
}
@keyframes mm-intro-out {
  to { opacity: 0; visibility: hidden; }
}
@keyframes mm-intro-skip {
  to { opacity: 0; visibility: hidden; }
}

/* Weniger Bewegung gewünscht → fertiges Logo, kurz stehen lassen, weich ausblenden */
@media (prefers-reduced-motion: reduce) {
  /* milmark.de: style.css setzt bei reduced-motion global animation:none!important → hier gezielt stärker, sonst bliebe das Overlay stehen */
  html .mm-intro { animation: mm-intro-out 0.3s ease-out 0.5s forwards !important; }
  .mm-intro-inner, .mm-intro-logo { animation: none; transform: translateY(-3%); }
  .mm-intro-house path { animation: none; stroke-dashoffset: 0; }
  .mm-intro-window, .mm-intro-name > span, .mm-intro-sub { animation: none; opacity: 1; transform: none; filter: none; }
  .mm-intro-flare { animation: none; opacity: 0.4; transform: none; }
  .mm-intro-sheenbox { display: none; }
}