/* =========================================================================
   Login de Tartagoza — dirección final elegida (Recomendación 4+3+5):
     · Manchas de "aroma cálido" de fondo, aleatorias en cada carga.
     · El logo (tarta con corazón) se monta capa a capa al cargar la página.
     · Micro-interacciones dulces en el formulario.
   ========================================================================= */

/* --- Fondo ambiental: manchas de "aroma cálido" --- */
#la-bg-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

#la-blob-container {
    position: absolute;
    inset: 0;
}

/* Asegura que la tarjeta de login queda siempre por encima del fondo */
.card {
    position: relative;
    z-index: 1;
}

@keyframes la-blob-drift {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(3%, -4%) scale(1.08); }
    100% { transform: translate(0, 0) scale(1); }
}

.la-blob {
    position: absolute;
    border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%;
    filter: blur(46px);
    opacity: .5;
    background: var(--apl-secondary-color);
    animation-name: la-blob-drift;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.la-blob.la-blob-alt {
    background: var(--apl-tertiary-color);
    opacity: .32;
}

/* --- Micro-interacciones dulces del formulario --- */
.mb-3:focus-within label {
    color: var(--accent-color);
    transform: translateX(4px);
}

.mb-3 label {
    display: inline-block;
    transition: color .18s ease-in-out, transform .18s ease-in-out;
}

/* Resorte del icono del ojo: solo al pulsarlo de verdad, no forma parte
   de la demo automática. */
@keyframes la-icon-spring {
    0%   { transform: rotate(0) scale(1); }
    40%  { transform: rotate(18deg) scale(1.2); }
    100% { transform: rotate(0) scale(1); }
}

.la-icon-spring { display: inline-block; animation: la-icon-spring .5s ease; }

/* Rebote del botón para la demo automática al cargar: el :active real de
   root.css solo se puede disparar con una pulsación de verdad. Mientras
   rebota, cambia a --accent-color; el color de fondo de .btn-apl lleva
   !important en root.css, así que aquí también hace falta !important. */
@keyframes la-btn-bounce {
    0%   { transform: scale(1); }
    30%  { transform: scale(.94); }
    60%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

.la-btn-bounce { animation: la-btn-bounce .5s ease; }

.btn-apl.la-btn-bounce {
    background-color: var(--accent-color) !important;
}

/* --- Logo: estado base + animación de montaje por capas al cargar --- */
#tartagoza-logo { overflow: visible; }
#tartagoza-logo .logo-blob { fill: var(--apl-secondary-color); opacity: .55; }

#tartagoza-logo .cake-band,
#tartagoza-logo .cake-frosting,
#tartagoza-logo .cake-heart {
    opacity: 1;
}

@keyframes la-band-in {
    0%   { transform: translateY(24px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes la-frosting-in {
    0%   { transform: translateY(-18px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes la-heart-pop {
    0%   { transform: scale(0); opacity: 0; }
    65%  { transform: scale(1.3); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

#logo-cake-group.la-p3-play .cake-band {
    animation-name: la-band-in;
    animation-duration: .45s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

#logo-cake-group.la-p3-play .cake-frosting {
    animation-name: la-frosting-in;
    animation-duration: .45s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

#logo-cake-group.la-p3-play .cake-heart {
    transform-box: fill-box;
    transform-origin: center;
    animation-name: la-heart-pop;
    animation-duration: .5s;
    animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);
    animation-fill-mode: both;
}

/* El blob es lo último en aparecer: sale de un punto y "explota" hasta su
   tamaño real, con un pequeño rebote. El origen coincide con el centro real
   del blob ya posicionado (ver transform del <path class="logo-blob">). */
@keyframes la-blob-explode {
    0%   { transform: scale(0); opacity: 0; }
    55%  { transform: scale(1.12); opacity: 1; }
    75%  { transform: scale(.96); }
    100% { transform: scale(1); opacity: 1; }
}

#logo-blob-pop {
    transform-box: view-box;
    transform-origin: 99.5px 156.2px;
}

#logo-blob-pop.la-p3-play {
    animation-name: la-blob-explode;
    animation-duration: .6s;
    animation-timing-function: ease-out;
    animation-delay: 0.75s;
    animation-fill-mode: both;
}

/* Los fondos ambientales en bucle (manchas) respetan el movimiento reducido;
   la entrada del logo y las micro-interacciones del formulario son breves o
   están directamente provocadas por el usuario, así que se mantienen. */
@media (prefers-reduced-motion: reduce) {
    .la-blob {
        animation: none;
    }
}