/* ============================================================
   TRICATO — TOKENS DE MARCA E LINGUAGEM DE MOVIMENTO
   Origem: tricato-brand-pack/06-web-tokens/tricato-brand-tokens.css
   Este arquivo e a fonte de verdade de cor da interface.
   ============================================================ */

:root {
    /* Tokens oficiais do brand pack — nao alterar os valores. */
    --tricato-navy: #01326A;
    --tricato-navy-dark: #01203F;
    --tricato-navy-light: #0A4A94;
    --tricato-orange: #FDA10E;
    --tricato-orange-light: #FFB84D;
    --tricato-gray: #8A929C;
    --tricato-surface: #F7F9FC;
    --tricato-white: #FFFFFF;

    /* Apelidos semanticos: o resto da interface fala por funcao, nao por cor,
       para que uma futura revisao de marca troque so o bloco acima. */
    --marca-primaria: var(--tricato-navy);
    --marca-primaria-escura: var(--tricato-navy-dark);
    --marca-primaria-clara: var(--tricato-navy-light);
    --marca-destaque: var(--tricato-orange);
    --marca-destaque-clara: var(--tricato-orange-light);
    --marca-texto-suave: var(--tricato-gray);
    --marca-fundo: var(--tricato-surface);

    /* Curvas de aceleracao usadas em toda animacao do produto. */
    --mov-saida: cubic-bezier(.16, 1, .3, 1);
    --mov-cinema: cubic-bezier(.22, .61, .36, 1);
}

/* ============================================================
   INTRO CINEMATICA — "catalogos passando pela tela"
   Usada na landing (abertura) e no login (transicao de tela).
   O desenho das fichas ecoa o simbolo da marca: catalogos lado a
   lado, um deles destacado com o cubo laranja.
   ============================================================ */

