/**
 * DELMAT Engenharia & Tecnologia
 * Camada de transicao com logo (abertura de site + troca de pagina).
 *
 * QUATRO VARIACOES (preview em teste-transicoes.php):
 *   v1 - fade-in simples
 *   v2 - fade + zoom sutil
 *   v3 - trace animado do logo em SVG + "DELMAT ENGENHARIA" escrito
 *        letra a letra (ESCOLHIDA / default em producao)
 *   v4 - logo + "DELMAT ENGENHARIA" escrito letra a letra
 *
 * A logica de execucao (sessionStorage, ?transition=vN, duracao por modo,
 * remocao do DOM) fica em assets/js/delmat-transition.js. Este CSS so
 * declara a camada e os estados visuais.
 *
 * Regras invioplaveis atendidas aqui:
 *   - pointer-events: none -> a camada NUNCA bloqueia clique nem crawl;
 *   - prefers-reduced-motion: reduce -> camada nao aparece;
 *   - failsafe: mesmo se o JS falhar, a camada some sozinha em ~3s.
 */

.delmat-transition {
    position: fixed;
    inset: 0;
    background: #00349A; /* azul institucional exato (styles.css), nao o #0A2A6E do rascunho */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    /* Failsafe: se o JS nao rodar/quebrar, a camada se auto-esconde.
       Delay > abertura mais longa (v3 ~2800ms) para nao cortar o final. */
    animation: delmat-trans-failsafe 400ms ease-out 3400ms forwards;
}

.delmat-transition.fade-out {
    /* duracao real e sobrescrita inline pelo JS (200ms abertura / 150ms troca) */
    animation: delmat-trans-fadeout 200ms ease-out forwards;
}

@keyframes delmat-trans-fadeout {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes delmat-trans-failsafe {
    to {
        opacity: 0;
        visibility: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    .delmat-transition {
        display: none;
    }
}

/* ===================================================================
   V1 / V2 - logo em PNG (preto) convertida para branco via filter
   =================================================================== */
.delmat-transition .t-logo {
    display: block;
    width: 200px;
    height: auto;
    opacity: 0;
    filter: brightness(0) invert(1); /* logo-delmat.png e preta; vira branca */
}

/* V2 parte de um leve recuo de escala (95%) */
.delmat-transition .t-logo--zoom {
    transform: scale(0.95);
}

/* V1: fade-in simples */
.t-logo.v1-opening {
    animation: delmat-t-fadein 400ms ease-out forwards;
}

.t-logo.v1-transition {
    animation: delmat-t-fadein 200ms ease-out forwards;
}

@keyframes delmat-t-fadein {
    to { opacity: 1; }
}

/* V2: fade + zoom sutil (95% -> 100%), curva de "presenca suave" */
.t-logo.v2-opening {
    animation: delmat-t-appear 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.t-logo.v2-transition {
    animation: delmat-t-appear 200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes delmat-t-appear {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===================================================================
   V3 - monograma SVG com trace (stroke-dasharray controlado pelo JS)
   + "DELMAT ENGENHARIA" escrito letra a letra (assinatura da v4).
   ESCOLHIDA: e o default em producao (abertura e troca de pagina).
   =================================================================== */
.delmat-transition .v3-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

.delmat-transition .v3-logo-svg {
    display: block;
    width: 200px;
    height: auto;
}

.delmat-transition .v3-text {
    display: flex;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.32em;
    color: #FFFFFF;
    white-space: nowrap;
}

.delmat-transition .v3-text span {
    opacity: 0;
}

.delmat-transition .v3-sp {
    width: 0.7em;
}

/* Versao de TROCA da v3: sem trace nem escrita (longos demais para
   transicao); logo + texto ja completos com leve scale 98% -> 100% + fade */
.v3-wrap.v3-quick {
    opacity: 0;
    transform: scale(0.98);
    animation: delmat-t-quick 350ms ease-out forwards;
}

/* Na troca nao ha trace: o preenchimento (evenodd) ja entra completo.
   CSS vence o atributo de apresentacao fill-opacity="0" do path. */
.v3-wrap.v3-quick .v3-trace {
    fill-opacity: 1;
}

.v3-wrap.v3-quick .v3-text span {
    opacity: 1;
}

@keyframes delmat-t-quick {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===================================================================
   V4 - logo + "DELMAT ENGENHARIA" escrito letra a letra
   (delays por letra sao inline, via JS - mesmo padrao do trace v3)
   =================================================================== */
.delmat-transition .v4-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.delmat-transition .v4-logo {
    display: block;
    width: 150px;
    height: auto;
    opacity: 0;
    transform: scale(0.95);
    filter: brightness(0) invert(1); /* svg currentColor renderiza preto via <img>; vira branco */
}

.v4-wrap .v4-logo--in {
    animation: delmat-t-appear 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.delmat-transition .v4-text {
    display: flex;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.32em;
    color: #FFFFFF;
    white-space: nowrap;
}

.delmat-transition .v4-text span {
    opacity: 0;
}

.delmat-transition .v4-sp {
    width: 0.7em;
}

/* Versao de TROCA da v4: sem escrita (longa demais); tudo junto em
   fade + leve scale, como a v3-quick. */
.v4-wrap.v4-quick {
    opacity: 0;
    transform: scale(0.98);
    animation: delmat-t-quick 250ms ease-out forwards;
}

.v4-wrap.v4-quick .v4-logo {
    opacity: 1;
    transform: none;
}

.v4-wrap.v4-quick .v4-text span {
    opacity: 1;
}

/* ===================================================================
   RESPONSIVO
   =================================================================== */
@media (max-width: 768px) {
    .delmat-transition .t-logo {
        width: 140px;
    }

    .delmat-transition .v3-logo-svg {
        width: 140px;
    }

    .delmat-transition .v3-text {
        font-size: 13px;
        letter-spacing: 0.26em;
    }

    .delmat-transition .v4-logo {
        width: 110px;
    }

    .delmat-transition .v4-text {
        font-size: 13px;
        letter-spacing: 0.26em;
    }
}