@property --soft {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
  }
  
  @property --glowMul {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
  }
  
  @property --glowA {
    syntax: "<number>";
    inherits: true;
    initial-value: 1;
  }  

:root {
    --hero-bg: var(--color-bg);         /* unify with global background */
    --hero-text: #3F4652; /* light: neutral gray */
    --hero-subtext: color-mix(in srgb, #6B7280 80%, transparent);
  
    /* dots: “ink” statt neon */
    --dot-lightness: 58%;
    --dot-sat: 62%;
    --dot-opacity: 0.24;
    --dot-glow: 10px;
  
    /* glass card */
    --glass-bg: rgba(250,250,250,0.58);
    --glass-border: rgba(255,255,255,0.58);
    --glass-shadow: 0 18px 60px rgba(0,0,0,0.08);
  
    /* vignette */
    --vignette: 0;
  }
  
:root[data-theme="dark"],
:root.dark {
  --hero-bg: var(--color-bg);
  --hero-text: #A6AFBF;
  --hero-subtext: #7E889B;

  --dot-lightness: 46%;
  --dot-sat: 44%;
  --dot-opacity: 0.26;
  --dot-glow: 6px;
  
    --glass-bg: rgba(10,10,10,0.42);
    --glass-border: rgba(255,255,255,0.08);
    --glass-shadow: 0 18px 70px rgba(0,0,0,0.35);
  
    --vignette: 0;
  }
  
  /* =========================================================
     HERO — LAYOUT
     ========================================================= */
  
  .hero-static{
    position: relative;
    min-height: 104vh;
    height: 104vh;

    margin-top: -96px;
    padding-top: 96px;
  
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
  
    background: var(--hero-bg);
  
    /* IMPORTANT: prevents blend / overlays from affecting text */
    isolation: isolate;
  }
  
  /* vignette overlay (subtle depth, luxury) */
  .hero-static::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index: 4; /* under text (text is z=10), above dots */
    background:
      radial-gradient(1200px 800px at 50% 35%,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,0.06) 65%,
        rgba(0,0,0,0.10) 100%);
    opacity: var(--vignette);
    mix-blend-mode: multiply;
  }
  :root[data-theme="dark"] .hero-static::after,
  :root.dark .hero-static::after{
    mix-blend-mode: screen;
    background:
      radial-gradient(1200px 800px at 50% 35%,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.06) 70%,
        rgba(255,255,255,0.12) 100%);
  }
  
  /* Text wrapper (kept above dots) */
  .hero-text{
    position: relative;
    z-index: 10;
  
    width: 100%;
    max-width: 64rem;
    text-align: center;
  
    margin-top: clamp(16rem, 20vh, 18rem);
  
    /* keep text crisp */
    mix-blend-mode: normal;
  }
  
  /* Headlines */
  .hero-text h1{
    color: var(--hero-text) !important;
    letter-spacing: -0.02em;
    font-weight: 520;
    line-height: 1.42 !important;
    font-size: clamp(2rem, 3.6vw, 3.2rem) !important;
  }
  
  /* Slogan line */
  .hero-text h4{
    color: var(--hero-text) !important;
    letter-spacing: 0.08em;
    text-transform: lowercase;
    opacity: 0.85;
    font-size: clamp(1rem, 2vw, 1.5rem) !important;
    margin-top: 0.75rem;
  }
  
  /* =========================================================
     HERO — DOTS (2 layers)
     ========================================================= */
  
  /* Dot layers */
  #heroDots1,
  #heroDots2{
    position: absolute;
    inset: 0;
    pointer-events: none;
    transform: translateZ(0);
  }

  :root.js .hero-static:not(.hero-ready) #heroDots1,
  :root.js .hero-static:not(.hero-ready) #heroDots2{
    opacity: 0 !important;
    visibility: hidden !important;
  }

  :root.js .hero-static:not(.hero-dots-live) #heroDots1,
  :root.js .hero-static:not(.hero-dots-live) #heroDots2{
    opacity: 0 !important;
    visibility: hidden !important;
  }
  
  /* stacking */
  #heroDots1{ z-index: 1; }
  #heroDots2{ z-index: 0; }
  
  
  /* Base dot style */
  .hero-dots .dot{
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--s);
    height: var(--s);
  
    border-radius: 9999px;
    transform: translate3d(-50%, -50%, 0);
    backface-visibility: hidden;
    will-change: transform, opacity;
  
    /* “ink” rainbow: less saturation, softer glow */
    background: hsl(var(--h), var(--dot-sat), var(--dot-lightness));
  
    opacity: 0;
    visibility: hidden;
  
    transition: opacity 0.55s ease;
    will-change: transform, opacity;
    backface-visibility: hidden;

  }
  
  .hero-dots .dot.is-on{
    opacity: calc(var(--dot-opacity) * var(--o));
    visibility: visible;
  }
  
  /* Subtle idle pulse */
  @keyframes dotPulseFast{
    0%   { transform: translate3d(-50%, -50%, 0) scale(0.97); }
    50%  { transform: translate3d(-50%, -50%, 0) scale(1.03); }
    100% { transform: translate3d(-50%, -50%, 0) scale(0.97); }
  }
  
  #heroDots2 .dot{
    filter: blur(0.35px);
    transform: translate3d(-50%, -50%, 0) scale(0.96);
  }
  
  .hero-dots .dot{
    animation: dotPulseFast calc(var(--tp) * 1.8) ease-in-out infinite;
  }
  
  /* Turn OFF base pulse during phases */
  .hero-static.feel-phase  .hero-dots .dot,
  .hero-static.shape-phase .hero-dots .dot,
  .hero-static.grow-phase  .hero-dots .dot{
    animation: none;
  }

  .hero-static.theme-kick .hero-dots .dot{
    filter: saturate(1.0001);
  }
  

  /* =========================================================
   PRE-FEEL (Pulse flacht ab + kurzer Stillstand)
   ========================================================= */

