/* =========================================================
   Gelatina Calendar · Modo Ultra
   Luces, transiciones largas y microanimaciones por diseño.
   Solo se activa con :root[data-render="ultra"].

   Índice:
     1. Variables de color por diseño y tema
     2. Audio (compartido con todos los modos)
     3. Capa ambiental (aurora, orbes, grano, barrido)
     4. Superficies luminosas
     5. Transiciones largas
     6. Calendario
     7. Tipografía
     8. Perfil y bienvenida
     9. Controles
    10. Destellos de interacción
    11. Detalles finos (mundo, foco, toasts, microanimaciones)
    12. Ajustes por tamaño, ahorro de composición y movimiento reducido

   Regla de rendimiento: solo se animan transform y opacity.
   Las luces se resuelven con degradados suaves y sombras estáticas.
   ========================================================= */

:root {
  --ultra-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ultra-ease-soft: cubic-bezier(0.22, 0.8, 0.24, 1);
  --ultra-rgb: 226, 86, 63;
  --ultra-rgb-2: 240, 176, 118;
}

:root[data-design="victoriana"] {
  --ultra-rgb: 166, 127, 54;
  --ultra-rgb-2: 208, 172, 96;
}

:root[data-design="futurista"] {
  --ultra-rgb: 46, 172, 236;
  --ultra-rgb-2: 122, 220, 255;
}

:root[data-design="ajedrez"] {
  --ultra-rgb: 106, 158, 120;
  --ultra-rgb-2: 200, 186, 128;
}

:root[data-design="catolica"] {
  --ultra-rgb: 186, 146, 74;
  --ultra-rgb-2: 232, 204, 146;
}

:root[data-design="mar"] {
  --ultra-rgb: 20, 150, 178;
  --ultra-rgb-2: 96, 208, 212;
}

:root[data-design="jungla"] {
  --ultra-rgb: 74, 164, 96;
  --ultra-rgb-2: 184, 208, 108;
}

:root[data-theme="dark"] {
  --ultra-rgb: 255, 138, 116;
  --ultra-rgb-2: 246, 196, 132;
}

:root[data-theme="dark"][data-design="victoriana"] {
  --ultra-rgb: 232, 196, 120;
  --ultra-rgb-2: 255, 226, 166;
}

:root[data-theme="dark"][data-design="futurista"] {
  --ultra-rgb: 92, 216, 255;
  --ultra-rgb-2: 148, 236, 255;
}

:root[data-theme="dark"][data-design="ajedrez"] {
  --ultra-rgb: 156, 214, 170;
  --ultra-rgb-2: 232, 220, 150;
}

:root[data-theme="dark"][data-design="catolica"] {
  --ultra-rgb: 236, 204, 148;
  --ultra-rgb-2: 255, 232, 184;
}

:root[data-theme="dark"][data-design="mar"] {
  --ultra-rgb: 72, 214, 234;
  --ultra-rgb-2: 138, 244, 238;
}

:root[data-theme="dark"][data-design="jungla"] {
  --ultra-rgb: 128, 228, 150;
  --ultra-rgb-2: 204, 234, 130;
}

/* ---------- Audio (disponible en todos los modos) ---------- */

.audio-toggle {
  position: relative;
  overflow: hidden;
}

.audio-toggle .audio-icon-use {
  transition: opacity 0.45s ease, transform 0.45s var(--ultra-ease);
}

.audio-toggle .audio-eq {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: flex;
  align-items: flex-end;
  gap: 1.5px;
  width: 11px;
  height: 9px;
  pointer-events: none;
  opacity: 0.75;
}

.audio-toggle .audio-eq i {
  display: block;
  width: 2px;
  height: 9px;
  border-radius: 1px;
  background: currentColor;
  transform: scaleY(0.34);
  transform-origin: 50% 100%;
  animation: audioEq 1.15s ease-in-out infinite;
}

.audio-toggle .audio-eq i:nth-child(2) {
  animation-delay: 0.18s;
}

.audio-toggle .audio-eq i:nth-child(3) {
  animation-delay: 0.36s;
}

.audio-toggle[aria-pressed="false"] .audio-eq {
  opacity: 0;
}

.audio-toggle[aria-pressed="false"] .audio-eq i {
  animation: none;
}

