/* ============================================================
   RUBIKU GO · LOGIN
   VHS / MOVING EDUCATION IDENTITY
   ============================================================ */

:root {

    /* --------------------------------------------------------
       CORE
       -------------------------------------------------------- */

    --go-dark: #080512;
    --go-panel: #12101c;

    --go-primary: #8b5cf6;
    --go-accent: #d8b4fe;

    /* --------------------------------------------------------
       VHS PALETTE
       -------------------------------------------------------- */

    --vhs-yellow: #FAD616;
    --vhs-orange: #FA770B;
    --vhs-red: #F7192C;
    --vhs-purple: #A80BBD;
    --vhs-deep-purple: #5505B2;

    /* --------------------------------------------------------
       TEXT
       -------------------------------------------------------- */

    --text-main: #ffffff;
    --text-muted: rgba(255, 255, 255, .62);

    --border: rgba(255, 255, 255, .09);

    /* --------------------------------------------------------
       MOTION
       -------------------------------------------------------- */

    --ease-vhs: cubic-bezier(.16, 1, .3, 1);

    --transition:
        all .3s cubic-bezier(.4, 0, .2, 1);
}


/* ============================================================
   RESET
   ============================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font-family: 'Space Grotesk', sans-serif;
}


html,
body {
    width: 100%;
    min-height: 100%;
}


body {

    background:
        #080512;

    color: var(--text-main);

    min-height: 100vh;

    overflow-x: hidden;
}


/* ============================================================
   MAIN SPLIT
   ============================================================ */

.split-container {

    width: 100%;
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}


/* ============================================================
   SHOWCASE
   ============================================================ */

.retro-bg {

    position: relative;

    flex: 1;

    min-height: 55vh;

    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;

    isolation: isolate;

    background:
        radial-gradient(circle at 50% 45%, rgba(91, 0, 140, .12), transparent 45%),
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px),
        #080512;

    background-size:
        auto,
        30px 30px,
        30px 30px,
        auto;

    background-position:
        center,
        center,
        center,
        center;
}


/* ============================================================
   LOGO
   ============================================================ */

.brand-logo {

    position: absolute;

    top: 3rem;
    left: 3rem;

    width: 220px;

    z-index: 50;

    opacity: 0;

    animation:
        contentReveal 1s 2.4s var(--ease-vhs) forwards;

    filter:
        drop-shadow(0 10px 30px rgba(0, 0, 0, .45));
}


/* ============================================================
   ============================================================
   VHS VERTICAL SVG
   ============================================================
   ============================================================ */


/*
    MUY IMPORTANTE:

    El SVG NO se mueve.

    No translateY.
    No rotateX.
    No scale.
    No perspective.

    La geometría ya está diseñada en Corel.

    Solo hacemos un REVEAL.
*/


/* Opacidad al 50% para las líneas verticales */
.vhs-vertical-svg {
    opacity: 0.5;
}


.vhs-vertical-container {

    position: absolute;

    /*
       El SVG permanece exactamente aquí.
    */

    top: 0;
    left: 48%;

    width: min(420px, 34vw);
    height: 100%;

    transform: translateX(-50%);

    z-index: 5;

    pointer-events: none;

    /*
       El SVG aparece como una sola pieza.
    */

    opacity: 1;

    /*
       Esto crea el reveal.
    */

    clip-path:
        inset(0 0 100% 0);

    animation:

        verticalReveal 2.2s .15s cubic-bezier(.55,
            .05,
            .15,
            1) forwards;
}


/*
    SVG REAL

    Si utilizas <img src="...">
    esta regla lo controla.

    Si el SVG está directamente dentro
    del HTML también funciona con el selector.
*/

.vhs-vertical-container img,
.vhs-vertical-container svg {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    /*
       NO transformar.
    */

    transform: none;

    /*
       Un poquito de glow.
    */

    filter:

        drop-shadow(0 0 5px rgba(255, 255, 255, .08));

}


/* ============================================================
   VERTICAL REVEAL
   ============================================================ */


/*
    Aquí está la magia.

    El SVG no baja.

    Simplemente vamos descubriéndolo.
*/


