/* MenyTips FX layer — aurora, particles, glitter, depth */
html{background:#0B0B0C}
body{background:transparent !important;position:relative}
#app>div{background:transparent !important}
#app,.fx-page{position:relative;z-index:1}
.fx-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.fx-bg canvas{position:absolute;inset:0;width:100%;height:100%}
.fx-aurora{filter:blur(60px) saturate(1.25);opacity:.85;transform:scale(1.15)}
.fx-grid{position:absolute;inset:-2px;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 10%,transparent 75%);transform:translateY(calc(var(--fx-scroll,0) * -0.08px))}
.fx-grain{position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:fxGrain 1.2s steps(6) infinite}
@keyframes fxGrain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.fx-spark{position:fixed;inset:0;z-index:70;pointer-events:none}
.fx-progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:80;pointer-events:none;transform-origin:0 50%;transform:scaleX(var(--fx-p,0));background:linear-gradient(90deg,#7C5CFF,#FF2E86 55%,#FFB3D4);box-shadow:0 0 12px #FF2E86,0 0 28px rgba(255,46,134,.6)}
.fx-cursor{position:fixed;left:0;top:0;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;z-index:2;pointer-events:none;background:radial-gradient(circle,rgba(255,46,134,.16),rgba(124,92,255,.07) 40%,transparent 70%);mix-blend-mode:screen;transition:opacity .4s;opacity:0}
.fx-cursor.on{opacity:1}

/* depth cards: 3D tilt + glare */
.mt-card,.mt-plan,.fx-tilt{transform-style:preserve-3d;will-change:transform}
.mt-card.fx-live,.mt-plan.fx-live,.fx-tilt.fx-live{transform:perspective(900px) translateY(-8px) rotateX(var(--fx-rx,0deg)) rotateY(var(--fx-ry,0deg)) !important;transition:transform .12s ease-out,border-color .3s,background .3s !important}
.mt-card,.mt-plan,.fx-tilt{position:relative}
.mt-card::after,.mt-plan::after,.fx-tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--fx-mx,50%) var(--fx-my,50%),rgba(255,46,134,.22),rgba(124,92,255,.08) 35%,transparent 60%);mix-blend-mode:screen}
.mt-card.fx-live::after,.mt-plan.fx-live::after,.fx-tilt.fx-live::after{opacity:1}
.mt-card.fx-live{box-shadow:0 30px 80px -30px rgba(255,46,134,.45),0 0 0 1px rgba(255,46,134,.35)}

/* neon serif words */
.fx-neon{text-shadow:0 0 18px rgba(255,46,134,.55),0 0 42px rgba(255,46,134,.25)}

/* reveal */
.fx-pre{opacity:0;transform:translateY(46px) scale(.98);filter:blur(6px)}
.fx-in{opacity:1;transform:none;filter:none;transition:opacity 1s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1),filter 1s}

/* magnetic buttons sheen */
.mt-btn,.fx-btn{position:relative;overflow:hidden}
.mt-btn::before,.fx-btn::before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:fxSheen 4.5s ease-in-out infinite;pointer-events:none}
@keyframes fxSheen{0%,70%{left:-60%}100%{left:130%}}

@media (prefers-reduced-motion:reduce){.fx-grain,.mt-btn::before,.fx-btn::before{animation:none}.fx-pre{opacity:1;transform:none;filter:none}.fx-cursor{display:none}}
@media (hover:none){.fx-cursor{display:none}}