.audio-toggle[aria-pressed="false"] .audio-icon-use {
  opacity: 0.55;
}

@keyframes audioEq {
  0%,
  100% {
    transform: scaleY(0.34);
  }
  50% {
    transform: scaleY(1);
  }
}

/* ---------- Capa ambiental Ultra ---------- */

.ultra-layer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
}

:root[data-render="ultra"] .ultra-layer {
  display: block;
}

.ultra-layer > span {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ultra-aurora {
  inset: -28% !important;
  background:
    radial-gradient(42% 46% at 18% 24%, rgba(var(--ultra-rgb), 0.22), rgba(var(--ultra-rgb), 0.1) 46%, transparent 76%),
    radial-gradient(38% 42% at 80% 16%, rgba(var(--ultra-rgb-2), 0.18), rgba(var(--ultra-rgb-2), 0.08) 48%, transparent 78%),
    radial-gradient(46% 48% at 62% 84%, rgba(var(--ultra-rgb), 0.16), rgba(var(--ultra-rgb), 0.07) 50%, transparent 78%),
    radial-gradient(30% 34% at 36% 68%, rgba(var(--ultra-rgb-2), 0.1), transparent 74%);
  opacity: 0.6;
  animation: ultraAurora 26s ease-in-out infinite alternate;
}

.ultra-aurora::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    104deg,
    transparent 30%,
    rgba(255, 255, 255, 0.1) 44%,
    rgba(var(--ultra-rgb-2), 0.12) 52%,
    transparent 70%
  );
  animation: ultraAuroraBand 19s linear infinite;
}

[data-theme="dark"] .ultra-aurora {
  opacity: 0.72;
}

.ultra-cursor-glow {
  position: absolute !important;
  left: 0;
  top: 0;
  width: 520px;
  height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--ultra-rgb), 0.3),
    rgba(var(--ultra-rgb), 0.12) 42%,
    transparent 68%
  );
  opacity: 0;
  transform: translate3d(50vw, 45vh, 0);
  transition: opacity 0.7s ease;
  will-change: transform;
}

.ultra-layer.is-live .ultra-cursor-glow {
  opacity: 0.8;
}

.ultra-vignette {
  background: radial-gradient(
    120% 100% at 50% 42%,
    transparent 48%,
    rgba(24, 12, 18, 0.14) 100%
  );
}

[data-theme="dark"] .ultra-vignette {
  background: radial-gradient(
    120% 100% at 50% 42%,
    transparent 44%,
    rgba(0, 0, 0, 0.42) 100%
  );
}

.ultra-grain {
  opacity: 0.045;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

[data-theme="dark"] .ultra-grain {
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' fill='%23fff' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

.ultra-sweep {
  inset: -20% -60% !important;
  background: linear-gradient(
    96deg,
    transparent 38%,
    rgba(255, 255, 255, 0.22) 48%,
    rgba(var(--ultra-rgb-2), 0.3) 52%,
    transparent 64%
  );
  opacity: 0;
  transform: translate3d(-28%, 0, 0) rotate(8deg);
}

:root.ultra-shifting .ultra-sweep {
  animation: ultraBeam 1.35s var(--ultra-ease);
}

/* Destellos flotantes: solo existen en Ultra */
.ultra-orb {
  inset: auto !important;
  width: var(--orb-size, 8px);
  height: var(--orb-size, 8px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95), rgba(var(--ultra-rgb), 0.55) 46%, transparent 72%);
  box-shadow:
    0 0 18px rgba(var(--ultra-rgb), 0.55),
    0 0 46px rgba(var(--ultra-rgb-2), 0.28);
  opacity: 0;
  animation: ultraOrbDrift var(--orb-dur, 26s) ease-in-out infinite;
}

.orb-a { top: 18%; left: 9%; --orb-size: 9px; --orb-dur: 26s; }
.orb-b { top: 62%; left: 84%; --orb-size: 6px; --orb-dur: 31s; animation-delay: -7s; }
.orb-c { top: 34%; left: 73%; --orb-size: 12px; --orb-dur: 38s; animation-delay: -14s; }
.orb-d { top: 79%; left: 24%; --orb-size: 7px; --orb-dur: 29s; animation-delay: -20s; }
.orb-e { top: 8%; left: 56%; --orb-size: 5px; --orb-dur: 23s; animation-delay: -11s; }

@keyframes ultraOrbDrift {
  0%, 100% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.6); }
  22% { opacity: 0.9; }
  50% { opacity: 0.5; transform: translate3d(28px, -36px, 0) scale(1.18); }
  78% { opacity: 0.82; }
}

