/* ============================================================
   AURORA — capa visual de fondo. Ronda 4.
   Diseño oficial de la app desde v1.10.
   Dos atmósferas con la MISMA temática:
   - OSCURO: cielo nocturno atenuado (feedback: "el universo era
     demasiado") — cintas y nebulosas sutiles, estrellas discretas.
   - CLARO (html.aurora-light, la pone el ThemeProvider): cielo
     de amanecer pastel con el mismo vidrio y los mismos acentos.
   Todo en transform/opacity/filter (GPU).
   ============================================================ */

html {
  background:
    radial-gradient(ellipse 120% 90% at 70% -10%, #0b1b2e 0%, transparent 55%),
    radial-gradient(ellipse 90% 70% at 10% 110%, #101426 0%, transparent 60%),
    #03060e;
}

/* Modo claro: amanecer pastel (misma familia de color, fondo claro). */
html.aurora-light {
  background:
    radial-gradient(ellipse 100% 80% at 75% -10%, #d8f3ee 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 5% 110%, #e7e3f7 0%, transparent 60%),
    #eef3f8;
}

/* ---------- Cosmos (capas creadas por aurora.js) ---------- */
.aurora-cosmos {
  position: fixed;
  inset: -14%;
  z-index: -2;
  pointer-events: none;
}

/* Estrellas (canvas; solo tienen sentido de noche) */
.aurora-stars {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}
/* En claro las estrellas SÍ se ven (ronda 9): aurora.js las pinta en
   tonos teal/lavanda suaves para que parezcan destellos de día. */

/* ----- Cintas de aurora boreal (atenuadas; se mueven solas) ----- */
.aurora-ribbon {
  position: absolute;
  left: -20%;
  width: 140%;
  height: 42vh;
  filter: blur(52px) saturate(130%);
  transform-origin: 50% 0%;
  will-change: transform, opacity;
  mix-blend-mode: screen;
}
.aurora-ribbon-1 {
  top: -6%;
  background: linear-gradient(100deg,
    transparent 5%,
    rgba(16, 185, 129, 0.45) 25%,
    rgba(45, 212, 191, 0.5) 45%,
    rgba(124, 58, 237, 0.4) 68%,
    rgba(167, 139, 250, 0.28) 82%,
    transparent 96%);
  animation: ribbonWave1 18s ease-in-out infinite alternate;
  opacity: 0.3;
}
.aurora-ribbon-2 {
  top: 2%;
  height: 30vh;
  background: linear-gradient(80deg,
    transparent 8%,
    rgba(167, 139, 250, 0.38) 30%,
    rgba(45, 212, 191, 0.4) 55%,
    rgba(16, 185, 129, 0.32) 75%,
    transparent 94%);
  animation: ribbonWave2 24s ease-in-out infinite alternate;
  opacity: 0.22;
}
/* En claro las cintas son acuarela pastel (sin blend screen). */
html.aurora-light .aurora-ribbon { mix-blend-mode: normal; }
html.aurora-light .aurora-ribbon-1 {
  background: linear-gradient(100deg,
    transparent 5%,
    rgba(45, 212, 191, 0.32) 30%,
    rgba(94, 234, 212, 0.34) 50%,
    rgba(167, 139, 250, 0.26) 72%,
    transparent 95%);
  opacity: 0.62;
}
html.aurora-light .aurora-ribbon-2 {
  background: linear-gradient(80deg,
    transparent 8%,
    rgba(167, 139, 250, 0.24) 30%,
    rgba(45, 212, 191, 0.26) 60%,
    transparent 94%);
  opacity: 0.5;
}
@keyframes ribbonWave1 {
  0%   { transform: skewY(-4deg) scaleY(1)   translateX(-4%); }
  50%  { transform: skewY(2deg)  scaleY(1.25) translateX(3%); }
  100% { transform: skewY(-2deg) scaleY(0.9)  translateX(6%); }
}
@keyframes ribbonWave2 {
  0%   { transform: skewY(3deg)  scaleY(1.1) translateX(5%); }
  100% { transform: skewY(-5deg) scaleY(0.85) translateX(-6%); }
}

/* ----- Nebulosas en deriva (sutiles) ----- */
.aurora-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(85px);
  will-change: transform;
  mix-blend-mode: screen;
}
html.aurora-light .aurora-blob { mix-blend-mode: normal; }
.aurora-blob-a {
  width: 58vw; height: 58vw; left: -14%; top: -16%;
  background: radial-gradient(circle at 40% 40%, #0f8a7a, transparent 64%);
  opacity: 0.38;
  animation: drift1 28s ease-in-out infinite alternate;
}
.aurora-blob-b {
  width: 52vw; height: 52vw; right: -12%; top: 4%;
  background: radial-gradient(circle at 50% 50%, #4c1d95, transparent 62%);
  opacity: 0.32;
  animation: drift2 34s ease-in-out infinite alternate;
}
.aurora-blob-c {
  width: 42vw; height: 42vw; left: 22%; bottom: -24%;
  background: radial-gradient(circle at 50% 50%, #b45309, transparent 58%);
  opacity: 0.16;
  animation: drift3 40s ease-in-out infinite alternate;
}
.aurora-blob-d {
  width: 30vw; height: 30vw; right: 20%; bottom: 4%;
  background: radial-gradient(circle at 50% 50%, #14b8a6, transparent 60%);
  opacity: 0.18;
  animation: drift2 26s ease-in-out infinite alternate-reverse;
}
html.aurora-light .aurora-blob-a {
  background: radial-gradient(circle at 40% 40%, rgba(94,234,212,0.5), transparent 64%);
  opacity: 0.5;
}
html.aurora-light .aurora-blob-b {
  background: radial-gradient(circle at 50% 50%, rgba(196,181,253,0.45), transparent 62%);
  opacity: 0.45;
}
html.aurora-light .aurora-blob-c {
  background: radial-gradient(circle at 50% 50%, rgba(252,211,77,0.3), transparent 58%);
  opacity: 0.3;
}
html.aurora-light .aurora-blob-d {
  background: radial-gradient(circle at 50% 50%, rgba(45,212,191,0.35), transparent 60%);
  opacity: 0.35;
}
@keyframes drift1 {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(6vw, 4vh, 0) scale(1.12); }
}
@keyframes drift2 {
  from { transform: translate3d(0, 0, 0) scale(1.05); }
  to   { transform: translate3d(-5vw, 6vh, 0) scale(0.92); }
}
@keyframes drift3 {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(4vw, -5vh, 0) scale(1.15); }
}

/* ----- Piso de rejilla en perspectiva (muy sutil; solo de noche) ----- */
.aurora-floor {
  position: fixed;
  left: -25%;
  right: -25%;
  bottom: -12%;
  height: 42vh;
  z-index: -2;
  pointer-events: none;
  transform: perspective(620px) rotateX(63deg);
  transform-origin: 50% 100%;
  background-image:
    linear-gradient(rgba(45, 212, 191, 0.08) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(45, 212, 191, 0.08) 1.5px, transparent 1.5px);
  background-size: 54px 54px;
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 72%);
  mask-image: linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 72%);
  animation: floorScroll 6s linear infinite;
}
/* Piso de rejilla también de día, mucho más sutil. */
html.aurora-light .aurora-floor {
  background-image:
    linear-gradient(rgba(13, 148, 136, 0.07) 1.5px, transparent 1.5px),
    linear-gradient(90deg, rgba(13, 148, 136, 0.07) 1.5px, transparent 1.5px);
}
@keyframes floorScroll {
  from { background-position: 0 0; }
  to   { background-position: 0 54px; }
}

/* ----- Grano de película ----- */
.aurora-grain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
html.aurora-light .aurora-grain { opacity: 0.025; }

/* ---------- Scrollbars ---------- */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(45, 212, 191, .28);
  border-radius: 99px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(45, 212, 191, .45); }

/* ---------- Micro-interacciones ---------- */
.MuiCard-root {
  transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .3s !important;
}
.MuiCard-root:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 56px -20px rgba(0, 0, 0, .35), 0 0 70px -28px rgba(45, 212, 191, .4) !important;
}

.MuiAvatar-root {
  box-shadow: 0 0 0 2px rgba(45, 212, 191, .3), 0 6px 16px -6px rgba(0, 0, 0, .35);
}

.MuiFilledInput-root {
  border-radius: 12px !important;
}

/* Tilt 3D (aurora.js asigna esta clase al login). */
.aurora-tilt {
  transform-style: preserve-3d;
  will-change: transform;
}

/* Entrada de cada vista. */
#root {
  animation: auroraFadeIn .55s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes auroraFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Borde de luz para paneles "héroe" (clase manual). */
.aurora-edge {
  position: relative;
}
.aurora-edge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(130deg,
    rgba(45, 212, 191, .5), transparent 30%,
    transparent 65%, rgba(167, 139, 250, .45));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .aurora-blob, .aurora-ribbon, .aurora-floor, .aurora-grain {
    animation: none !important;
    transform: none !important;
  }
  .MuiCard-root, .aurora-tilt { transition: none !important; transform: none !important; }
}