/* ============================================================ Vakfolt — mouse FX réteg lencse-kurzor · vakfolt-reveal · spotlight kártyák · mágneses CTA · hero tilt Csak akkor él, ha a fx.js a -ra .fx osztályt tesz (finom pointer + hover + nincs prefers-reduced-motion). Minta: magicui smooth-cursor / magic-card — vanilla port. ============================================================ */ /* natív kurzor el — űrlapmezőkön marad a szövegkurzor */ body.fx, body.fx *:not(input):not(textarea) { cursor: none; } /* ---- lencse-kurzor ---- */ #vfc, #vfd { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .3s ease; } body.fx #vfc.show, body.fx #vfd.show { opacity: 1; } body.fx #vfc.show.text, body.fx #vfd.show.text { opacity: 0; } .vfc-ring { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(26,26,26,.8); transition: transform .32s cubic-bezier(.2,.7,.2,1), border-color .32s ease; } /* a logó „vakfolt"-pöttyének visszhangja, ~2 óra irányban */ .vfc-spot { position: absolute; left: 7px; top: -13px; width: 7px; height: 7px; border-radius: 50%; background: #B8855A; transition: transform .32s cubic-bezier(.2,.7,.2,1), opacity .32s ease; } #vfd { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: #1A1A1A; } /* sötét szekciók felett világos kurzor (JS teszi fel az .inv-et) */ #vfc.inv .vfc-ring { border-color: rgba(250,248,245,.85); } #vfd.inv { background: #FAF8F5; } /* interaktív elem felett: tágul, umber */ #vfc.link .vfc-ring { transform: scale(1.5); border-color: #B8855A; } #vfc.link .vfc-spot { transform: scale(0); } /* a hero-mock felett: lencse mód — nagy, szaggatott vonal */ #vfc.lens .vfc-ring { transform: scale(2.2); border-style: dashed; border-color: #B8855A; } #vfc.lens .vfc-spot { opacity: .45; } /* ---- rejtett vakfolt-jegyzet a hero-mockon ---- */ .note.n3 { display: none; } body.fx .note.n3 { display: block; top: 44%; left: -11%; transform: rotate(-2.5deg); pointer-events: none; -webkit-mask-image: radial-gradient(circle 110px at var(--nx,-999px) var(--ny,-999px), #000 42%, transparent 74%); mask-image: radial-gradient(circle 110px at var(--nx,-999px) var(--ny,-999px), #000 42%, transparent 74%); } /* ---- spotlight kártyák (magic-card minta) ---- */ body.fx .prob, body.fx .plan, body.fx .lens, body.fx .why-card { position: relative; } body.fx .prob::after, body.fx .plan::after, body.fx .lens::after, body.fx .why-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .35s ease; background: radial-gradient(240px circle at var(--sx,50%) var(--sy,50%), rgba(184,133,90,.13), transparent 65%); } /* sötét felületeken borostyán fény */ body.fx .plan.feat::after, body.fx .lens::after { background: radial-gradient(260px circle at var(--sx,50%) var(--sy,50%), rgba(223,188,139,.09), transparent 65%); } body.fx .prob:hover::after, body.fx .plan:hover::after, body.fx .lens:hover::after, body.fx .why-card:hover::after { opacity: 1; } /* ---- mágneses CTA ---- */ body.fx .magnet { transition: box-shadow .18s ease, background .18s ease, color .18s ease; transform: translate3d(var(--bx,0px), var(--by,0px), 0); } body.fx .magnet:hover { transform: translate3d(calc(var(--bx,0px) - 2px), calc(var(--by,0px) - 2px), 0); } body.fx .magnet:active { transform: translate3d(calc(var(--bx,0px) + 2px), calc(var(--by,0px) + 2px), 0); } /* ---- hero mock tilt ---- */ body.fx .hero-grid > div:last-child { perspective: 900px; } body.fx .hero .mock { transform: rotate(1.4deg) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); will-change: transform; }