/* =====================================================================
   STOKEA · Temáticas estacionales · Decoraciones CSS
   ---------------------------------------------------------------------
   Decoración discreta, sin overlays interactivos y sin sonido:
   · Fondo de #main y patrón de la barra lateral tomados de las variables
     que aplica `seasonal-controller.js` (--seasonal-main-bg,
     --seasonal-sidebar-pattern). Nunca tapan contenido ni capturan clics:
     son capas de background/pseudo-elementos con `pointer-events:none`
     y sin z-index alto.
   · Adorno pequeño en la cabecera de cada tarjeta (--seasonal-ornament),
     colocado en el relleno superior de la tarjeta para no tapar títulos ni
     controles.
   · Efectos opcionales (deriva del fondo y micro-movimiento del adorno) que
     se desactivan con `data-seasonal-effects="off"`, `[data-animations="off"]`,
     `prefers-reduced-motion: reduce`, `forced-colors` y en móvil/impresión.
   · Modo claro y oscuro: los colores llegan por variables del controlador;
     aquí solo se ajustan opacidades y bordes con `[data-resolved-dark="on"]`.
   · Las temáticas con `decorations.effects:'none'` reciben
     `data-seasonal-effects="off"` del controlador: decoración estática.

   Este archivo lo mantiene seasonal-dev (ver docs/STOKEA_PETS_CONTRACT.md §8).
   ===================================================================== */

/* ---------- 1. Capas de fondo decorativas (no interactivas) ---------- */

html[data-seasonal-theme] #main {
  background-image: var(--seasonal-main-bg, var(--main-bg-image));
  background-color: var(--bg);
  background-repeat: no-repeat;
}

html[data-seasonal-theme] .sidebar {
  background: var(--seasonal-sidebar-pattern, var(--sidebar-pattern)),
    linear-gradient(180deg, var(--sidebar-bg), var(--sidebar-bg2) 70%);
}

/* Acento de temporada en el borde superior y en la marca (sin tapar nada). */
html[data-seasonal-theme] .topbar {
  border-bottom-color: var(--border);
  border-bottom-color: color-mix(in srgb, var(--seasonal-accent, var(--primary)) 28%, var(--border));
}

html[data-seasonal-theme] .brand-mark {
  box-shadow: 0 6px 18px -6px var(--seasonal-accent, var(--primary-shadow));
}

/* Borde de tarjeta insinuado: decoración, nunca información. */
html[data-seasonal-theme] .card {
  border-color: var(--border);
  border-color: color-mix(in srgb, var(--seasonal-accent, var(--primary)) 12%, var(--border));
}

/* ---------- 2. Adorno de tarjeta (solo decorativo) ---------- */

html[data-seasonal-theme] .card > .card-h {
  position: relative;
}

/*
 * El adorno vive en el relleno superior de la tarjeta (top negativo), no
 * sobre el título ni los botones de la cabecera. `pointer-events:none`
 * garantiza que nunca capture clics y `content:none` (clásico sin tema) no
 * genera la capa.
 */
html[data-seasonal-theme] .card > .card-h::after {
  content: var(--seasonal-ornament, none);
  position: absolute;
  top: -15px;
  right: 0;
  font-size: .82rem;
  line-height: 1;
  opacity: .45;
  pointer-events: none;
  user-select: none;
}

/* En oscuro el adorno necesita un poco más de presencia para verse. */
html[data-resolved-dark="on"][data-seasonal-theme] .card > .card-h::after {
  opacity: .58;
}

/* ---------- 3. Efectos opcionales (respetan off y reduced-motion) ---------- */

/* Deriva muy lenta del fondo de #main; nunca mueve contenido. */
html[data-seasonal-theme][data-seasonal-effects="on"] #main {
  animation: seasonal-drift 48s ease-in-out infinite alternate;
}

