/* ==========================================================================
   shanshui-bg.css — fondo de montañas en acuarela china
   Versión 青绿 (Qinglü): azurita y malaquita sobre papel.

   Capa decorativa opcional. NO incluye estilos de login ni de formularios:
   aquí sólo vive el escenario de fondo.

   Se activa con:
       <html data-bg="shanshui" data-theme="qinglv">

   Todo el escenario vive dentro de .ss-scene, que se pinta en z-index -1:
   así nunca tapa el contenido y no hay que tocar los z-index existentes.
   ========================================================================== */

/* ---------------------------------------------------------- 1. Paleta */

html[data-bg="shanshui"] {
    --paper-1: #FCFAF3;
    --paper-2: #F1F2E9;
    --paper-3: #E4E9DC;
    --vignette: rgba(46, 88, 92, .12);
    --ss-grain: .05;
}

/* ------------------------------------------------------- 2. Escenario */

.ss-scene {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    transform-origin: 50% 48%;
    background:
        radial-gradient(120% 90% at 22% 6%, rgba(255, 255, 255, .85) 0%, transparent 60%),
        linear-gradient(170deg, var(--paper-1) 0%, var(--paper-2) 55%, var(--paper-3) 100%);
}

html:not([data-bg="shanshui"]) .ss-scene { display: none !important; }

/* Viñeta suave */
.ss-scene::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 6;
    background: radial-gradient(120% 100% at 50% 46%, transparent 38%, var(--vignette) 100%);
}

/* El paisaje (SVG que genera landscape.js) */
.ss-art {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    will-change: transform;
}

.ss-art svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Niebla */
.ss-mist {
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
}

.ss-mist i {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: radial-gradient(closest-side,
            rgba(255, 255, 255, .92) 0%,
            rgba(255, 255, 255, .50) 42%,
            rgba(255, 255, 255, .16) 74%,
            rgba(255, 255, 255, 0) 100%);
    will-change: transform;
    animation: ssDrift linear infinite alternate;
}

@keyframes ssDrift {
    from { transform: translate3d(-4%, 0, 0) scale(1); }
    to   { transform: translate3d(6%, -1.5%, 0) scale(1.07); }
}

/* Manchas de tinta que florecen */
.ss-blooms {
    position: absolute;
    inset: 0;
    z-index: 3;
    overflow: hidden;
}

.ss-blooms i {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: radial-gradient(closest-side,
            var(--bloom-c, rgba(40, 40, 40, .16)) 0%,
            var(--bloom-c, rgba(40, 40, 40, .06)) 46%,
            transparent 100%);
    opacity: 0;
    will-change: transform, opacity;
    animation: ssBloom ease-in-out infinite;
}

@keyframes ssBloom {
    0%   { opacity: 0; transform: scale(.55); }
    35%  { opacity: .85; transform: scale(1.15); }
    70%  { opacity: .35; transform: scale(1.5); }
    100% { opacity: 0; transform: scale(1.75); }
}

/* Aves */
.ss-birds {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
}

.ss-birds svg {
    position: absolute;
    overflow: visible;
    will-change: transform;
    animation: ssFly linear infinite;
}

@keyframes ssFly {
    from { transform: translate3d(-8vw, 0, 0); }
    to   { transform: translate3d(112vw, -6vh, 0); }
}

.ss-birds path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: ssFlap 1.5s ease-in-out infinite;
    transform-origin: center;
}

@keyframes ssFlap {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(.55); }
}

/* Grano de papel */
.ss-grain {
    position: absolute;
    inset: 0;
    z-index: 5;
    opacity: var(--ss-grain, .05);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ------------------------------------------- 2b. Ajustes sobre la UI

   El cristal de los paneles se mantiene tal cual: subirle la opacidad para
   "ganar legibilidad" le quitaba el efecto glassmorph, que es lo que se
   percibe justamente sobre este fondo. */

/* --------------------------------------------------- 3. Puesta en escena   Sólo se activa cuando landscape.js marca la escena como cinematográfica
   (esta versión lo es). */
.is-cine .ss-scene {
    will-change: transform;
    animation: ssCamera 84s ease-in-out infinite alternate;
}

@keyframes ssCamera {
    from { transform: scale(1.015) translate3d(0, 0, 0); }
    to   { transform: scale(1.070) translate3d(-1.7%, -1.3%, 0); }
}

.is-cine .ss-art .ss-halo {
    transform-origin: center;
    animation: ssHaloBreath 19s ease-in-out infinite;
}

@keyframes ssHaloBreath {
    0%, 100% { opacity: .72; }
    50%      { opacity: 1; }
}

/* ------------------------------------------------- 4. Responsive / a11y */

@media (prefers-reduced-motion: reduce) {
    .is-cine .ss-scene { animation: none !important; transform: none !important; }
    .is-cine .ss-art .ss-halo { animation: none !important; }
    .ss-mist i,
    .ss-blooms i,
    .ss-birds svg,
    .ss-birds path { animation: none !important; }
    .ss-blooms i { opacity: .35; }
}