.cine {
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% 45%, var(--tricato-navy-light) 0%, var(--tricato-navy) 42%, var(--tricato-navy-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    /* O filtro cinematico: vinheta que escurece as bordas. */
    box-shadow: inset 0 0 min(28vw, 22rem) min(9vw, 7rem) rgba(1, 32, 63, .92);
}

/* Granulado sutil: tira o aspecto de gradiente digital chapado. */
.cine::after {
    content: '';
    position: absolute;
    inset: -50%;
    pointer-events: none;
    opacity: .16;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* --- As faixas de catalogos que atravessam a tela --- */

.cine-faixas {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(.9rem, 2.4vh, 1.9rem);
    /* Inclinacao leve: o movimento ganha profundidade em vez de virar esteira plana. */
    transform: rotate(-7deg) scale(1.35);
    transform-origin: center;
}

.cine-faixa {
    display: flex;
    gap: clamp(.9rem, 2.2vw, 1.7rem);
    width: max-content;
    will-change: transform;
}

/* Cada faixa corre em velocidade e sentido proprios (parallax). O conteudo e
   duplicado no HTML, entao -50% fecha o ciclo sem emenda visivel. */
.cine-faixa--a { animation: cine-correr-esq 13s linear infinite; }
.cine-faixa--b { animation: cine-correr-dir 17s linear infinite; opacity: .8; }
.cine-faixa--c { animation: cine-correr-esq 21s linear infinite; opacity: .55; }

@keyframes cine-correr-esq {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes cine-correr-dir {
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

/* --- A ficha de catalogo --- */

.cine-ficha {
    width: clamp(5.5rem, 9.5vw, 9rem);
    aspect-ratio: 3 / 4;
    flex-shrink: 0;
    border-radius: .85rem;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    padding: .7rem;
    display: flex;
    flex-direction: column;
    gap: .42rem;
}

/* Uma a cada tres fichas e a "escolhida" — mesma leitura do simbolo da marca:
   entre catalogos equivalentes, um tem o melhor preco. */
.cine-ficha--destaque {
    background: rgba(253, 161, 14, .16);
    border-color: rgba(255, 184, 77, .5);
    box-shadow: 0 0 2.2rem rgba(253, 161, 14, .28);
}

.cine-ficha i {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, .32);
    line-height: 1;
}
.cine-ficha--destaque i { color: var(--tricato-orange); }

.cine-ficha b,
.cine-ficha s {
    display: block;
    height: .3rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
}
.cine-ficha s { width: 62%; }
.cine-ficha b { width: 88%; }

.cine-ficha u {
    margin-top: auto;
    text-decoration: none;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .4);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.cine-ficha--destaque u { color: var(--tricato-orange-light); }

/* --- O bloco central: logo + legenda --- */

.cine-centro {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    text-align: center;
    padding: 0 1.5rem;
}

.cine-centro img {
    width: clamp(13rem, 34vw, 23rem);
    filter: drop-shadow(0 1.4rem 3rem rgba(0, 0, 0, .55));
    animation: cine-marca-entra 1.15s var(--mov-saida) both;
}

.cine-centro p {
    color: rgba(255, 255, 255, .68);
    font-size: clamp(.78rem, 1.7vw, .95rem);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    animation: cine-legenda-entra .9s var(--mov-saida) .42s both;
}

@keyframes cine-marca-entra {
    from { opacity: 0; transform: scale(.86) translateY(1.1rem); filter: blur(.7rem); }
    to   { opacity: 1; transform: none; filter: none; }
}
@keyframes cine-legenda-entra {
    from { opacity: 0; transform: translateY(.7rem); letter-spacing: .34em; }
    to   { opacity: 1; transform: none; letter-spacing: .16em; }
}

/* --- Saida: a cortina sobe e revela a pagina --- */

.cine--saindo {
    animation: cine-sair .78s var(--mov-cinema) forwards;
    pointer-events: none;
}
@keyframes cine-sair {
    to { opacity: 0; transform: scale(1.09); filter: blur(.5rem); }
}

/* Botao de pular: quem ja viu a intro nao pode ficar preso nela. */
.cine-pular {
    position: absolute;
    bottom: clamp(1.2rem, 4vh, 2.4rem);
    right: clamp(1.2rem, 4vw, 2.4rem);
    z-index: 3;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .22);
    color: rgba(255, 255, 255, .78);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .5rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background .2s, color .2s;
    animation: cine-legenda-entra .6s var(--mov-saida) 1s both;
}
.cine-pular:hover { background: rgba(255, 255, 255, .2); color: #fff; }

/* Trava a rolagem enquanto a cortina esta na frente. */
body.cine-travado { overflow: hidden; }


/* ============================================================
   ACESSIBILIDADE
   Quem pediu menos movimento no sistema recebe a marca parada.
   Sem isto a intro e um gatilho vestibular.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .cine-faixa,
    .cine-centro img,
    .cine-centro p,
    .cine-pular,
    .cine-fundo-escuro::before { animation: none !important; }
    .cine--saindo { animation: cine-sair-simples .3s linear forwards; }
    @keyframes cine-sair-simples { to { opacity: 0; } }
}


/* ============================================================
   FUNDO CINEMATICO DO LOGIN
   As faixas correm ATRAS do painel, cobrindo a tela do catalogo.
   Antes elas viviam dentro da coluna esquerda do painel, onde
   competiam com a marca e o texto em 20rem de largura.
   ============================================================ */

.login-cine-fundo {
    overflow: hidden;
    background:
        radial-gradient(120% 90% at 50% 42%,
            var(--tricato-navy-light) 0%,
            var(--tricato-navy) 44%,
            var(--tricato-navy-dark) 100%);
}

/* Vinheta sobre as faixas: o painel branco precisa de contraste. */
.login-cine-fundo::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(70% 60% at 50% 50%,
        rgba(1, 32, 63, .55) 0%, rgba(1, 32, 63, .9) 100%);
}

/* As faixas ficam no fundo; o painel sobe acima da vinheta. */
.login-cine-fundo > .cine-faixas { z-index: 0; }
.login-cine-painel { position: relative; z-index: 2; }

.login-cine-painel {
    animation: login-painel .5s var(--mov-saida) .1s both;
}
@keyframes login-painel {
    from { opacity: 0; transform: translateY(1.4rem) scale(.975); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .login-cine-painel { animation: none; }
}