/* =========================================================
   Formeta Dental – Laser-Glow UI-Paket (v0.2.8.2)

   Separate CSS-Datei, damit das Paket einfach ein-/ausgeschaltet
   werden kann (einfach den <link> aus index.html entfernen).

   Enthaelt das User-gewaehlte Minimal-Paket:
     #1 Animated Gradient Border auf .bento-card (Conic-Gradient rotiert)
     #3 Section-Edge-Laser-Lines auf .section-laser-top / -bottom
     #4 Red-Glow-Hover auf .bento-card
     #6 Text-Glow auf .text-brand-red
     #7 Button-Glow-Ring auf .btn-primary:hover
   ========================================================= */

/* @property fuer smoothes Conic-Gradient-Angle-Tween.
   Browser-Support: Chrome 85+, Safari 16.4+, Firefox 128+. */
@property --bento-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* =========================================================
   #1 — Animated Gradient Border auf Bento-Cards
   Rotierender Conic-Gradient-Ring, nur Kante sichtbar via Mask.
   Staerker bei Hover (schneller + opak).
   ========================================================= */
.bento-card {
  position: relative;
  isolation: isolate;
}
.bento-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--bento-angle),
    transparent 0deg 270deg,
    rgba(191, 33, 76, 0.55) 310deg,
    rgba(216, 41, 79, 0.35) 335deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: bento-border-spin 9s linear infinite;
  pointer-events: none;
  opacity: 0.55;
  transition: opacity 0.35s cubic-bezier(.2,.8,.2,1),
              animation-duration 0.35s;
  z-index: 0;
}
.bento-card > * {
  position: relative;
  z-index: 1;
}
.bento-card:hover::before {
  opacity: 1;
  animation-duration: 4s;
}
@keyframes bento-border-spin {
  to { --bento-angle: 360deg; }
}

/* =========================================================
   #4 — Red-Glow-Hover auf Bento-Cards
   Erweitert die bestehende hover-Lift-Transition um einen
   dezenten roten Outer-Glow.
   ========================================================= */
.bento-card:hover {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 14px 30px -26px rgba(0, 0, 0, 0.42),
    0 0 26px -14px rgba(191, 33, 76, 0.3);
}

/* =========================================================
   #3 — Section-Edge-Laser-Lines
   Horizontale 1px Laser-Line am Section-Rand, mit Red-Glow.
   Klassen auf Section-Element setzen: .section-laser-top
   und/oder .section-laser-bottom.
   ========================================================= */
.section-laser-top::before,
.section-laser-bottom::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 10%,
    rgba(191, 33, 76, 0.6) 50%,
    transparent 90%
  );
  filter: drop-shadow(0 0 6px rgba(191, 33, 76, 0.5));
  z-index: 3;
}
.section-laser-top::before { top: 0; }
.section-laser-bottom::after { bottom: 0; }

/* =========================================================
   #6 — Text-Glow auf .text-brand-red — ENTFERNT (v0.3.1)
   Der 18px-Blur verwischte jeden roten Text und war ein
   Haupt-Faktor der schlechten Lesbarkeit auf Dunkelblau.
   Rote Icons sitzen jetzt auf weissen Chips (brauchen keinen Glow);
   roter Text auf Dunkel nutzt jetzt --brand-red-on-dark.
   ========================================================= */

/* =========================================================
   #7 — Button-Glow-Ring auf .btn-primary:hover
   Ergaenzt den bestehenden hover-Shadow um einen Soft-Ring
   wie ein LED-Button. CTA-Button (.cta-button) hat bereits
   eigenen staerkeren Glow, wird hier nicht doppelt gerahmt.
   ========================================================= */
.btn-primary:not(.cta-button):hover {
  box-shadow:
    0 10px 26px -14px rgba(191, 33, 76, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 0 0 5px rgba(191, 33, 76, 0.12);
}

/* =========================================================
   Reduced-Motion-Failsafes
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .bento-card::before {
    animation: none;
    opacity: 0.3;
  }
}