@keyframes verticalReveal {

    /*
       INICIO

       Invisible geométricamente.
    */

    0% {

        clip-path:
            inset(0 0 100% 0);
    }


    /*
       Primer tramo:

       lento.

       La sensación es:
       "está lejos..."
    */



    /*
       Punto de cambio.

       Aquí empieza a sentirse
       que el movimiento viene hacia nosotros.
    */



    /*
       ACELERACIÓN.

       El SVG empieza a aparecer
       mucho más rápido.
    */




    /*
       ENTRADA FINAL.
    */



    /*
       Pantalla completa.
    */

    100% {

        clip-path:
            inset(0 0 0 0);
    }
}


/* ============================================================
   VERTICAL "ENERGY"
   ============================================================ */


/*
   Una pequeña segunda capa de luz.

   NO mueve el SVG.

   Solo hace que parezca que las líneas
   están atravesando energía.
*/

.vhs-vertical-container::after {

    content: "";

    position: absolute;

    left: 0;
    right: 0;

    top: 0;

    height: 18%;

    pointer-events: none;

    background:

        linear-gradient(to bottom,
            transparent,
            rgba(255, 255, 255, .10),
            transparent);

    opacity: 0;

    animation:

        verticalEnergy .7s 1.15s ease-out forwards;
}


@keyframes verticalEnergy {

    0% {

        opacity: 0;

        transform:
            translateY(-100%);
    }

    20% {

        opacity: .8;
    }

    100% {

        opacity: 0;

        transform:
            translateY(500%);
    }
}


/* ============================================================
   HORIZONTAL SVG
   ============================================================ */


/*
    Igual que las verticales:

    EL SVG NO SE MUEVE.
*/


.vhs-horizontal-container {

    position: absolute;

    left: 0;
    top: 50%;

    width: 100%;
    height: 160px;

    transform: translateY(-50%);

    z-index: 10;

    pointer-events: none;

    overflow: visible;

    opacity: 0;

    animation:

        horizontalAppear .7s 1.75s var(--ease-vhs) forwards;
}


.vhs-horizontal-container img,
.vhs-horizontal-container svg {

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    transform: none;
}


/* ============================================================
   HORIZONTAL APPEAR
   ============================================================ */


@keyframes horizontalAppear {

    0% {

        opacity: 0;

        clip-path:
            inset(0 100% 0 0);
    }

    55% {

        opacity: 1;

        clip-path:
            inset(0 35% 0 0);
    }

    100% {

        opacity: 1;

        clip-path:
            inset(0 0 0 0);
    }
}




/* ============================================================
   EFECTO LEDS PARPADEANDO (GLITCH)
   ============================================================ */

/* Animación base para los cuadros pequeños */
.interference rect {
    animation: ledFlicker 3s infinite;
    transform-origin: center;
}

/* Desfasamos los tiempos para que parezca aleatorio y tecnológico */
.interference rect:nth-child(2n) {
    animation-duration: 1.8s;
    animation-delay: 0.2s;
}

.interference rect:nth-child(3n) {
    animation-duration: 4.2s;
    animation-delay: 0.7s;
}

.interference rect:nth-child(5n) {
    animation-duration: 2.4s;
    animation-delay: 0.5s;
    animation-direction: reverse;
}

/* Fotogramas del parpadeo eléctrico */
@keyframes ledFlicker {

    0%,
    15%,
    17%,
    19%,
    21%,
    50%,
    52%,
    100% {
        opacity: 1;
    }

    16%,
    18%,
    20%,
    51% {
        opacity: 0;
    }
}




/* ============================================================
   HORIZONTAL SIGNAL SWEEP
   ============================================================ */


/*
    IMPORTANTE:

    Esto NO es el SVG moviéndose.

    Es una luz que lo recorre.

    Por eso parece que las líneas
    tienen "carrera".
*/


.vhs-horizontal-container::before {

    content: "";

    position: absolute;

    top: -30%;

    left: -20%;

    width: 8%;

    height: 160%;

    z-index: 20;

    background:

        linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .30),
            transparent);

    filter:
        blur(4px);

    opacity: 0;

    animation:

        signalSweep 1.1s 2.25s cubic-bezier(.2,
            .7,
            .2,
            1) forwards;
}


@keyframes signalSweep {

    0% {

        opacity: 0;

        transform:
            translateX(0);
    }

    10% {

        opacity: .8;
    }

    100% {

        opacity: 0;

        transform:
            translateX(1500%);
    }
}


