/*
 * colesat.com mientras se construye el sitio: la intro de la página de COLESAT
 * (la del panel, resources/views/intro-colesat.blade.php) que termina en el
 * nombre y «En construcción» (Franco, 14-oct-2026).
 *
 * Lo de partida es la escena final, ya pintada: sin JavaScript o con «reducir
 * movimiento» se ve eso. colesat.js pone .ci-anima en <html> antes de pintar,
 * y solo entonces todo empieza escondido y entra con la animación.
 */

:root {
    --verde: #0BDB6B;
    --negro: #000;
    --curva: cubic-bezier(0.2, 0.9, 0.2, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--negro);
    color: #fff;
    font-family: 'Geist', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

#colesat-intro {
    position: fixed;
    inset: 0;
    overflow: hidden;
    perspective: 1100px;
    perspective-origin: 50% 50%;
}

.ci-anima #colesat-intro { cursor: pointer; }
.ci-anima #colesat-intro.ci-final { cursor: default; }

/* ── Los términos que vuelan ─────────────────────────────────────────── */

.ci-terminos {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    will-change: transform;
}

.ci-termino {
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: 'Geist', sans-serif;
    letter-spacing: -0.05em;
    color: #fff;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.5s ease-out;
    pointer-events: none;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.ci-termino.verde {
    color: var(--verde);
    text-shadow: 0 0 80px rgba(11, 219, 107, 0.7), 0 0 30px rgba(11, 219, 107, 0.5);
}

.ci-termino.contorno {
    color: transparent;
    -webkit-text-stroke: 1.8px rgba(255, 255, 255, 0.7);
}

/* ── El nombre ───────────────────────────────────────────────────────── */

.ci-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: max-content;
    max-width: calc(100vw - 2rem);
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}

.ci-anima .ci-logo {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.82);
    transition: opacity 0.9s cubic-bezier(0.2, 0.85, 0.15, 1), transform 1.1s cubic-bezier(0.2, 0.85, 0.15, 1);
}

.ci-anima .ci-logo.ci-dentro {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.ci-letras {
    margin: 0;
    font-family: 'Geist', sans-serif;
    /* 17vw y no los 19 de la intro del panel: con overflow, que esconde las
       letras mientras suben, la T se cortaba en el teléfono. */
    font-size: clamp(3.5rem, 17vw, 15rem);
    font-weight: 800;
    letter-spacing: -0.065em;
    line-height: 0.9;
    color: #fff;
    display: inline-flex;
    overflow: hidden;
    padding-bottom: 0.05em;
    text-shadow: 0 0 120px rgba(11, 219, 107, 0.25), 0 4px 40px rgba(0, 0, 0, 0.6);
}

.ci-letra { display: inline-block; }

.ci-anima .ci-letra {
    transform: translateY(110%);
    transition: transform 0.85s cubic-bezier(0.25, 0.9, 0.25, 1);
}

.ci-anima .ci-dentro .ci-letra { transform: translateY(0); }

.ci-siglas {
    display: flex;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    margin-top: clamp(1.5rem, 3vh, 2.5rem);
}

.ci-anima .ci-siglas {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.9s 1.1s var(--curva), transform 0.9s 1.1s var(--curva);
}

.ci-anima .ci-dentro .ci-siglas { opacity: 1; transform: translateY(0); }

.ci-parte {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.ci-clave {
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: clamp(0.8rem, 1.2vw, 1rem);
    font-weight: 700;
    color: var(--verde);
    letter-spacing: 0.2em;
}

.ci-union {
    width: 1px;
    height: 18px;
    background: linear-gradient(180deg, rgba(11, 219, 107, 0.6), rgba(255, 255, 255, 0.1));
}

.ci-nombre {
    font-size: clamp(0.7rem, 0.85vw, 0.8rem);
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.ci-lema {
    margin: 1.5rem 0 0;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.75rem;
    letter-spacing: 0.3em;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
}

.ci-anima .ci-lema { opacity: 0; transition: opacity 0.8s 1.8s; }
.ci-anima .ci-dentro .ci-lema { opacity: 1; }

/* ── En construcción ─────────────────────────────────────────────────── */

.ci-obra {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin: clamp(2rem, 5vh, 3rem) 0 0;
    padding: 0.7rem 1.4rem;
    border: 1px solid rgba(11, 219, 107, 0.35);
    border-radius: 999px;
    background: rgba(11, 219, 107, 0.06);
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: clamp(0.75rem, 1.1vw, 0.9rem);
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--verde);
}

.ci-anima .ci-obra {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.9s 2.5s var(--curva), transform 0.9s 2.5s var(--curva);
}

.ci-anima .ci-dentro .ci-obra { opacity: 1; transform: translateY(0); }

.ci-punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--verde);
    box-shadow: 0 0 12px rgba(11, 219, 107, 0.8);
    animation: ci-late 1.8s ease-in-out infinite;
}

