/* ============================================================
   PERFORM SportsTech — Launch Event registration
   Palette follows the invitation: near-black core, warm amber
   edge glow, gold accents.
   ============================================================ */

:root {
    --gold:       #F6A91C;
    --gold-soft:  #FFC24A;
    --amber-deep: #3d2409;   /* warm brown of the invitation edges */
    --amber:      #96581a;

    --ink:        #070605;   /* page background */
    --panel:      #0d0b08;   /* form panel surface */
    --card:       #16120c;   /* inputs / cards */
    --line:       rgba(255, 255, 255, .12);
    --line-soft:  rgba(255, 255, 255, .07);
    --text:       #f7f2e9;
    --muted:      #b1a48d;
    --danger:     #ff6b6b;

    --radius:     16px;
    --radius-sm:  12px;
    --shadow:     0 24px 60px -20px rgba(0,0,0,.65);
    --font-disp:  'Archivo', system-ui, sans-serif;
    --font-body:  'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    color: var(--text);
    background: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

/* ============================================================
   SHELL  (mobile-first: single column, document scroll)
   ============================================================ */
.shell {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 100dvh;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: clamp(1.75rem, 5vw, 4rem);
    min-height: 56vh;
    display: flex;
    flex-direction: column;   /* mobile: copy first, imagery below it — never behind it */
    isolation: isolate;
}

/* Warm amber columns hugging the edges, black through the middle —
   the lighting of the invitation. */
.hero__bg {
    position: absolute; inset: 0; z-index: -3;
    background:
        radial-gradient(26% 100% at 0% 50%,   rgba(150,88,26,.92), transparent 72%),
        radial-gradient(26% 100% at 100% 50%, rgba(150,88,26,.80), transparent 72%),
        radial-gradient(70% 55% at 50% 0%,    rgba(246,169,28,.10), transparent 65%),
        linear-gradient(180deg, #0f0a05 0%, #050404 48%, #0a0705 100%);
}

/* thin bright streaks at the edges + vignette so type stays legible */
.hero__bg::after {
    content: ""; position: absolute; inset: 0;
    background:
        radial-gradient(9% 78% at 2% 50%,   rgba(255,196,90,.45), transparent 70%),
        radial-gradient(8% 70% at 98% 52%,  rgba(255,196,90,.35), transparent 70%),
        radial-gradient(72% 68% at 45% 52%, rgba(0,0,0,.62), transparent 78%);
}

/* mobile: sits in the flow, under the copy */
.hero__athletes {
    order: 2;
    align-self: center;
    width: min(84%, 340px);
    margin-top: clamp(1.5rem, 5vw, 2.5rem);
    filter: drop-shadow(0 30px 40px rgba(0,0,0,.5));
    pointer-events: none;
    -webkit-user-select: none; user-select: none;
}

.hero__grain {
    position: absolute; inset: 0; z-index: -1; opacity: .5;
    background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 4px 4px;
    mix-blend-mode: overlay;
}

.hero__inner {
    order: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(1.1rem, 3vw, 2rem);
    max-width: 560px;
    width: 100%;
}

.hero__logo {
    width: clamp(150px, 30vw, 200px);
    height: auto;
    margin-bottom: auto;   /* logo pinned top, headline + points sink to bottom */
}

.eyebrow {
    display: inline-block;
    font-weight: 700;
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold-soft);
    margin-bottom: .35rem;
}

.hero__title {
    font-family: var(--font-disp);
    font-weight: 900;
    font-size: clamp(3.4rem, 13vw, 6.2rem);
    line-height: .86;
    margin: 0;
    letter-spacing: -.02em;
    text-transform: uppercase;
    text-shadow: 0 6px 30px rgba(0,0,0,.4);
}
.hero__title em {
    font-style: italic;
    color: var(--gold);
    -webkit-text-stroke: 0;
}

.hero__tag {
    font-size: clamp(1rem, 2.4vw, 1.18rem);
    line-height: 1.5;
    color: rgba(255,255,255,.92);
    margin: 0;
    max-width: 36ch;
    font-weight: 500;
}

.hero__points {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: .6rem;
}
.hero__points li {
    display: flex; align-items: center; gap: .65rem;
    font-size: .95rem; color: rgba(255,255,255,.9);
    max-width: 34ch;
}
.hero__points .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 4px rgba(246,169,28,.25);
    flex: none;
}

.hero__note {
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(246,169,28,.28);
    font-size: .88rem; line-height: 1.5;
    color: var(--gold-soft);
    letter-spacing: .01em;
}

/* ============================================================
   FORM PANEL
   ============================================================ */
.panel {
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(246,169,28,.08), transparent 60%),
        var(--panel);
    display: flex;
}

.panel__scroll {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: clamp(1.75rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3rem);
}

.form-wrap {
    width: 100%;
    max-width: 560px;
}