/* ============================================================
   GLITCH / INTERFERENCE
   ============================================================ */


/*
   Aquí aprovechamos TU SVG horizontal.

   Los cuadrados negros ya están diseñados
   perfectamente.

   NO los movemos.

   Solo hacemos que aparezcan / desaparezcan.
*/


.vhs-horizontal-container {

    /*
       Variables para controlar
       la frecuencia del glitch.
    */

    --glitch-opacity: 1;
}


/*
   Segunda capa de interferencia.

   El SVG permanece quieto.
*/


.vhs-horizontal-container::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 30;

    pointer-events: none;

    background:

        linear-gradient(transparent 0%,
            rgba(255, 255, 255, .08) 48%,
            transparent 52%);

    opacity: 0;

    animation:

        scanlineGlitch 4.5s 2.8s steps(1) infinite;
}


@keyframes scanlineGlitch {

    0%,
    86%,
    100% {

        opacity: 0;
    }

    87% {

        opacity: .18;
    }

    88% {

        opacity: 0;
    }

    89% {

        opacity: .32;
    }

    90% {

        opacity: 0;
    }
}


/* ============================================================
   EXTRA VHS FLASH
   ============================================================ */


/*
   Una pequeña interferencia global.

   Muy corta.

   Muy sutil.
*/


.retro-bg::after {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 40;

    background:
        radial-gradient(circle at 50% 45%, rgba(91, 0, 140, .12), transparent 45%),
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px),
        #080512;

    opacity: 0;

    animation:

        screenNoise 5s 3s steps(1) infinite;
}


@keyframes screenNoise {

    0%,
    90%,
    100% {

        opacity: 0;
    }

    91% {

        opacity: .3;
    }

    92% {

        opacity: 0;
    }

    93% {

        opacity: .08;
    }

    94% {

        opacity: 0;
    }
}


/* ============================================================
   SHOWCASE CONTENT
   ============================================================ */

.showcase-content {

    position: relative;

    z-index: 60;

    width: min(600px,
            80%);

    margin-left: 3rem;

    text-align: left;

    opacity: 0;

    animation:

        contentReveal 1.1s 2.45s var(--ease-vhs) forwards;
}


@keyframes contentReveal {

    from {

        opacity: 0;

        transform:
            translateY(18px);
    }

    to {

        opacity: 1;

        transform:
            translateY(0);
    }
}


/* ============================================================
   BRAND TAG
   ============================================================ */

.brand-tag {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding:
        7px 14px;

    border:

        1px solid rgba(250, 214, 22, .55);

    color:
        var(--vhs-yellow);

    border-radius:
        999px;

    font-size:
        .75rem;

    font-weight:
        700;

    margin-bottom:
        1.5rem;

    text-transform:
        uppercase;

    letter-spacing:
        2px;

    background:
        rgba(250, 214, 22, .07);

    backdrop-filter:
        blur(8px);
}


/* ============================================================
   MAIN TITLE
   ============================================================ */

.main-title {

    color: #ffffff;

    font-size:
        clamp(2.5rem,
            6vw,
            4.5rem);

    line-height:
        1.02;

    font-weight:
        700;

    letter-spacing:
        -2px;

    margin-bottom:
        1.5rem;

    text-shadow:

        0 4px 25px rgba(0, 0, 0, .7);
}


/* ============================================================
   DESCRIPTION
   ============================================================ */

.main-desc {

    color:
        rgba(255, 255, 255, .78);

    font-size:
        1.05rem;

    line-height:
        1.65;

    max-width:
        520px;

    background:
        rgba(8, 5, 18, .55);

    padding:
        1rem 1.2rem;

    border-radius:
        16px;

    border:
        1px solid rgba(255, 255, 255, .06);

    backdrop-filter:
        blur(12px);
}


/* ============================================================
   ============================================================
   LOGIN PANEL
   ============================================================
   ============================================================ */

.side-login {

    flex: 1;

    background:

        radial-gradient(circle at 50% 40%,
            rgba(139, 92, 246, .08),
            transparent 50%),

        var(--go-dark);

    display:

        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        3rem 2rem;

    position:
        relative;
}


