/* ======================================================================
   ZAUNTURA — HERO (cinematic) · loaded last, overrides base hero
   Warm walnut · serif · bronze · aurora · god-rays · line-reveal ·
   parallax · live config HUD · ticker. prefers-reduced-motion safe.
   ====================================================================== */

#hero.hero{position:relative;min-height:100svh;display:flex;align-items:center;
  padding:128px var(--gut) 116px;overflow:hidden;isolation:isolate;
  --bronze:185,139,69}

/* ---- background depth layers ---- */
.hero-shader{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block}
.hero.has-shader .hero-aurora,.hero.has-shader .hero-rays{display:none}
.hero-aurora{position:absolute;inset:0;z-index:0;pointer-events:none}
.hero-aurora::before,.hero-aurora::after{content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.6;will-change:transform}
.hero-aurora::before{width:62vw;height:62vw;left:40%;top:-22%;
  background:radial-gradient(circle at 35% 35%, rgba(var(--bronze),.5), transparent 62%);
  animation:hAuroraA 24s ease-in-out infinite alternate}
.hero-aurora::after{width:48vw;height:48vw;left:2%;top:46%;
  background:radial-gradient(circle at 50% 50%, rgba(90,168,156,.26), transparent 60%);
  animation:hAuroraB 30s ease-in-out infinite alternate}
@keyframes hAuroraA{from{transform:translate3d(-6%,-4%,0) scale(1)}to{transform:translate3d(10%,8%,0) scale(1.2)}}
@keyframes hAuroraB{from{transform:translate3d(4%,2%,0) scale(1.05)}to{transform:translate3d(-9%,-12%,0) scale(.88)}}

