/* ============================================================================
   layout.css — the page chrome: fixed scene layers, navigation, the floating
   back-to-top control and the footer.
   ========================================================================== */

/* ────────────────────  fixed scene behind the page  ───────────────── */
#scroll-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
}

/* Past the hero the footage sits behind copy for the rest of the page,
   so it eases down to 20% black and holds there. Driven by scroll rather
   than a gradient in the flow, because the canvas behind it is fixed. */
#scrim {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: #000;
    opacity: 0;
    pointer-events: none;
    will-change: opacity;
}

/* Scroll progress along the top edge. */
#progress {
    position: fixed;
    top: 0;
    inset-inline: 0;
    height: 2px;
    z-index: 40;
    background: linear-gradient(90deg, #ff6b73, var(--red));
    transform: scaleX(0);
    transform-origin: right center;
    will-change: transform;
}

/* It fills from the edge the reader starts at, and `transform-origin` has no logical keyword. */
[dir="ltr"] #progress {
    transform-origin: left center;
    background: linear-gradient(270deg, #ff6b73, var(--red));
}

#page {
    position: relative;
    z-index: 2;
}

/* ─────────────────────  floating back-to-top  ─────────────────────── */
/* Fades in once the hero is behind you. */
.to-top {
    position: fixed;
    inset-block-end: 32px;
    inset-inline-end: 32px;   /* the left corner under dir="rtl" */
    z-index: 35;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 99px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font: inherit;
    cursor: pointer;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 18px 40px -18px rgba(2, 6, 18, 0.9);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 0.35s ease,
                transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0.35s,
                background-color 0.3s ease,
                border-color 0.3s ease;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.34);
    transform: translateY(-3px);
}
.to-top:active { transform: none; }
.to-top svg { width: 20px; height: 20px; display: block; }

/* ══════════════════════════════  NAV  ═══════════════════════════════ */
.nav {
    position: fixed;
    top: 0;
    inset-inline: 0;
    height: 84px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 48px;
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease,
                border-color 0.3s ease;
    border-bottom: 1px solid transparent;
}
.nav.is-stuck {
    background: rgba(5, 13, 31, 0.6);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: var(--hairline);
}

.nav__logo { width: 225px; display: flex; justify-content: flex-start; }
.nav__logo img { width: 86.8px; height: 55.18px; display: block; }

.nav__links {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 99px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.nav__links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 99px;
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s ease;
}
.nav__links a:hover { background: rgba(255, 255, 255, 0.09); }
.nav__links a.is-active { background: rgba(255, 255, 255, 0.16); font-weight: 700; }

.nav__left { display: flex; align-items: center; gap: 12px; }

/* `contents` so the wrapper adds no box of its own: `.nav__links` and `.nav__left` stay flex items
   of `.nav` and the wide bar is unchanged. responsive.css turns it into a real panel below 900px. */
.nav__menu { display: contents; }

/* The menu button. Hidden here and revealed in responsive.css, which is where every media query in
   this stylesheet lives. 44px because that is the smallest thing a thumb hits reliably — the bars
   inside are 18px wide, and the rest is target. */
.nav__toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 99px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    cursor: pointer;
    color: #fff;
}

/* Three bars drawn from one element: the middle is the box, the outer two its pseudo-elements. One
   element instead of three spans keeps the markup honest about what it is — an icon. */
.nav__toggle-bars,
.nav__toggle-bars::before,
.nav__toggle-bars::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav__toggle-bars { position: relative; }
.nav__toggle-bars::before,
.nav__toggle-bars::after { content: ""; position: absolute; inset-inline-start: 0; }
.nav__toggle-bars::before { top: -6px; }
.nav__toggle-bars::after { top: 6px; }

/* Open: the outer bars meet in the middle and cross, the middle one goes. A close button and an
   open button in one control, so the visitor never has to look for the way out. */
.nav.is-open .nav__toggle-bars { background: transparent; }
.nav.is-open .nav__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

.lang {
    display: flex;
    align-items: center;
    /* Anchors the visible link's hit overlay below. */
    position: relative;
    gap: 8px;
    padding: 9px 12px 9px 14px;
    border-radius: 99px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    font-size: 13px;
}
/* Both links are in the markup and only one is ever shown: `lang.js` puts `aria-current` on the
   language already on screen, and that is the one hidden. A toggle that offers the language you are
   reading makes the visitor work out which of the two is the destination; offering only the
   destination is the whole control. `aria-current` is set before first paint, so nothing flashes. */
.lang a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: opacity 0.2s ease;
}

/* **The pill reads as the control and only these two characters were it** — an 18×16 target inside a
   70×36 one. `padding-block` was the first answer and it was wrong here: `.lang` is a flex container,
   so the link is a *block-level* flex item and vertical padding grows the pill it sits in — measured,
   36 became 56, and the language switch ended up half again as tall as the sign-in button beside it.
   An overlay costs no layout at all. Only one of the two links is ever displayed, so stretching it
   over the whole control is unambiguous: the flag and the pill's own padding become part of the same
   target the label is, and 18×16 becomes the pill's own 70×36. */
.lang a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.lang a:hover { opacity: 0.75; }
.lang a[aria-current] { display: none; }
.lang img { width: 16px; height: 16px; display: block; }

.nav__cta { padding: 11px 22px; font-size: 14px; }

/* ══════════════════════════  09 — Footer  ═════════════════════════ */
.footer { padding: 72px 0 40px; }
.footer__top { display: flex; gap: 60px; align-items: flex-start; }
.footer__col { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; text-align: start; }
.footer__col b { font-size: 14px; font-weight: 700; opacity: 0.9; }
/* **A 14px footer link was an 18px-tall target**, which is under WCAG 2.2's 24px floor and well
   under a thumb. `padding-block` grows the hit box — and here it also grows the *column*, because
   `.footer__col` is a flex container and a flex item is block-level whatever its `display` says:
   left alone, 9px of padding turned the 12px designed gap into 30px of air. The negative margin is
   what gives that back. It shrinks the margin box and leaves the padding box, so the two links'
   hit areas end up exactly touching — no overlap, which would make a tap between them ambiguous,
   and no dead strip. The column grows 5px a link instead of 18. */
.footer__col a { font-size: 14px; color: #fff; opacity: 0.45; text-decoration: none; padding-block: 9px; margin-block: -6px; transition: opacity 0.2s ease; }
.footer__col a:hover { opacity: 0.9; }
.footer__brand img { width: 139px; height: 32px; display: block; }
/* Opt the logo out of the footer link styling — it is a mark, not a text
   link. Qualified with .footer__col to outrank `.footer__col a`. */
.footer__col a.footer__logo { display: inline-block; padding-block: 0; margin-block: 0; opacity: 1; }
.footer__col a.footer__logo:hover { opacity: 1; translate: none; }
.footer__brand p { font-size: 13px; line-height: 20px; opacity: 0.4; max-width: 280px; margin: 0; }

.footer__bottom {
    margin-top: 40px;
    min-height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--hairline);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
    padding: 16px 0;
}

/* Latin credit line — forced LTR so the © doesn't get reordered by bidi. */
.footer__credit { margin: 0; line-height: 22px; }
.footer__credit a {
    /* 78×17 without this — the one link on the page that sits outside `.footer__col` and so missed
       the padding every other footer link got. Same trick: `padding-block` on an inline link grows
       the hit box and leaves the line box, and the credit line's own spacing, exactly as they were. */
    padding-block: 9px;
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    transition: color 0.3s ease, border-color 0.3s ease;
}
.footer__credit a:hover { color: #fff; border-bottom-color: var(--red); }