@keyframes ultraAurora {
  0% {
    transform: translate3d(-2%, -1%, 0) scale(1);
  }
  50% {
    transform: translate3d(2%, 2%, 0) scale(1.06);
  }
  100% {
    transform: translate3d(-1%, 3%, 0) scale(1.02);
  }
}

@keyframes ultraAuroraBand {
  0% {
    transform: translate3d(-38%, 0, 0);
  }
  100% {
    transform: translate3d(38%, 0, 0);
  }
}

@keyframes ultraBeam {
  0% {
    opacity: 0;
    transform: translate3d(-32%, 0, 0) rotate(8deg);
  }
  22% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate3d(42%, 0, 0) rotate(8deg);
  }
}

/* ---------- Superficies luminosas ---------- */

:root[data-render="ultra"] :is(
  .calendar-card,
  .panel,
  .welcome-panel,
  .event-modal,
  .profile-modal,
  .share-modal,
  .year-sheet,
  .day-drawer
) {
  position: relative;
  outline: 1px solid rgba(var(--ultra-rgb), 0.16);
  outline-offset: 2px;
  transition: outline-color 0.9s ease, box-shadow 0.9s ease,
    transform 0.9s var(--ultra-ease);
}

:root[data-render="ultra"] .calendar-card:hover,
:root[data-render="ultra"] .panel:hover {
  outline-color: rgba(var(--ultra-rgb), 0.34);
}

:root[data-render="ultra"] :is(
  .calendar-card,
  .event-modal,
  .profile-modal,
  .share-modal,
  .year-sheet,
  .day-drawer
)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(76% 48% at 12% -6%, rgba(255, 255, 255, 0.2), transparent 62%),
    linear-gradient(
      158deg,
      rgba(255, 255, 255, 0.08) 0%,
      transparent 34%,
      transparent 68%,
      rgba(var(--ultra-rgb), 0.07) 100%
    );
  opacity: 0.6;
  transition: opacity 0.9s ease;
}

[data-theme="dark"] :root[data-render="ultra"] :is(
  .calendar-card,
  .event-modal,
  .profile-modal,
  .share-modal,
  .year-sheet,
  .day-drawer
)::after {
  opacity: 0.24;
}

/* El calendario recorta su propio brillo. */
:root[data-render="ultra"] .calendar-card {
  overflow: hidden;
}

/* ---------- Transiciones largas ---------- */

:root[data-render="ultra"] .overlay {
  background: radial-gradient(
    120% 100% at 50% 40%,
    rgba(18, 22, 30, 0.32),
    rgba(10, 12, 18, 0.52)
  );
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  transition: opacity 0.62s var(--ultra-ease), visibility 0.62s var(--ultra-ease);
}

:root[data-render="ultra"] .event-modal,
:root[data-render="ultra"] .profile-modal,
:root[data-render="ultra"] .share-modal,
:root[data-render="ultra"] .year-sheet {
  opacity: 0;
  transform: translateY(26px) scale(0.965);
  transition: transform 0.78s var(--ultra-ease), opacity 0.55s ease,
    box-shadow 0.78s ease, outline-color 0.78s ease;
}

:root[data-render="ultra"] .day-drawer {
  opacity: 0;
  transform: translateX(44px) scale(0.985);
  transition: transform 0.78s var(--ultra-ease), opacity 0.55s ease,
    box-shadow 0.78s ease, outline-color 0.78s ease;
}

:root[data-render="ultra"] .overlay.is-open .event-modal,
:root[data-render="ultra"] .overlay.is-open .profile-modal,
:root[data-render="ultra"] .overlay.is-open .share-modal,
:root[data-render="ultra"] .overlay.is-open .year-sheet,
:root[data-render="ultra"] .overlay.is-open .day-drawer {
  opacity: 1;
  transform: none;
}

:root[data-render="ultra"] .toast {
  transition: opacity 0.5s var(--ultra-ease), transform 0.6s var(--ultra-ease),
    visibility 0.5s var(--ultra-ease), box-shadow 0.5s ease;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(var(--ultra-rgb), 0.18),
    0 0 30px rgba(var(--ultra-rgb), 0.18);
}