/* 1) In prefeel wird die Pulse-Animation langsamer & kleiner */
.hero-static.prefeel-phase .hero-dots .dot{
    animation-duration: calc(var(--tp) * 2.2);
  }
  
  @keyframes dotPulseSoft{
    0%   { transform: translate3d(-50%, -50%, 0) scale(0.98); }
    50%  { transform: translate3d(-50%, -50%, 0) scale(1.02); }
    100% { transform: translate3d(-50%, -50%, 0) scale(0.98); }
  }
  
  /* Override: softer pulse */
  .hero-static.prefeel-phase .hero-dots .dot{
    animation-name: dotPulseSoft;
    animation-timing-function: ease-in-out;
  }
  
  /* 2) Optional: Stillstand ganz kurz am Ende von prefeel
     -> wird sichtbar, wenn wir kurz vor feel zusätzlich freeze-phase setzen.
     (kommt Schritt 2b) */
.hero-static.freeze-phase .hero-dots .dot{
    animation: none !important;
    transform: translate3d(-50%, -50%, 0) scale(1) !important;
}
      
  
  
  /* =========================================================
     DOTS — SHAPE (spiral etc.)
     ========================================================= */

/* SHAPE (GPU): move via transform offsets, not left/top */
  .hero-static.shape-phase .hero-dots .dot{
    animation: none !important;
  
    transition:
      transform var(--shapeDur, 7.5s) cubic-bezier(.22,.61,.36,1),
      opacity 0.55s ease !important;
  
    transform: translate3d(
      calc(-50% + var(--sx, 0px)),
      calc(-50% + var(--sy, 0px)),
      0
    ) !important;
  
    filter: none !important;
  }
  
  
  .hero-dots .dot{
    will-change: transform, opacity;
    backface-visibility: hidden;
  }
  
  
  /* =========================================================
     DOTS — FEEL (expand → hold → release)
     ========================================================= */
  
  .hero-static.feel-phase .hero-dots .dot.is-on{
    transition: opacity 0.9s ease;
    opacity: calc(var(--dot-opacity) * var(--o) * 0.75);
    animation: dotHoldBreath 8s ease-in-out forwards;
  }
  
  @keyframes dotHoldBreath{
    0%   { transform: translate3d(-50%, -50%, 0) scale(1); }
    18%  { transform: translate3d(-50%, -50%, 0) scale(1.12); } /* softer start */
    42%  { transform: translate3d(-50%, -50%, 0) scale(1.75); }
    64%  { transform: translate3d(-50%, -50%, 0) scale(2.25); } /* peak */
    78%  { transform: translate3d(-50%, -50%, 0) scale(2.25); } /* short hold */
    100% { transform: translate3d(-50%, -50%, 0) scale(1); }
  }
  
  
  /* =========================================================
     GROW (simple + cinematic): dots scale to individual targets
     IMPORTANT: overrides layer2 transform rule
     ========================================================= */
