/* GoAhead FX — premium motion layer (3D hero canvas, cursor, tilt, spotlight). */

/* ---------- hero canvas host ----------
   NOTE: never force position on ALL children — the theme's own absolute
   decorations (.ga-hero-glow/.ga-hero-orb) must stay absolute. Only lift
   the real content container above the canvas. */
.gfx-host{position:relative;isolation:isolate;overflow:hidden}
.gfx-host .ga-container{position:relative;z-index:2}
.gfx-host .ga-marquee{position:relative;z-index:2}
.gfx-canvas{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.gfx-canvas.is-on{opacity:1}
.ga-page-hero.gfx-host{min-height:clamp(360px,44vh,520px);display:flex;align-items:center}
.ga-page-hero.gfx-host > .ga-container{position:relative;z-index:2;width:100%}

/* ---------- scroll progress ---------- */
.gfx-progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:9999;
	background:linear-gradient(90deg,rgba(205,255,58,0),#cdff3a 40%,#eaffb0);
	transform:scaleX(0);transform-origin:0 50%;will-change:transform;
	box-shadow:0 0 14px rgba(205,255,58,.65)}

/* ---------- cursor ---------- */
.gfx-cursor,.gfx-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:9998;will-change:transform}
.gfx-cursor{width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;
	background:radial-gradient(circle,rgba(205,255,58,.13),rgba(205,255,58,.05) 42%,transparent 68%);
	transition:opacity .3s ease}
.gfx-dot{width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:#cdff3a;
	box-shadow:0 0 12px rgba(205,255,58,.9);transition:width .22s,height .22s,margin .22s,opacity .3s}
body.gfx-hot .gfx-dot{width:20px;height:20px;margin:-10px 0 0 -10px;background:transparent;
	border:1.5px solid #cdff3a;box-shadow:0 0 18px rgba(205,255,58,.6)}
@media (hover:none){.gfx-cursor,.gfx-dot{display:none}}

/* ---------- 3D tilt cards + cursor spotlight ---------- */
.gfx-tilt{transform-style:preserve-3d;will-change:transform;position:relative}
.gfx-tilt::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
	opacity:0;transition:opacity .35s ease;
	background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(205,255,58,.15),transparent 62%)}
.gfx-tilt:hover::after{opacity:1}

/* ---------- headline shimmer ---------- */
.gfx-shimmer{background-image:linear-gradient(100deg,currentColor 30%,#eaffb0 46%,#cdff3a 52%,currentColor 66%);
	background-size:250% 100%;-webkit-background-clip:text;background-clip:text;
	animation:gfxShine 6.5s ease-in-out 1.2s infinite}
@keyframes gfxShine{0%,72%{background-position:130% 0}100%{background-position:-30% 0}}

/* ---------- reveal upgrade (staggered fade-up) ---------- */
.gfx-fade{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.gfx-fade.is-in{opacity:1;transform:none}

/* ---------- magnetic buttons ---------- */
.ga-btn{will-change:transform}

/* ---------- floating orbs ---------- */
.gfx-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;opacity:.5;
	animation:gfxFloat 18s ease-in-out infinite}
@keyframes gfxFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(28px,-34px,0) scale(1.14)}}

/* ---------- kinetic headline ---------- */
.gk-w{display:inline-block;white-space:nowrap}
.gk-i{display:inline-block;will-change:transform;white-space:pre}
.gk-rise{opacity:0;animation:gkRise .8s cubic-bezier(.2,.75,.25,1) forwards}
@keyframes gkRise{
	0%{opacity:0;transform:translateY(56px) rotate(7deg);filter:blur(7px)}
	100%{opacity:1;transform:translateY(0) rotate(0);filter:blur(0)}
}

/* ---------- the answer engine ---------- */
.gfx-answer{max-width:640px;margin:34px 0 6px;font-family:var(--display,inherit)}
.gfx-answer-q{display:flex;align-items:center;gap:12px;padding:15px 22px;border-radius:99px;
	border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.045);
	backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
	box-shadow:0 18px 50px -20px rgba(0,0,0,.7);font-size:16.5px;color:var(--fg,#f6f6f7);min-height:54px}
.gfx-answer-ico{color:#cdff3a;font-size:18px;flex:none}
.gfx-answer-typed{white-space:nowrap;overflow:hidden}
.gfx-answer-caret{width:2px;height:20px;background:#cdff3a;flex:none;animation:gfxCaret 1s steps(1) infinite;
	box-shadow:0 0 10px rgba(205,255,58,.8)}
@keyframes gfxCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
.gfx-answer-a{display:flex;align-items:center;gap:10px;margin:12px 0 0 26px;font-size:16.5px;
	opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1);
	color:var(--muted,#9a9aa0)}
.gfx-answer.is-answered .gfx-answer-a{opacity:1;transform:none}
.gfx-answer-spark{color:#cdff3a;font-size:17px;animation:gfxSpin 3.5s linear infinite;display:inline-block}
@keyframes gfxSpin{to{transform:rotate(360deg)}}
.gfx-answer-brand{color:#cdff3a;font-weight:700;text-shadow:0 0 22px rgba(205,255,58,.45)}
@media(max-width:760px){.gfx-answer-q{font-size:14px}.gfx-answer-a{font-size:14px}}

@media (prefers-reduced-motion:reduce){
	.gk-rise{animation:none;opacity:1}
	.gfx-answer-caret{animation:none}
	.gfx-answer-spark{animation:none}
	.gfx-shimmer{animation:none}
	.gfx-orb{animation:none}
	.gfx-fade{opacity:1;transform:none;transition:none}
	.gfx-tilt{transform:none !important}
}