:root[data-render="ultra"] .toast.is-visible {
  transform: translate(-50%, 0) scale(1.015);
}

/* ---------- Calendario ---------- */

:root[data-render="ultra"] .calendar-card.is-month-enter .day-cell {
  animation-duration: 1.05s;
  animation-delay: calc(var(--cell-i, 0) * 16ms);
}

:root[data-render="ultra"] .day-cell {
  transition: background-color 0.55s ease, box-shadow 0.55s ease, color 0.4s ease;
}

:root[data-render="ultra"] .day-cell:hover {
  background-image: radial-gradient(
    120% 100% at 50% 0%,
    rgba(var(--ultra-rgb), 0.1),
    transparent 70%
  );
  box-shadow: inset 0 0 0 1px rgba(var(--ultra-rgb), 0.32),
    inset 0 0 26px rgba(var(--ultra-rgb), 0.1);
}

:root[data-render="ultra"] .day-cell.is-today {
  box-shadow: inset 0 0 0 1.5px rgba(var(--ultra-rgb), 0.48),
    0 0 22px rgba(var(--ultra-rgb), 0.16);
}

:root[data-render="ultra"] .day-cell.is-selected {
  box-shadow: inset 0 0 0 2px rgba(var(--ultra-rgb), 0.7),
    0 0 26px rgba(var(--ultra-rgb), 0.28);
}

:root[data-render="ultra"] .event-chip {
  transition: transform 0.5s var(--ultra-ease), box-shadow 0.5s ease,
    background-color 0.5s ease, color 0.4s ease;
}

:root[data-render="ultra"] .event-chip:hover {
  transform: translateY(-1px) translateX(1px);
  box-shadow: 0 6px 16px rgba(var(--ultra-rgb), 0.2);
}

:root[data-render="ultra"] .event-chip.is-important {
  box-shadow: 0 0 18px rgba(var(--ultra-rgb), 0.24);
}

/* ---------- Tipografía animada ---------- */

:root[data-render="ultra"] :is(#monthTitle, .panel-head h2, .drawer-top h2) {
  background-image: linear-gradient(
    100deg,
    var(--ink) 0%,
    rgba(var(--ultra-rgb), 1) 26%,
    var(--ink) 50%,
    rgba(var(--ultra-rgb), 0.92) 74%,
    var(--ink) 100%
  );
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ink);
}

/* Solo el título protagonista mantiene el brillo en movimiento continuo. */
:root[data-render="ultra"] #monthTitle {
  animation: ultraInk 12s linear infinite;
}

:root[data-render="ultra"] .month-title-line {
  transition: transform 0.8s var(--ultra-ease);
}

body.is-month-shift #monthTitle {
  animation: ultraTitleIn 1.15s var(--ultra-ease), ultraInk 12s linear infinite;
}

body.is-month-shift .month-year {
  animation: ultraYearIn 1.15s var(--ultra-ease);
}

:root[data-render="ultra"] .eyebrow {
  text-shadow: 0 0 18px rgba(var(--ultra-rgb), 0.28);
}

@keyframes ultraInk {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 240% 50%;
  }
}