.form-head { margin-bottom: 1.6rem; }
.badge {
    display: inline-block;
    font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--gold-soft);
    background: rgba(246,169,28,.12);
    border: 1px solid rgba(246,169,28,.3);
    padding: .35rem .7rem; border-radius: 999px;
    margin-bottom: .9rem;
}
.form-head h2 {
    font-family: var(--font-disp);
    font-weight: 800; font-size: clamp(1.8rem, 5vw, 2.4rem);
    margin: 0 0 .35rem; letter-spacing: -.01em;
}
.form-head p { margin: 0; color: var(--muted); font-size: 1rem; }

/* alert */
.alert {
    background: rgba(255,107,107,.1);
    border: 1px solid rgba(255,107,107,.35);
    color: #ffd9d9;
    border-radius: var(--radius-sm);
    padding: .9rem 1.1rem;
    margin-bottom: 1.4rem;
    font-size: .92rem;
}
.alert strong { display: block; margin-bottom: .3rem; }
.alert ul { margin: 0; padding-left: 1.1rem; }

/* grid + fields */
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.05rem 1.1rem;
}
.field { display: flex; flex-direction: column; gap: .45rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }

.field label {
    font-size: .82rem; font-weight: 600; letter-spacing: .01em;
    color: #eadfcc;
}
.req { color: var(--gold); }
.opt { color: var(--muted); font-weight: 500; font-size: .76rem; }

.label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.counter {
    font-size: .76rem; color: var(--muted);
    font-variant-numeric: tabular-nums;
    transition: color .2s;
}
.counter.over { color: var(--danger); font-weight: 600; }

