/* ==========================================================================
   SHANOVA — Intro der Startseite (Logo-Animation vor der Seite)

   Reine Browser-Animation aus den vorhandenen Logo-Dateien - kein Video, kein Ton.
   Ablauf (rund 5 Sekunden): Sechseck zeichnet sich -> Emblem erscheint mit Lichtschein
   -> Schriftzug und Leitspruch -> ein Glanz laeuft ueber den Schriftzug -> Seite.

   Die Flaeche ist nur sichtbar, solange <html> die Klasse "intro-on" traegt; die
   Animation laeuft, sobald die Flaeche "is-playing" traegt. Beides setzt
   assets/js/intro.js. Ohne Skript gibt es kein Intro und die Seite erscheint wie immer.
   Die Gesamtdauer steht auch in intro.js (PLAY_MS) - bei Aenderungen beide anpassen.
   ========================================================================== */

.intro { display: none; }

html.intro-on { overflow: hidden; }

html.intro-on .intro {
  /* Breite des Emblems: richtet sich nach der kuerzeren Seite, damit alles in Hoch- und Querformat passt */
  --m: clamp(120px, min(44vw, 34vh), 380px);
  --gold: #C9B288;
  --gold-hi: #F1E2C1;
  position: fixed;
  inset: 0;
  z-index: 1000;                 /* ueber Kopfzeile (100) und Sprunglink (200) */
  display: grid;
  place-items: center;
  overflow: hidden;
  /* derselbe Grund wie im Kopfbereich der Startseite - so geht das Intro nahtlos in die Seite ueber */
  background: radial-gradient(120% 90% at 50% 40%, #1B232B 0%, #141B22 45%, #0F151B 100%);
  opacity: 1;
  transition: opacity 600ms ease;
  cursor: pointer;               /* ein Klick irgendwo ueberspringt */
}

html.intro-on .intro::before {   /* feines Raster wie im Kopfbereich */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(184, 190, 196, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(184, 190, 196, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 85%);
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 85%);
  pointer-events: none;
}

html.intro-on .intro.is-leaving { opacity: 0; pointer-events: none; }

.intro__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  user-select: none;
}

/* ---------- Emblem: Sechseck, Lichtschein, Logo ---------- */
.intro__emblem {
  position: relative;
  width: var(--m);
  aspect-ratio: 512 / 644;
}

.intro__glow,
.intro__rays {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.7);
}
.intro__glow {
  width: calc(var(--m) * 2.1);
  height: calc(var(--m) * 2.1);
  background: radial-gradient(closest-side, rgba(214, 190, 147, .5), rgba(214, 190, 147, .14) 45%, rgba(214, 190, 147, 0) 100%);
}
.intro__rays {
  width: calc(var(--m) * 3.2);
  height: calc(var(--m) * 3.2);
  background: repeating-conic-gradient(from 0deg, rgba(241, 226, 193, 0) 0deg 6deg, rgba(241, 226, 193, .13) 6deg 8.5deg, rgba(241, 226, 193, 0) 8.5deg 15deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 18%, transparent 80%);
  mask-image: radial-gradient(closest-side, #000 18%, transparent 80%);
}

.intro__hex {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.intro__hex path {
  fill: none;
  stroke: var(--gold);
  stroke-linejoin: round;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}
.intro__hex-line  { stroke-width: 6; }
.intro__hex-inner { stroke-width: 2.5; opacity: .55; }
.intro__hex .intro__hex-spark {   /* heller Funke an der Spitze der Linie */
  stroke: var(--gold-hi);
  stroke-width: 11;
  stroke-linecap: round;
  stroke-dasharray: 12 988;
  stroke-dashoffset: 7;
  opacity: 0;
  filter: drop-shadow(0 0 5px #F1E2C1) drop-shadow(0 0 14px rgba(214, 190, 147, .9));
}

.intro__mark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: scale(.94);
}

/* ---------- Schriftzug mit Glanz, Leitspruch ---------- */
.intro__word {
  position: relative;
  width: min(calc(var(--m) * 1.95), 86vw);
  aspect-ratio: 760 / 128;
  margin-top: calc(var(--m) * .09);
  opacity: 0;
  transform: translateY(16px);
}
.intro__wordmark { display: block; width: 100%; height: 100%; }
.intro__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(255, 250, 235, 0) 42%, rgba(255, 250, 235, .95) 50%, rgba(255, 250, 235, 0) 58%) no-repeat;
  background-size: 260% 100%;
  background-position: 130% 0;
  /* der Glanz ist nur dort sichtbar, wo Buchstaben sind */
  -webkit-mask: url("../img/logo/shanova-wordmark.png") center / 100% 100% no-repeat;
  mask: url("../img/logo/shanova-wordmark.png") center / 100% 100% no-repeat;
  opacity: 0;
}

.intro__claim {
  margin: calc(var(--m) * .05) 0 0;
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(.78rem, calc(var(--m) * .078), 1.3rem);
  line-height: 1.2;
  letter-spacing: .3em;
  text-indent: .3em;            /* gleicht den Buchstabenabstand am Ende aus, damit der Text mittig steht */
  white-space: nowrap;
  color: var(--gold);
  opacity: 0;
}

