/* =============================================================================
   Arcane Manor — landing page (page-scoped layer)
   -----------------------------------------------------------------------------
   The page is built from the Arcane UI design system (assets/css/arcane-ui.css).
   This file only holds page-specific LAYOUT + the crest/wordmark treatment, and
   it does so entirely through the system's --am-* tokens so it recolors with any
   room theme. No component styles live here — reuse arcane-ui.css for those.
   ========================================================================== */

/* ---- Page shell ---------------------------------------------------------- */
.landing {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    min-height: 100dvh;
    /* accounts for mobile browser chrome */
    padding: clamp(16px, 4vw, 48px);
}

/* ---- Compound backdrop --------------------------------------------------- */
/* A fixed layer behind all content: the candlelit ballroom photo, calmed by a
   dark scrim so the card reads cleanly, with the scribble grain blended on top
   (soft-light) for a hand-finished texture. A fixed pseudo is used instead of
   background-attachment:fixed so it stays reliable on mobile. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        url("../img/scribble_dark.png") repeat top left / 320px auto,
        linear-gradient(rgba(10, 8, 12, .5), rgba(10, 8, 12, .7)),
        url("../img/landing-page-background.png") center center / cover no-repeat;
    background-blend-mode: soft-light, normal, normal;
}

/* Descendant selector (.landing .landing__card) so these beat arcane-ui's
   `.card:is(.coved,…)` rule, which otherwise forces a near-transparent fill and
   a wider radius — letting the photo backdrop wash straight through the panel. */
.landing .landing__card {
    width: 100%;
    max-width: 660px;
    /* The cove frame carries the panel. A near-opaque, neutral near-black fill
       (a touch under the page's #141414) gives it real substance over the photo
       while keeping copy readable; the photo only peeks through at the concave
       corners. */
    --am-cove-radius: 18;
    --am-cove-fill: rgba(14, 14, 14, .97);
    --am-cove-stroke: rgba(var(--am-ornament-rgb), .7);
}

.landing__card>.card-body {
    padding: clamp(2rem, 5vw, 3.4rem) clamp(1.5rem, 5vw, 3rem);
    text-align: center;
}

/* Italic accent inside headings (e.g. "…being forged.") */
.landing__card em {
    font-family: var(--am-font-italic);
    font-style: italic;
    font-weight: 500;
    color: var(--am-highlight-text);
}

/* ---- Crest --------------------------------------------------------------- */
.crest {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .6));
}

/* Ornate key motif — a single-colour mask so it retints with the room theme */
.crest__key {
    display: block;
    aspect-ratio: 120 / 170;
    height: clamp(84px, 18vw, 112px);
    background: var(--am-highlight);
    -webkit-mask: url("../img/key.svg") no-repeat center / contain;
    mask: url("../img/key.svg") no-repeat center / contain;
}

/* ---- Wordmark (hero lockup) ---------------------------------------------- */
/* The "Arcane Manor" lockup is the h1, sized to sit as the hero. Painted as a
   masked shape so it keeps the design system's light-to-highlight gradient and
   recolours with any room theme, just like the old gradient-text heading did. */
.brand-lockup {
    display: block;
    aspect-ratio: 320 / 40;
    width: clamp(240px, 70vw, 440px);
    margin: 0 auto;
    background: linear-gradient(180deg, var(--am-text) 0%, var(--am-faint) 135%);
    -webkit-mask: url("../img/word-lockup.svg") no-repeat center / contain;
    mask: url("../img/word-lockup.svg") no-repeat center / contain;
}

/* ---- Ornamental rule with centred caps ----------------------------------- */
.landing__rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    max-width: 460px;
    margin: 6px auto 12px;
    color: var(--am-ornament);
}

/* .landing__rule::before,
.landing__rule::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--am-ornament-rgb), .55), transparent);
} */

.landing__rule span {
    font-family: var(--am-font-eyebrow);
    font-size: .86rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--am-highlight-text);
}

/* Tagline hidden for now to save vertical space */
.landing__card .tagline {
    display: none;
}

.landing__lede {
    max-width: 46ch;
    margin-inline: auto;
}

/* ---- Concept image bar --------------------------------------------------- */
/* A slow, seamless marquee of square concept photos. The track holds two
   identical copies of the set and scrolls exactly -50%, so the loop is joinless;
   edges fade out via a mask. The set is repeated in PHP until it comfortably
   exceeds the panel width, so there is never a blank stretch in the loop even
   with only a handful of source photos. Speed is constant regardless of how
   many tiles are present (duration scales with --concept-count). */