input, textarea {
    font-family: inherit; font-size: 1rem; color: var(--text);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .8rem .9rem;
    width: 100%;
    transition: border-color .18s, box-shadow .18s, background .18s;
    -webkit-appearance: none; appearance: none;
}
input::placeholder, textarea::placeholder { color: #7d7161; }
textarea { resize: vertical; min-height: 110px; line-height: 1.55; }

input:hover, textarea:hover { border-color: rgba(255,255,255,.22); }
input:focus, textarea:focus {
    outline: none;
    border-color: var(--gold);
    background: #1e1810;
    box-shadow: 0 0 0 4px rgba(246,169,28,.18);
}

/* input with leading icon */
.input-icon { position: relative; }
.input-icon svg {
    position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; fill: var(--gold); opacity: .85;
    pointer-events: none;
}
.input-icon input { padding-left: 2.6rem; }

.hint { color: var(--muted); font-size: .76rem; }

/* error states */
.field--error input, .field--error textarea {
    border-color: rgba(255,107,107,.7);
    box-shadow: 0 0 0 4px rgba(255,107,107,.14);
}
.err { color: var(--danger); font-size: .8rem; }

/* button */
.btn {
    margin-top: 1.6rem;
    width: 100%;
    display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
    font-family: var(--font-disp);
    font-weight: 800; font-size: 1.05rem; letter-spacing: .01em;
    color: #2a1402;
    background: linear-gradient(135deg, var(--gold-soft), var(--gold) 55%, #e8910a);
    border: none; border-radius: var(--radius-sm);
    padding: 1rem 1.4rem;
    cursor: pointer;
    box-shadow: 0 14px 30px -10px rgba(246,169,28,.6);
    transition: transform .12s ease, box-shadow .2s, filter .2s;
}
.btn svg { width: 20px; height: 20px; transition: transform .2s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -10px rgba(246,169,28,.7); filter: brightness(1.04); }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 3px solid var(--gold-soft); outline-offset: 3px; }

.legal { margin: 1rem 0 0; color: var(--muted); font-size: .76rem; text-align: center; line-height: 1.5; }

/* ============================================================
   DESKTOP — split screen, inner-scroll shell
   ============================================================ */
@media (min-width: 900px) {
    html, body { height: 100%; overflow: hidden; }
    .shell {
        grid-template-columns: 1.04fr 1fr;
        height: 100dvh;
    }
    .hero { min-height: auto; flex-direction: row; }

    /* desktop: back behind the layout, right-edge only, left edge faded to black */
    .hero__athletes {
        position: absolute; z-index: -2;
        right: -6%; bottom: -2%;
        width: min(56%, 430px);
        margin: 0;
        opacity: .92;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 34%, #000 66%);
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 34%, #000 66%);
    }
    .hero__inner { max-width: 28rem; }
    .panel { min-height: 0; }
    .panel__scroll { overflow-y: auto; align-items: flex-start; }
}

@media (min-width: 1500px) {
    .panel__scroll { padding-left: 5vw; }
    .form-wrap { max-width: 600px; }
}

/* very small phones: single-column fields */
@media (max-width: 460px) {
    .grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* ============================================================
   THANK-YOU / ERROR PAGES
   ============================================================ */
.thanks {
    min-height: 100dvh;
    display: grid; place-items: center;
    padding: clamp(1.5rem, 5vw, 3rem);
    position: relative; isolation: isolate; overflow: hidden;
}
.thanks__bg {
    position: absolute; inset: 0; z-index: -2;
    background:
        radial-gradient(24% 100% at 0% 50%,   rgba(150,88,26,.92), transparent 72%),
        radial-gradient(24% 100% at 100% 50%, rgba(150,88,26,.82), transparent 72%),
        radial-gradient(70% 55% at 50% 0%,    rgba(246,169,28,.10), transparent 65%),
        linear-gradient(180deg, #0f0a05 0%, #050404 48%, #0a0705 100%);
}
.thanks__bg::after {
    content:""; position:absolute; inset:0;
    background:
        radial-gradient(8% 78% at 2% 50%,  rgba(255,196,90,.42), transparent 70%),
        radial-gradient(7% 70% at 98% 52%, rgba(255,196,90,.34), transparent 70%);
}
.thanks__card {
    width: 100%; max-width: 520px;
    text-align: center;
    background: rgba(8,6,4,.62);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 24px;
    padding: clamp(2rem, 6vw, 3.2rem);
    box-shadow: var(--shadow);
    color: #fff;
}
.thanks__logo { width: 170px; margin: 0 auto 1.5rem; }
.check {
    width: 76px; height: 76px; margin: 0 auto 1.4rem;
    display: grid; place-items: center;
    border-radius: 50%;
    color: #2a1402;
    background: linear-gradient(135deg, var(--gold-soft), var(--gold));
    box-shadow: 0 12px 30px -8px rgba(246,169,28,.7);
    animation: pop .45s cubic-bezier(.2,.9,.3,1.4) both;
}
.check svg { width: 40px; height: 40px; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.thanks__card h1 {
    font-family: var(--font-disp); font-weight: 900;
    font-size: clamp(1.9rem, 6vw, 2.7rem); margin: 0 0 .6rem; letter-spacing: -.01em;
}
.thanks__card h1.code { font-size: clamp(3.5rem, 14vw, 5.5rem); color: var(--gold); }
.thanks__card p { color: rgba(255,255,255,.9); font-size: 1.05rem; line-height: 1.6; margin: 0 0 1.1rem; }
.thanks__card p:last-child { margin-bottom: 0; }
.thanks__card p.thanks__sign { color: var(--gold-soft); font-weight: 600; margin-top: 1.6rem; }

.btn--ghost {
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-disp); font-weight: 700; font-size: 1rem;
    color: #fff; text-decoration: none;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: var(--radius-sm);
    padding: .85rem 1.6rem;
    transition: background .2s, transform .12s;
    width: auto; margin: 0;
}
.btn--ghost:hover { background: rgba(255,255,255,.16); transform: translateY(-2px); }

/* ============================================================
   REPORT  (attendee table, basic-auth protected)
   ============================================================ */
.report {
    max-width: 1500px;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 3rem) 4rem;
}

.report__head {
    display: flex; align-items: center; gap: 1.4rem;
    flex-wrap: wrap;
    padding-bottom: 1.4rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid var(--line);
}
.report__logo { width: 128px; }
.report__head h1 {
    font-family: var(--font-disp); font-weight: 900; letter-spacing: -.01em;
    font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0;
}
.report__head p { margin: .25rem 0 0; color: var(--muted); font-size: .9rem; }

/* the table scrolls on its own; the page never scrolls sideways */
.report__scroll {
    overflow-x: auto;
    background: var(--panel);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.report__table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    white-space: nowrap;
}
.report__table th {
    position: sticky; top: 0; z-index: 1;
    background: var(--card);
    font-family: var(--font-disp); font-weight: 700;
    font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--gold);
    text-align: left;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--line);
}
.report__table td {
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--line-soft);
    color: rgba(255,255,255,.88);
    vertical-align: top;
}
.report__table tbody tr:last-child td { border-bottom: 0; }
.report__table tbody tr:hover td { background: rgba(246,169,28,.05); }

.report__table .num    { color: var(--muted); font-variant-numeric: tabular-nums; width: 1%; }
.report__table .strong { font-weight: 600; color: #fff; }
.report__table .date   { color: var(--muted); font-variant-numeric: tabular-nums; }
.report__table .empty  { color: rgba(255,255,255,.28); }
.report__table a       { color: var(--gold-soft); text-decoration: none; }
.report__table a:hover { text-decoration: underline; }

/* bios are long-form: let them wrap and cap the column */
.report__table .bio {
    white-space: normal;
    min-width: 320px; max-width: 460px;
    color: var(--muted); line-height: 1.5;
}

.report__empty { color: var(--muted); text-align: center; padding: 4rem 0; }