@keyframes seasonal-drift {
  from { background-position: 0% 0%, 100% 0%, 0% 0%; }
  to { background-position: 1.5% 1.5%, 98.5% 3%, 0% 0%; }
}

/* Flotar suave: Halloween, San Valentín y Primavera. */
html[data-seasonal-theme="halloween"][data-seasonal-effects="on"] .card > .card-h::after,
html[data-seasonal-theme="san-valentin"][data-seasonal-effects="on"] .card > .card-h::after,
html[data-seasonal-theme="primavera"][data-seasonal-effects="on"] .card > .card-h::after {
  animation: seasonal-float 9s ease-in-out infinite alternate;
}

@keyframes seasonal-float {
  from { transform: translateY(0) rotate(-4deg); }
  to { transform: translateY(-2px) rotate(4deg); }
}

/* Parpadeo suave: Navidad. */
html[data-seasonal-theme="navidad"][data-seasonal-effects="on"] .card > .card-h::after {
  animation: seasonal-twinkle 6s ease-in-out infinite;
}

@keyframes seasonal-twinkle {
  0%, 100% { opacity: .34; }
  50% { opacity: .68; }
}

/* Destello: Año Nuevo. */
html[data-seasonal-theme="ano-nuevo"][data-seasonal-effects="on"] .card > .card-h::after {
  animation: seasonal-sparkle 5s ease-in-out infinite;
}

@keyframes seasonal-sparkle {
  0%, 100% { opacity: .4; transform: scale(1); }
  45% { opacity: .72; transform: scale(1.08); }
}

/* Confeti: Carnaval (el movimiento vive en el fondo y el patrón, no en el contenido). */
html[data-seasonal-theme="carnaval"][data-seasonal-effects="on"] .sidebar {
  animation: seasonal-pattern-shift 70s linear infinite alternate;
}

@keyframes seasonal-pattern-shift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 28px 0, 0 0; }
}

/* Efectos desactivados desde las preferencias de temporada. */
html[data-seasonal-effects="off"] #main,
html[data-seasonal-effects="off"] .sidebar,
html[data-seasonal-effects="off"] .card > .card-h::after {
  animation: none !important;
}

/* Animaciones globales desactivadas (personalización de apariencia). */
html[data-animations="off"] #main,
html[data-animations="off"] .sidebar,
html[data-animations="off"] .card > .card-h::after {
  animation: none !important;
}

/* ---------- 4. Accesibilidad de movimiento y color ---------- */

@media (prefers-reduced-motion: reduce) {
  html[data-seasonal-theme] #main,
  html[data-seasonal-theme] .sidebar,
  html[data-seasonal-theme] .card > .card-h::after {
    animation: none !important;
  }
}

/* En modo de contraste forzado el adorno no aporta y puede confundir. */
@media (forced-colors: active) {
  html[data-seasonal-theme] .card > .card-h::after {
    display: none;
  }
}

/* ---------- 5. Móvil: decoración más contenida ---------- */

@media (max-width: 640px) {
  html[data-seasonal-theme] .card > .card-h::after {
    top: -13px;
    font-size: .76rem;
    opacity: .34;
  }

  html[data-resolved-dark="on"][data-seasonal-theme] .card > .card-h::after {
    opacity: .46;
  }

  /* Sin animaciones de fondo en pantallas pequeñas (batería y legibilidad). */
  html[data-seasonal-theme][data-seasonal-effects="on"] #main,
  html[data-seasonal-theme][data-seasonal-effects="on"] .sidebar {
    animation: none;
  }
}

/* ---------- 6. Impresión: solo la decoración estática ---------- */

@media print {
  html[data-seasonal-theme] #main,
  html[data-seasonal-theme] .sidebar,
  html[data-seasonal-theme] .card > .card-h::after {
    animation: none !important;
  }

  html[data-seasonal-theme] .card > .card-h::after {
    display: none;
  }

  html[data-seasonal-theme] #main {
    background-image: none;
    background-color: transparent;
  }
}