/* Coming-soon gate. Covers the whole site until unlocked. */

html.sff-locked,
html.sff-locked body {
    overflow: hidden;
}

/* hide the real site until the gate decides, without a flash of content */
html.sff-locked body > *:not(.sff-gate) {
    visibility: hidden;
}

.sff-gate {
    /* Held as literals, not as var(--color-*) lookups into styles.css.
       The gate is an overlay that has to look the same on whatever build
       it lands on, and those tokens differ between branches -- reading
       them would quietly repaint the gate and swap its typeface. */
    --gate-coral: #EB7549;
    --gate-coral-deep: #C95724;
    --gate-cream: #F7F1E8;
    --gate-ice: #C5F7FF;
    --gate-display: "Oswald", "Arial Narrow", system-ui, sans-serif;
    --gate-sans: "Source Sans 3", system-ui, -apple-system, sans-serif;

    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: flex;
    align-items: center;
    overflow-y: auto;
    background-color: #1C393E;
    /* Two scrims, both soft. The horizontal one carries the left column
       and has fully run out by the time it reaches the ridge. The vertical
       one is a light overall settle -- almost nothing at the top, so the
       sky stays airy -- that lifts the right column off the sunlit slope
       without putting a visible panel behind it.

       They ride on this element as background layers rather than on an
       absolutely positioned ::before. Inside a scroll container, inset: 0
       resolves against the padding box, so a ::before is only one screen
       tall and scrolls away with the content while the photograph stays
       put -- which drew a hard edge across the picture on any phone short
       enough to scroll. As layers they and the photograph cannot separate. */
    background-image:
        linear-gradient(97deg,
            rgba(10, 26, 30, 0.80) 0%,
            rgba(10, 26, 30, 0.66) 28%,
            rgba(10, 26, 30, 0.36) 46%,
            rgba(10, 26, 30, 0.11) 63%,
            rgba(10, 26, 30, 0.00) 79%),
        linear-gradient(180deg,
            rgba(10, 26, 30, 0.10) 0%,
            rgba(10, 26, 30, 0.00) 26%,
            rgba(10, 26, 30, 0.08) 64%,
            rgba(10, 26, 30, 0.34) 100%),
        url("gate-mountains.webp");
    background-size: cover;
    /* the valley sits left of centre, so bias the crop right to keep the
       sunlit ridge behind the second column */
    background-position: center, center, 62% center;
    background-repeat: no-repeat;
    color: var(--gate-cream);
    font-family: var(--gate-sans);
}

.sff-gate__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: clamp(40px, 6vw, 84px) clamp(24px, 5vw, 76px);
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}

/* ---------- left column ---------- */
.sff-gate__headline {
    margin: 0 0 clamp(20px, 2.4vw, 30px);
    font-family: var(--gate-display);
    font-weight: 700;
    font-size: clamp(34px, 4.3vw, 58px);
    line-height: 1.02;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: #FFFFFF;
    text-wrap: balance;
    text-shadow: 0 2px 26px rgba(8, 22, 26, 0.42);
}

.sff-gate__body {
    margin: 0 0 1.15em;
    max-width: 46ch;
    font-family: var(--gate-sans);
    font-weight: 300;
    font-size: clamp(15.5px, 1.22vw, 18px);
    line-height: 1.62;
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 14px rgba(8, 22, 26, 0.45);
}

.sff-gate__body:last-child {
    margin-bottom: 0;
}

/* the closing line stands apart from the two that set it up */
.sff-gate__strong {
    margin: 1.9em 0 0;
    max-width: 46ch;
    font-family: var(--gate-sans);
    font-weight: 300;
    font-size: clamp(15.5px, 1.22vw, 18px);
    line-height: 1.62;
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 14px rgba(8, 22, 26, 0.45);
}

/* ---------- right column ---------- */
.sff-gate__aside {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(40px, 7vw, 96px);
    min-height: clamp(300px, 36vw, 420px);
}

.sff-gate__notify-label {
    margin: 0 0 12px;
    font-family: var(--gate-display);
    font-weight: 500;
    font-size: clamp(15px, 1.25vw, 18px);
    letter-spacing: 0.01em;
    color: var(--gate-ice);
    /* the ice blue is light enough that it needs a touch more shadow than
       white did to hold against the sunlit slope */
    text-shadow: 0 1px 16px rgba(8, 22, 26, 0.7), 0 1px 3px rgba(8, 22, 26, 0.45);
}

.sff-gate__form {
    display: flex;
    align-items: center;
    gap: 14px;
    width: min(430px, 100%);
}

.sff-gate__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: #FFFFFF;
    color: #282725;
    font-family: var(--gate-sans);
    font-size: 16px; /* keeps iOS from zooming on focus */
    box-shadow: 0 10px 30px rgba(8, 22, 26, 0.22);
}

.sff-gate__input::placeholder {
    color: #8C8781;
}

.sff-gate__input:focus {
    outline: 2px solid var(--gate-coral);
    outline-offset: 2px;
}

