@font-face {
    font-family: 'Alliance No.2';
    src: url('font/Alliance No.2 Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    --accent: #FF494C;
    --bg: #000;
    --text: #fff;
    --muted: rgba(255,255,255,0.38);
}

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

html, body {
    width: 100%; height: 100%;
    background: var(--bg);
    color: var(--text);
    font-family: 'Alliance No.2', -apple-system, Helvetica, sans-serif;
    overflow: hidden;
}

/* ── Background ── */
.bg-wrapper {
    position: fixed; inset: 0; z-index: 0;
    background: var(--bg);
}
.bg-image {
    width: 100%; height: 100%;
    background: url('images/bg.webp') 60% center / cover no-repeat;
    opacity: 0;
    filter: blur(40px);
    transform: scale(1.06);
    will-change: opacity, filter, transform;
    animation: bgIn 2.2s cubic-bezier(.16,1,.3,1) 0.1s forwards;
}
.bg-wrapper::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse 70% 100% at 80% 50%, transparent 10%, rgba(0,0,0,.65) 55%, #000 100%),
                linear-gradient(to right, rgba(0,0,0,.9) 0%, rgba(0,0,0,.2) 35%, transparent 60%);
    pointer-events: none;
}

/* ── Page grid ── */
.page-container {
    position: relative; z-index: 10;
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    padding: 3.5rem 5rem;
}

/* ── Header ── */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link {
    display: inline-block;
    text-decoration: none;
    opacity: 0;
    filter: blur(15px);
    transform: translateY(-14px);
    animation: topIn 1.1s cubic-bezier(.16,1,.3,1) 0.7s forwards;
}
.logo { height: 42px; width: auto; display: block; }

.btn-early-access {
    position: relative;
    color: var(--text);
    font-size: .83rem;
    letter-spacing: .06em;
    text-decoration: none;
    padding: .85rem 2.1rem;
    border-radius: 14px;
    /* aurora glass base */
    background:
        linear-gradient(135deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 60%),
        linear-gradient(180deg, rgba(20,0,0,.55) 0%, rgba(6,0,0,.75) 100%);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    /* border: subtle white top-left, red bottom-right */
    border: 1px solid transparent;
    background-clip: padding-box;
    /* aurora outer glow */
    box-shadow:
        0 0 0 1px rgba(255,255,255,.08),          /* thin white rim */
        inset 0 1px 0 rgba(255,255,255,.12),       /* top sheen */
        -4px 4px 22px rgba(255,73,76,.22),         /* left-bottom red bloom */
        0 8px 40px rgba(0,0,0,.65),               /* depth shadow */
        0 0 60px rgba(255,73,76,.06);
    opacity: 0;
    filter: blur(15px);
    transform: translateY(-14px);
    animation: topIn 1.1s cubic-bezier(.16,1,.3,1) 1.0s forwards;
    transition: box-shadow .5s ease, background .4s ease, transform .3s ease;
    overflow: hidden;
}
/* aurora shimmer pseudo-element */
.btn-early-access::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    border: 1px solid transparent;
    background:
        linear-gradient(120deg, rgba(255,255,255,.18) 0%, rgba(255,73,76,.25) 40%, transparent 70%)
        border-box;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: opacity .4s ease;
    opacity: 1;
}
.btn-early-access:hover {
    background:
        linear-gradient(135deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%),
        linear-gradient(180deg, rgba(60,0,0,.5) 0%, rgba(18,0,0,.8) 100%);
    box-shadow:
        0 0 0 1px rgba(255,73,76,.35),
        inset 0 1px 0 rgba(255,255,255,.18),
        -6px 6px 32px rgba(255,73,76,.4),
        0 12px 50px rgba(0,0,0,.8),
        0 0 80px rgba(255,73,76,.12);
    transform: translateY(-2px);
}
.btn-early-access:hover::before { opacity: 1.4; }
.btn-early-access:active { transform: translateY(0); }

/* ── Hero heading ── */
.main-content {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 22vh;   /* push content higher */
}

.hero-heading {
    font-size: clamp(2.4rem, 5vw, 4.4rem);  /* slightly smaller */
    font-weight: normal;
    line-height: 1.14;
    letter-spacing: -.03em;
    display: flex;
    flex-direction: column;
}

.heading-line {
    display: block;
    opacity: 0;
    filter: blur(20px);
    transform: translateY(28px);
    will-change: opacity, filter, transform;
}
.line-1 { animation: lineIn 1.4s cubic-bezier(.16,1,.3,1) 1.35s forwards; }
.line-2 { animation: lineIn 1.4s cubic-bezier(.16,1,.3,1) 1.65s forwards; }

.accent-comma, .accent-cursor { color: var(--accent); }
.accent-cursor {
    display: inline-block;
    animation: blink 1.15s infinite alternate;
}

/* ── Footer ── */
.footer { display: flex; align-items: flex-end; }
.footer-nav { display: flex; gap: 3.2rem; }

.footer-link {
    font-size: .8rem;
    color: var(--muted);
    text-decoration: none;
    letter-spacing: .03em;
    opacity: 0;
    filter: blur(12px);
    transform: translateY(14px);
}
.footer-link:nth-child(1) { animation: footerIn 1s cubic-bezier(.16,1,.3,1) 1.95s forwards; }
.footer-link:nth-child(2) { animation: footerIn 1s cubic-bezier(.16,1,.3,1) 2.1s forwards; }
.footer-link:nth-child(3) { animation: footerIn 1s cubic-bezier(.16,1,.3,1) 2.25s forwards; }

/* ── Keyframes ── */
@keyframes bgIn {
    to { opacity: 1; filter: blur(0); transform: scale(1); }
}
@keyframes topIn {
    to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes lineIn {
    to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes footerIn {
    to { opacity: 1; filter: blur(0); transform: translateY(0); }
}
@keyframes blink {
    0%  { opacity: .25; }
    100%{ opacity: 1; }
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .page-container { padding: 3rem 3.5rem; }
}
@media (max-width: 768px) {
    .page-container { padding: 2.5rem 1.8rem; }
    .bg-image { background-image: url('images/mobile.webp'); background-position: center 30%; }
    .bg-wrapper::after {
        background: linear-gradient(to bottom, rgba(0,0,0,.6) 0%, rgba(0,0,0,.1) 35%, rgba(0,0,0,.7) 75%, #000 100%);
    }
    .main-content { justify-content: flex-end; padding-bottom: 3.5rem; }
    .footer-nav { gap: 2rem; }
}
@media (max-width: 480px) {
    .btn-early-access { padding: .7rem 1.4rem; font-size: .78rem; }
    .footer-nav { gap: 1.4rem; }
    .footer-link { font-size: .73rem; }
}

@media (prefers-reduced-motion: reduce) {
    .bg-image, .logo-link, .btn-early-access, .heading-line, .footer-link {
        animation-delay: 0s !important;
        animation-duration: 0.01s !important;
    }
    .accent-cursor { animation: none; }
}