/* ============================================================
   Multiservice World — splash page
   Layout & type follow the Figma:
     font: Inter Regular, 12px, line-height 20px, tracking 1.44px
     palette: black background, white text @ 100%, image @ 15% w/ 2px blur
     content column: 279px wide, 64px gap between sections, centred
   ============================================================ */

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

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: #000;
    color: #fff;
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 1.44px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    min-height: 100svh;
    overflow: hidden;
    display: grid;
    place-items: center;
    position: relative;
}

/* --- Background image -------------------------------------- */
.bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.15;
    filter: blur(2px);
    /* Slight scale prevents blur edge from showing through */
    transform: scale(1.02);
}

/* Tablet and up: anchor the image so the face sits in the
   upper half of the viewport (above the form), rather than
   defaulting to vertical centre which crops the head off on
   wide screens. The exact value is tuned visually against the
   photo we ship — re-tune if the photo changes. */
@media (min-width: 720px) {
    .bg img {
        object-position: center 30%;
    }
}

/* --- Content column --------------------------------------- */
.content {
    position: relative;
    z-index: 1;
    width: 279px;
    max-width: calc(100% - 48px);
    padding-bottom: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 64px;
    text-align: center;
    text-transform: uppercase;
}

/* Each chunk of text uses identical type — only role differs */
.intro,
.details,
.supporting {
    margin: 0;
    width: 100%;
}

/* The intro is semantic (h1 + p) but renders as one continuous block.
   Strip browser default margins/sizes so it matches the rest of the type. */
.intro h1,
.intro p {
    margin: 0;
    font: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
}

/* --- Email field ------------------------------------------ */
.fieldset {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
}

.input-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 0.5px solid #fff;
    width: 100%;
    gap: 12px;
    transition: border-color 0.2s ease, opacity 0.2s ease;
}

.input-row[data-state="error"] {
    border-bottom-color: #ff6b6b;
}

input[type="email"] {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: #fff;
    font: inherit;
    letter-spacing: inherit;
    text-transform: uppercase;
    padding: 0;
    line-height: 20px;
}

input[type="email"]::placeholder {
    color: #fff;
    opacity: 1;
    text-transform: uppercase;
    letter-spacing: 1.44px;
}

input[type="email"]:focus-visible {
    outline: 0;
}

input[type="email"]:-webkit-autofill {
    -webkit-text-fill-color: #fff;
    transition: background-color 9999s ease-in-out 0s;
    caret-color: #fff;
}

.send-btn {
    flex: 0 0 auto;
    background: transparent;
    border: 0;
    padding: 0;
    color: #fff;
    font: inherit;
    letter-spacing: inherit;
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.send-btn:hover,
.send-btn:focus-visible {
    opacity: 0.7;
    outline: 0;
}

.send-btn[disabled] {
    opacity: 0.4;
    cursor: default;
}

.supporting {
    margin: 0;
    color: #fff;
    text-transform: none;
    transition: color 0.2s ease;
}

/* Empty by default — only shows when JS injects an error message. */
.supporting:empty {
    display: none;
}

.supporting[data-state="error"] {
    color: #ff6b6b;
}

/* --- Instagram link --------------------------------------- */
.details a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 0.5px;
    transition: opacity 0.2s ease;
}

.details a:hover,
.details a:focus-visible {
    opacity: 0.7;
    outline: 0;
}

/* --- Honeypot --------------------------------------------- */
.hp {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

/* --- Success state ---------------------------------------- */
.fieldset.is-success .input-row,
.fieldset.is-success .supporting {
    display: none;
}

.fieldset.is-success .success-msg {
    display: block;
    margin: 0;
    width: 100%;
    text-align: left;
    padding: 12px 0;
    border-bottom: 0.5px solid #fff;
}

.success-msg {
    display: none;
}

/* --- Reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0s !important;
        animation-duration: 0s !important;
    }
}

/* --- Mobile tweaks (small phones) ------------------------ */
@media (max-width: 360px) {
    .content {
        max-width: calc(100% - 32px);
    }
}