/* =================================================
   tuterraceo.es — Page: Home
   Landing page: Three.js canvas + glass-morphism UI
   ================================================= */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(180deg, rgb(2,6,23) 0%, rgb(12,10,24) 100%);
    min-height: 100vh;
    width: 100%;
    overflow-x: hidden;
    color: #fff;
}

/* ── Keyframes de entrada (progressive enhancement) ──
   Permite que #hero-content y #cta-card animen fade-in sin depender de JS.
   animation-fill-mode: backwards (via shorthand "both") garantiza que el
   estado inicial del keyframe se aplique antes de que empiece la animación,
   y el estado final tras completarse — visible incluso si el browser no
   puede ejecutar la animación. */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(2rem); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInUpLarge {
    from { opacity: 0; transform: translateY(3rem); }
    to   { opacity: 1; transform: translateY(0); }
}

#canvas-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 10;
    pointer-events: none;
}

main {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 8vh;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: center;
}

@media (min-width: 768px) { main { padding-top: 12vh; } }

#hero-content {
    position: relative;
    /* Issue #162: z-index elevado por encima de #canvas-container (z-index 10)
       para que el título y subtítulo permanezcan visibles sobre la escena
       Three.js en mobile, donde el sol y la terraza se renderizan con mayor
       densidad relativa al viewport y tapaban el texto.
       #cta-card mantiene z-index:20 — sigue apilado por encima del hero. */
    z-index: 15;
    margin-bottom: 3.5rem;
    opacity: 1;
    animation: fadeInUp 2000ms ease-out 300ms both;
}

@media (min-width: 768px) { #hero-content { margin-bottom: 3rem; } }

#main-title {
    font-weight: 800;
    font-size: 4rem;
    letter-spacing: -0.05em;
    line-height: 0.85;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

@media (min-width: 640px)  { #main-title { font-size: 5rem; } }
@media (min-width: 1024px) { #main-title { font-size: 7rem; } }
@media (min-width: 768px)  { #main-title { margin-bottom: 1.5rem; } }

#sub-title {
    font-size: 0.875rem;
    font-weight: 600;
    max-width: 260px;
    margin: 0 auto;
    opacity: 0.8;
}

@media (min-width: 640px)  { #sub-title { font-size: 1rem;    max-width: 28rem; } }
@media (min-width: 1024px) { #sub-title { font-size: 1.125rem; } }

#cta-card {
    position: relative;
    z-index: 20;
    width: 100%;
    max-width: 320px;
    padding: 1.5rem;
    border-radius: 1.5rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    opacity: 1;
    animation: fadeInUpLarge 2000ms ease-out 600ms both;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    #cta-card { max-width: 24rem; padding: 2rem; border-radius: 2rem; gap: 0.85rem; }
}

#btn-guest {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    border: 1px solid;
    transition: opacity 200ms, transform 200ms;
    cursor: pointer;
    background: #fff;
    color: rgb(2,6,23);
    border-color: #fff;
}

@media (min-width: 640px) { #btn-guest { height: 3.5rem; font-size: 0.95rem; } }
#btn-guest:hover  { opacity: 0.8; }
#btn-guest:active { transform: scale(0.98); }

/* ── Botones secundarios: login, registro, perfil ── */
#btn-login,
#btn-registro,
#btn-perfil {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 2.75rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.45);
    color: #fff;
    transition: opacity 200ms, transform 200ms, background 200ms;
    cursor: pointer;
}

@media (min-width: 640px) {
    #btn-login,
    #btn-registro,
    #btn-perfil { height: 3rem; font-size: 0.9rem; }
}

#btn-login:hover,
#btn-registro:hover,
#btn-perfil:hover {
    opacity: 0.85;
    background: rgba(255,255,255,0.06);
}

#btn-login:active,
#btn-registro:active,
#btn-perfil:active { transform: scale(0.98); }

/* ── Compactación mobile (#162) ──
   En viewports ≤ 480px el título "tuterraceo" + la #cta-card con 3 botones
   caía parcialmente fuera del viewport visible en móviles tipo iPhone SE
   (375×667) cuando el navegador mostraba la barra de URL. Reducimos el
   padding superior del <main>, el tamaño del título, el margen inferior del
   hero y la altura de los botones de la card para que todo quepa sin scroll.
   No se toca ninguna regla del #canvas-container ni del efecto de sol/sombra. */
@media (max-width: 480px) {
    main {
        padding-top: 5vh;
    }

    #hero-content {
        margin-bottom: 1.75rem;
    }

    #main-title {
        font-size: 3rem;
    }

    #cta-card {
        padding: 1.25rem;
        gap: 0.6rem;
    }

    #btn-guest {
        height: 2.75rem;
    }

    #btn-login,
    #btn-registro,
    #btn-perfil {
        height: 2.5rem;
    }
}

/* ── Accesibilidad: respetar preferencia de reduced motion ──
   Si el usuario tiene activa la preferencia de sistema para reducir el
   movimiento, deshabilitamos las animaciones de entrada. Los elementos
   quedan visibles directamente (opacity: 1 base) sin transición. */
@media (prefers-reduced-motion: reduce) {
    #hero-content,
    #cta-card { animation: none; }

    /* Issue #114: con reduced-motion el IIFE de Three.js devuelve temprano
       y no crea el canvas. Como belt-and-suspenders, ocultamos el contenedor
       del canvas para que no quede ningún artefacto visual si por algún
       motivo el IIFE no pudiera devolver temprano. El body mantiene su
       gradiente estático definido al principio del fichero. */
    #canvas-container { display: none; }
}