/*
 * La fachada del Museo (11 nov 2026, docs/museo.md), sin Three.js: la pinta fachadaMuseoHtml() de
 * public/assets/js/socio/museo-fachada.js, donde está explicado cómo se usa. La cargan el museo del socio
 * (su entrada) y cualquier pantalla que enseñe el museo sin el 3D (la portada de Comunidad, la Junta).
 *
 * Va por capas, cada una a su profundidad: el muro con la puerta al fondo, los estandartes, las columnas, el
 * frontón con el nombre y los escalones delante. Al girar el edificio (--giro-x, --giro-y) cada capa se mueve
 * distinto. Quieto, todo cuadra como un dibujo plano: cada capa se encoge lo justo para compensar que está más
 * cerca (scale = 1 - z / perspectiva). Las medidas van en cqi: se adapta al ancho que le den.
 *
 *  1. Letra, colores y el cielo de noche
 *  2. El edificio y sus capas
 *  3. La puerta
 *  4. Movimiento reducido
 */

/* #region 1. Letra, colores y el cielo de noche */
@font-face {
    font-family: "Cormorant Garamond";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("/assets/fuentes/cormorant-garamond.woff2") format("woff2");
}

.museo-fachada3d {
    --fachada-letra: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --fachada-piedra-clara: #f1e9d8;
    --fachada-piedra: #d7cab0;
    --fachada-piedra-oscura: #a6977a;
    --fachada-oro: linear-gradient(135deg, #fbe9a6 0%, #c8973a 28%, #f6d77f 50%, #94681f 72%, #e9c66b 100%);
    --fachada-perspectiva: 120;
    position: relative;
    isolation: isolate;
    container-type: inline-size;
    width: 100%;
    padding: 9% 5% 0;
    user-select: none;
}

/* El cielo de noche, para el fondo de alrededor (la entrada del museo, a toda la pantalla). */
.museo-noche {
    background:
        radial-gradient(ellipse 70% 40% at 50% 100%, rgb(255 188 100 / 0.26), transparent 70%),
        radial-gradient(circle 60px at 84% 13%, #fffaf0 0 15px, rgb(255 246 220 / 0.22) 17px, rgb(255 246 220 / 0.05) 34px, transparent 60px),
        linear-gradient(180deg, #05070f 0%, #0d1328 45%, #1c1a2b 78%, #2a2027 100%);
}

.museo-fachada3d__cielo {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    /* Quien la pone sobre otro fondo: --fachada-cielo: transparent. */
    background: var(--fachada-cielo,
        radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 28% 8%, #fff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 45% 22%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 63% 12%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 72% 30%, #fff 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 90% 20%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 7% 38%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 36% 40%, #fff 50%, transparent 51%),
        radial-gradient(ellipse 70% 40% at 50% 100%, rgb(255 188 100 / 0.26), transparent 70%),
        linear-gradient(180deg, #05070f 0%, #0d1328 45%, #1c1a2b 78%, #2a2027 100%));
}
/* #endregion */

/* #region 2. El edificio y sus capas */
.museo-fachada3d__escena {
    perspective: calc(var(--fachada-perspectiva) * 1cqi);
    perspective-origin: 50% 60%;
}

.museo-fachada3d__mundo {
    position: relative;
    width: 100%;
    aspect-ratio: 10 / 8.6;
    transform-style: preserve-3d;
    transform: rotateX(var(--giro-x, 0deg)) rotateY(var(--giro-y, 0deg));
    transform-origin: 50% 60%;
}

/* Cada capa, a su profundidad (--z, en cqi) y encogida lo justo para que, quieta, cuadre con las demás. */
.museo-fachada3d__capa {
    --z: 0;
    position: absolute;
    inset: 0;
    transform: translateZ(calc(var(--z) * 1cqi)) scale(calc(1 - var(--z) / var(--fachada-perspectiva)));
    transform-origin: 50% 60%;
    pointer-events: none;
}

/* El muro del fondo, entre las columnas, con la puerta. */
.museo-fachada3d__muro {
    inset: 32% 8% 14%;
    background:
        linear-gradient(180deg, rgb(0 0 0 / 0.42), transparent 26%),
        repeating-linear-gradient(180deg, transparent 0 12.4%, rgb(0 0 0 / 0.12) 12.4% 12.9%),
        linear-gradient(180deg, #9a8b6c, #7a6d55);
    box-shadow: inset 0 0 4cqi rgb(0 0 0 / 0.5);
}

.museo-fachada3d__estandartes,
.museo-fachada3d__columnas {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr 2.7fr 1fr 1.1fr 1fr;
    inset: 32% 5% 14%;
}

.museo-fachada3d__estandartes {
    --z: 2.5;
}

.museo-fachada3d__columnas {
    --z: 5;
}

.museo-fachada3d__columnas span {
    position: relative;
    margin: 9% 20% 3%;
    border-radius: 1px;
    background:
        linear-gradient(90deg, rgb(0 0 0 / 0.34), transparent 28%, rgb(255 255 255 / 0.16) 45%, transparent 62%, rgb(0 0 0 / 0.38)),
        repeating-linear-gradient(90deg, #efe6d1 0 9%, #cbbd9d 9% 12%, #f4ecda 12% 20%);
    box-shadow: 1.2cqi 1.6cqi 2cqi rgb(0 0 0 / 0.45);
}

.museo-fachada3d__columnas span:nth-child(1) { grid-column: 1; }
.museo-fachada3d__columnas span:nth-child(2) { grid-column: 3; }
.museo-fachada3d__columnas span:nth-child(3) { grid-column: 5; }
.museo-fachada3d__columnas span:nth-child(4) { grid-column: 7; }

/* El capitel y la basa. */
.museo-fachada3d__columnas span::before,
.museo-fachada3d__columnas span::after {
    content: "";
    position: absolute;
    left: -26%;
    right: -26%;
    background: linear-gradient(180deg, var(--fachada-piedra-clara), var(--fachada-piedra-oscura));
    box-shadow: 0 0.3cqi 0.5cqi rgb(0 0 0 / 0.35);
}

.museo-fachada3d__columnas span::before {
    top: -7%;
    height: 6%;
    border-radius: 0.4cqi 0.4cqi 40% 40%;
}

.museo-fachada3d__columnas span::after {
    bottom: -3%;
    height: 4%;
    border-radius: 0.3cqi;
}

/* Los estandartes, del color de la asociación, con su escudo; ondean despacio. */
.museo-fachada3d__estandarte {
    position: relative;
    grid-column: 2;
    justify-self: center;
    display: grid;
    justify-items: center;
    align-content: start;
    width: 82%;
    height: 66%;
    margin-top: 12%;
    padding-top: 26%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
    background:
        repeating-linear-gradient(90deg, rgb(0 0 0 / 0.18) 0 2px, transparent 2px 9px, rgb(255 255 255 / 0.07) 9px 11px, transparent 11px 18px),
        linear-gradient(90deg, rgb(0 0 0 / 0.38), transparent 35%, transparent 65%, rgb(0 0 0 / 0.38)),
        var(--marca-fondo, #7a1b25);
    transform-origin: 50% 0;
    animation: museo-fachada-ondear 6s ease-in-out infinite;
}

.museo-fachada3d__estandarte + .museo-fachada3d__estandarte {
    grid-column: 6;
    animation-delay: -3s;
}

.museo-fachada3d__estandarte::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 7%;
    background: var(--fachada-oro);
}

.museo-fachada3d__escudo,
.museo-fachada3d__medallon {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fffbe8, #f1e5c4);
}

.museo-fachada3d__escudo {
    width: 70%;
    box-shadow: 0 0 0 0.35cqi #c9a65a;
}

.museo-fachada3d__escudo img,
.museo-fachada3d__medallon img {
    width: 82%;
    height: 82%;
    object-fit: contain;
}

.museo-fachada3d__iniciales {
    color: #6b4c14;
    font-family: var(--fachada-letra);
    font-size: 3cqi;
    font-weight: 700;
    letter-spacing: 0.04em;
}

@keyframes museo-fachada-ondear {
    0%, 100% { transform: rotate(-1.2deg) skewX(0.6deg); }
    50% { transform: rotate(1.2deg) skewX(-0.6deg); }
}

/* Arriba: el frontón con el medallón del escudo y el friso con el nombre en oro. */
.museo-fachada3d__arriba {
    --z: 6;
    inset: 0 0 auto;
    height: 33%;
}

.museo-fachada3d__fronton {
    position: absolute;
    inset: 0 4% 33%;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: linear-gradient(180deg, var(--fachada-piedra-clara), var(--fachada-piedra) 75%, var(--fachada-piedra-oscura));
}

.museo-fachada3d__fronton::before {
    content: "";
    position: absolute;
    inset: 15% 9% 9%;
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: linear-gradient(180deg, #cdbf9f, #b8a884);
}

.museo-fachada3d__medallon {
    position: absolute;
    left: 50%;
    bottom: 9%;
    z-index: 1;
    width: 13%;
    box-shadow: 0 0 0 0.45cqi #b98b31, 0 0 0 0.75cqi #6f5017, 0 0.6cqi 1.6cqi rgb(0 0 0 / 0.4);
    transform: translateX(-50%);
}

.museo-fachada3d__friso {
    position: absolute;
    inset: 67% 1% 0;
    display: grid;
    place-content: center;
    gap: 0.3cqi;
    border-block: 0.5cqi solid #b6a580;
    background: linear-gradient(180deg, #ece3cf, #d2c4a5);
    text-align: center;
    box-shadow: 0 1.2cqi 1.8cqi -0.6cqi rgb(0 0 0 / 0.45);
}

.museo-fachada3d__nombre {
    margin: 0;
    overflow: hidden;
    max-width: 92cqi;
    font-family: var(--fachada-letra);
    font-size: clamp(0.7rem, 5.4cqi, 2.4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0.18em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    background: linear-gradient(180deg, #a77b25 0%, #e7c46d 45%, #8e6418 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.museo-fachada3d__desde {
    color: #7d6941;
    font-family: Inter, system-ui, sans-serif;
    font-size: clamp(0.45rem, 1.7cqi, 0.8rem);
    font-weight: 700;
    letter-spacing: 0.45em;
    text-transform: uppercase;
}

.museo-fachada3d__desde[hidden] {
    display: none;
}

/* Los escalones, delante del todo, con la luz de la puerta encima. */
.museo-fachada3d__escalones {
    --z: 8;
    inset: 86% 0 0;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    justify-items: center;
}

.museo-fachada3d__escalones span {
    display: block;
    height: 100%;
    background:
        radial-gradient(ellipse 30% 140% at 50% 0%, rgb(255 205 130 / 0.38), transparent 70%),
        linear-gradient(180deg, var(--fachada-piedra-clara), var(--fachada-piedra-oscura));
    box-shadow: 0 0.4cqi 0.6cqi rgb(0 0 0 / 0.4);
}

.museo-fachada3d__escalones span:nth-child(1) { width: 90%; }
.museo-fachada3d__escalones span:nth-child(2) { width: 96%; }
.museo-fachada3d__escalones span:nth-child(3) { width: 102%; }
/* #endregion */

/* #region 3. La puerta */
.museo-fachada3d__puerta {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 24%;
    height: 74%;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 50% 50% 0 0 / 28% 28% 0 0;
    background: #1a120a;
    box-shadow: 0 0 0 0.9cqi #d6c7a6, 0 0 0 1.3cqi #a89773, inset 0 1.5cqi 3cqi rgb(0 0 0 / 0.6);
    transform: translateX(-50%);
    perspective: 60cqi;
    pointer-events: auto;
}

button.museo-fachada3d__puerta {
    cursor: pointer;
}

button.museo-fachada3d__puerta:focus-visible {
    outline: 3px solid #f6d77f;
    outline-offset: 1.6cqi;
}

.museo-fachada3d__luz {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 70% at 50% 85%, #fff4d6 0%, #ffcf7f 35%, #c4772a 70%, #4a2b10 100%);
    opacity: 0.85;
    transition: opacity 0.8s ease, filter 0.8s ease;
}

.museo-fachada3d__hoja {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
    background:
        linear-gradient(90deg, rgb(0 0 0 / 0.35), transparent 18%, transparent 82%, rgb(0 0 0 / 0.4)),
        repeating-linear-gradient(90deg, #5a3519 0 7px, #6b4120 7px 12px, #4f2e15 12px 19px);
    box-shadow: inset 0 0 0 0.5cqi #3b220f;
    transition: transform 1.05s cubic-bezier(0.6, 0.02, 0.25, 1);
}

/* Los cuarterones y el llamador de cada hoja. */
.museo-fachada3d__hoja::before {
    content: "";
    position: absolute;
    inset: 22% 18% 10%;
    border: 0.4cqi solid rgb(30 16 6 / 0.7);
    background: linear-gradient(180deg, transparent 47%, rgb(30 16 6 / 0.7) 47% 53%, transparent 53%);
}

.museo-fachada3d__hoja::after {
    content: "";
    position: absolute;
    top: 52%;
    width: 1.3cqi;
    height: 1.3cqi;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff2b8, #b8892f 60%, #5e4210);
}

.museo-fachada3d__hoja--izquierda {
    left: 0;
    transform-origin: 0 50%;
}

.museo-fachada3d__hoja--izquierda::after {
    right: 10%;
}

.museo-fachada3d__hoja--derecha {
    right: 0;
    transform-origin: 100% 50%;
}

.museo-fachada3d__hoja--derecha::after {
    left: 10%;
}

/* Al pasar por encima, la puerta se entreabre. */
.museo-fachada3d__puerta:hover .museo-fachada3d__hoja--izquierda,
.museo-fachada3d__puerta:focus-visible .museo-fachada3d__hoja--izquierda {
    transform: rotateY(-16deg);
}

.museo-fachada3d__puerta:hover .museo-fachada3d__hoja--derecha,
.museo-fachada3d__puerta:focus-visible .museo-fachada3d__hoja--derecha {
    transform: rotateY(16deg);
}

/* Abierta de par en par, con la luz de dentro. */
.museo-fachada3d--abierta .museo-fachada3d__hoja--izquierda {
    transform: rotateY(-104deg);
}

.museo-fachada3d--abierta .museo-fachada3d__hoja--derecha {
    transform: rotateY(104deg);
}

.museo-fachada3d--abierta .museo-fachada3d__luz {
    opacity: 1;
    filter: brightness(1.5);
}
/* #endregion */

/* #region 4. Movimiento reducido */
.museo-fachada3d--quieta .museo-fachada3d__estandarte {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    .museo-fachada3d__estandarte {
        animation: none;
    }

    .museo-fachada3d__hoja,
    .museo-fachada3d__luz {
        transition: none;
    }
}
/* #endregion */