@keyframes ci-late {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.35; transform: scale(0.75); }
}

/* ── Pie, barra y saltar ─────────────────────────────────────────────── */

.ci-pie {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    right: 2rem;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.ci-barra-fondo,
.ci-saltar,
.ci-destello,
.ci-anillo { display: none; }

.ci-anima .ci-barra-fondo {
    display: block;
    position: absolute;
    bottom: 6rem;
    left: 50%;
    transform: translateX(-50%);
    width: 240px;
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    transition: opacity 0.6s;
}

.ci-barra {
    height: 100%;
    background: var(--verde);
    transform-origin: left;
    transform: scaleX(0);
}

.ci-barra.ci-corre { transform: scaleX(1); }

.ci-anima .ci-saltar {
    display: block;
    position: absolute;
    top: 2rem;
    right: 2rem;
    z-index: 20;
    font-family: 'Geist Mono', ui-monospace, monospace;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem 1rem;
    transition: color 0.3s, opacity 0.6s;
}

.ci-saltar:hover,
.ci-saltar:focus-visible { color: #fff; outline: none; }

/* Al llegar al nombre ya no hay qué saltar ni cuánto falta. */
.ci-final .ci-saltar,
.ci-final .ci-barra-fondo { opacity: 0; pointer-events: none; }

.ci-anima .ci-destello {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* Sin filter: blur(). El desenfoque se calcula ya agrandado, a 30 veces,
       y WebKit se quedaba segundos pintándolo: en el iPhone la página se
       congelaba en negro antes del nombre (19-oct-2026). Lo difuso lo dan los
       degradados: el verde aquí y el centro blanco en ::before, que se apaga
       antes de que el destello crezca; si creciera, se vería gris. */
    background: radial-gradient(circle closest-side, rgba(11, 219, 107, 0.9) 0%, rgba(11, 219, 107, 0.6) 32%, rgba(11, 219, 107, 0.26) 62%, rgba(11, 219, 107, 0.07) 86%, rgba(11, 219, 107, 0) 100%);
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    z-index: 12;
    opacity: 0;
    mix-blend-mode: screen;
    will-change: transform, opacity;
}

.ci-anima .ci-destello::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle closest-side, #ffffff 0%, #d6ffe8 22%, rgba(214, 255, 232, 0.4) 46%, rgba(214, 255, 232, 0) 72%);
}

.ci-destello.ci-estalla { animation: ci-destello 1.4s cubic-bezier(0.2, 0.9, 0.2, 1) forwards; }
.ci-destello.ci-estalla::before { animation: ci-destello-centro 1.4s cubic-bezier(0.2, 0.9, 0.2, 1) forwards; }

@keyframes ci-destello {
    0%   { transform: translate(-50%, -50%) scale(0);  opacity: 0; }
    12%  { transform: translate(-50%, -50%) scale(4);  opacity: 1; }
    35%  { transform: translate(-50%, -50%) scale(14); opacity: 0.5; }
    100% { transform: translate(-50%, -50%) scale(30); opacity: 0; }
}

@keyframes ci-destello-centro {
    0%, 15%   { opacity: 1; }
    40%, 100% { opacity: 0; }
}

.ci-anima .ci-anillo {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid rgba(11, 219, 107, 0.9);
    transform: translate(-50%, -50%) scale(0);
    pointer-events: none;
    z-index: 11;
    opacity: 0;
    box-shadow: 0 0 40px rgba(11, 219, 107, 0.6), inset 0 0 40px rgba(11, 219, 107, 0.6);
}

.ci-anillo.ci-estalla { animation: ci-anillo 1.6s cubic-bezier(0.1, 0.7, 0.3, 1) forwards; }

@keyframes ci-anillo {
    0%   { transform: translate(-50%, -50%) scale(0);  opacity: 0;   border-width: 3px; }
    20%  { transform: translate(-50%, -50%) scale(2);  opacity: 1;   border-width: 2px; }
    60%  { transform: translate(-50%, -50%) scale(12); opacity: 0.4; border-width: 1px; }
    100% { transform: translate(-50%, -50%) scale(22); opacity: 0;   border-width: 0.5px; }
}

/* ── Teléfono ────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .ci-pie { flex-direction: column; align-items: center; left: 1rem; right: 1rem; bottom: 1.25rem; font-size: 0.6rem; }
    .ci-anima .ci-barra-fondo { bottom: 4.5rem; width: 180px; }
    .ci-anima .ci-saltar { top: 1rem; right: 0.5rem; }
    .ci-lema { font-size: 0.6rem; letter-spacing: 0.2em; padding: 0 1rem; }
    .ci-obra { letter-spacing: 0.22em; padding: 0.6rem 1.1rem; }
}

/* Pantallas bajas (un teléfono acostado): el pie encima del nombre no se lee. */
@media (max-height: 520px) {
    .ci-pie { display: none; }
}

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