@charset "UTF-8";

:root {
    --hub-ink: #0a0a0a;
    --hub-paper: #f3f1ec;
    --hub-muted: #8a8680;
    --hub-line: rgba(243, 241, 236, 0.18);
    --hub-accent: #e8e2d6;
    --font-display: "Syne", "Noto Sans JP", sans-serif;
    --font-body: "Noto Sans JP", sans-serif;
}

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

html,
body {
    height: 100%;
}

body {
    font-family: var(--font-body);
    background: var(--hub-ink);
    color: var(--hub-paper);
    -webkit-font-smoothing: antialiased;
}

.hub {
    position: relative;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 48px 24px;
}

.hub-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hub-bg-wash {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 80% at 12% 18%, rgba(232, 226, 214, 0.16), transparent 55%),
        radial-gradient(90% 70% at 88% 78%, rgba(120, 110, 95, 0.28), transparent 50%),
        linear-gradient(160deg, #121212 0%, #070707 55%, #151311 100%);
}

.hub-bg-grid {
    position: absolute;
    inset: -20%;
    background-image:
        linear-gradient(var(--hub-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--hub-line) 1px, transparent 1px);
    background-size: 72px 72px;
    transform: rotate(-8deg) scale(1.15);
    opacity: 0.55;
    animation: hub-grid-drift 28s linear infinite;
}

.hub-bg-glow {
    position: absolute;
    width: min(70vw, 640px);
    height: min(70vw, 640px);
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(243, 241, 236, 0.12) 0%, transparent 68%);
    filter: blur(8px);
    animation: hub-glow-pulse 7s ease-in-out infinite;
}

.hub-content {
    position: relative;
    z-index: 1;
    width: min(920px, 100%);
    text-align: center;
}

.hub-kicker {
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--hub-muted);
    margin-bottom: 22px;
    opacity: 0;
    animation: hub-rise 0.9s ease forwards 0.1s;
}

.hub-brand {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 9vw, 5.6rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--hub-paper);
    margin-bottom: 22px;
    opacity: 0;
    animation: hub-rise 1s ease forwards 0.25s;
}

.hub-lead {
    font-size: clamp(0.95rem, 2.2vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--hub-accent);
    margin-bottom: 48px;
    opacity: 0;
    animation: hub-rise 1s ease forwards 0.4s;
}

.hub-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px 48px;
    opacity: 0;
    animation: hub-rise 1s ease forwards 0.55s;
}

.hub-link {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    text-decoration: none;
    color: var(--hub-paper);
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(243, 241, 236, 0.28);
    transition: border-color 0.3s ease, transform 0.3s ease, color 0.3s ease;
}

.hub-link:hover,
.hub-link:focus-visible {
    border-bottom-color: var(--hub-paper);
    transform: translateY(-2px);
    outline: none;
}

.hub-link-label {
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0.04em;
}

.hub-link-meta {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hub-muted);
}

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

@keyframes hub-grid-drift {
    from {
        transform: rotate(-8deg) scale(1.15) translate3d(0, 0, 0);
    }
    to {
        transform: rotate(-8deg) scale(1.15) translate3d(36px, 24px, 0);
    }
}

@keyframes hub-glow-pulse {
    0%,
    100% {
        opacity: 0.55;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.08);
    }
}

@media (max-width: 640px) {
    .hub {
        padding: 32px 18px;
        align-items: flex-end;
        padding-bottom: 56px;
    }

    .hub-lead {
        margin-bottom: 36px;
    }

    .hub-nav {
        width: 100%;
        flex-direction: column;
        gap: 22px;
        align-items: stretch;
    }

    .hub-link {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hub-kicker,
    .hub-brand,
    .hub-lead,
    .hub-nav,
    .hub-bg-grid,
    .hub-bg-glow {
        animation: none;
        opacity: 1;
        transform: none;
    }
}