/* ============================================================
   FORM CONTAINER
   ============================================================ */

.form-container {

    width:
        100%;

    max-width:
        400px;
}


/* ============================================================
   FORM HEADER
   ============================================================ */

.form-header {

    margin-bottom:
        2.5rem;
}


.form-title {

    color:
        #ffffff;

    font-size:
        2.2rem;

    font-weight:
        700;

    margin-bottom:
        .5rem;

    letter-spacing:
        -1px;
}


/* Logo GO a 40° (con sus rayas animadas) justo al lado de «Iniciar Sesión» */
.form-title { display: flex; align-items: center; gap: .3em; flex-wrap: nowrap; white-space: nowrap; }
.form-title-go { height: 2.9em; width: auto; flex: none; margin: -.95em -.6em -.4em -.55em; filter: drop-shadow(0 6px 14px rgba(103, 183, 245, .25)); }

.form-subtitle {

    color:
        rgba(255, 255, 255, .58);

    font-size:
        1rem;
}


/* ============================================================
   FORM GROUP
   ============================================================ */

.form-group {

    margin-bottom:
        1.7rem;

    transition:
        var(--transition);
}


/* ============================================================
   LABEL
   ============================================================ */

.form-label {

    display:
        block;

    color:
        rgba(255, 255, 255, .65);

    font-size:
        .8rem;

    font-weight:
        600;

    margin-bottom:
        .6rem;

    text-transform:
        uppercase;

    letter-spacing:
        .7px;
}


/* ============================================================
   INPUT
   ============================================================ */

.form-input {

    width:
        100%;

    padding:
        1.05rem 1.1rem;

    background:
        rgba(255, 255, 255, .045);

    border:
        1px solid rgba(255, 255, 255, .09);

    border-radius:
        18px;

    color:
        #ffffff;

    font-size:
        1rem;

    outline:
        none;

    transition:
        var(--transition);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .03);
}


.form-input::placeholder {

    color:
        rgba(255, 255, 255, .3);
}


.form-input:focus {

    border-color:
        rgba(168, 11, 189, .7);

    background:
        rgba(255, 255, 255, .065);

    box-shadow:

        0 0 0 4px rgba(168, 11, 189, .10),

        0 8px 30px rgba(0, 0, 0, .18);
}


/* ============================================================
   PASSWORD ICON
   ============================================================ */

.password-toggle-icon {

    position:
        absolute;

    right:
        18px;

    top:
        50%;

    transform:
        translateY(-50%);

    cursor:
        pointer;

    color:
        rgba(255, 255, 255, .45);

    font-size:
        1.3rem;

    transition:
        var(--transition);

    padding:
        5px;
}


.password-toggle-icon:hover {

    color:
        var(--vhs-yellow);

    transform:
        translateY(-50%) scale(1.08);
}


/* ============================================================
   BUTTON
   ============================================================ */

.btn-primary {

    width:
        100%;

    padding:
        1.1rem;

    background:

        linear-gradient(135deg,
            var(--vhs-purple),
            var(--vhs-red));

    border:
        none;

    border-radius:
        18px;

    color:
        #ffffff;

    font-weight:
        700;

    font-size:
        1rem;

    cursor:
        pointer;

    transition:
        var(--transition);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    box-shadow:
        0 10px 30px rgba(168, 11, 189, .12);
}


.btn-primary:hover:not(:disabled) {

    transform:
        translateY(-3px);

    box-shadow:

        0 15px 35px rgba(216, 0, 50, .25);
}


.btn-primary:active:not(:disabled) {

    transform:
        translateY(-1px);
}


/* ============================================================
   TRUST
   ============================================================ */

.login-trust {

    margin-top:
        1.5rem;

    font-size:
        .8rem;

    color:
        rgba(255, 255, 255, .45);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;
}


/* ============================================================
   FOOTER
   ============================================================ */

.form-footer {

    margin-top:
        2.5rem;

    text-align:
        center;

    border-top:
        1px solid rgba(255, 255, 255, .07);

    padding-top:
        2rem;

    color:
        rgba(255, 255, 255, .55);
}


.link {

    color:
        var(--vhs-yellow);

    text-decoration:
        none;

    font-weight:
        600;

    transition:
        var(--transition);
}


.link:hover {

    color:
        #ffffff;

    text-decoration:
        underline;
}


