/* Pickwisemeadowx — Global Styles */
html{scroll-behavior:smooth}
body{overflow-x:hidden}

/* Animated star field background */
#stars-bg{
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(124,58,237,.25), transparent),
    radial-gradient(900px 500px at 10% 20%, rgba(56,189,248,.18), transparent),
    #050510;
}
#stars-bg::before,#stars-bg::after{
  content:"";position:absolute;inset:0;
  background-image:
    radial-gradient(1px 1px at 20px 30px,#fff,transparent),
    radial-gradient(1px 1px at 120px 80px,#fff,transparent),
    radial-gradient(1px 1px at 200px 160px,#cbd5f5,transparent),
    radial-gradient(1.5px 1.5px at 320px 60px,#fff,transparent),
    radial-gradient(1px 1px at 400px 220px,#fff,transparent);
  background-repeat:repeat;background-size:450px 300px;
  animation:starDrift 120s linear infinite;opacity:.6;
}
#stars-bg::after{background-size:600px 400px;animation-duration:200s;opacity:.35}
@keyframes starDrift{from{background-position:0 0}to{background-position:450px 300px}}

/* Glassmorphism */
.glass{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 8px 32px rgba(0,0,0,.35);
}

/* Wallpaper cards */
.wp-card{break-inside:avoid;position:relative;border-radius:1rem;overflow:hidden;cursor:pointer}
.wp-card img{width:100%;display:block;transition:transform .6s ease}
.wp-card:hover img{transform:scale(1.08)}
.wp-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(5,5,16,.9),transparent 60%);
  opacity:0;transition:opacity .35s ease;
  display:flex;flex-direction:column;justify-content:flex-end;padding:1rem;
}
.wp-card:hover .wp-overlay,.wp-card:focus-within .wp-overlay{opacity:1}

/* Success animation */
.success-pop{animation:pop .6s cubic-bezier(.17,.89,.32,1.28)}
@keyframes pop{0%{transform:scale(0);opacity:0}100%{transform:scale(1);opacity:1}}

/* Skeleton loading */
.skeleton{background:linear-gradient(90deg,#141433 25%,#1e1e46 50%,#141433 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Light mode overrides */
html:not(.dark) body{background:#f8fafc;color:#0f172a}
html:not(.dark) #stars-bg{background:linear-gradient(180deg,#e0e7ff,#f8fafc);}
html:not(.dark) #stars-bg::before,html:not(.dark) #stars-bg::after{opacity:.15}
html:not(.dark) .glass{background:rgba(255,255,255,.7);border-color:rgba(0,0,0,.08);color:#0f172a}
html:not(.dark) header#site-header,html:not(.dark) #header-mount header{background:rgba(248,250,252,.8)!important}

/* FAQ details marker */
details[open] summary span{transform:rotate(45deg);display:inline-block}
summary{transition:color .2s}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* Focus visibility for accessibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid #38bdf8;outline-offset:2px;border-radius:4px;
}