/* ==========================================================================
   MFG Strength — foundation

   Design reference: Figma "Holding Page -> Alternative Cover" (node 122:203),
   drawn at 1512 x 982. The layout uses a single 146px gutter, applied equally
   to the left edge, the logo's top offset and the footer's bottom offset.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts

   Inter (body) is loaded from Google Fonts — see the <link> in _layout.twig.
   Nocken (headings) is a licensed typeface, so it is self-hosted from
   /assets/fonts/. Drop the woff2s in and the filenames below will pick them up.
   -------------------------------------------------------------------------- */

/* Light (300) — headings. Medium (500) — buttons. */
@font-face {
    font-family: 'Nocken';
    src: url('/assets/fonts/NockenLight.woff2') format('woff2'),
         url('/assets/fonts/NockenLight.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nocken';
    src: url('/assets/fonts/NockenMedium.woff2') format('woff2'),
         url('/assets/fonts/NockenMedium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */

:root {
    --font-heading: 'Nocken', 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --color-bg: #000;
    --color-accent: #a19483;  /* heading + CTA */
    --color-body: #b1b1b1;    /* intro copy */
    --color-quiet: #727272;   /* footer */

    /* 146 / 1512 = 9.656vw — holds the design ratio, then caps so the
       content doesn't drift right on ultrawide displays */
    --gutter: clamp(1.5rem, 9.656vw, 146px);

    /* Bumps every type size above the Figma values, which read too small in
       the browser. Set to 1 to go back to matching the comp exactly. */
    --type-scale: 1.125;

    /* Design sizes scaled by their share of the 1512px frame, then by the
       scale above. Floors are raised so the fluid sizes can't fall far below
       the target on a narrower desktop — at 1440 the old body size resolved
       to 15.2px, not the 16px the comp specified. */
    --logo-w: clamp(4.375rem, 6.15vw, 93px);
    --size-heading: clamp(2.25rem, calc(3.175vw * var(--type-scale)), calc(48px * var(--type-scale)));
    --size-body: clamp(1.063rem, calc(1.058vw * var(--type-scale)), calc(16px * var(--type-scale)));
    --size-quiet: 12px;
    --size-small: 14px;   /* hints, legal, status */
    --size-label: 12px;   /* field labels */
    --size-button: 16px;

    /* Figma reports -1.28px on 16px and -0.8px on 10px — both -0.08em */
    --tracking-tight: -0.08em;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--color-bg);
    color: var(--color-body);
    font-family: var(--font-body);
    font-size: var(--size-body);
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 300;
    line-height: normal;
}

p {
    margin: 0;
}

a {
    color: inherit;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   Page shell — header / main / footer on a full-height column
   -------------------------------------------------------------------------- */

.page {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
    padding: var(--gutter);
    padding-block-end: max(var(--gutter), env(safe-area-inset-bottom));
}

.page__header {
    flex: none;
}

/* Main fills the space between header and footer; its content sits centred
   in that space, which is where the design places it (within ~6px) */
.page__main {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--gutter);
}

.page__footer {
    flex: none;
}

.site-logo {
    width: var(--logo-w);
}

/* --------------------------------------------------------------------------
   Cover media

   The photo is anchored 146px from the left and bleeds off the right edge,
   overflowing the frame top and bottom — hence the out-of-bounds values.
   -------------------------------------------------------------------------- */

.cover {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100svh;
}

.cover__media {
    position: absolute;
    top: -4.073%;      /* -40 / 982 */
    left: 9.656%;      /* 146 / 1512 */
    width: 121.495%;   /* 1837 / 1512 */
    height: 105.194%;  /* 1033 / 982 */
}

.cover__media {
    /* Decorative — never swallow a tap meant for the page above it */
    pointer-events: none;
}

.cover__video {
    width: 100%;
    height: 100%;  /* overrides the height:auto in the base media rule */
    object-fit: cover;
}

/* iOS Safari injects a start-playback overlay whenever autoplay is refused —
   Low Power Mode is the common trigger. The video sits behind .page, so taps
   land on the page wrapper rather than that button and nothing happens. Hide
   it; the poster frame stands in as a still, which is the intended look
   anyway. site.js retries playback on first interaction. */
.cover__video::-webkit-media-controls,
.cover__video::-webkit-media-controls-start-playback-button,
.cover__video::-webkit-media-controls-panel,
.cover__video::-webkit-media-controls-overlay-play-button {
    display: none !important;
    -webkit-appearance: none;
    appearance: none;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero__title {
    font-size: var(--size-heading);
    font-weight: 300;
    color: var(--color-accent);
    text-transform: uppercase;
}

.hero__intro {
    max-width: 24rem;  /* 378px in the design */
    margin-block-start: 2.563rem;
    color: var(--color-body);
    letter-spacing: var(--tracking-tight);
}

/* Entrance — the three hero elements rise in on load, lightly staggered.
   `both` fill keeps them hidden through their delay rather than flashing in
   at full opacity first. The reduced-motion block at the foot of this file
   collapses the duration, and the fill mode leaves them in their end state. */

@keyframes fade-up {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.hero__alt {
    font-size: 0.9rem;
    margin-block-start: 1.25rem;
    color: var(--color-quiet);
    letter-spacing: var(--tracking-tight);
}

.hero__alt a {
    color: var(--color-accent);
    text-underline-offset: 0.2em;
    transition: color 0.2s ease;
}

.hero__alt a:hover,
.hero__alt a:focus-visible {
    color: var(--color-body);
}

.hero__title,
.hero__intro,
.hero__cta,
.hero__alt {
    animation: fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.hero__intro {
    animation-delay: 0.12s;
}

.hero__cta {
    animation-delay: 0.24s;
}

.hero__alt {
    animation-delay: 0.36s;
}

/* --------------------------------------------------------------------------
   Button — the bordered CTA from the design, shared by the hero and the form
   -------------------------------------------------------------------------- */

.button {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border: 1px solid var(--color-accent);
    background: none;
    color: var(--color-accent);
    font-family: var(--font-heading);
    font-size: var(--size-button);
    font-weight: 500;  /* Nocken Medium */
    line-height: normal;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.button:hover,
.button:focus-visible {
    background-color: var(--color-accent);
    color: var(--color-bg);
}

.button[disabled] {
    opacity: 0.5;
    cursor: default;
}

.button svg {
    flex: none;
    width: 20px;
    height: 20px;
}

.hero__cta {
    margin-block-start: 2.625rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem 2.563rem;
    align-items: center;
    color: var(--color-quiet);
    font-size: var(--size-quiet);
    letter-spacing: var(--tracking-tight);
}

/* --------------------------------------------------------------------------
   Register Interest modal
   -------------------------------------------------------------------------- */

.modal {
    width: min(34rem, calc(100vw - 2 * var(--gutter)));
    max-width: none;
    max-height: min(46rem, calc(100svh - 2rem));
    padding: 0;
    border: none;
    background: none;
    color: var(--color-body);
    overflow: visible;
}

.modal::backdrop {
    background-color: rgb(0 0 0 / 0.8);
    backdrop-filter: blur(4px);
}

/* showModal() makes the page inert but doesn't stop it scrolling behind */
html:has(.modal[open]) {
    overflow: hidden;
}

.modal__panel {
    position: relative;
    max-height: inherit;
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid rgb(161 148 131 / 0.35);
    background-color: var(--color-bg);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.modal__close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: grid;
    width: 2.25rem;
    height: 2.25rem;
    place-items: center;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-quiet);
    cursor: pointer;
    transition: color 0.2s ease;
}

.modal__close:hover,
.modal__close:focus-visible {
    color: var(--color-accent);
}

.modal__close svg {
    width: 20px;
    height: 20px;
}

.modal__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 2.5rem);
    font-weight: 300;
    color: var(--color-accent);
    text-transform: uppercase;
}

.modal__intro {
    max-width: 26rem;
    margin-block-start: 0.75rem;
    letter-spacing: var(--tracking-tight);
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */

.form {
    margin-block-start: 2rem;
}

.field + .field {
    margin-block-start: 1.25rem;
}

.field__label {
    display: block;
    margin-block-end: 0.5rem;
    color: var(--color-quiet);
    font-size: var(--size-label);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.field__input {
    width: 100%;
    padding: 0.75rem 0.875rem;
    border: 1px solid rgb(161 148 131 / 0.35);
    background-color: transparent;
    color: #fff;
    font-family: var(--font-body);
    font-size: max(16px, var(--size-body));  /* below 16px iOS zooms the page on focus */
    line-height: 1.4;
    transition: border-color 0.2s ease;
}

.field__input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.field__input:user-invalid {
    border-color: #c46a5c;
}

.field__input::placeholder {
    color: var(--color-quiet);
}

.form__submit {
    margin-block-start: 2rem;
}

.form__legal {
    margin-block-start: 1.25rem;
    color: var(--color-quiet);
    font-size: var(--size-small);
}

.form__status {
    margin-block-start: 1rem;
    font-size: var(--size-small);
}

.form__status:empty {
    display: none;
}

.form__status[data-state='pending'] {
    color: var(--color-quiet);
}

.form__status[data-state='success'] {
    color: var(--color-accent);
}

.form__status[data-state='error'] {
    color: #c46a5c;
}

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

/* --------------------------------------------------------------------------
   Narrow viewports

   Design reference: Figma "Holding Mobile -> Alternative Cover" (node 122:275),
   drawn at 402 x 874.

   This is a different composition, not a reflow of the desktop one. The video
   sits full-bleed across the top with the copy stacked beneath it, rather than
   running behind the copy. The logo is centred over the video, and a gradient
   fades the video's bottom edge into the page background.

   Gutter is 39px at 402 wide — 9.7vw, the same ratio as the desktop's
   146/1512, so --gutter already resolves correctly here.
   -------------------------------------------------------------------------- */

@media (max-width: 60rem) {
    :root {
        /* The comp's video box is 142.786vw / 66svh. Pulled back from both so
           the button and footer aren't crowded against the browser chrome on
           a real handset. */
        --cover-h: min(125vw, 56svh);
        --cover-top: 0px;

        --logo-w: 93px;                  /* full size on mobile, not scaled down */

        /* Not scaled by --type-scale, unlike everything else. The comp's
           9.34vw is sized so "COMING SOON" exactly fills the line between the
           gutters; scaling it up forced a two-line wrap that cost ~50px of
           vertical space. */
        --size-heading: clamp(2rem, 9.3vw, 3rem);
        --size-body: calc(16px * var(--type-scale));
        --size-quiet: 11px;
    }

    .cover__media {
        top: var(--cover-top);
        left: 0;
        width: 100%;
        height: var(--cover-h);
    }

    /* Fades the foot of the video into the background. In Figma this is a
       424x91 rectangle rotated -90deg; 91/574 is ~16% of the video height. */
    .cover__media::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 16%;
        background: linear-gradient(to bottom, rgb(0 0 0 / 0), var(--color-bg));
    }

    /* The comp puts the logo at y=84; that reads as dead space on a tall
       handset, so it sits on the standard gutter instead. */
    .page {
        padding-block-start: max(var(--gutter), env(safe-area-inset-top));
    }

    .page__header {
        display: flex;
        height: 23px;
        justify-content: center;
    }

    /* Drops the copy to the foot of the video. The heading overlaps the last
       36px of the video box, where the gradient has already faded it to black.
       Expressed against the tokens above so it stays correct if they change. */
    .page__main {
        justify-content: flex-start;
        padding-block: max(
            0px,
            calc(var(--cover-top) + var(--cover-h) - 2.25rem - var(--gutter) - 23px)
        ) 0;
    }

    .hero__intro {
        max-width: 17.688rem;  /* 283px in the design */
        margin-block-start: 1.625rem;
    }

    .hero__cta {
        margin-block-start: 1.625rem;
    }

    .site-footer {
        gap: 0.75rem 1.5rem;
    }

    /* Modal goes fullscreen — no gutter, no border, no visible backdrop.
       dvh rather than svh so it tracks the browser chrome collapsing on
       scroll instead of leaving a strip of page showing underneath. */
    .modal {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        margin: 0;
    }

    .modal__panel {
        height: 100%;
        max-height: none;
        border: none;
        padding-block-start: max(var(--gutter), env(safe-area-inset-top));
        padding-block-end: max(var(--gutter), env(safe-area-inset-bottom));
        padding-inline: var(--gutter);
    }

    /* Fixed, not absolute — the panel scrolls when fullscreen, and an absolute
       close button would scroll out of reach past the seven fields. */
    .modal__close {
        position: fixed;
        top: max(0.5rem, env(safe-area-inset-top));
        right: max(0.5rem, env(safe-area-inset-right));
        background-color: var(--color-bg);
        border-radius: 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: -0.01ms !important;  /* skip staggers, don't just shorten them */
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}