/* =====================================================================
   animaciones.css — preloader con el logo + animaciones SVG (sergiocc.es)
   Dirección de arte: sobria. Negro tinta, marfil y un dorado champán apagado.
   Líneas finísimas, movimiento lento, sin brillos ni colores saturados.
   Se carga DESPUÉS de estilos.css. Lógica en assets/js/animaciones.js
   ===================================================================== */

:root {
    --fx-ink: #0a0a0b;
    --fx-ivory: #f2ede3;
    --fx-gold: #c6ad82;
    --fx-accent: #1e8dee;               /* azul del tema, solo en secciones claras */
    --fx-ease: cubic-bezier(.77, 0, .18, 1);
    --fx-soft: cubic-bezier(.33, 0, .15, 1);
}

/* Bloquea el scroll mientras el preloader está visible */
html.is-loading,
html.is-loading body { overflow: hidden; }

/* ---------------------------------------------------------------------
   1. PRELOADER
   --------------------------------------------------------------------- */
#intro-loader {
    position: fixed;
    inset: 0;
    z-index: 100000;
    color: var(--fx-ivory);
    overflow: visible;
    pointer-events: auto;
    /* Red de seguridad si el JS no llega a ejecutarse */
    animation: ilSafety 0s linear 12s forwards;
}
@keyframes ilSafety { to { opacity: 0; visibility: hidden; pointer-events: none; } }
#intro-loader.is-gone { display: none; }

/* Telón único que se levanta con un borde curvo */
.il-panel {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(70vmax 46vmax at 50% 46%, #17150f 0%, var(--fx-ink) 62%);
    transition: transform 1.25s var(--fx-ease) .2s;
    will-change: transform;
}
.il-edge {
    position: absolute;
    left: 0;
    width: 100%;
    top: calc(100% - 1px);
    height: 11vh;
    display: block;
    pointer-events: none;
}
.il-edge path { fill: var(--fx-ink); }
.il-edge .il-edge-line { fill: none; stroke: var(--fx-gold); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity .5s ease .4s; }
.is-leaving .il-panel { transform: translateY(calc(-100% - 12vh)); }
.is-leaving .il-edge-line { opacity: .55; }

/* Escenario central */
.il-stage {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    animation: ilStageIn 1.1s ease both;
    transition: opacity .6s ease, transform 1s var(--fx-ease);
}
@keyframes ilStageIn { from { opacity: 0; } }
.is-leaving .il-stage { opacity: 0; transform: translateY(-18px); }

.il-svg {
    display: block;
    width: min(640px, 82vw);
    height: auto;
    overflow: visible;
    --k: 1;
}

/* Contornos de cada letra, dibujados de izquierda a derecha */
.il-ol {
    animation: ilOlOut calc(1s * var(--k)) ease calc(2.1s * var(--k)) forwards;
}
.il-ol path {
    fill: none;
    stroke: var(--fx-gold);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1 2;
    stroke-dashoffset: 1.02;
    animation: ilDraw calc(var(--du, 1s) * 1.15 * var(--k)) cubic-bezier(.4, 0, .2, 1) calc((.5s + var(--dl, 0s)) * var(--k)) forwards;
}
@keyframes ilDraw { to { stroke-dashoffset: 0; } }
@keyframes ilOlOut { to { opacity: 0; } }

/* Relleno que recorre la firma tras el trazo */
.il-wipe {
    transform-box: fill-box;
    transform-origin: 0 50%;
    transform: scaleX(0);
    animation: ilWipe calc(1.7s * var(--k)) cubic-bezier(.45, .05, .25, 1) calc(1.05s * var(--k)) forwards;
}
@keyframes ilWipe { to { transform: scaleX(1); } }

/* Línea de progreso mínima */
.il-line {
    display: block;
    width: min(220px, 48vw);
    height: 1px;
    margin-top: clamp(26px, 5vh, 46px);
    background: rgba(242, 237, 227, .14);
    position: relative;
    overflow: hidden;
    animation: ilStageIn 1.2s ease .5s both;
}
.il-line b {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--fx-gold), var(--fx-ivory));
    transform-origin: 0 50%;
    transform: scaleX(var(--p, 0));
    transition: transform .35s linear;
}

@media (max-width: 600px) {
    .il-ol path { stroke-width: 2.2; }
}

/* ---------------------------------------------------------------------
   2. HERO — luz suave y curva inferior
   --------------------------------------------------------------------- */
/* Las animaciones del hero esperan al preloader; .fx-off las pausa fuera de pantalla */
html.is-loading .hero-fx,
html.is-loading .hero-fx *,
.fx-off,
.fx-off * { animation-play-state: paused !important; }