@keyframes ultraTitleIn {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

@keyframes ultraYearIn {
  0% {
    opacity: 0;
    transform: translateX(14px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Perfil: entrada escalonada ---------- */

:root[data-render="ultra"] .profile-overlay.is-open .profile-identity,
:root[data-render="ultra"] .profile-overlay.is-open .profile-fact,
:root[data-render="ultra"] .profile-overlay.is-open .profile-section {
  animation: ultraFactIn 0.85s var(--ultra-ease) both;
}

:root[data-render="ultra"] .profile-overlay.is-open .profile-identity {
  animation-delay: 0.08s;
}

:root[data-render="ultra"] .profile-overlay.is-open .profile-fact:nth-child(1) {
  animation-delay: 0.16s;
}

:root[data-render="ultra"] .profile-overlay.is-open .profile-fact:nth-child(2) {
  animation-delay: 0.22s;
}

:root[data-render="ultra"] .profile-overlay.is-open .profile-fact:nth-child(3) {
  animation-delay: 0.28s;
}

:root[data-render="ultra"] .profile-overlay.is-open .profile-fact:nth-child(4) {
  animation-delay: 0.34s;
}

:root[data-render="ultra"] .profile-overlay.is-open .profile-fact:nth-child(5) {
  animation-delay: 0.4s;
}

:root[data-render="ultra"] .profile-overlay.is-open .profile-fact:nth-child(6) {
  animation-delay: 0.46s;
}

:root[data-render="ultra"] .profile-overlay.is-open .profile-section:nth-of-type(1) {
  animation-delay: 0.5s;
}

:root[data-render="ultra"] .profile-overlay.is-open .profile-section:nth-of-type(2) {
  animation-delay: 0.58s;
}

@keyframes ultraFactIn {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Bienvenida ---------- */

:root[data-render="ultra"] .welcome-panel {
  animation-duration: 1.25s;
  animation-timing-function: var(--ultra-ease);
}

:root[data-render="ultra"] .welcome-panel .btn-primary {
  box-shadow: 0 10px 30px rgba(var(--ultra-rgb), 0.24);
}

/* ---------- Controles ---------- */

:root[data-render="ultra"] .btn,
:root[data-render="ultra"] .icon-btn,
:root[data-render="ultra"] .theme-choice,
:root[data-render="ultra"] .design-choice {
  transition: transform 0.55s var(--ultra-ease), box-shadow 0.55s ease,
    background 0.55s ease, border-color 0.55s ease, color 0.45s ease;
}

:root[data-render="ultra"] .btn:hover,
:root[data-render="ultra"] .theme-choice:hover,
:root[data-render="ultra"] .design-choice:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(var(--ultra-rgb), 0.18);
}

:root[data-render="ultra"] .btn:active,
:root[data-render="ultra"] .theme-choice:active,
:root[data-render="ultra"] .design-choice:active {
  transform: translateY(0) scale(0.99);
}

:root[data-render="ultra"] .icon-btn:hover {
  box-shadow: 0 0 18px rgba(var(--ultra-rgb), 0.26);
}

:root[data-render="ultra"] .theme-choice[aria-pressed="true"],
:root[data-render="ultra"] .design-choice[aria-pressed="true"] {
  box-shadow: 0 0 0 1px rgba(var(--ultra-rgb), 0.36),
    0 6px 20px rgba(var(--ultra-rgb), 0.16);
}

:root[data-render="ultra"] .audio-toggle {
  color: var(--ink);
}

:root[data-render="ultra"] .audio-toggle[aria-pressed="true"] {
  box-shadow: inset 0 0 0 1px rgba(var(--ultra-rgb), 0.24),
    0 0 18px rgba(var(--ultra-rgb), 0.2);
}

/* ---------- Destellos de interacción ---------- */

.ultra-fx {
  position: fixed;
  inset: 0;
  z-index: 320;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
}

.ultra-spark {
  position: absolute;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #ffffff 0%,
    rgba(var(--ultra-rgb), 0.95) 42%,
    rgba(var(--ultra-rgb), 0) 72%
  );
  pointer-events: none;
  animation: ultraSpark 1.1s var(--ultra-ease) forwards;
}

.ultra-ring {
  position: absolute;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 2px solid rgba(var(--ultra-rgb), 0.8);
  border-radius: 50%;
  pointer-events: none;
  animation: ultraRing 1.2s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes ultraSpark {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(0.3);
  }
  70% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx, 0), var(--dy, -46px), 0) scale(1.1);
  }
}

@keyframes ultraRing {
  0% {
    opacity: 0.95;
    transform: scale(0.35);
  }
  100% {
    opacity: 0;
    transform: scale(4.2);
  }
}

/* ---------- Detalles finos: mundo, foco, toasts, microanimaciones ---------- */

@keyframes ultraWorldIn {
  0% {
    opacity: 0;
    transform: scale(1.035);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

:root[data-render="ultra"] .theme-world .world {
  animation: ultraWorldIn 1.15s var(--ultra-ease) both;
}

:root[data-render="ultra"] :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid rgba(var(--ultra-rgb), 0.85);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(var(--ultra-rgb), 0.14),
    0 0 22px rgba(var(--ultra-rgb), 0.22);
}

:root[data-render="ultra"] .toast::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 6px;
  left: 12px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--ultra-rgb), 0.85), transparent);
  transform-origin: left;
  animation: ultraToastTrace 1.1s var(--ultra-ease) both;
}