/* god-ray beams sweeping diagonally */
.hero-rays{position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;transform:rotate(14deg);
  -webkit-mask:radial-gradient(80% 70% at 60% 30%,#000,transparent 75%);mask:radial-gradient(80% 70% at 60% 30%,#000,transparent 75%)}
.hero-rays i{position:absolute;top:0;bottom:0;width:7vw;
  background:linear-gradient(180deg,transparent,rgba(255,240,214,.05),transparent);
  animation:hRay 9s ease-in-out infinite}
.hero-rays i:nth-child(1){left:6%;animation-delay:0s}
.hero-rays i:nth-child(2){left:24%;animation-delay:1.3s;width:4vw}
.hero-rays i:nth-child(3){left:46%;animation-delay:2.5s}
.hero-rays i:nth-child(4){left:66%;animation-delay:3.6s;width:5vw}
.hero-rays i:nth-child(5){left:84%;animation-delay:4.7s;width:3vw}
@keyframes hRay{0%,100%{opacity:.25}50%{opacity:.8}}

.hero-grid{z-index:0;opacity:.4}
#hero-canvas{z-index:1}
.hero-scrim{z-index:2;background:
  linear-gradient(90deg,#15110E 0%,rgba(21,17,14,.93) 26%,rgba(21,17,14,.5) 48%,transparent 68%),
  linear-gradient(0deg,#15110E 1%,transparent 32%)}

/* giant wordmark watermark on the baseline */
.hero-wm{position:absolute;left:50%;bottom:-7%;transform:translateX(-50%);z-index:1;pointer-events:none;
  font-family:var(--font-serif);font-weight:600;font-style:italic;letter-spacing:.02em;
  font-size:23vw;line-height:1;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px rgba(232,224,210,.07);opacity:.9}

/* corner meta */
.hero-meta{position:absolute;top:130px;right:var(--gut);z-index:4;text-align:right;
  display:flex;flex-direction:column;gap:7px;
  font-family:var(--font-display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(244,239,230,.5)}
.hero-meta b{color:rgba(244,239,230,.85);font-weight:600}
.hero-meta .hm-row{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.hero-meta .hm-dot{width:6px;height:6px;border-radius:50%;background:#3FA86F;box-shadow:0 0 8px #3FA86F;
  animation:hmBlink 2.4s ease-in-out infinite}
@keyframes hmBlink{0%,100%{opacity:1}50%{opacity:.3}}
@media (max-width:1080px){.hero-meta{display:none}}

/* ---- inner grid: copy + HUD ---- */
.hero-inner{position:relative;z-index:3;width:100%;max-width:var(--maxw);margin:0 auto;
  display:grid;grid-template-columns:1fr;gap:40px;align-items:center}
.hero-copy{max-width:42rem;margin-left:0}

/* kicker */
.hero-kicker{display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-display);font-size:11.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(244,239,230,.74);padding:9px 16px;border:1px solid rgba(232,224,210,.16);border-radius:9999px;
  background:rgba(255,255,255,.03);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transform:translateY(14px);transition:opacity .8s ease,transform .8s cubic-bezier(.16,1,.3,1)}
.hero.lit .hero-kicker{opacity:1;transform:none}
.hk-pulse{width:7px;height:7px;border-radius:50%;background:rgb(var(--bronze));position:relative}
.hk-pulse::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid rgba(var(--bronze),.6);
  animation:hkPing 2s cubic-bezier(0,0,.2,1) infinite}
@keyframes hkPing{0%{transform:scale(.6);opacity:.8}80%,100%{transform:scale(1.7);opacity:0}}

/* headline — line reveal */
.hero-h1{font-family:var(--font-serif);font-weight:500;letter-spacing:-.03em;
  font-size:clamp(46px,7.4vw,108px);line-height:.98;margin:.3em 0 .28em;color:#F8F5EE}
.hl-line{display:block;overflow:hidden;padding-bottom:.02em}
.hl-line>span{display:block;transform:translateY(112%) rotate(2deg);will-change:transform}
.hero.lit .hl-line>span{transform:none;
  transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.hero.lit .hl-line:nth-child(1)>span{transition-delay:.05s}
.hero.lit .hl-line:nth-child(2)>span{transition-delay:.17s}
.hero.lit .hl-line:nth-child(3)>span{transition-delay:.29s}
.hl-em{font-style:italic;color:rgb(var(--bronze));position:relative;white-space:nowrap}
.hl-em::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:2px;
  background:linear-gradient(90deg,rgba(var(--bronze),.1),rgb(var(--bronze)),rgba(var(--bronze),.1));
  transform:scaleX(0);transform-origin:left;transition:transform 1s cubic-bezier(.16,1,.3,1) .9s}
.hero.lit .hl-em::after{transform:scaleX(1)}

/* lead + CTA + trust: staggered fade */
.hero-lead,.hero-cta,.hero-trust{opacity:0;transform:translateY(18px);
  transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.hero.lit .hero-lead{opacity:1;transform:none;transition-delay:.5s}
.hero.lit .hero-cta{opacity:1;transform:none;transition-delay:.62s}
.hero.lit .hero-trust{opacity:1;transform:none;transition-delay:.74s}
.hero-lead{font-size:clamp(17px,1.5vw,21px);line-height:1.6;color:rgba(244,239,230,.78);max-width:44ch;margin:0 0 40px}

.hero-cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-play .pl-ico{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;border:1px solid currentColor;font-size:8px;margin-right:2px}
.hero .btn-primary::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transform:skewX(-18deg)}
.hero .btn-primary{position:relative;overflow:hidden}
.hero .btn-primary:hover::after{animation:hSheen .9s ease}
@keyframes hSheen{from{left:-130%}to{left:130%}}

.hero-trust{display:flex;gap:0;margin-top:50px;border-top:1px solid rgba(244,239,230,.18);padding-top:26px;max-width:640px}
.hero-trust .t{flex:1;display:flex;flex-direction:column;gap:5px}
.hero-trust .t+.t{border-left:1px solid rgba(244,239,230,.18);padding-left:30px;margin-left:30px}
.hero-trust .n{font-family:var(--font-serif);font-weight:500;font-size:clamp(28px,2.6vw,38px);color:#F8F5EE;line-height:1;font-variant-numeric:tabular-nums}
.hero-trust .n .u{color:rgb(var(--bronze))}
.hero-trust .l{font-family:var(--font-display);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,239,230,.55)}

/* ---- live config HUD ---- */
.hero-hud{position:absolute;right:0;bottom:8%;width:262px;z-index:4;
  border:1px solid rgba(232,224,210,.16);border-radius:16px;padding:18px;
  background:rgba(20,17,14,.55);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);
  opacity:0;transform:translateY(24px) scale(.97);transition:opacity 1s ease .8s,transform 1s cubic-bezier(.16,1,.3,1) .8s}
.hero.lit .hero-hud{opacity:1;transform:none}
.hud-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.hud-live{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);font-size:10.5px;
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,239,230,.8)}
.hud-dot{width:7px;height:7px;border-radius:50%;background:#3FA86F;box-shadow:0 0 8px #3FA86F;animation:hmBlink 1.8s infinite}
.hud-id{font-family:var(--font-serif);font-style:italic;font-size:13px;color:rgba(var(--bronze),1)}
.hud-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;
  border-top:1px solid rgba(232,224,210,.1)}
.hud-k{font-family:var(--font-display);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,239,230,.5)}
.hud-v{font-family:var(--font-display);font-size:13px;font-weight:500;color:#F4EFE6;transition:opacity .3s}
.hud-v.swap{opacity:0}
.hud-swatch{display:inline-flex;align-items:center;gap:9px}
.hud-swatch i{width:16px;height:16px;border-radius:4px;background:#383E42;border:1px solid rgba(255,255,255,.2);transition:background .4s}
.hud-bar{height:4px;border-radius:99px;background:rgba(232,224,210,.12);overflow:hidden;margin:14px 0 16px}
.hud-bar span{display:block;height:100%;width:62%;border-radius:99px;
  background:linear-gradient(90deg,rgb(var(--bronze)),#E8C58A);transition:width .8s cubic-bezier(.16,1,.3,1)}
.hud-cta{display:block;text-align:center;font-family:var(--font-display);font-size:11.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:#1B1714;background:rgb(var(--bronze));border-radius:8px;padding:11px;
  transition:background .3s,transform .3s}
.hud-cta:hover{background:#B98B45;transform:translateY(-2px)}
@media (max-width:1080px){.hero-hud{display:none}}

/* ---- bottom ticker ---- */
.hero-ticker{position:absolute;left:0;right:0;bottom:0;z-index:3;border-top:1px solid rgba(232,224,210,.12);
  background:rgba(13,11,9,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.hero-ticker-track{display:flex;gap:0;width:max-content;animation:hTicker 36s linear infinite}
.hero-ticker:hover .hero-ticker-track{animation-play-state:paused}
.hero-ticker-track span{display:flex;align-items:center;gap:34px;padding:13px 22px;white-space:nowrap;
  font-family:var(--font-display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,239,230,.55)}
.hero-ticker-track span::after{content:"◆";color:rgb(var(--bronze));font-size:7px}
@keyframes hTicker{to{transform:translateX(-50%)}}

.scroll-cue{z-index:4;bottom:60px}

@media (max-width:1080px){
  #hero.hero{padding-top:120px}
  .hero-wm{font-size:34vw;bottom:2%}
  .scroll-cue{display:none}
  /* ticker stays visible on mobile — the bottom padding already reserves space */
}
@media (max-width:600px){
  .hero-trust{flex-wrap:wrap;gap:18px;border-top:0;padding-top:0}
  .hero-trust .t+.t{border-left:0;padding-left:0;margin-left:0}
  .hero-trust .t{flex:0 0 auto}
}

/* reduced motion: show everything, kill loops */
@media (prefers-reduced-motion:reduce){
  .hero-aurora::before,.hero-aurora::after,.hero-rays i,.hk-pulse::after,.hud-dot,.hero-meta .hm-dot,.hero-ticker-track{animation:none}
  .hl-line>span{transform:none}
  .hero-kicker,.hero-lead,.hero-cta,.hero-trust,.hero-hud{opacity:1;transform:none}
  .hl-em::after{transform:scaleX(1)}
}

/* Hero: echtes Foto als Hintergrund + Overlay, 3D-Modell darüber */
.hero-fallback{display:block;position:absolute;inset:0;right:auto;top:auto;transform:none;width:100%;height:100%;aspect-ratio:auto;z-index:0;border-radius:0;box-shadow:none;border:0}
.hero-fallback::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(21,17,14,.82) 0%,rgba(21,17,14,.60) 42%,rgba(21,17,14,.36) 72%,rgba(21,17,14,.52) 100%),linear-gradient(0deg,rgba(21,17,14,.84) 0%,transparent 48%)}
.hero-fallback .ph-tag{display:none}
/* 3D-Canvas über dem Foto */
#hero-canvas{z-index:1}
.hero-canvas-loading{display:flex}