/* ==========================================================================
   11designs – Glass & Motion
   Glasflächen, Scroll-Zoom, Parallax, Sticky-Reveal.
   Alles GPU-freundlich (nur transform/opacity/filter) und
   mit prefers-reduced-motion abgesichert.
   ========================================================================== */

/* ---------- Glasflächen ---------- */
.d11-glass{
  position:relative;
  background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035));
  -webkit-backdrop-filter:blur(22px) saturate(165%);
          backdrop-filter:blur(22px) saturate(165%);
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  box-shadow:
    0 22px 70px -28px rgba(0,0,0,.85),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.05);
  overflow:hidden;isolation:isolate;
}
/* Lichtkante oben – das, was Glas erst nach Glas aussehen lässt */
.d11-glass::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(160deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,0) 38%);
  opacity:.75;
}
/* Wanderndes Glanzlicht beim Hover */
.d11-glass::after{
  content:"";position:absolute;inset:-60% -20%;pointer-events:none;z-index:0;
  background:radial-gradient(360px circle at var(--gx,50%) var(--gy,0%),rgba(199,125,255,.26),transparent 60%);
  opacity:0;transition:opacity .5s var(--11d-ease);
}
.d11-glass:hover::after{opacity:1;}
.d11-glass > *{position:relative;z-index:2;}

.d11-glass--soft{
  background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border-color:rgba(255,255,255,.09);
  box-shadow:0 18px 50px -30px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.12);
}
.d11-glass--light{
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,255,255,.62));
  border-color:rgba(26,16,48,.08);
  box-shadow:0 20px 60px -30px rgba(26,16,48,.3),inset 0 1px 0 rgba(255,255,255,.9);
  color:#1A1030;
}
.d11-glass--light .d11-h3{color:#1A1030;}
.d11-glass--light p{color:#5A5470;}

/* Karten als Glas */
.d11-card--glass{
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.028));
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 20px 60px -32px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.18);
}
.d11-card--glass:hover{
  border-color:rgba(199,125,255,.5);
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(199,125,255,.05));
}

/* Glas-Pille / Badge */
.d11-pill{
  display:inline-flex;align-items:center;gap:.55em;padding:.55em 1.05em;border-radius:100px;
  background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.16);
  font-family:var(--11d-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:#E9D5FF;
}

/* ---------- Scroll-Zoom (Apple-Stil) ---------- */
/* Element startet klein und leicht unscharf, zoomt beim Hereinscrollen auf. */
.d11-zoom{
  --z-from:.84;
  transform:scale(var(--z-from)) translateY(28px);
  opacity:0;filter:blur(6px);
  transition:transform 1.15s var(--11d-ease),opacity .9s var(--11d-ease),filter .9s var(--11d-ease);
  will-change:transform,opacity;
}
.d11-zoom.is-in{transform:scale(1) translateY(0);opacity:1;filter:blur(0);}
.d11-zoom--strong{--z-from:.66;}
.d11-zoom--subtle{--z-from:.94;}

/* Scroll-gekoppelter Zoom: skaliert kontinuierlich mit der Scrollposition.
   --p wird per JS von 0 bis 1 gesetzt. */
.d11-scrollzoom{
  --p:0;
  transform:scale(calc(.82 + (.18 * var(--p))));
  transform-origin:center center;
  will-change:transform;
}
.d11-scrollzoom--out{ transform:scale(calc(1.18 - (.18 * var(--p)))); }

/* Sticky-Bühne: Abschnitt bleibt stehen, Inhalt zoomt durch */
.d11-stage{position:relative;height:280vh;}
.d11-stage__pin{
  position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:clip;
}
.d11-stage__item{
  --p:0;
  transform:scale(calc(.55 + (.45 * var(--p))));
  opacity:calc(.25 + (.75 * var(--p)));
  will-change:transform,opacity;
}

/* ---------- Parallax ---------- */
.d11-par{--p:0;will-change:transform;}
.d11-par[data-speed="slow"]{transform:translate3d(0,calc(var(--p) * -34px),0);}
.d11-par[data-speed="mid"] {transform:translate3d(0,calc(var(--p) * -68px),0);}
.d11-par[data-speed="fast"]{transform:translate3d(0,calc(var(--p) * -118px),0);}

/* ---------- Hero: Cursor-Spotlight ---------- */
.d11-spot::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(620px circle at var(--sx,50%) var(--sy,40%),rgba(199,125,255,.15),transparent 62%);
  transition:opacity .6s;
}

/* ---------- Text: zeichenweiser Aufbau ---------- */
.d11-chars span{
  display:inline-block;transform:translateY(.75em) rotate(3deg);opacity:0;
  transition:transform .8s var(--11d-ease),opacity .6s var(--11d-ease);
}
.is-in.d11-chars span{transform:none;opacity:1;}

/* ---------- Glas-Trennlinie ---------- */
.d11-hr{
  height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,rgba(199,125,255,.45),transparent);
}

/* ---------- Leuchtende Umrandung ---------- */
.d11-ring{position:relative;}
.d11-ring::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;z-index:-1;
  background:conic-gradient(from var(--a,0deg),transparent 0%,rgba(199,125,255,.85) 18%,transparent 36%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:d11-ring 6s linear infinite;
}
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg;}
@keyframes d11-ring{to{--a:360deg;}}

/* ---------- Zahlen-Ticker ---------- */
.d11-ticker{font-variant-numeric:tabular-nums;}

@media (prefers-reduced-motion:reduce){
  .d11-zoom{transform:none !important;opacity:1 !important;filter:none !important;}
  .d11-scrollzoom,.d11-stage__item,.d11-par{transform:none !important;opacity:1 !important;}
  .d11-stage{height:auto;}
  .d11-stage__pin{position:static;height:auto;}
  .d11-chars span{transform:none !important;opacity:1 !important;}
  .d11-ring::before{animation:none;}
}