.footer-badge {

    margin-top:
        1.5rem;

    font-size:
        .75rem;

    color:
        rgba(255, 255, 255, .35);

    opacity:
        .8;
}


/* ============================================================
   MODAL
   ============================================================ */

.modal-overlay {

    position:
        fixed;

    inset:
        0;

    background:
        rgba(8, 5, 18, .92);

    display:
        none;

    justify-content:
        center;

    align-items:
        center;

    z-index:
        2000;

    backdrop-filter:
        blur(10px);
}


.modal-content {

    background:
        #12101c;

    padding:
        3rem;

    border-radius:
        28px;

    border:
        1px solid rgba(255, 255, 255, .08);

    text-align:
        center;

    max-width:
        420px;

    width:
        90%;

    box-shadow:
        0 30px 80px rgba(0, 0, 0, .5);
}


.modal-icon-wrapper {

    width:
        80px;

    height:
        80px;

    border-radius:
        50%;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        2.5rem;

    margin:
        0 auto 2rem;
}


.modal-title {

    color:
        #ffffff;
}


.modal-message {

    color:
        rgba(255, 255, 255, .65);

    margin-top:
        .5rem;
}


.status-success {

    background:
        rgba(16, 185, 129, .15);

    color:
        #10b981;
}


.status-error {

    background:
        rgba(239, 68, 68, .15);

    color:
        #ef4444;
}


/* ============================================================
   DESKTOP
   ============================================================ */

@media (min-width: 1024px) {

    .split-container {

        flex-direction:
            row;
    }


    .retro-bg {

        flex:
            1.2;

        min-height:
            100vh;

        padding:
            5rem;
    }


    .side-login {

        flex:
            .8;

        min-height:
            100vh;

        border-left:
            1px solid rgba(255, 255, 255, .06);
    }


    .form-container {

        padding:
            2rem;
    }


    /*
       En escritorio podemos hacer
       que el SVG tenga una presencia
       más grande.
    */

    .vhs-vertical-container {

        width:
            min(520px, 42vw);
    }


    .vhs-horizontal-container {

        height:
            180px;
    }
}


/* ============================================================
   TABLET / MOBILE
   ============================================================ */

@media (max-width: 1023px) {

    .vhs-vertical-container {

        left:
            50%;

        width:
            360px;
    }


    .showcase-content {

        margin-left:
            0;

        margin-top:
            3rem;

        text-align:
            center;
    }


    .brand-tag {

        margin-left:
            auto;

        margin-right:
            auto;
    }


    .main-desc {

        margin:
            auto;
    }


    .brand-logo {

        left:
            50%;

        transform:
            translateX(-50%);

        width:
            180px;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 600px) {

    .retro-bg {

        min-height:
            65vh;
    }


    .vhs-vertical-container {

        width:
            280px;
    }


    .vhs-horizontal-container {

        height:
            120px;
    }


    .brand-logo {

        top:
            2rem;

        width:
            160px;
    }


    .showcase-content {

        width:
            88%;

        margin-top:
            4rem;
    }


    .main-title {

        font-size:
            2.4rem;
    }


    .main-desc {

        font-size:
            .95rem;
    }


    .side-login {

        padding:
            2.5rem 1.2rem;
    }
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;
    }
}


/* 🚗 El auto de Rubiku (oct-2026): video con transparencia real (/go/login/assets/auto-rubiku-alpha.webm) que llega,
   saluda y al final se acerca hacia quien mira hasta salir de la pantalla (js/login-car.js lo sincroniza). Una vez. */
.sa-car {
    position: fixed; left: 2vw; bottom: 0; width: min(50vw, 820px); height: auto; z-index: 100;
    pointer-events: none; transform-origin: 58% 100%; will-change: transform, opacity, filter;
    opacity: 0; transition: opacity .4s ease;
    /* Bordes suaves: cuando el auto ya no cabe en la toma original, su corte no se ve como una línea dura */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%), linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, transparent 0, #000 16%), linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-composite: intersect;
}
.sa-car.on { opacity: 1; }
.sa-car.gone { display: none; }
@media (max-width: 1023px) { .sa-car { display: none; } }
@media (prefers-reduced-motion: reduce) { .sa-car { display: none; } }