@keyframes ultraToastTrace {
  0% { transform: scaleX(0); opacity: 0; }
  100% { transform: scaleX(1); opacity: 1; }
}

:root[data-render="ultra"] .profile-section-head h3,
:root[data-render="ultra"] .design-heading h4 {
  background-image: linear-gradient(
    100deg,
    var(--ink) 0%,
    rgba(var(--ultra-rgb), 1) 44%,
    var(--ink) 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--ink);
}

:root[data-render="ultra"] .profile-section-head,
:root[data-render="ultra"] .design-heading {
  position: relative;
}

:root[data-render="ultra"] .profile-section-head::after,
:root[data-render="ultra"] .design-heading::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--ultra-rgb), 0.28), transparent 72%);
}

:root[data-render="ultra"] .profile-overlay.is-open .day-event,
:root[data-render="ultra"] .overlay.is-open .day-event {
  animation: ultraFactIn 0.75s var(--ultra-ease) both;
}

:root[data-render="ultra"] .day-event:nth-child(1) { animation-delay: 0.12s; }
:root[data-render="ultra"] .day-event:nth-child(2) { animation-delay: 0.18s; }
:root[data-render="ultra"] .day-event:nth-child(3) { animation-delay: 0.24s; }
:root[data-render="ultra"] .day-event:nth-child(4) { animation-delay: 0.3s; }
:root[data-render="ultra"] .day-event:nth-child(5) { animation-delay: 0.36s; }
:root[data-render="ultra"] .day-event:nth-child(n + 6) { animation-delay: 0.42s; }

:root[data-render="ultra"] #welcomeTitle {
  text-shadow: 0 0 26px rgba(var(--ultra-rgb), 0.22);
}

:root[data-render="ultra"] .btn-primary {
  position: relative;
  overflow: hidden;
}

:root[data-render="ultra"] .btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    104deg,
    transparent 30%,
    rgba(255, 255, 255, 0.42) 48%,
    transparent 66%
  );
  transform: translateX(-120%);
  animation: ultraButtonSheen 7s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ultraButtonSheen {
  0%, 62% { transform: translateX(-120%); }
  78%, 100% { transform: translateX(120%); }
}

:root[data-render="ultra"] .modal-close:hover,
:root[data-render="ultra"] .drawer-close:hover,
:root[data-render="ultra"] .overlay-close:hover {
  transform: rotate(90deg);
  transition: transform 0.6s var(--ultra-ease), box-shadow 0.6s ease;
}

:root[data-render="ultra"] .weekdays span {
  text-shadow: 0 0 14px rgba(var(--ultra-rgb), 0.2);
}

:root[data-render="ultra"] .calendar-card {
  box-shadow: 0 0 0 1px rgba(var(--ultra-rgb), 0.12),
    0 18px 46px -20px rgba(var(--ultra-rgb), 0.28),
    0 30px 80px -34px rgba(var(--ultra-rgb), 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

[data-theme="dark"] :root[data-render="ultra"] .calendar-card {
  box-shadow: 0 0 0 1px rgba(var(--ultra-rgb), 0.18),
    0 20px 52px -18px rgba(var(--ultra-rgb), 0.32),
    0 34px 90px -30px rgba(var(--ultra-rgb), 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.ultra-sweep::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at var(--ultra-x, 50%) var(--ultra-y, 45%),
    rgba(var(--ultra-rgb), 0.3),
    transparent 44%
  );
  opacity: 0;
}

:root.ultra-shifting .ultra-sweep::after {
  animation: ultraBloom 1.45s var(--ultra-ease);
}

@keyframes ultraBloom {
  0% { opacity: 0; transform: scale(0.82); }
  34% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(1.16); }
}

:root[data-render="ultra"] .profile-fact,
:root[data-render="ultra"] .today-event,
:root[data-render="ultra"] .day-event {
  transition: transform 0.6s var(--ultra-ease), box-shadow 0.6s ease,
    background-color 0.6s ease, border-color 0.6s ease;
}

:root[data-render="ultra"] .profile-fact:hover,
:root[data-render="ultra"] .today-event:hover,
:root[data-render="ultra"] .day-event:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(var(--ultra-rgb), 0.14);
}

