* { box-sizing: border-box; }

:root {
    --bg: #0B0B0B;
    --card: #141414;
    --card-border: rgba(255, 255, 255, 0.10);
    --ink: #F5F5F0;
    --muted: #8A8A82;
    --accent: #D7FF1F;
    --accent-bright: #E4FF5C;
    --accent-ink: #0B0B0B;
    --accent-dim: rgba(215, 255, 31, 0.14);
    --critical: #FF4433;
    --critical-dim: rgba(255, 68, 51, 0.12);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --display: 'Anton', sans-serif;
    --body-face: 'Manrope', sans-serif;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    font-family: var(--body-face);
    color: var(--ink);
    position: relative;
    overflow: hidden;
}

/* Two crossing fields of diagonal light trails -- perpetual motion,
   athletic energy. Each is one element with a small repeating tile
   whose background-position animates by EXACTLY the tile size, so the
   loop is mathematically seamless (no visible reset). Two layers at
   different angles/speeds/tile sizes read as depth (a fast, tight foreground
   sweep over a slower, wider background one) rather than a single flat pattern.
   transform is intentionally NOT used here (background-position is the only
   thing animating), so this stays perf-cheap: one composited layer, no
   layout/paint thrash beyond the GPU-friendly tile shift itself. */
.fx-bg {
    position: fixed;
    inset: -15%;
    pointer-events: none;
    z-index: 0;
    filter: blur(1.5px);
    /* Fades the streak field out near the center so the card sits in a
       calm pocket instead of competing with the motion behind it. */
    -webkit-mask-image: radial-gradient(ellipse 46% 40% at 50% 58%, transparent 40%, #000 88%);
    mask-image: radial-gradient(ellipse 46% 40% at 50% 58%, transparent 40%, #000 88%);
}
.fx-bg-1 {
    background-image: repeating-linear-gradient(
        118deg,
        transparent 0px, transparent 240px,
        rgba(215, 255, 31, 0.05) 240px, rgba(215, 255, 31, 0.08) 254px, rgba(215, 255, 31, 0.05) 268px,
        transparent 268px, transparent 520px
    );
    background-size: 520px 520px;
    animation: fx-flow-1 9s linear infinite;
}
.fx-bg-2 {
    background-image: repeating-linear-gradient(
        66deg,
        transparent 0px, transparent 320px,
        rgba(255, 255, 255, 0.03) 320px, rgba(255, 255, 255, 0.05) 336px, rgba(255, 255, 255, 0.03) 352px,
        transparent 352px, transparent 700px
    );
    background-size: 700px 700px;
    animation: fx-flow-2 16s linear infinite;
}
@keyframes fx-flow-1 {
    from { background-position: 0px 0px; }
    to   { background-position: 520px 520px; }
}
@keyframes fx-flow-2 {
    from { background-position: 0px 0px; }
    to   { background-position: -700px 700px; }
}

/* Fixed grain overlay -- breaks the flat-vector sterility */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0.035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.card {
    position: relative;
    z-index: 1;
    width: min(380px, 90vw);
    background: var(--card);
    border: 1px solid var(--card-border);
    border-top: 3px solid var(--accent);
    border-radius: 4px;
    padding: 2.4rem 2rem 2.2rem;
    box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.9);
    opacity: 0;
    animation: card-enter 0.5s var(--ease) 0.05s both;
}

@keyframes card-enter {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.stagger {
    opacity: 0;
    animation: rise-in 0.45s var(--ease) both;
}
.brand   { animation-delay: 0.12s; }
h1       { animation-delay: 0.17s; }
.field-1 { animation-delay: 0.22s; }
.field-2 { animation-delay: 0.27s; }
.submit-row { animation-delay: 0.32s; }

@keyframes rise-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1.6rem;
}

.brand-mark {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 14px 9px;
    border-color: transparent transparent var(--accent) transparent;
    flex: none;
}

.eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--muted);
}

h1 {
    font-family: var(--display);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(1.9rem, 5vw, 2.3rem);
    letter-spacing: 0.01em;
    line-height: 0.98;
    margin: 0 0 1.9rem;
    color: var(--ink);
    text-wrap: balance;
}

.field { margin-bottom: 1.15rem; }

label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--muted);
    margin: 0 0 0.5rem;
}

input {
    width: 100%;
    padding: 0.75rem 0.85rem;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
    color: var(--ink);
    font-family: inherit;
    font-size: 0.92rem;
    outline: none;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}

input::placeholder { color: #55554E; }

input:hover {
    border-color: rgba(255, 255, 255, 0.24);
}

input:focus {
    border-color: var(--accent);
    background: rgba(215, 255, 31, 0.04);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

button {
    width: 100%;
    padding: 0.85rem;
    margin-top: 0.4rem;
    border-radius: 3px;
    border: none;
    background: var(--accent);
    color: var(--accent-ink);
    font-family: var(--display);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 400;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: transform 0.15s var(--ease-spring), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease);
}

button::after {
    content: "";
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.2s var(--ease-spring);
}

button:hover {
    background: var(--accent-bright);
    transform: translateY(-2px);
}

button:hover::after {
    transform: translateX(3px);
}

button:active {
    transform: translateY(0) scale(0.97);
}

button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.error {
    background: var(--critical-dim);
    border: 1px solid rgba(255, 68, 51, 0.3);
    border-left: 3px solid var(--critical);
    color: #FFA89E;
    padding: 0.65rem 0.85rem;
    border-radius: 3px;
    font-size: 0.82rem;
    margin-bottom: 1.1rem;
    animation: error-in 0.3s var(--ease) both;
}

@keyframes error-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
    .fx-bg-1, .fx-bg-2 { animation: none; }
}