/* Site-Effekte: TiltedCard (Galerie) + SpecularButton (React Bits, CSS-Port) */

/* ── Tilted Card ─────────────────────────────────────────────── */
.gallery-item { will-change: transform; }
.gallery-item:hover { z-index: 5; }

/* ── Fluid Glass Lens (Galerie) ──────────────────────────────── */
/* ponytail: Lupen-Klon statt three.js/R3F-Stack — das Original kann nur
   WebGL-eigene Inhalte brechen, nicht das echte DOM der Galerie */
#glass-lens {
  position: fixed;
  width: 300px; height: 300px;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  z-index: 60;
  opacity: 0;
  transition: opacity 0.25s ease;
  box-shadow:
    inset 0 0 0 1.5px rgba(255,255,255,0.55),
    inset 0 2px 14px rgba(255,255,255,0.35),
    inset 0 -12px 24px rgba(0,0,0,0.18),
    0 18px 50px rgba(0,0,0,0.35);
  background: rgba(255,255,255,0.04);
}
#glass-lens.on { opacity: 1; }
#glass-lens .lens-content {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  pointer-events: none;
}
#glass-lens::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  /* chromatischer Saum + Glanzlicht */
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,0.32) 0%, transparent 26%),
    conic-gradient(from 210deg, transparent 0deg, rgba(255,60,120,0.10) 60deg, transparent 120deg, rgba(60,160,255,0.10) 240deg, transparent 300deg);
  mix-blend-mode: screen;
}

/* ── Specular Button ─────────────────────────────────────────── */
/* ponytail: Conic-Gradient-Ring statt ogl-WebGL-Shader — gleicher Look
   (cursorfolgender Glanzstreifen auf der Kante), ein Bruchteil des Gewichts */
.specular-btn { position: relative; }
.specular-btn::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--sb-angle, 0deg),
    transparent 0deg,
    var(--sb-line, #ffffff) 12deg,
    transparent 55deg,
    transparent 180deg,
    var(--sb-line, #ffffff) 192deg,
    transparent 235deg
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: var(--sb-bright, 0);
  pointer-events: none;
}