/* ---------- Ablauf ---------- */
.intro.is-playing .intro__hex-line  { animation: sh-intro-draw 1600ms cubic-bezier(.45, 0, .2, 1) 150ms forwards, sh-intro-out 600ms ease 1900ms forwards; }
.intro.is-playing .intro__hex-inner { animation: sh-intro-draw 1300ms cubic-bezier(.45, 0, .2, 1) 450ms forwards, sh-intro-out 500ms ease 1850ms forwards; }
.intro.is-playing .intro__hex-spark { animation: sh-intro-spark 1600ms cubic-bezier(.45, 0, .2, 1) 150ms forwards; }
.intro.is-playing .intro__glow      { animation: sh-intro-glow 2200ms ease-out 1500ms forwards; }
.intro.is-playing .intro__rays      { animation: sh-intro-rays 1900ms ease-out 1550ms forwards; }
.intro.is-playing .intro__mark      { animation: sh-intro-mark 900ms cubic-bezier(.2, .7, .2, 1) 1550ms forwards; }
.intro.is-playing .intro__word      { animation: sh-intro-rise 700ms cubic-bezier(.2, .7, .2, 1) 2350ms forwards; }
.intro.is-playing .intro__claim     { animation: sh-intro-claim 700ms ease-out 2850ms forwards; }
.intro.is-playing .intro__shine     { animation: sh-intro-shine 950ms ease-in-out 3500ms forwards; }

@keyframes sh-intro-draw  { to { stroke-dashoffset: 0; } }
@keyframes sh-intro-out   { to { opacity: 0; } }
@keyframes sh-intro-spark {
  0%   { stroke-dashoffset: 7; opacity: 0; }
  8%   { opacity: 1; }
  90%  { opacity: 1; }
  100% { stroke-dashoffset: -993; opacity: 0; }
}
@keyframes sh-intro-glow {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.7); }
  30%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: .32; transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes sh-intro-rays {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.75) rotate(0deg); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.15) rotate(9deg); }
}
@keyframes sh-intro-mark {
  0%   { opacity: 0; transform: scale(.94); filter: brightness(1.9) blur(5px); }
  55%  { opacity: 1; filter: brightness(1.35) blur(0); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1) blur(0); }
}
@keyframes sh-intro-rise  { to { opacity: 1; transform: translateY(0); } }
@keyframes sh-intro-claim { to { opacity: 1; letter-spacing: .16em; text-indent: .16em; } }
@keyframes sh-intro-shine {
  0%   { opacity: 0; background-position: 130% 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; background-position: -30% 0; }
}

/* ---------- Ueberspringen ---------- */
.intro__skip {
  position: absolute;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  padding: 10px 18px;
  font: 500 .875rem/1 "Inter", system-ui, sans-serif;
  letter-spacing: .02em;
  color: #d8dce0;
  background: rgba(15, 21, 27, .55);
  border: 1px solid rgba(184, 190, 196, .28);
  border-radius: 999px;
  cursor: pointer;
  opacity: 0;
  animation: sh-intro-skip 400ms ease 500ms forwards;
}
.intro__skip:hover { color: #fff; border-color: rgba(201, 178, 136, .7); }
.intro__skip:focus-visible { outline: 2px solid #C9B288; outline-offset: 3px; }

@keyframes sh-intro-skip { to { opacity: 1; } }

/* Die Startseite wartet mit ihrem Einblenden, bis das Intro zu Ende geht. */
html.intro-on:not(.intro-out) .hero .fade-up { animation-play-state: paused; }

/* ---------- Paket 58: auch bei "Bewegung reduzieren" / "Animationseffekte aus" ----------
   base.css verkuerzt in diesem Fall alle Animationen auf 0,01 ms. Das Intro soll trotzdem auf
   jedem Geraet laufen (Ueberspringen geht jederzeit) - darum hier die echten Zeiten zurueck. */
@media (prefers-reduced-motion: reduce) {
  html.intro-on .intro                { transition-duration: 600ms !important; }
  .intro.is-playing .intro__hex-line  { animation-duration: 1600ms, 600ms !important; }
  .intro.is-playing .intro__hex-inner { animation-duration: 1300ms, 500ms !important; }
  .intro.is-playing .intro__hex-spark { animation-duration: 1600ms !important; }
  .intro.is-playing .intro__glow      { animation-duration: 2200ms !important; }
  .intro.is-playing .intro__rays      { animation-duration: 1900ms !important; }
  .intro.is-playing .intro__mark      { animation-duration: 900ms !important; }
  .intro.is-playing .intro__word      { animation-duration: 700ms !important; }
  .intro.is-playing .intro__claim     { animation-duration: 700ms !important; }
  .intro.is-playing .intro__shine     { animation-duration: 950ms !important; }
  .intro__skip                        { animation-duration: 400ms !important; }
}