.concept-bar {
    margin: 1.9rem 0 .35rem;
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
    mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.concept-track {
    display: flex;
    gap: 6px;
    width: max-content;
    animation: concept-scroll calc(var(--concept-count, 5) * 18s) linear infinite;
}

.concept-bar:hover .concept-track {
    animation-play-state: paused;
}

.concept-tile {
    flex: 0 0 auto;
    width: 150px;
    height: 150px;
    overflow: hidden;
    /* border-radius: 4px; */
    border: 1px solid rgba(var(--am-ornament-rgb), .35);
    /* border-top: none; */
    border: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}

.concept-tile img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes concept-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .concept-track {
        animation: none;
    }

    .concept-bar {
        overflow-x: auto;
    }
}

/* ---- Form ---------------------------------------------------------------- */
.signup {
    margin-top: 2rem;
    text-align: left;
}

.form-field {
    margin-bottom: 1.1rem;
}

/* First + last name side by side, stacked on small screens */
.names-row {
    display: flex;
    gap: 14px;
}

.names-row .form-field {
    flex: 1;
}

/* Early-tester invitation — a coved panel that leans on the frame engine */
.tester {
    --am-cove-radius: 10;
    --am-cove-fill: rgba(var(--am-accent-rgb), .1);
    --am-cove-stroke: rgba(var(--am-ornament-rgb), .5);
    gap: .8rem;
    margin: 1.5rem 0 1.35rem;
    padding: 1rem 1.15rem;
}

.tester-title {
    display: block;
    font-family: var(--am-font-subtitle);
    font-weight: 600;
    font-size: 1.02rem;
    line-height: 1.25;
    color: var(--am-text);
}

/* Brighter than the system default .form-text (--am-faint / #7c7c7c reads too
   dark on this photo-backed panel); --am-muted is the floor for page copy. */
.tester .form-text {
    margin-top: .3rem;
    color: var(--am-muted);
}

.signup .btn-submit {
    width: 100%;
    margin-top: .5rem;
    padding: 1em 1.5em;
    line-height: 1.25;
    /* Set apart from the serif form: the sans display face at a larger size.
       The 0.25px stroke matches how the design system crisps its sans caps
       (.eyebrow / .tagline) — it is not applied to sans usage globally. */
    font-family: var(--am-font-sans);
    font-size: .98rem;
    letter-spacing: .1em;
    -webkit-text-stroke: 0.25px currentColor;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Input labels share the sans display face — and its crisping stroke — with
   the submit button. */
.signup .form-label {
    font-family: var(--am-font-sans);
    -webkit-text-stroke: 0.125px currentColor;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ---- Validation display (page-scoped) ------------------------------------ */
/* No "success/green" state is applied at all (see main.js — is-valid is never
   added), because a tick on every completed field stacks up into visual noise.
   And while a field is focused, we suppress the red invalid styling so only the
   normal focus ring shows; the error re-appears on blur once they leave it. */
.signup .form-control.is-invalid:focus {
    border-color: var(--am-ornament);
    outline-color: var(--am-highlight);
}

.signup .form-control.is-invalid:focus ~ .invalid-feedback {
    display: none;
}

/* Form-level status message reuses the .alert component. It sits at the top of
   the form (above the name fields); space it below so it separates from them,
   and only when it is actually shown (it is [hidden] until there's a message). */
#form-status:not([hidden]) {
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* ---- Verify / status page ------------------------------------------------ */
/* Reuses the whole landing shell (.landing / .landing__card / backdrop). Just a
   few page-specific tweaks for the confirmation screen's simpler content. */
.status-title {
    margin-top: .6rem;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
}

.status-page .landing__lede {
    margin-bottom: 2rem;
}

/* Return-home button: not full-width like the signup submit; sits centred
   (the card body is centre-aligned) with a little room to breathe. */
.status-cta {
    display: inline-flex;
    margin-top: .25rem;
}

/* ---- Fineprint ----------------------------------------------------------- */
.fineprint {
    margin-top: 1.4rem;
    margin-bottom: 0;
    line-height: 1.5;
    color: var(--am-muted);
}

.fineprint a {
    color: var(--am-highlight-text);
}

/* Honeypot — visually gone, off-screen (not display:none, which bots skip) */
.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

/* reCAPTCHA badge is hidden; Google is credited in the fineprint instead
   (compliant with Google's terms while the credit text is shown). */
.grecaptcha-badge {
    visibility: hidden;
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 560px) {
    .names-row {
        flex-direction: column;
        gap: 0;
    }

    .crest {
        margin-bottom: 14px;
    }

    /* Let the three product categories wrap rather than overflow the card */
    .landing__rule span {
        white-space: normal;
        text-align: center;
    }
}

/* Landscape phones: don't force full-height centering (keyboard would crowd it) */
@media (max-height: 560px) and (orientation: landscape) {
    .landing {
        min-height: auto;
        padding: 24px 12px;
    }
}