/* ==========================================================================
   SSW v8 — Hero V4 „Der Schwarm"
   3D-Dot-Konstrukt + Branchen-Headline in Dauerschleife.
   Scoping: [data-hero="d"] / .hvd-*
   Branchenakzente: Handwerk = Elektro-Cyan, Beauty = Rosé, Gastro = Bernstein.
   ========================================================================== */

/* ---------- Bühne ---------- */
.hvd-page {
  --hvd-accent: #8FD3FF;
}

.hero[data-hero="d"] {
  min-height: min(82svh, 56rem);
  padding: 7rem 0 2.5rem;
  background: transparent;
}

/* Fixierte Dot-Bühne: bleibt hinter dem gesamten Seiteninhalt. */
.hvd-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.hvd-page main,
.hvd-page .site-footer {
  position: relative;
  z-index: 1;
}

/* Dunkler Schleier zwischen Dots und Inhalt: je weiter der Teppich,
   desto tiefer liegt er im Hintergrund. */
.hvd-veil {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: var(--bg);
  opacity: 0;
  pointer-events: none;
}

.hero[data-hero="d"] > .container {
  position: relative;
  z-index: 3;
  width: 100%;
}

.hvd-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(2rem, 4.4vw, 4.5rem);
}

/* Hintergrund: Raster, Korn, Vignette */
.hvd-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(to right, oklch(100% 0 0 / 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(100% 0 0 / 0.055) 1px, transparent 1px);
  background-size: 96px 96px;
  -webkit-mask-image: radial-gradient(76% 92% at 67% 48%, #000 0%, transparent 74%);
  mask-image: radial-gradient(76% 92% at 67% 48%, #000 0%, transparent 74%);
}

.hvd-grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.hero[data-hero="d"]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 62% 46%,
    transparent 28%,
    oklch(12.5% 0.012 260 / 0.42) 78%,
    oklch(12.5% 0.012 260 / 0.72) 100%
  );
}

/* ---------- Headline ---------- */
.hvd-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 44rem;
  font-family: var(--font-display);
  font-weight: 740;
  font-stretch: 96%;
  font-size: clamp(2.35rem, 5vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--fg);
  display: flex;
  flex-direction: column;
}

.hvd-eyebrow {
  display: inline-block;
  margin: 0 0 0.7rem;
  overflow: hidden;
  padding-bottom: 0.16em;
  font-family: var(--font-display);
  font-weight: 700;
  font-stretch: 104%;
  font-size: clamp(0.78rem, 1.05vw, 0.95rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hvd-accent, var(--accent));
}

.hvd-eyebrow .hvd-word {
  display: inline-block;
  color: var(--hvd-accent, var(--accent));
  will-change: transform, opacity, filter;
}

.hvd-line--accent {
  color: var(--hvd-accent, var(--accent));
}

.hvd-line {
  display: block;
  white-space: nowrap;
}

.hvd-line--static {
  overflow: visible;
}

.hvd-words {
  display: inline-flex;
  gap: 0.22em;
  white-space: nowrap;
}

.hvd-word-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  perspective: 800px;
}

.hvd-words .hvd-word {
  display: inline-block;
  transform-origin: 50% 100%;
  will-change: transform, opacity, filter;
}

.hvd-line--dynamic {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.hvd-line--dynamic .hvd-word {
  display: block;
  transform-origin: 50% 100%;
  will-change: transform, opacity, filter;
  color: var(--hvd-accent);
}

/* ---------- Visuelle Bühne ---------- */
.hvd-visual {
  position: relative;
  flex: 0 0 auto;
  width: clamp(20rem, 40vw, 33.75rem);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  isolation: isolate;
  will-change: opacity;
}

.hvd-glow {
  position: absolute;
  inset: -16%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 48%,
    rgba(143, 211, 255, 0.2) 0%,
    rgba(143, 211, 255, 0.075) 36%,
    transparent 68%
  );
  background: radial-gradient(
    circle at 50% 48%,
    color-mix(in srgb, var(--hvd-accent) 22%, transparent) 0%,
    color-mix(in srgb, var(--hvd-accent) 8%, transparent) 36%,
    transparent 68%
  );
  animation: hvd-breathe 9s ease-in-out infinite alternate;
}

@keyframes hvd-breathe {
  from { opacity: 0.72; transform: scale(0.985); }
  to   { opacity: 1;    transform: scale(1.025); }
}

.hvd-pulse {
  position: absolute;
  inset: 12%;
  z-index: 2;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle,
    rgba(143, 211, 255, 0.18) 0%,
    rgba(143, 211, 255, 0.06) 42%,
    transparent 68%
  );
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--hvd-accent) 18%, transparent) 0%,
    color-mix(in srgb, var(--hvd-accent) 6%, transparent) 42%,
    transparent 68%
  );
}

.hvd-pulse.is-pulsing {
  animation: hvd-pulse 1.15s ease-out;
}

@keyframes hvd-pulse {
  0%   { opacity: 0;    transform: scale(0.78); }
  18%  { opacity: 0.9;  }
  100% { opacity: 0;    transform: scale(1.32); }
}

/* ---------- Mobil / Tablet ---------- */
@media (max-width: 1023px) {
  .hero[data-hero="d"] {
    min-height: 100svh;
    padding: 6.5rem 0 2rem;
  }

  .hvd-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 1.5rem;
  }

  .hvd-title {
    order: 1;
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    font-size: clamp(1.8rem, 8.8vw, 3.4rem);
  }

  .hvd-visual {
    order: 2;
    width: min(78vw, 20rem);
    margin-inline: auto;
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .hvd-visual {
    width: min(78vw, 24rem);
  }
}

@media (max-width: 639px) {
  .hero[data-hero="d"] {
    padding-bottom: 5.25rem;
  }
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hvd-glow,
  .hvd-pulse.is-pulsing {
    animation: none;
  }

  .hvd-glow {
    opacity: 0.8;
    transform: none;
  }

  .hvd-pulse {
    display: none;
  }

  .hvd-words .hvd-word,
  .hvd-line--dynamic .hvd-word {
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .hvd-word-mask {
    perspective: none;
  }

  .hvd-visual {
    will-change: auto;
    opacity: 1 !important;
  }
}


/* ---------- Seitenweiter Teppich: Sektionen lassen die Dots durch ---------- */
.hvd-page .order-bar {
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hvd-page .showcase {
  background: color-mix(in srgb, var(--surface) 68%, transparent);
}

.hvd-page .survey {
  background: color-mix(in srgb, var(--bg) 64%, transparent);
}

.hvd-page .site-footer {
  background: color-mix(in srgb, var(--bg) 76%, transparent);
}