/* =========================================================
   VR QA ACADEMY — 2026 MODERN MOTION SYSTEM
   Non-destructive visual layer: preserves existing JS/API flows.
========================================================= */
:root{
  --m-primary:#2563eb; --m-primary2:#06b6d4; --m-violet:#7c3aed;
  --m-orange:#f97316; --m-ink:#0f172a; --m-muted:#64748b;
  --m-bg:#f5f8ff; --m-card:rgba(255,255,255,.78);
  --m-border:rgba(15,23,42,.10); --m-shadow:0 18px 55px rgba(15,23,42,.10);
  --m-radius:22px;
}
html{scroll-behavior:smooth}
body[data-modern="1"]{
  min-height:100vh;
  background:
    radial-gradient(900px 520px at -8% -5%,rgba(37,99,235,.16),transparent 58%),
    radial-gradient(850px 520px at 108% 12%,rgba(124,58,237,.14),transparent 58%),
    linear-gradient(180deg,#f8fbff 0%,#eef4ff 100%) !important;
  color:var(--m-ink);
}
body[data-modern="1"]::before, body[data-modern="1"]::after{
  content:""; position:fixed; z-index:-1; border-radius:50%; pointer-events:none; filter:blur(2px);
  opacity:.45; animation:mFloat 14s ease-in-out infinite;
}
body[data-modern="1"]::before{width:260px;height:260px;left:-100px;top:22%;background:radial-gradient(circle,rgba(6,182,212,.22),transparent 68%)}
body[data-modern="1"]::after{width:300px;height:300px;right:-120px;bottom:8%;background:radial-gradient(circle,rgba(124,58,237,.20),transparent 68%);animation-delay:-7s}
@keyframes mFloat{50%{transform:translate3d(0,-24px,0) scale(1.05)}}
@keyframes mRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes mGlow{50%{box-shadow:0 0 0 8px rgba(37,99,235,.05),0 18px 55px rgba(37,99,235,.16)}}
@keyframes mShimmer{to{background-position:200% center}}
@keyframes mSpin{to{transform:rotate(360deg)}}

/* shared chrome */
body[data-modern="1"] .app-header,
body[data-modern="1"] .site-header,
body[data-modern="1"] header.app-header{
  background:rgba(255,255,255,.72) !important;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.75) !important;
  box-shadow:0 10px 35px rgba(15,23,42,.08) !important;
}
body[data-modern="1"] .header-inner{max-width:1400px}
body[data-modern="1"] .header-left, body[data-modern="1"] .brand{transition:transform .25s ease}
body[data-modern="1"] .header-left:hover, body[data-modern="1"] .brand:hover{transform:translateY(-1px)}
body[data-modern="1"] .nav-links a, body[data-modern="1"] .nav-dropbtn,
body[data-modern="1"] .header-right a, body[data-modern="1"] .header-actions a{
  position:relative; transition:color .2s ease,transform .2s ease;
}
body[data-modern="1"] .nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-7px; height:2px; border-radius:99px;
  transform:scaleX(0); transform-origin:center; background:linear-gradient(90deg,var(--m-primary),var(--m-primary2));
  transition:transform .25s ease;
}
body[data-modern="1"] .nav-links a:hover::after{transform:scaleX(1)}

/* cards / panels */
body[data-modern="1"] .card,
body[data-modern="1"] .lab-card,
body[data-modern="1"] .login-container,
body[data-modern="1"] .order-placed,
body[data-modern="1"] .product-card,
body[data-modern="1"] .checkout-card,
body[data-modern="1"] .profile-card{
  border:1px solid var(--m-border) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,255,255,.62)) !important;
  box-shadow:var(--m-shadow) !important;
  border-radius:var(--m-radius) !important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  animation:mRise .55s both;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease !important;
}
body[data-modern="1"] .card:hover,
body[data-modern="1"] .lab-card:hover,
body[data-modern="1"] .product-card:hover{
  transform:translateY(-7px) !important;
  border-color:rgba(37,99,235,.22) !important;
  box-shadow:0 24px 70px rgba(37,99,235,.14) !important;
}
body[data-modern="1"] .card-grid > *, body[data-modern="1"] .lab-grid > *{animation:mRise .55s both}
body[data-modern="1"] .card-grid > *:nth-child(2), body[data-modern="1"] .lab-grid > *:nth-child(2){animation-delay:.05s}
body[data-modern="1"] .card-grid > *:nth-child(3), body[data-modern="1"] .lab-grid > *:nth-child(3){animation-delay:.10s}
body[data-modern="1"] .card-grid > *:nth-child(4), body[data-modern="1"] .lab-grid > *:nth-child(4){animation-delay:.15s}
body[data-modern="1"] .card-grid > *:nth-child(n+5), body[data-modern="1"] .lab-grid > *:nth-child(n+5){animation-delay:.20s}

