/**
 * FachTap · Background-Eye
 *
 * Sehr dezentes Auge im Hintergrund. Fixed positioniert, sichtbar erst
 * wenn User scrollt (im Hero unsichtbar → dort dominiert das Handy).
 * Iris wandert beim Scrollen horizontal — von hero-cinematic.js gesteuert.
 *
 * Design-Ziel: man sieht's kaum, es wirkt wie ein "atmender" Schatten
 * im Hintergrund — Luxus-Feeling, nicht aufdringlich.
 */

.ft-bg-eye {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(75vh, 620px);
  height: min(75vh, 620px);
  z-index: 0;
  pointer-events: none;
  display: grid;
  place-items: center;
  /* Initial UNSICHTBAR — wird erst durch Scrollen eingeblendet (via JS) */
  opacity: 0;
  transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.ft-bg-eye.is-shown {
  opacity: 1;
}

/* Äußerer Ring — sehr subtil, gerade so sichtbar */
.ft-bg-eye__ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(229, 193, 88, 0.09);
  box-shadow:
    inset 0 0 120px rgba(229, 193, 88, 0.025),
    0 0 60px rgba(229, 193, 88, 0.02);
}

/* Zweiter gestrichelter Ring — rotiert super langsam */
.ft-bg-eye::before {
  content: '';
  position: absolute;
  width: 78%;
  height: 78%;
  border-radius: 50%;
  border: 1px dashed rgba(229, 193, 88, 0.06);
  animation: bgEyeRotate 180s linear infinite;
}

/* Socket — die Augenhöhle in der Mitte */
.ft-bg-eye__socket {
  position: relative;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(10, 8, 4, 0.35) 0%,
    rgba(10, 8, 4, 0.2) 60%,
    rgba(10, 8, 4, 0.08) 100%
  );
  border: 1px solid rgba(229, 193, 88, 0.12);
}

/* Iris — dezenter Gold-Kreis.
   Zentrierung via inset+margin (NICHT transform), damit GSAP xPercent/yPercent
   das nicht überschreibt → sonst würde die Iris aus dem Zentrum rausrutschen. */
.ft-bg-eye__iris {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 72%;
  height: 72%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 40% 35%,
    rgba(245, 230, 184, 0.35) 0%,
    rgba(212, 160, 23, 0.28) 45%,
    rgba(138, 104, 0, 0.4) 100%
  );
}

/* Pupille — dunkler Punkt. Gleiche Zentrierung wie Iris */
.ft-bg-eye__pupil {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 44%;
  height: 44%;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 40%, rgba(20, 15, 6, 0.85) 0%, rgba(0, 0, 0, 0.75) 100%);
}

/* Glint — kleiner Highlight */
.ft-bg-eye__glint {
  position: absolute;
  top: 24%; left: 26%;
  width: 16%;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, transparent 70%);
}

@keyframes bgEyeRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Mobile: Auge aus — spart Perf */
@media (max-width: 900px) {
  .ft-bg-eye { display: none; }
}

/* Reduced-Motion */
@media (prefers-reduced-motion: reduce) {
  .ft-bg-eye::before { animation: none; }
  .ft-bg-eye__iris,
  .ft-bg-eye__pupil { transform: none !important; }
  .ft-bg-eye { transition: none; }
}