:root {
    --bg: #07090a;
    --ink: #e4e9e4;
    --mut: #78857d;
    --line: rgba(120, 133, 125, .18);
    --phos: #6ef7a7;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'DejaVu Sans Mono', 'Liberation Mono', monospace;
    --serif: 'Instrument Serif', Georgia, serif;
}

* { box-sizing: border-box; }

body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    background-color: var(--bg);
    font-family: var(--mono);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

body {
    display: flex;
    align-items: stretch;
    overflow-x: hidden;
}

/* grão e scanline por cima de tudo */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    background-image:
        repeating-linear-gradient(to bottom, rgba(255, 255, 255, .016) 0 1px, transparent 1px 3px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.26'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    opacity: .45;
}

.split-screen {
    width: 33.3333%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* topo fixo em vez de centro: com centro, cada painel desloca o icone conforme
       o tamanho do proprio texto e os tres saem desalinhados */
    justify-content: flex-start;
    align-items: center;
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: clamp(150px, 27vh, 300px) 28px 96px;
    border-right: 1px solid var(--line);
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: painel .8s cubic-bezier(.2, .7, .3, 1) forwards;
}

.split-screen:last-of-type { border-right: 0; }

/* a arte fica como textura, nao como cor dominante */
.split-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(7, 9, 10, .90), rgba(7, 9, 10, .96));
    z-index: 0;
    pointer-events: none;
}

.split-screen > * { position: relative; z-index: 1; }

#screen1 { background-image: url('op_art_blue.png');  animation-delay: .05s; }
#screen2 { background-image: url('op_art_black.png'); animation-delay: .18s; }
#screen3 { background-image: url('op_art_green.png'); animation-delay: .31s; }

.split-screen a { display: inline-block; }

.split-screen a:focus-visible {
    outline: 2px solid var(--phos);
    outline-offset: 4px;
}

.icon {
    width: 46px;
    height: auto;
    opacity: .7;
    filter: grayscale(1);
    transition: opacity .3s ease, filter .3s ease, transform .3s ease;
}

.split-screen a:hover .icon,
.split-screen a:focus-visible .icon {
    opacity: 1;
    filter: grayscale(0);
    transform: translateY(-3px);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.split-screen .rotulo {
    margin: 20px 0 12px;
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--phos);
    max-width: none;
    text-align: center;
    line-height: 1.75;
}

.split-screen p {
    color: var(--mut);
    text-align: center;
    margin: 0;
    padding: 0;
    max-width: 30ch;
    font-size: .82rem;
    font-weight: 200;
    line-height: 1.75;
}

/* .split-screen p (0,1,1) atropelaria .quote (0,1,0); por isso o seletor duplo */
.split-screen .quote {
    position: absolute;
    bottom: 26px;
    left: 0;
    right: 0;
    padding: 0 24px;
    font-size: .58rem;
    letter-spacing: .12em;
    color: var(--mut);
    opacity: .55;
    max-width: none;
}

.btn-back {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 22px;
    z-index: 60;
    font-family: var(--mono);
    font-size: .66rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--mut);
    background: rgba(7, 9, 10, .82);
    border: 1px solid var(--line);
    border-radius: 0;
    /* alvo de toque garantido em qualquer tela, inclusive celular deitado,
       que passa da largura do breakpoint e caia na regra de desktop */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 11px 24px;
    text-decoration: none;
    box-shadow: none;
    transition: color .3s ease, border-color .3s ease;
}

.btn-back:hover {
    color: var(--phos);
    border-color: var(--phos);
    background: rgba(7, 9, 10, .92);
}

.btn-back:focus-visible {
    outline: 2px solid var(--phos);
    outline-offset: 2px;
}

@keyframes painel {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

body.page-transition {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

@media (max-width: 820px) {
    body { flex-direction: column; }
    .split-screen {
        width: 100%;
        min-height: auto;
        padding: 54px 24px 62px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .split-screen .quote { position: static; margin-top: 22px; padding: 0; }
    .btn-back {
        position: static;
        transform: none;
        display: block;
        margin: 24px auto 40px;
        width: max-content;
        /* 37px de altura era alvo de toque curto para o dedo */
        padding: 13px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    .split-screen { opacity: 1; }
}