.sff-gate__btn {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--gate-coral);
    color: #FFFFFF;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(8, 22, 26, 0.28);
    /* the disc holds its size and place; only the arrow inside it moves */
    transition: background 0.2s ease;
}

/* the disc keeps its colour on hover -- the arrow tipping up is the whole
   response. Keyboard focus still needs a mark it cannot miss. */
.sff-gate__btn:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 3px;
}

.sff-gate__btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.sff-gate__btn svg {
    display: block;
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

/* the arrow rests horizontal and tips up on hover -- the whole gesture,
   and the line the send then follows */
.sff-gate__btn:hover svg,
.sff-gate__btn:focus-visible svg {
    transform: rotate(-20deg);
}

/* Sending: the arrow keeps going the way the hover pointed it, and fades.
   It accelerates away rather than easing out, which is what makes it read
   as departing instead of just sliding. The disc only deepens in colour;
   it never changes size. */
@keyframes sff-arrow-send {
    0% {
        transform: rotate(-20deg) translate3d(0, 0, 0);
        opacity: 1;
    }
    100% {
        transform: rotate(-20deg) translate3d(30px, 0, 0);
        opacity: 0;
    }
}

.sff-gate__btn.is-sending {
    background: var(--gate-coral-deep);
}

.sff-gate__btn.is-sending svg {
    animation: sff-arrow-send 0.42s cubic-bezier(0.45, 0, 0.75, 0) forwards;
}

.sff-gate__hp {
    display: none;
}

.sff-gate__sig {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    align-items: center;
    gap: clamp(20px, 3vw, 44px);
}

.sff-gate__logo {
    width: clamp(150px, 15vw, 200px);
    height: auto;
    aspect-ratio: 176 / 50; /* holds the space so the fade never shifts the layout */
    display: block;
    filter: drop-shadow(0 2px 20px rgba(8, 22, 26, 0.5));
    opacity: 0;
    transition: opacity 0.5s ease;
}

.sff-gate__logo.is-ready {
    opacity: 1;
}

.sff-gate__proverb {
    margin: 0;
    font-family: var(--gate-display);
    font-weight: 600;
    font-size: clamp(16px, 1.5vw, 21px);
    line-height: 1.18;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: var(--gate-coral);
    text-shadow: 0 2px 18px rgba(8, 22, 26, 0.55);
}

.sff-gate__proverb span {
    display: block;
    margin-top: 10px;
    font-family: var(--gate-sans);
    font-weight: 400;
    font-size: clamp(13px, 1.05vw, 15px);
    line-height: 1.45;
    letter-spacing: 0;
    text-transform: none;
    color: #FFFFFF;
}

/* ---------- signup confirmation ---------- */
.sff-gate__form.is-sent {
    display: none;
}

.sff-gate__msg {
    margin: 0;
    max-width: 34ch;
    font-family: var(--gate-sans);
    font-size: clamp(15.5px, 1.22vw, 17px);
    line-height: 1.55;
    color: #FFFFFF;
    text-shadow: 0 1px 14px rgba(8, 22, 26, 0.5);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.sff-gate__msg.is-visible {
    opacity: 1;
    transform: none;
}

.sff-gate__msg.is-error {
    color: #FFC7A8;
}

/* ---------- password: the corner arrow, and the screen it opens ---------- */
.sff-gate__pw {
    position: fixed;
    right: clamp(14px, 2.4vw, 26px);
    bottom: clamp(14px, 2.4vw, 26px);
    z-index: 2147483647;
    text-align: right;
}

.sff-gate__pw-toggle {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    margin-left: auto;
    color: rgba(247, 241, 232, 0.55);
    cursor: pointer;
    transition: color 0.18s ease, transform 0.18s ease;
}

.sff-gate__pw-toggle svg {
    display: block;
    width: 20px;
    height: 20px;
}

.sff-gate__pw-toggle:hover,
.sff-gate__pw-toggle:focus-visible {
    color: rgba(247, 241, 232, 0.95);
    transform: translateX(2px);
}

/* Its own screen rather than a panel over the page: a quiet ground, one
   field, one arrow. Deliberately plain -- no pill, no coral disc -- so it
   reads as a utility door and not as part of the campaign. */
.sff-gate__screen {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: none;
    place-items: center;
    padding: 32px 24px;
    background: #10262B;
    color: var(--gate-cream);
}

.sff-gate--pw .sff-gate__screen {
    display: grid;
}

/* the landing page and the corner arrow step aside while it is up */
.sff-gate--pw .sff-gate__inner,
.sff-gate--pw .sff-gate__pw {
    display: none;
}

.sff-gate__screen-form {
    width: min(360px, 100%);
    text-align: left;
}

.sff-gate__screen-row {
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid rgba(247, 241, 232, 0.3);
    transition: border-color 0.2s ease;
}

.sff-gate__screen-row:focus-within {
    border-bottom-color: rgba(247, 241, 232, 0.75);
}

.sff-gate__screen-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 0;
    border: 0;
    background: transparent;
    color: var(--gate-cream);
    font-family: var(--gate-sans);
    font-size: 17px; /* over 16px, so iOS does not zoom on focus */
    letter-spacing: 0.02em;
}

.sff-gate__screen-input:focus {
    outline: 0;
}

.sff-gate__screen-go {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    background: transparent;
    color: rgba(247, 241, 232, 0.75);
    cursor: pointer;
    transition: color 0.18s ease, transform 0.18s ease;
}

.sff-gate__screen-go:hover,
.sff-gate__screen-go:focus-visible {
    color: var(--gate-cream);
    transform: translateX(2px);
}

.sff-gate__screen-go svg {
    display: block;
    width: 20px;
    height: 20px;
}

.sff-gate__screen-error {
    margin: 14px 0 0;
    min-height: 1.2em; /* reserve the line so nothing jumps when it fills */
    font-family: var(--gate-sans);
    font-size: 13.5px;
    line-height: 1.4;
    color: #FFC7A8;
}

.sff-gate__screen-back {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: clamp(28px, 6vw, 44px);
    font-family: var(--gate-sans);
    font-size: 13px;
    letter-spacing: 0.04em;
    color: rgba(247, 241, 232, 0.5);
    text-decoration: none;
    transition: color 0.18s ease;
}

.sff-gate__screen-back:hover,
.sff-gate__screen-back:focus-visible {
    color: rgba(247, 241, 232, 0.9);
}

/* ---------- narrow ---------- */
@media (max-width: 900px) {
    .sff-gate {
        /* stack the copy and let the password sit after it, rather than
           floating over the page at every scroll position */
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        /* one even scrim once the columns stack, since the copy now runs
           the full width rather than sitting to one side */
        background-image:
            linear-gradient(180deg,
                rgba(10, 26, 30, 0.78) 0%,
                rgba(10, 26, 30, 0.62) 40%,
                rgba(10, 26, 30, 0.66) 70%,
                rgba(10, 26, 30, 0.86) 100%),
            url("gate-mountains.webp");
        /* the ridge is the subject once the columns stack */
        background-position: center, 58% center;
    }

    .sff-gate__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 44px;
        padding-top: clamp(48px, 12vw, 80px);
        /* the password is in the flow below now and brings its own space,
           so the copy no longer has to reserve room for it */
        padding-bottom: clamp(28px, 7vw, 44px);
    }

    /* in the flow, at the end of the copy. margin-top: auto drops it to the
       bottom of the screen when the copy is short enough to leave room, and
       simply follows the copy when it is not. */
    .sff-gate__pw {
        position: static;
        z-index: auto;
        margin-top: auto;
        padding: 0 clamp(24px, 5vw, 76px) clamp(30px, 8vw, 48px);
    }

    .sff-gate__aside {
        min-height: 0;
        gap: 44px;
    }

    .sff-gate__sig {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }
}

