/* ============================================================
   SG Neustadt 1485 — Hero 3D styles (target medallion + bolt)
   Depends on tokens from ../colors_and_type.css
   ============================================================ */

/* ---------------- Hero shell (sticky scroll stage) — Indoor/Dramatisch -- */
.hero3d{position:relative;height:230vh;background:
  radial-gradient(95% 72% at 50% 32%, #15150f 0%, #0a0b07 56%, #050603 100%);}
.hero-pin{position:sticky;top:0;height:100vh;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;padding-bottom:46px;box-sizing:border-box;}
/* mehr Abstand unter der fixen Navbar auf Tablet/Handy */
@media(max-width:1024px){.hero-pin{padding-top:84px;}}
@media(max-width:560px){.hero-pin{padding-top:104px;}}

/* spotlight cone on the target + floor vignette */
.hero-pin::before{content:"";position:absolute;inset:0;background:
  radial-gradient(46% 42% at 50% 40%, rgba(226,195,65,.18), rgba(82,162,64,.05) 46%, transparent 72%),
  radial-gradient(130% 90% at 50% 122%, rgba(0,0,0,.55), transparent 52%);
  pointer-events:none;}
/* faint spotlight beam from above */
.hero-pin::after{content:"";position:absolute;left:50%;top:-12%;width:70%;height:115%;transform:translateX(-50%);
  background:radial-gradient(50% 46% at 50% 30%, rgba(231,205,110,.10), transparent 66%);
  pointer-events:none;z-index:0;}

/* impact flash */
.hero-flash{position:absolute;inset:0;background:rgba(255,247,214,0);pointer-events:none;mix-blend-mode:screen;}
.hero-flash.go{animation:heroFlash .42s ease-out;}
@keyframes heroFlash{0%{background:rgba(255,247,214,.16);}100%{background:rgba(255,247,214,0);}}

/* ---------------- 3D stage ------------------------------------- */
.stage-wrap{flex:none;display:flex;align-items:center;justify-content:center;}
.stage{position:relative;width:470px;height:470px;perspective:1400px;perspective-origin:50% 44%;transform-style:preserve-3d;flex:none;transform:scale(.82);transform-origin:center center;}

/* ---------------- Medallion ------------------------------------ */
.med{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;
  transform:rotateX(6deg);transition:none;}
.med .ring{position:absolute;left:0;top:0;border-radius:50%;}
.ring.rim{background:
  radial-gradient(circle at 38% 30%, #f4e4a0 0%, #e2c341 26%, #b8902a 60%, #8a6a1d 88%, #6f5417 100%);
  box-shadow:0 40px 70px -20px rgba(0,0,0,.7), inset 0 6px 14px rgba(255,255,255,.45), inset 0 -10px 22px rgba(80,58,12,.6);}
.ring.olive{background:
  radial-gradient(circle at 40% 32%, #6b9a4e 0%, #4e8233 45%, #34571f 100%);
  box-shadow:inset 0 4px 10px rgba(255,255,255,.18), inset 0 -8px 16px rgba(20,40,12,.6);}
.ring.cream{background:radial-gradient(circle at 42% 34%, #fffdf6, #f1ead7 70%, #e3d9bf 100%);
  box-shadow:inset 0 3px 9px rgba(255,255,255,.6), inset 0 -10px 22px rgba(120,108,74,.30);}
.ring.ring-w{background:radial-gradient(circle at 44% 36%, #ffffff, #f3eee0);}
.ring.ring-k{background:radial-gradient(circle at 44% 36%, #3a3a34, #1a1a18 70%, #0e0e0c);
  box-shadow:inset 0 3px 8px rgba(255,255,255,.10);}
.ring.ring-g{background:radial-gradient(circle at 42% 34%, #f6e9b0, #e2c341 60%, #b8902a);
  box-shadow:inset 0 2px 5px rgba(255,255,255,.5), 0 0 14px rgba(226,195,65,.5);}
.med .bull{position:absolute;left:0;top:0;width:24px;height:24px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #6b1f16, #3a0f0a);
  box-shadow:0 0 0 2px rgba(226,195,65,.7), 0 0 10px rgba(0,0,0,.5);transition:box-shadow .3s;}
.hero3d.struck .med .bull{box-shadow:0 0 0 2px rgba(226,195,65,.9), 0 0 20px rgba(226,195,65,.7);}

.med .anno{position:absolute;left:0;top:0;font-family:var(--font-sans);font-size:12px;font-weight:700;
  letter-spacing:.42em;color:#3a2f1d;white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.35);}

/* impact pulse ring */
.impact-pulse{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;
  border:3px solid rgba(226,195,65,.9);opacity:0;pointer-events:none;}
.impact-pulse.go{animation:pulse .6s ease-out;}
@keyframes pulse{0%{opacity:.9;width:30px;height:30px;border-width:5px;}100%{opacity:0;width:340px;height:340px;border-width:1px;}}

/* ---------------- Armbrust-Bolzen ------------------------------ */
/* Modelled on a real Zimmerstutzen-/Armbrust-Bolzen: cup tail · long
   gunmetal shaft · black swelling cone · bright steel ferrule · screw
   tip. Front (point) sits at x=0; the body extends to the left. */
.bolt{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;will-change:transform;filter:drop-shadow(0 9px 11px rgba(0,0,0,.5));}
/* screw point — the bright steel tip that bites into the target */
.bolt .b-point{position:absolute;left:0;top:-3px;width:0;height:0;
  border-top:3px solid transparent;border-bottom:3px solid transparent;border-left:9px solid #e9edf2;}
.bolt .b-screw{position:absolute;left:-24px;top:-3.5px;width:24px;height:7px;border-radius:1px;
  background:repeating-linear-gradient(90deg,#cfd5dd 0,#cfd5dd 1.4px,#8b929b 1.4px,#8b929b 3px);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.6),inset 0 -1.5px 1px rgba(0,0,0,.35);}
/* bright machined ferrule / collar */
.bolt .b-ferrule{position:absolute;left:-46px;top:-7px;width:24px;height:14px;border-radius:3px;
  background:linear-gradient(180deg,#fbfcfe 0%,#dfe3e9 22%,#aab1ba 55%,#7c828b 80%,#9aa0a8 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.85),inset 0 -2px 2px rgba(0,0,0,.4),0 0 4px rgba(255,255,255,.25);}
/* black swelling cone (widest at the front, tapering back into the shaft) */
.bolt .b-cone{position:absolute;left:-118px;top:-10px;width:74px;height:20px;
  background:linear-gradient(180deg,#5b626b 0%,#2c3137 42%,#15181c 72%,#0a0c0e 100%);
  clip-path:polygon(100% 0,100% 100%,0 64%,0 36%);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.18);}
/* long gunmetal shaft */
.bolt .b-shaft{position:absolute;left:-210px;top:-3px;width:96px;height:6px;border-radius:3px;
  background:linear-gradient(180deg,#aeb4bc 0%,#6a7079 26%,#3a3f45 64%,#1b1e22 100%);
  box-shadow:inset 0 1.4px 0 rgba(255,255,255,.5),inset 0 -1.6px 1px rgba(0,0,0,.4);}
/* flared cup tail (the trumpet that sits against the string) */
.bolt .b-cup{position:absolute;left:-228px;top:-11px;width:20px;height:22px;
  background:linear-gradient(180deg,#4a4f56 0%,#23262b 50%,#0e1012 100%);
  clip-path:polygon(0 0,100% 30%,100% 70%,0 100%);
  box-shadow:inset 0 2px 1px rgba(255,255,255,.16);}
.bolt .b-trail{position:absolute;left:-380px;top:-2px;width:300px;height:4px;border-radius:3px;
  background:linear-gradient(90deg,rgba(226,195,65,0),rgba(226,195,65,.45));
  opacity:calc(var(--trail,0)*.8);}

/* ---------------- Hero copy overlay (flow: top + bottom) ------ */
.hero-top{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none;padding:0 24px;margin-top:clamp(18px,3.4vh,40px);margin-bottom:clamp(6px,1.6vh,16px);}
.hero-bottom{position:relative;z-index:5;display:flex;flex-direction:column;align-items:center;text-align:center;pointer-events:none;padding:0 24px;margin-top:clamp(30px,5.5vh,64px);}
/* soft dark halo behind copy so it stays readable over the bright target/flash */
.hero-top::before,.hero-bottom::before{content:"";position:absolute;inset:-24px -56px;z-index:-1;
  background:radial-gradient(62% 130% at 50% 50%, rgba(4,5,3,.78), rgba(4,5,3,.40) 50%, transparent 80%);
  filter:blur(10px);pointer-events:none;}
.hero-eyebrow,.hero-h1,.hero-sub,.hero-cta{opacity:1;transform:none;transition:transform .85s cubic-bezier(.2,.7,.2,1);}
/* transform-only pre-state (never hides content, so a frozen transition is harmless) */
.hero3d:not(.hero-ready) .hero-eyebrow,
.hero3d:not(.hero-ready) .hero-h1,
.hero3d:not(.hero-ready) .hero-sub,
.hero3d:not(.hero-ready) .hero-cta{transform:translateY(16px);}
.hero-h1{transition-delay:.12s;}
.hero-sub{transition-delay:.24s;}
.hero-cta{transition-delay:.34s;}
.hero-eyebrow{font-family:var(--font-sans);font-size:clamp(10px,1.5vh,13px);font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--gold-title);text-shadow:0 1px 10px rgba(0,0,0,.8);}
.hero-h1{font-family:var(--font-serif);font-weight:700;color:#fff;line-height:1.08;letter-spacing:-.01em;
  font-size:clamp(1.7rem,4.6vh,4.2rem);margin:.14em 0 0;text-shadow:0 2px 26px rgba(0,0,0,.85),0 1px 4px rgba(0,0,0,.6);}
.hero-h1 .gold{color:var(--gold-title);font-style:italic;}
.hero-sub{font-family:var(--font-serif);font-size:clamp(.92rem,2vh,1.3rem);line-height:1.55;color:#eef1e8;max-width:560px;margin:0 auto clamp(12px,2.2vh,24px);text-shadow:0 1px 14px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.6);}
.hero-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;pointer-events:auto;}
@media(prefers-reduced-motion:reduce){.hero-eyebrow,.hero-h1,.hero-sub,.hero-cta{transition:none;}.hero3d:not(.hero-ready) .hero-eyebrow,.hero3d:not(.hero-ready) .hero-h1,.hero3d:not(.hero-ready) .hero-sub,.hero3d:not(.hero-ready) .hero-cta{transform:none;}}

/* scroll cue */
.scroll-cue{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:6;
  font-family:var(--font-sans);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.7);
  display:flex;flex-direction:column;align-items:center;gap:8px;transition:opacity .3s;}
@media(max-height:640px){.scroll-cue{display:none;}}
.hero3d.struck .scroll-cue{opacity:0;}
.scroll-cue .bar{width:1px;height:34px;background:linear-gradient(rgba(255,255,255,.7),transparent);animation:cueDrop 1.8s ease-in-out infinite;}
@keyframes cueDrop{0%,100%{transform:scaleY(.4);transform-origin:top;opacity:.4;}50%{transform:scaleY(1);opacity:1;}}

/* struck badge near target — hidden: the planted bolt already says „Volltreffer“
   and it cannot be reliably aligned to the flex-positioned target. */
.hero-hit{display:none;}