/* Schmuckwald – Startseiten-Hero (22.09.2026). Einzige erlaubte Ausnahme von DESIGN.md §3 „keine Animationen“.
   Ein- und ausschalten in _build/build.py über WALD = True/False. Motive liegen in assets/wald/. */
:root{--night:#0c1c2e;--mist:#dde9f4;--haze:#b8cadc}

  
  
  .forest{position:relative;width:100%;background:var(--night);margin-bottom:-38vh;}
  .forest::-webkit-scrollbar{display:none}
  .track{height:400vh;position:relative;}
  .stage{position:sticky;top:0;height:100vh;height:100dvh;margin-top:-72px;overflow:hidden;
    background:radial-gradient(120% 90% at 50% 55%, rgba(30,58,86,.55) 0%, rgba(12,28,46,0) 60%), var(--night);}
  .stage::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(60% 55% at 50% 50%, rgba(12,28,46,0) 40%, rgba(6,14,24,.75) 100%);}
  .layer{position:absolute;inset:0;pointer-events:none;}
  .it{position:absolute;left:50%;top:50%;will-change:transform,opacity;contain:layout style;backface-visibility:hidden;}
  .it img{display:block;width:100%;height:auto;}
  .glow img{}
  .sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.85;
    background:linear-gradient(115deg, rgba(255,255,255,0) 42%, rgba(255,250,235,.55) 50%, rgba(255,255,255,0) 58%);background-size:300% 100%;background-repeat:no-repeat;
    -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;will-change:background-position;}
  .spin{position:absolute;left:50%;top:50%;will-change:transform,opacity;}
  .spin video{display:block;width:100%;height:auto;mix-blend-mode:lighten;-webkit-mask-image:radial-gradient(ellipse 60% 62% at 50% 50%, #000 70%, transparent 100%);mask-image:radial-gradient(ellipse 60% 62% at 50% 50%, #000 70%, transparent 100%);}
  .part{position:absolute;left:0;top:0;width:100%;height:auto;will-change:transform;}
  .wrap{position:relative;width:100%;height:100%;transform-style:preserve-3d;}
  .slice{position:absolute;left:0;width:100%;background-repeat:no-repeat;background-size:100% auto;will-change:transform;}
  .halo{position:absolute;left:50%;top:50%;border-radius:50%;pointer-events:none;will-change:opacity,transform;}
  .gem{position:absolute;left:50%;top:50%;border-radius:50%;will-change:transform,opacity;
    background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.95) 0%, var(--g) 28%, rgba(0,0,0,.35) 100%);box-shadow:0 0 12px var(--g);}
  .line{position:absolute;left:50%;top:50%;will-change:transform,opacity;}
  .thread{position:absolute;left:50%;top:0;width:1px;background:linear-gradient(rgba(221,233,244,0),rgba(221,233,244,.5));transform-origin:top;}
  .lid{position:absolute;border-radius:50%;transform-origin:center top;will-change:transform;}
  .cone{position:absolute;left:50%;top:50%;width:1800px;height:260px;margin-top:-130px;transform-origin:0 50%;pointer-events:none;
    background:linear-gradient(90deg, rgba(60,200,120,.28) 0%, rgba(60,200,120,.10) 45%, rgba(60,200,120,0) 100%);
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 35%,#000 65%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 35%,#000 65%,transparent 100%);}
  .caustic{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;opacity:.55;
    background:radial-gradient(18% 12% at var(--ax) var(--ay), rgba(180,240,255,.9), transparent 70%),radial-gradient(14% 20% at var(--bx) var(--by), rgba(150,230,255,.8), transparent 70%);}
  .spark{position:absolute;width:4px;height:4px;border-radius:50%;background:#bff3ff;box-shadow:0 0 8px #7ee0ff;}
  .sig{position:absolute;left:50%;top:50%;width:min(440px,60vw);margin-left:calc(min(440px,60vw) * -0.5);opacity:.85;margin-top:calc(min(560px,70vw) * -0.045);pointer-events:none;opacity:0;}
  .sig img{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(90deg,#000 var(--p),transparent calc(var(--p) + 6%));mask-image:linear-gradient(90deg,#000 var(--p),transparent calc(var(--p) + 6%));}
  .title{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;pointer-events:none;z-index:5;padding:80px 0;
    background:radial-gradient(45% 60% at 50% 50%, rgba(12,28,46,.85) 0%, rgba(12,28,46,0) 100%);transition:opacity .8s ease;}
  .title .logo{display:block;width:clamp(200px,28vw,420px);height:auto;margin:0 auto;filter:drop-shadow(0 0 30px rgba(12,28,46,.9));}
  .title p{margin:26px 0 0;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-weight:300;font-size:clamp(18px,2vw,28px);letter-spacing:.08em;color:var(--haze);}
  .hint{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--haze);opacity:.7;z-index:5;transition:opacity .6s;text-align:center;white-space:nowrap}
  .hint a{color:var(--haze);text-decoration:none;border-bottom:1px solid rgba(184,202,220,.4);padding-bottom:2px;pointer-events:auto}
  .hint .sep{margin:0 14px;opacity:.5}
  .hint::after{content:"";display:block;width:1px;height:34px;margin:10px auto 0;background:linear-gradient(var(--haze),transparent);animation:drip 2.2s ease-in-out infinite;}
  @keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
  .grain{position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:screen;z-index:4;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}
  @media (prefers-reduced-motion: reduce){ .hint::after{animation:none} }

  .hero-media .sig-wrap,.hero-bild .sig-wrap{position:relative;text-align:center;min-height:70px;padding:18px 0 0}
  .sig-name{position:absolute;left:0;right:0;top:22px;margin:0;opacity:0;transition:opacity 1.2s ease}
  .hero-media img.sig-hero,.hero-bild img.sig-hero{width:min(420px,72%);height:auto;object-fit:unset;object-position:unset;margin:0 auto;transition:opacity 1.2s ease;opacity:.85;display:block;--p:0%;-webkit-mask-image:linear-gradient(90deg,#000 var(--p),transparent calc(var(--p) + 6%));mask-image:linear-gradient(90deg,#000 var(--p),transparent calc(var(--p) + 6%));}


  .hero{position:relative;z-index:3;background:linear-gradient(rgba(12,28,46,0),var(--ink) 18%)}

  @media (max-width:700px){
    .track{height:260vh}
    .title .logo{width:min(220px,62vw)}
    .title p{font-size:15px}
    .hero-media img.sig-hero,.hero-bild img.sig-hero{width:min(300px,80%)}
  }
  @media (prefers-reduced-motion: reduce){ .forest .track{height:120vh} }

  body:has(#forest) .site-head .wordmark{opacity:0}