/* fx.css - 3D effects + smooth transitions (all rules are gated by html.fx, added by fx.js; disabled for print / reduced motion) */
:root{--fxe:cubic-bezier(.22,1,.36,1)}
html.fx{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
html.fx a,html.fx button,html.fx input,html.fx select,html.fx textarea,html.fx tbody tr{transition-property:color,background-color,border-color,box-shadow,opacity,transform;transition-duration:.25s;transition-timing-function:var(--fxe)}

/* ---- smooth page in / out ---- */
html.fx body{animation:fxBody .55s ease both}
@keyframes fxBody{from{opacity:0}to{opacity:1}}
.fx-veil{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:0;background:#F6FBF8;transition:opacity .22s ease}
html.fx-leave .fx-veil{opacity:1;pointer-events:auto}
html.fx-leave main,html.fx-leave .content>main,html.fx-leave .lg-form form,html.fx-leave .hero .wrap{transform:perspective(1100px) translateY(-10px) rotateX(-3deg);transition:transform .22s ease}

/* ---- 3D scroll reveal (app pages; landing keeps its own .rv) ---- */
html.fx .fx-r{opacity:0;transform:perspective(1000px) translate3d(0,22px,0) rotateX(7deg);transform-origin:50% 0;transition:opacity .6s var(--fxe) var(--fd,0s),transform .75s var(--fxe) var(--fd,0s);will-change:transform,opacity}
html.fx .fx-r.fx-in{opacity:1;transform:none}
html.fx .rv{transform:perspective(1000px) translate3d(0,26px,0) rotateX(9deg);transform-origin:50% 0}
html.fx .rv.on{transform:none}

/* ---- 3D tilt cards (pointer) ---- */
html.fx .fx-tilting{transform-style:preserve-3d;will-change:transform}
html.fx .fx-tilting>:first-child{transform:translateZ(26px)}
html.fx .f>:first-child,html.fx .st>:first-child,html.fx .stat>:first-child{transition:transform .35s var(--fxe)}

/* ---- 3D buttons ---- */
html.fx .btn,html.fx button.go,html.fx .lg-form button[type=submit]{transform-style:preserve-3d}
html.fx .btn:hover{transform:perspective(520px) translateY(-3px) rotateX(9deg)}
html.fx .btn:active{transform:perspective(520px) translateY(1px) scale(.97)}
html.fx .lg-form button.go:hover{transform:perspective(520px) translateY(-2px) rotateX(7deg)}

/* ---- landing hero: 3D floating card ---- */
html.fx .card-art{animation:fxCardIn 1s var(--fxe) .35s forwards,fxFloat 7s ease-in-out 1.4s infinite;transform-style:preserve-3d}
@keyframes fxCardIn{from{opacity:0;transform:perspective(1000px) translateY(40px) rotateX(18deg) rotateY(-16deg) rotate(6deg) scale(.94)}to{opacity:1;transform:perspective(1000px) rotateX(3deg) rotateY(-7deg) rotate(1.5deg)}}
@keyframes fxFloat{0%,100%{transform:perspective(1000px) rotateX(3deg) rotateY(-7deg) rotate(1.5deg) translateY(0)}50%{transform:perspective(1000px) rotateX(-2deg) rotateY(7deg) rotate(1.5deg) translateY(-14px)}}
html.fx .hero .blob{transform-style:preserve-3d}

/* ---- auth pages: 3D form entrance + spinning logo ---- */
html.fx .lg-form form{animation:fxForm .8s var(--fxe) both;transform-origin:50% 0}
@keyframes fxForm{from{opacity:0;transform:perspective(1100px) translateY(26px) rotateX(9deg)}to{opacity:1;transform:none}}
@keyframes fxMobileForm{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
html.fx .lg-art .logo-img.xl{animation:fxLogo 8s ease-in-out infinite;filter:drop-shadow(0 18px 22px rgba(0,0,0,.35))}
@keyframes fxLogo{0%,100%{transform:perspective(700px) rotateY(-18deg) rotateX(4deg)}50%{transform:perspective(700px) rotateY(18deg) rotateX(-4deg) translateY(-8px)}}
html.fx .m-brand img{animation:fxLogo 8s ease-in-out infinite}

/* ---- login / register switch pill (mobile, top-right of the auth pages) ---- */
.topsw{display:none}
@media(max-width:900px){
  .lg-form{position:relative}
  .topsw{display:inline-flex;align-items:center;position:absolute;top:20px;right:18px;z-index:3;padding:8px 16px;border-radius:99px;font:600 13.5px/1 Inter,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#1FA45A,#0F713C);box-shadow:0 8px 18px -10px rgba(22,138,74,.9);text-decoration:none}
  .topsw:active{transform:scale(.95)}
  html.fx .lg-form form{animation:fxMobileForm .55s var(--fxe) both}
}
@media(max-width:420px){.topsw{top:17px;right:14px;padding:8px 14px}}

/* ---- mobile drawer: 3D swing-in ---- */
@media(max-width:900px){
  html.fx .side{transform-origin:0 50%;transform:perspective(1200px) translateX(-102%) rotateY(-14deg);transition:transform .38s var(--fxe)}
  html.fx .app.open .side{transform:none}
  html.fx .fx-r,html.fx .rv{transform:translate3d(0,14px,0)}
}
@media(min-width:901px) and (max-width:1100px){
  html.fx .lg-form form{animation:fxMobileForm .55s var(--fxe) both}
  html.fx .fx-r,html.fx .rv{transform:translate3d(0,14px,0)}
}

@media(prefers-reduced-motion:reduce){html.fx body,html.fx .lg-form form,html.fx .card-art,html.fx .lg-art .logo-img.xl,html.fx .m-brand img{animation:none!important}html.fx .fx-r,html.fx .rv{opacity:1!important;transform:none!important}.fx-veil{display:none}}
@media(hover:none){html.fx .btn:hover,html.fx .lg-form button.go:hover{transform:none}}
@media print{html.fx body{animation:none!important}.fx-veil,.topsw{display:none!important}.fx-r,.rv{opacity:1!important;transform:none!important}}

/* ---- college / institute select (long names) ---- */
select[name=course]{width:100%;max-width:100%;min-width:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
@media(max-width:900px){select[name=course]{font-size:16px;min-height:48px}.fg .full,.f label.full{grid-column:1/-1}}
td select[name=course]{width:auto}

/* ---- password fields: hide the browser's own show-password icon (Edge/IE, Safari autofill) so only our eye button shows ---- */
input::-ms-reveal,input::-ms-clear{display:none!important;width:0;height:0}
input[type=password]::-webkit-credentials-auto-fill-button,input::-webkit-contacts-auto-fill-button{visibility:hidden!important;display:none!important;pointer-events:none;position:absolute;right:0}
html.fx .eye{transition-property:background-color,color}