/* fx.css — Premium-Effekte für Unterseiten · derpattayamakler.com
   Guard zuerst. Nur transform/opacity (CLS=0). reduced-motion + touch-sicher. */

/* ===== 0) Reduced-Motion-Guard ===== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}

/* ===== 1) View Transitions — cineastischer Seitenwechsel ===== */
@view-transition{ navigation: auto; }
@media (prefers-reduced-motion: reduce){ @view-transition{ navigation: none; } }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.5s; animation-timing-function:cubic-bezier(.22,1,.36,1); }

/* ===== 2) Scroll-Reveal (versteckt NUR wenn JS aktiv + NICHT .in -> Spezifität sauber) ===== */
html.fx-on:not(.fx-reduce) .rev:not(.in){ opacity:0; transform:translateY(24px); }
.rev{ transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); will-change:opacity,transform; }
.rev.in{ opacity:1; transform:none; }
.rev.d1{transition-delay:.07s}.rev.d2{transition-delay:.14s}.rev.d3{transition-delay:.21s}

/* ===== 3) Gold-Scroll-Progress ===== */
.fx-prog{ position:fixed;top:0;left:0;right:0;height:2px;z-index:99999;
  transform:scaleX(0);transform-origin:0 50%;will-change:transform;
  background:linear-gradient(90deg,#C9A84C,#E8CC7A);box-shadow:0 0 12px rgba(201,168,76,.55); }

/* ===== 4) Custom-Cursor-Ring (nur Desktop/feiner Zeiger) ===== */
@media (hover:hover) and (pointer:fine){
  html.fx-hover:not(.fx-reduce) .fx-ring{
    position:fixed;top:0;left:0;width:30px;height:30px;border:1px solid #C9A84C;border-radius:50%;
    transform:translate(-50%,-50%);pointer-events:none;z-index:99998;
    transition:width .25s,height .25s,border-color .25s,opacity .3s;mix-blend-mode:difference;will-change:transform; }
  html.fx-hover:not(.fx-reduce) .fx-ring.is-hot{ width:52px;height:52px;border-color:#E8CC7A; }
}

/* ===== 5) Formular-Fokus-Glow ===== */
input:focus,textarea:focus,select:focus{
  outline:none!important;border-color:#C9A84C!important;
  box-shadow:0 0 0 3px rgba(201,168,76,.15),0 0 18px rgba(201,168,76,.12)!important; }

/* ===== 6) Link-Underline-Sweep (Fließtext-Links) ===== */
@media (hover:hover) and (pointer:fine){
  html.fx-hover:not(.fx-reduce) .fx-ulink{ position:relative; }
  html.fx-hover:not(.fx-reduce) .fx-ulink::after{
    content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;
    background:linear-gradient(90deg,#C9A84C,#E8CC7A);
    transform:scaleX(0);transform-origin:0 50%;transition:transform .4s cubic-bezier(.22,1,.36,1); }
  html.fx-hover:not(.fx-reduce) .fx-ulink:hover::after{ transform:scaleX(1); }
}

/* ===== 7) Magnetische CTAs (opt-in via [data-mag]) ===== */
@media (hover:hover) and (pointer:fine){
  html.fx-hover:not(.fx-reduce) [data-mag]{ transition:transform .35s cubic-bezier(.22,1,.36,1); }
}