/* buttons */
body[data-modern="1"] .btn,
body[data-modern="1"] button,
body[data-modern="1"] .btn-home{
  border-radius:14px !important; transition:transform .2s ease,box-shadow .2s ease,filter .2s ease !important;
}
body[data-modern="1"] .btn.primary,
body[data-modern="1"] .btn-primary,
body[data-modern="1"] button.primary,
body[data-modern="1"] .btn-home{
  background:linear-gradient(110deg,var(--m-primary),var(--m-violet),var(--m-primary2)) !important;
  background-size:180% 100% !important; color:#fff !important; border:0 !important;
  box-shadow:0 12px 28px rgba(37,99,235,.25) !important;
}
body[data-modern="1"] .btn.primary:hover,
body[data-modern="1"] .btn-primary:hover,
body[data-modern="1"] .btn-home:hover{transform:translateY(-2px);filter:saturate(1.1);background-position:100% center !important}
body[data-modern="1"] .btn.ghost:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(15,23,42,.10) !important}

/* inputs */
body[data-modern="1"] input, body[data-modern="1"] textarea, body[data-modern="1"] select{
  border:1px solid rgba(15,23,42,.12) !important;
  background:rgba(255,255,255,.76) !important;
  min-height:44px; transition:border .2s,box-shadow .2s,transform .2s;
}
body[data-modern="1"] input:focus, body[data-modern="1"] textarea:focus, body[data-modern="1"] select:focus{
  border-color:rgba(37,99,235,.55) !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.10),0 10px 25px rgba(37,99,235,.07) !important;
  transform:translateY(-1px);
}

/* homepage / hero */
body[data-modern="1"] .hero-section{position:relative}
body[data-modern="1"] .banner-wrapper{
  border-radius:28px !important; overflow:hidden; box-shadow:0 25px 70px rgba(15,23,42,.16) !important;
  border:1px solid rgba(255,255,255,.75); animation:mRise .7s both;
}
body[data-modern="1"] .banner-slide img{display:block;width:100%;transition:transform 6s ease}
body[data-modern="1"] .banner-slide:hover img{transform:scale(1.025)}
body[data-modern="1"] .banner-nav{backdrop-filter:blur(12px);transition:transform .2s,background .2s}
body[data-modern="1"] .banner-nav:hover{transform:scale(1.08);background:rgba(15,23,42,.75) !important}

/* login */
body[data-modern="1"].login-page{
  min-height:100vh;
  background:
    radial-gradient(700px 500px at 20% 10%,rgba(37,99,235,.18),transparent 60%),
    radial-gradient(700px 500px at 90% 80%,rgba(124,58,237,.16),transparent 60%),
    linear-gradient(135deg,#f8fbff,#eef4ff) !important;
}
body[data-modern="1"] .login-container{animation:mRise .65s both,mGlow 5s ease-in-out infinite}
body[data-modern="1"] .login-container img{filter:drop-shadow(0 10px 18px rgba(37,99,235,.15))}
body[data-modern="1"] .spinner{animation:mSpin .8s linear infinite}

/* dropdowns, toasts, footer */
body[data-modern="1"] .nav-dropdown-content,
body[data-modern="1"] .user-dropdown{
  border:1px solid rgba(15,23,42,.08) !important;
  box-shadow:0 25px 60px rgba(15,23,42,.16) !important;
  animation:mRise .2s both;
}
body[data-modern="1"] .toast{border-radius:16px !important;backdrop-filter:blur(16px)}
body[data-modern="1"] footer{opacity:.92}
body[data-modern="1"] .container{animation:mRise .45s both}

/* accessible motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;transition-duration:.001ms !important}
}
@media(max-width:700px){
  body[data-modern="1"] .card,body[data-modern="1"] .lab-card{border-radius:18px !important}
  body[data-modern="1"] .banner-wrapper{border-radius:20px !important}
}