/* ui.css — look & feel Yuppi OS (dark) · login + splash. Colores de marca exactos. */
:root{
  --up-purple:#8D05F9;
  --up-orange:#FDA726;
  --bg:#000000;
  --panel:rgba(255,255,255,.04);
  --stroke:rgba(255,255,255,.10);
  --ink:#F5F3FF;
  --muted:#9A93AD;
  --purple-soft:rgba(141,5,249,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
/* fondo: glow morado + grid sutil */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg-fx::before{
  content:"";position:absolute;top:-25%;left:50%;transform:translateX(-50%);
  width:900px;height:900px;border-radius:50%;
  background:radial-gradient(circle, rgba(141,5,249,.28), rgba(141,5,249,0) 60%);
  filter:blur(20px);animation:breathe 8s ease-in-out infinite;
}
.bg-fx::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background:
    linear-gradient(transparent 31px, rgba(255,255,255,.025) 32px) 0 0/34px 34px,
    linear-gradient(90deg, transparent 31px, rgba(255,255,255,.025) 32px) 0 0/34px 34px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 70%);
          mask-image:radial-gradient(circle at 50% 40%, #000 0%, transparent 70%);
}
@keyframes breathe{0%,100%{opacity:.7;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.08)}}

/* ===== logo animado (up + smile) ===== */
.logo-wrap{position:relative;display:grid;place-items:center}
.logo-up{
  width:112px;height:auto;display:block;position:relative;z-index:2;
  filter:drop-shadow(0 0 0 rgba(141,5,249,0));
  animation:logoFloat 5.5s ease-in-out infinite, logoGlow 3.2s ease-in-out infinite;
}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes logoGlow{
  0%,100%{filter:drop-shadow(0 6px 26px rgba(141,5,249,.35))}
  50%{filter:drop-shadow(0 10px 42px rgba(141,5,249,.75))}
}
/* halo detrás del logo */
.logo-halo{position:absolute;width:220px;height:220px;border-radius:50%;z-index:1;
  background:radial-gradient(circle, rgba(141,5,249,.30), transparent 62%);
  animation:breathe 4.5s ease-in-out infinite}