:root[data-render="ultra"] .panel-head h2::after,
:root[data-render="ultra"] .drawer-top h2::after {
  content: "";
  display: block;
  width: 54px;
  height: 1px;
  margin-top: 8px;
  background: linear-gradient(90deg, rgba(var(--ultra-rgb), 0.8), transparent);
  animation: ultraRule 2.4s var(--ultra-ease) both;
}

@keyframes ultraRule {
  0% { transform: scaleX(0); transform-origin: left; opacity: 0; }
  100% { transform: scaleX(1); transform-origin: left; opacity: 1; }
}

/* ---------- Ajustes por tamaño ---------- */

@media (max-width: 900px) {
  .ultra-aurora {
    opacity: 0.55;
  }

  :root[data-render="ultra"] .event-modal,
  :root[data-render="ultra"] .profile-modal,
  :root[data-render="ultra"] .share-modal,
  :root[data-render="ultra"] .year-sheet,
  :root[data-render="ultra"] .day-drawer {
    transition-duration: 0.62s, 0.42s, 0.62s, 0.62s;
  }
}

@media (max-width: 600px) {
  .ultra-cursor-glow {
    display: none;
  }

  .ultra-grain {
    opacity: 0.035;
  }

  :root[data-render="ultra"] .calendar-card.is-month-enter .day-cell {
    animation-duration: 0.8s;
    animation-delay: calc(var(--cell-i, 0) * 10ms);
  }

  :root[data-render="ultra"] .overlay {
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
  }
}

/* ---------- Ahorro de composición ---------- */

/* Lo que queda detrás de un modal o de una pestaña oculta no necesita animarse.
   Los destellos se dejan fuera: son de un solo uso y deben terminar y limpiarse. */
body:has(.overlay.is-open) :is(.calendar-card, .theme-world, .ultra-layer) *,
body:has(.overlay.is-open) :is(.calendar-card, .theme-world)::before,
body:has(.overlay.is-open) :is(.calendar-card, .theme-world)::after,
html.is-doc-hidden * {
  animation-play-state: paused !important;
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  :root[data-render="ultra"] .ultra-aurora,
  :root[data-render="ultra"] .ultra-aurora::before,
  :root[data-render="ultra"] .ultra-cursor-glow,
  :root[data-render="ultra"] .ultra-sweep,
  :root[data-render="ultra"] #monthTitle,
  :root[data-render="ultra"] .panel-head h2,
  :root[data-render="ultra"] .drawer-top h2,
  :root[data-render="ultra"] .profile-overlay.is-open .profile-identity,
  :root[data-render="ultra"] .profile-overlay.is-open .profile-fact,
  :root[data-render="ultra"] .profile-overlay.is-open .profile-section,
  :root[data-render="ultra"] .overlay.is-open .day-event,
  :root[data-render="ultra"] .theme-world .world,
  :root[data-render="ultra"] .profile-section-head h3,
  :root[data-render="ultra"] .design-heading h4,
  :root[data-render="ultra"] .panel-head h2::after,
  :root[data-render="ultra"] .drawer-top h2::after,
  :root[data-render="ultra"] .btn-primary::after,
  :root[data-render="ultra"] .toast::after,
  :root.ultra-shifting .ultra-sweep::after,
  body.is-month-shift #monthTitle,
  body.is-month-shift .month-year,
  .audio-toggle .audio-eq i {
    animation: none !important;
  }

  :root[data-render="ultra"] .calendar-card.is-month-enter .day-cell {
    animation: none !important;
    opacity: 1;
    transform: none;
  }

  :root[data-render="ultra"] .ultra-cursor-glow {
    display: none;
  }

  .ultra-orb {
    animation: none !important;
    opacity: 0.3;
  }

  :root[data-render="ultra"] .overlay,
  :root[data-render="ultra"] .event-modal,
  :root[data-render="ultra"] .profile-modal,
  :root[data-render="ultra"] .share-modal,
  :root[data-render="ultra"] .year-sheet,
  :root[data-render="ultra"] .day-drawer,
  :root[data-render="ultra"] .toast {
    transition-duration: 0.15s !important;
  }

  .ultra-spark,
  .ultra-ring {
    display: none;
  }
}