.hero-fx {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* Luz ambiental: dos manchas apagadas que se desplazan muy despacio */
.hero-aurora {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: screen;
}
.hero-aurora .au {
    transform-box: fill-box;
    transform-origin: center;
    animation: auDrift 40s ease-in-out infinite alternate;
}
.hero-aurora .a2 { animation-duration: 52s; animation-delay: -14s; }
@keyframes auDrift {
    0%   { transform: translate(-50px, -30px) scale(.96); }
    100% { transform: translate(60px, 44px) scale(1.08); }
}

/* El texto del hero entra cuando termina el preloader */
#start .section-content h1,
#start .section-content p.lead {
    transition: opacity 1.1s ease .15s, transform 1.1s cubic-bezier(.2, .7, .2, 1) .15s;
}
#start .section-content p.lead { transition-delay: .4s; }
html.is-loading #start .section-content h1,
html.is-loading #start .section-content p.lead {
    opacity: 0;
    transform: translateY(18px);
}

/* Curva suave en el borde inferior del hero y en la cabecera de otras secciones */
.hero-wave,
.sec-wave {
    position: absolute;
    left: 0;
    right: 0;
    height: clamp(34px, 5vw, 64px);
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}
.hero-wave { bottom: -1px; }
.sec-wave { top: -1px; transform: rotate(180deg); z-index: 3; height: clamp(26px, 4vw, 50px); }
.hero-wave svg,
.sec-wave svg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200%;
    height: 100%;
    animation: waveX 70s linear infinite;
    will-change: transform;
}
.hero-wave .w1, .sec-wave .w1 { animation-duration: 110s; animation-direction: reverse; }
.hero-wave .w1 path, .sec-wave .w1 path { fill: none; stroke: var(--fx-ivory); stroke-opacity: .38; stroke-width: 1; vector-effect: non-scaling-stroke; }
@keyframes waveX { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------------
   3. DETALLES AL HACER SCROLL
   --------------------------------------------------------------------- */

/* Filete fino bajo los títulos de sección */
.section-header { position: relative; }
.sh-line {
    position: absolute;
    left: 0;
    bottom: -24px;
    width: clamp(88px, 11vw, 120px);
    height: 8px;
    overflow: visible;
    pointer-events: none;
}
.sh-line path {
    fill: none;
    stroke: var(--fx-accent);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-dasharray: 1 2;
    stroke-dashoffset: 1.02;
    transition: stroke-dashoffset 1.6s var(--fx-ease) .5s;
}
.sh-line circle {
    fill: var(--fx-accent);
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
    transition: transform .8s var(--fx-soft) 1.7s;
}
.in-view .sh-line path { stroke-dashoffset: 0; }
.in-view .sh-line circle { transform: scale(1); }
.dark .sh-line path { stroke: var(--fx-gold); }
.dark .sh-line circle { fill: var(--fx-gold); }

/* Puntos de la línea de tiempo: un anillo fino que se traza */
.timeline-event-point svg {
    position: absolute;
    left: -9px;
    top: -9px;
    width: 48px;
    height: 48px;
    overflow: visible;
    pointer-events: none;
}
.tp-ring {
    fill: none;
    stroke: var(--fx-accent);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-dasharray: 1 2;
    stroke-dashoffset: 1.02;
    transform: rotate(-90deg);
    transform-box: fill-box;
    transform-origin: center;
    transition: stroke-dashoffset 1.6s var(--fx-ease);
    transition-delay: calc(var(--n, 0) * .45s + .2s);
}
.in-view .tp-ring { stroke-dashoffset: 0; }

/* Marco fino interior en las tarjetas de proyectos (se traza con el hover) */
.image-box .image .card-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
    overflow: visible;
}
.card-frame rect {
    width: calc(100% - 24px);
    height: calc(100% - 24px);
    fill: none;
    stroke: #fff;
    stroke-opacity: .9;
    stroke-width: 1;
    stroke-dasharray: 1 2;
    stroke-dashoffset: 1.02;
    transition: stroke-dashoffset 1.1s var(--fx-ease);
}
.image-box:hover .card-frame rect { stroke-dashoffset: 0; }

/* Filete dorado sobre cada testimonio */
.tq {
    display: block;
    width: 56px;
    height: 4px;
    margin-bottom: 18px;
    overflow: visible;
}
.tq path {
    fill: none;
    stroke: var(--fx-gold);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-dasharray: 1 2;
    stroke-dashoffset: 1.02;
    transition: stroke-dashoffset 1.5s var(--fx-ease) .1s;
}
.in-view .tq path { stroke-dashoffset: 0; }

/* Firma animada en la sección de contacto (sustituye al JPEG) */
.logo-sign { display: block; }
.logo-sign svg { display: block; width: 100%; height: auto; overflow: visible; --k: .7; }
.logo-sign:not(.in-view) svg * { animation-play-state: paused !important; }

/* ---------------------------------------------------------------------
   4. ACCESIBILIDAD — movimiento reducido
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #intro-loader *,
    .logo-sign svg * { animation-duration: .001s !important; animation-delay: 0s !important; transition: none !important; }
    .hero-fx *, .hero-wave *, .sec-wave * { animation: none !important; }
    .sh-line path, .tp-ring, .tq path { stroke-dashoffset: 0 !important; transition: none !important; }
    .sh-line circle { transform: scale(1) !important; transition: none !important; }
    html.is-loading #start .section-content h1,
    html.is-loading #start .section-content p.lead { opacity: 1; transform: none; }
}