/* 300-500ms vor grow setzen (per JS Klasse), damit GPU ready ist */
.hero-static.warm-grow .hero-dots .dot.is-on{
    will-change: transform, opacity, filter;
    transform: translate3d(
      calc(-50% + var(--sx, 0px) + var(--gx, 0px)),
      calc(-50% + var(--sy, 0px) + var(--gy, 0px)),
      0
    ) scale(1);
  }

  
/* verhindert den 1-Frame Transition-Hiccup beim Eintritt */
.hero-static.pre-grow:not(.grow-phase) .hero-dots .dot{
    transition: none !important;
  }
  
  
/* keep grow visuals stable; no extra glow/softness changes in this phase */
  
  /* grow dots */
  .hero-static.grow-phase .hero-dots .dot.is-on{
    transform:
      translate3d(
        calc(-50% + var(--sx, 0px) + var(--gx, 0px)),
        calc(-50% + var(--sy, 0px) + var(--gy, 0px)),
        0
      )
      scale(var(--growScale, 1)) !important;
  
    transition: transform 14s linear, opacity 1.8s linear;
  
    opacity: calc(var(--dot-opacity) * var(--o) * 0.55) !important;
  
    filter: blur(0.3px) !important;
    box-shadow: none !important;
  
    /* wichtig: compositor hint */
    will-change: transform, opacity, filter;
    transition-timing-function:
    cubic-bezier(.22,.61,.36,1), /* transform */
    linear;                      /* opacity */

  }

/* nach grow: keine transitions mehr auf transform -> theme updates nicht “stuck” */
.hero-static.grow-done .hero-dots .dot{
    transition: opacity 0.55s ease; /* wie vorher, aber kein transform-transition */
    will-change: auto;             /* WICHTIG */
  }
  
  /* keep final grow transform frozen */
  .hero-static.grow-done .hero-dots .dot.is-on{
    transform:
      translate3d(
        calc(-50% + var(--sx, 0px) + var(--gx, 0px)),
        calc(-50% + var(--sy, 0px) + var(--gy, 0px)),
        0
      )
      scale(var(--growScale, 1)) !important;
    transition: opacity 0.55s ease !important;
  }
  
  /* optional: wenn du willst dass glow/softness im finalen zustand bleibt */
  .hero-static.grow-done{
    --soft: 1;
  }

  /* freeze final grow state */
  .hero-static.grow-frozen .hero-dots .dot.is-on{
    transition: none !important;
    animation: none !important;
    box-shadow: none !important;
    filter: blur(0.3px) !important;
  }
  
  /* =========================================================
     HERO — TYPEWRITER (headlines)
     ========================================================= */

  :root.js .hero-static:not(.hero-ready) .type-line,
  :root.js .hero-static:not(.hero-ready) .hero-steps{
    opacity: 0;
  }

  
  .type-line.handwrite-line{
    position: relative;
    display: inline-block;
    color: var(--hero-text) !important;
    padding-bottom: 0.08em;
    clip-path: inset(0 100% 0 0);
    will-change: clip-path;
  }

  .type-line.handwrite-line.handwrite-start{
    animation: handwriteReveal var(--hw-duration, 2.2s) cubic-bezier(.33,.03,.67,.97) var(--hw-delay, 0s) forwards;
  }

  .type-line.handwrite-line.handwrite-done{
    clip-path: inset(0 0 0 0);
    animation: none !important;
  }

  @keyframes handwriteReveal{
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
  }
  
  /* =========================================================
     HERO — SLOGAN (feel. shape. grow.)
     ========================================================= */
  
  .hero-steps span{
    opacity: 0;
    display: inline-block;
    margin: 0 0.35rem;
    animation: stepFadeOnly 2.2s linear forwards;
    will-change: opacity;
  }
  
  @keyframes stepFadeOnly{
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  

/* prevents transitions from re-starting when theme vars change */
.hero-static.theme-switching #heroDots1 .dot,
.hero-static.theme-switching #heroDots2 .dot{
  transition: none !important;
  animation: none !important;
}

/* keep grow transition alive even if a theme-switching class appears */
.hero-static.grow-phase.theme-switching #heroDots1 .dot.is-on,
.hero-static.grow-phase.theme-switching #heroDots2 .dot.is-on{
  transition: transform 28s linear, opacity 1.8s linear !important;
  transition-timing-function:
    cubic-bezier(.22,.61,.36,1),
    linear;
}