/* ---------------------------------------------------------------------
   site.css — additions shared by qiosq.io and photofiction.qiosq.io
   Loaded after the Vite bundle, before any page-specific sheet.
   --------------------------------------------------------------------- */

/* Boot screen ---------------------------------------------------------
   Replaces the old progress bar. It paints nothing but the intro's own
   backdrop, from first paint until window.onload, so the qiosq wordmark
   animation is the first and only thing the visitor sees move. */

.boot {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99;
    background: #1e1e1e;
}

/* Hold it until the intro (z-index 100, same backdrop) is fully opaque
   over it, then drop it so it never covers the page. The :has() rule ties
   that to the intro actually appearing; the timed rule is the fallback if
   the intro never runs. Neither is visible: both layers are the same
   colour, and nothing is drawn on this one. */

body:has(.intro.visible) .boot {
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.3s ease 0.5s,
        visibility 0s linear 0.8s;
}

html.booted .boot {
    opacity: 0;
    visibility: hidden;
    transition:
        opacity 0.4s ease 1.2s,
        visibility 0s linear 1.6s;
}

/* Photofiction opens with the qiosq animation, in qiosq's colours, on its
   own deep-space backdrop (set in photofiction.css). */

body.pf .intro h1 {
    -webkit-text-stroke: 2px #00c897;
    text-stroke: 2px #00c897;
}

/* Language switcher --------------------------------------------------- */

.lang_switch {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    font-family: "Space Mono", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.lang_switch a {
    color: rgba(255, 255, 255, 0.45);
    transition: color 0.3s ease-in-out;
}

.lang_switch a:hover {
    color: #fff;
}

.lang_switch a.is-current {
    color: #00c897;
}

body.pf .lang_switch a.is-current {
    color: #22d3ee;
}

nav #container .lang_switch {
    margin-left: auto;
    margin-right: 2rem;
}

.menu .right .lang_switch {
    margin-bottom: 2rem;
    font-size: 0.9rem;
    gap: 1.6rem;
}

@media (max-width: 520px) {
    nav #container .lang_switch {
        margin-right: 1.2rem;
        gap: 0.6rem;
        font-size: 0.65rem;
    }
}

/* Qiosq system — Manager and QiosqOS in one section ---------------------
   Two lanes, side by side: solid panels for the products, outlined tiles
   for what the hardware can do, and a row of tags for the fine print that
   used to be a six-row list. */

.system {
    padding: 6rem 0 4rem;
}

.lanes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    width: 100%;
}

.lanes .lane {
    background: #1e1e1e;
    border-radius: 30px;
    padding: 3rem;
}

.lanes .lane_label {
    display: block;
    margin-bottom: 0.6rem;
    font-family: "Space Mono", monospace;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #00c897;
}

.lanes .lane h3 {
    font-family: "Space Mono", monospace;
    font-size: 2rem;
    text-align: left;
    text-transform: none;
    margin-bottom: 1.4rem;
}

.lanes .lane .lane_lead {
    max-width: 460px;
    padding-bottom: 2rem;
}

.lanes .lane ul {
    list-style: none;
    width: 100%;
    padding: 0;
    margin: 0;
}

.lanes .lane li {
    padding: 1.1rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    transition: border-color 0.3s ease-in-out;
}

.lanes .lane li:hover {
    border-top-color: #00c897;
}

.lanes .lane li p {
    font-size: 0.98rem;
    opacity: 0.75;
}

/* mobile-fixes.css sizes every h5 at 5vw !important, so this small label
   has to shout back. */

.system .sub_label {
    font-family: "Space Mono", monospace;
    font-size: 0.78rem !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.6;
}

/* Device capabilities — what the hardware can do, as a compact grid. */

.capabilities {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    width: 100%;
}

.capabilities .cap {
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 20px;
    padding: 1.8rem;
    transition:
        border-color 0.3s ease-in-out,
        background 0.3s ease-in-out;
}

.capabilities .cap:hover {
    border-color: #00c897;
    background: rgba(0, 200, 151, 0.06);
}

.capabilities .cap span {
    display: block;
    margin-bottom: 0.9rem;
    font-family: "Space Mono", monospace;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #00c897;
}

.capabilities .cap p {
    font-size: 0.98rem;
    opacity: 0.75;
}

.system > #container > .btn {
    display: inline-flex;
    width: fit-content;
}

@media (max-width: 780px) {
    .system .heading h1 {
        white-space: normal !important;
    }

    .lanes {
        grid-template-columns: 1fr;
    }

    .capabilities {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 520px) {
    .capabilities {
        grid-template-columns: 1fr;
    }

    .system {
        padding: 3rem 0 2rem;
    }

    .lanes .lane {
        padding: 2.2rem 2rem;
    }

    .lanes .lane h3 {
        font-size: 1.7rem;
    }
}

/* Long Portuguese and Spanish headings ---------------------------------
   The display face is wide and mobile-fixes.css sizes headings for the
   English source ("Projects", "Reality Reimagined"). Their translations
   are several characters longer, so the sections that carry them get a
   smaller step on narrow screens. */

@media (max-width: 520px) {
    .hero h2 {
        font-size: 9vw !important;
    }

    .work .heading h1,
    .system .heading h1 {
        font-size: 9.5vw !important;
    }

    /* "redes sociais" / "redes sociales" is a lot longer than "follow us",
       so only those two languages take the smaller step. */

    html[lang="pt-PT"] footer .heading h1,
    html[lang="es"] footer .heading h1 {
        font-size: 11vw !important;
    }
}

/* Locomotive's scroll target proxy — never seen, only clicked. */

.scroll_proxy {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}