@media (max-width: 520px) {
    .sff-gate__form {
        gap: 10px;
    }

    .sff-gate__btn {
        width: 44px;
        height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sff-gate__logo,
    .sff-gate__msg,
    .sff-gate__btn,
    .sff-gate__btn svg,
    .sff-gate__pw-toggle {
        transition: none;
    }

    /* keep the state change, drop the travel */
    .sff-gate__btn.is-sending,
    .sff-gate__btn.is-sending svg {
        animation: none;
    }

    .sff-gate__btn.is-sending svg {
        opacity: 0.35;
    }

    .sff-gate__btn:hover svg,
    .sff-gate__btn:focus-visible svg {
        transform: none;
    }
}

/* Autofill, and the preview Chrome paints while you hover a suggestion,
   both override the field's background with the browser's own colour.
   Both fields are solid white, so paint white straight back with an inset
   shadow, which autofill does not touch. (Clipping the background to the
   glyphs would also work, but only over an opaque parent -- here it would
   punch the field out and show the photograph through it.) */
.sff-gate__input:-webkit-autofill,
.sff-gate__input:-webkit-autofill:hover,
.sff-gate__input:-webkit-autofill:focus,
.sff-gate__input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset, 0 10px 30px rgba(8, 22, 26, 0.22);
    box-shadow: 0 0 0 1000px #FFFFFF inset, 0 10px 30px rgba(8, 22, 26, 0.22);
    -webkit-text-fill-color: #282725;
    caret-color: #282725;
    transition: background-color 600000s 0s, color 600000s 0s;
}

/* The password field is a bare underline on a dark ground, so it wants the
   opposite of the white one above: the autofill rectangle clipped away to
   the glyphs, letting the screen's own colour through. That is safe here
   because the screen behind it is opaque. */
.sff-gate__screen-input:-webkit-autofill,
.sff-gate__screen-input:-webkit-autofill:hover,
.sff-gate__screen-input:-webkit-autofill:focus,
.sff-gate__screen-input:-webkit-autofill:active {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: #F7F1E8;
    caret-color: #F7F1E8;
    transition: background-color 600000s 0s, color 600000s 0s;
}

.sff-gate__sink {
    position: absolute;
    width: 0;
    height: 0;
    border: 0;
    visibility: hidden;
}

.sff-gate .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}