/* ==========================================================================
   MOZGÁS — kurzor-glow, magnetikus gombok, parallax, 3D szekció, tilt
   ========================================================================== */

/* A kurzort követő lime derengés kikerült: háttér-glow volt, és minden
   egérmozdulatra egy teljes képernyős réteget mozgatott. */

/* --- Magnetikus gomb (a hover-transzformmal együtt él) ---------------- */
.btn {
  translate: var(--mag-x, 0) var(--mag-y, 0);
  transition:
    transform var(--t-med) var(--ease-spring),
    translate 220ms var(--ease-out),
    box-shadow var(--t-med),
    color var(--t-med);
}

/* --- Parallax rétegek -------------------------------------------------- */
[data-parallax] {
  translate: 0 var(--py, 0);
  will-change: translate;
}

/* --- Kártya-tilt ------------------------------------------------------- */
.card--spot {
  transform-style: preserve-3d;
  transition: transform 420ms var(--ease-out), border-color var(--t-med), background var(--t-med);
}

/* --- 3D háttérszekció -------------------------------------------------- */
.scene3d {
  position: absolute;
  /* Felül szándékosan lejjebb kezdődik: a szekció fejléce („Pénzügyi Térkép”
     + bevezető) így soha nem kap 3D elemet maga alá. */
  inset: 26% 0 -8%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1200ms var(--ease-out);
  /* fordított maszk: a KÖZÉP (ahol a funnel-kártya van) kifakul,
     a széleken viszont látszanak a lebegő ikonok */
  mask-image: radial-gradient(ellipse 62% 52% at 50% 60%, transparent 40%, #000 78%);
  -webkit-mask-image: radial-gradient(ellipse 62% 52% at 50% 60%, transparent 40%, #000 78%);
}
.scene3d.is-on { opacity: 0.9; }
.scene3d canvas { width: 100%; height: 100%; display: block; }

.has-scene { position: relative; isolation: isolate; overflow: hidden; }
.has-scene > .wrap { position: relative; z-index: var(--z-content); }

/* A központi funnel szűkebb, hogy a 3D gyűrű a széleken látsszon */
.funnel-narrow { max-width: 1020px; margin-inline: auto; }

/* --- Funnel opciók léptetett belépése --------------------------------- */
.fstep.is-active .opt {
  animation: opt-in 460ms var(--ease-out) both;
  animation-delay: calc(var(--opt-i, 0) * 55ms);
}
@keyframes opt-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fstep.is-active .opt { animation: none; }
}

/* --- 3D ikon a szolgáltatás-kártyán ---------------------------------- */
.svc__icon {
  width: 54px;
  height: 54px;
  padding: 5px;
  background: radial-gradient(circle at 35% 30%, rgba(194, 255, 114, 0.16), rgba(194, 255, 114, 0.05));
  transition: transform 420ms var(--ease-spring);
}
.svc__icon img { width: 100%; height: 100%; object-fit: contain; }

.card:hover .svc__icon { transform: translateY(-2px) rotate(-6deg) scale(1.06); }

.icon-lg {
  width: 88px;
  height: 88px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 35% 30%, rgba(194, 255, 114, 0.18), rgba(194, 255, 114, 0.04));
  border: 1px solid var(--line);
  padding: 10px;
}
.icon-lg img { width: 100%; height: 100%; object-fit: contain; }