/* gamelicens.ing — cool-grays monochromatic, grainy-textured, dashboard, layered-depth */

:root {
    --deep-bg: #2b2d33;
    --surface: #363840;
    --border: #8a8d94;
    --body-text: #9ca3af;
    --heading: #e2e4e8;
    --accent: #6b7280;
    --highlight: #c8ccd4;
    --seal: #b0b4bc;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);

    --panel-bg: rgba(43, 45, 51, 0.6);
    --panel-hover: rgba(54, 56, 64, 0.8);

    --content-max: 1400px;
}

* {
    box-sizing: border-box;
    image-rendering: auto;
}

html {
    scroll-behavior: smooth;
}

::selection {
    background: #8a8d94;
    color: #2b2d33;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--deep-bg);
    color: var(--body-text);
    font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.65;
    min-height: 100%;
    overflow-x: hidden;
}

body {
    position: relative;
    font-size: clamp(0.85rem, 1.2vw, 1rem);
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #363840;
}
::-webkit-scrollbar-thumb {
    background: #6b7280;
}
::-webkit-scrollbar-thumb:hover {
    background: #8a8d94;
}

/* ---- Film grain overlay ---- */
.grain-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.05;
    z-index: 9999;
}

/* ---- Depth lines (background plane) ---- */
.depth-lines {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    transform: translateY(var(--depth-parallax, 0));
    will-change: transform;
}

.depth-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(156, 163, 175, 0.03);
}
.depth-line.vertical {
    position: absolute;
    top: 0;
    bottom: 0;
    left: auto;
    right: auto;
    width: 1px;
    height: 100%;
    background: rgba(156, 163, 175, 0.02);
}

/* ---- Accent plane (floating emblems) ---- */
.accent-plane {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    transform: translateY(var(--accent-parallax, 0));
    will-change: transform;
}

.accent-emblem {
    position: absolute;
    width: 220px;
    height: 220px;
    opacity: 0.18;
}
.emblem-a { top: 8%; right: 4%; width: 260px; height: 260px; }
.emblem-b { top: 45%; left: 2%; width: 200px; height: 200px; opacity: 0.14; }
.emblem-c { bottom: 8%; right: 6%; width: 180px; height: 180px; opacity: 0.12; }
.emblem-d { top: 72%; left: 40%; width: 150px; height: 150px; opacity: 0.1; }

/* ---- Top bar ---- */
.top-bar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 60px;
    border-bottom: 1px solid rgba(156, 163, 175, 0.15);
    transition: backdrop-filter 400ms var(--ease), background 400ms var(--ease);
    background: transparent;
}

.top-bar.scrolled {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(43, 45, 51, 0.7);
}

.top-bar-inner {
    max-width: var(--content-max);
    height: 100%;
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 4vw, 3rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.brand {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--heading);
    letter-spacing: -0.02em;
}

.nav {
    display: flex;
    gap: 2.2rem;
}

.nav a {
    font-family: "Azeret Mono", "Space Mono", monospace;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent);
    text-decoration: none;
    position: relative;
    padding: 0.2rem 0;
    transition: color 300ms var(--ease);
}

.nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: -2px;
    height: 1px;
    background: var(--highlight);
    transition: right 400ms var(--ease);
}

.nav a:hover {
    color: var(--highlight);
}
.nav a:hover::after {
    right: 0;
}

/* ---- Typography shared ---- */
h1, h2, h3 {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    color: var(--heading);
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin: 0;
}

.mono-label {
    font-family: "Azeret Mono", "Space Mono", monospace;
    font-size: clamp(0.65rem, 0.8vw, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
}

.section-lead {
    max-width: 56ch;
    color: var(--body-text);
    margin: 1rem 0 0 0;
}

/* ---- Hero Registry ---- */
.hero-registry {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    padding: 2rem clamp(1.5rem, 4vw, 3rem) 3rem;
    display: flex;
    align-items: center;
}

.hero-inner {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
}

.hero-meta {
    margin-bottom: 1.2rem;
    opacity: 0;
    animation: fadeUp 600ms var(--ease) 100ms forwards;
}

.hero-title {
    font-size: clamp(2.4rem, 5.5vw, 4.8rem);
    color: var(--heading);
    margin: 0 0 0.8rem 0;
    opacity: 0;
    transform: translateY(8px);
    animation: fadeUp 600ms var(--ease) 300ms forwards;
}

.hero-sub {
    font-size: clamp(0.95rem, 1.3vw, 1.1rem);
    color: var(--body-text);
    max-width: 52ch;
    margin: 0 0 2.4rem 0;
    opacity: 0;
    animation: fadeUp 600ms var(--ease) 500ms forwards;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: 3fr 2fr 2fr 1fr;
    gap: 2px;
    background: rgba(138, 141, 148, 0.12);
    padding: 2px;
    margin-bottom: 3rem;
    min-height: 52vh;
}

/* Chamfered panels */
.panel {
    position: relative;
    background: var(--panel-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 1.75rem 1.5rem 1.3rem 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.2rem;
    clip-path: polygon(
        12px 0,
        calc(100% - 12px) 0,
        100% 12px,
        100% calc(100% - 12px),
        calc(100% - 12px) 100%,
        12px 100%,
        0 calc(100% - 12px),
        0 12px
    );
    opacity: 0;
    transform: translateY(10px);
}

.dashboard-grid.visible .panel-1 { animation: panelIn 700ms var(--ease) 600ms forwards; }
.dashboard-grid.visible .panel-2 { animation: panelIn 700ms var(--ease) 750ms forwards; }
.dashboard-grid.visible .panel-3 { animation: panelIn 700ms var(--ease) 900ms forwards; }
.dashboard-grid.visible .panel-4 { animation: panelIn 700ms var(--ease) 1050ms forwards; }

.panel-corner {
    position: absolute;
    width: 14px;
    height: 14px;
    border-color: rgba(200, 204, 212, 0.35);
    border-style: solid;
    border-width: 0;
    transition: border-color 400ms var(--ease);
    pointer-events: none;
}
.panel-corner.tl { top: 4px; left: 4px; border-top-width: 1px; border-left-width: 1px; }
.panel-corner.tr { top: 4px; right: 4px; border-top-width: 1px; border-right-width: 1px; }
.panel-corner.bl { bottom: 4px; left: 4px; border-bottom-width: 1px; border-left-width: 1px; }
.panel-corner.br { bottom: 4px; right: 4px; border-bottom-width: 1px; border-right-width: 1px; }

.panel:hover .panel-corner {
    border-color: var(--highlight);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.panel-title {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: clamp(1.1rem, 1.6vw, 1.4rem);
    color: var(--heading);
    letter-spacing: -0.02em;
    margin: 0;
}

.panel-figure {
    font-family: "Playfair Display", Georgia, serif;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.2rem);
    color: var(--heading);
    letter-spacing: -0.04em;
    line-height: 1;
}

.panel-body {
    color: var(--body-text);
    font-size: 0.88rem;
    line-height: 1.55;
}

.panel-body p { margin: 0; }

.panel-footer {
    border-top: 1px solid rgba(138, 141, 148, 0.18);
    padding-top: 0.65rem;
}
.panel-footer.center { text-align: center; }

.panel-4 {
    align-items: center;
    text-align: center;
}
.panel-seal {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.panel-seal svg {
    width: 80%;
    max-width: 110px;
    height: auto;
    opacity: 0.7;
}

.hero-foot {
    margin-top: 0.5rem;
    text-align: right;
    opacity: 0;
    animation: fadeUp 600ms var(--ease) 1400ms forwards;
}

/* ---- Section headers ---- */
.section-header {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 6rem clamp(1.5rem, 4vw, 3rem) 2.5rem;
}
.section-header h2 {
    font-size: clamp(1.6rem, 3vw, 2.8rem);
    color: var(--heading);
    margin: 0.6rem 0 0 0;
}

/* ---- Catalog ---- */
.catalog {
    position: relative;
    z-index: 2;
    min-height: 200vh;
    padding-bottom: 6rem;
}

.catalog-list {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 clamp(1.5rem, 4vw, 3rem);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.band {
    position: relative;
    display: grid;
    grid-template-columns: 72px 3fr 2fr auto;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1.5rem;
    height: 120px;
    background: rgba(54, 56, 64, 0.03);
    overflow: hidden;
    transition: background 280ms var(--ease), height 420ms var(--ease);
    opacity: 0;
    transform: translateX(40px);
}

.band.in {
    animation: bandSlide 500ms var(--ease-out-soft) forwards;
}

.band:nth-child(even) {
    background: rgba(54, 56, 64, 0.05);
}

.band::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 1px;
    background: rgba(138, 141, 148, 0.35);
    transition: right 500ms var(--ease);
}

.band:hover {
    background: rgba(54, 56, 64, 0.8);
    height: 200px;
}

.band:hover::after {
    right: 0;
}

.band-icon {
    width: 48px;
    height: 48px;
}
.band-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.band-icon svg path,
.band-icon svg line,
.band-icon svg polyline,
.band-icon svg circle,
.band-icon svg rect,
.band-icon svg polygon {
    stroke: var(--body-text);
    stroke-width: 1.5;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 300;
    stroke-dashoffset: 300;
    transition: stroke-dashoffset 700ms var(--ease-out-soft) 150ms;
}
.band.in .band-icon svg path,
.band.in .band-icon svg line,
.band.in .band-icon svg polyline,
.band.in .band-icon svg circle,
.band.in .band-icon svg rect,
.band.in .band-icon svg polygon {
    stroke-dashoffset: 0;
}

.band-title-wrap {
    min-width: 0;
}

.band-title {
    font-family: "Space Grotesk", "Inter", sans-serif;
    font-weight: 500;
    font-size: 1.02rem;
    color: var(--heading);
    letter-spacing: 0.005em;
    margin: 0 0 0.35rem 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.band-meta {
    font-family: "Azeret Mono", monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent);
}

.band-detail {
    max-height: 0;
    overflow: hidden;
    transition: max-height 400ms var(--ease), margin 400ms var(--ease), opacity 300ms var(--ease);
    color: var(--body-text);
    font-size: 0.85rem;
    line-height: 1.55;
    opacity: 0;
    margin-top: 0;
}

.band:hover .band-detail {
    max-height: 80px;
    margin-top: 0.8rem;
    opacity: 1;
}

.band-secondary {
    font-family: "Azeret Mono", monospace;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
    line-height: 1.7;
}
.band-secondary strong {
    color: var(--body-text);
    font-weight: 400;
    display: block;
    margin-bottom: 0.1rem;
}

.band-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.45rem 1rem;
    font-family: "Azeret Mono", monospace;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--highlight);
    background: rgba(54, 56, 64, 0.6);
    border: 1px solid rgba(176, 180, 188, 0.25);
    clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
.band-status.pending {
    color: var(--body-text);
}
.band-status.archived {
    color: var(--accent);
}

/* ---- Vault ---- */
.vault {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem clamp(1.5rem, 4vw, 3rem);
    overflow: hidden;
}

.vault::before {
    content: "";
    position: absolute;
    inset: -10%;
    background:
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 80px,
            rgba(156, 163, 175, 0.02) 80px,
            rgba(156, 163, 175, 0.02) 81px
        );
    z-index: -1;
    transform: translateY(var(--vault-parallax, 0));
}

.vault-inner {
    width: 100%;
    max-width: var(--content-max);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2.5rem;
    align-items: center;
}

.vault-text {
    max-width: 30ch;
}
.vault-text h2, .vault-text h3 {
    font-size: clamp(1.4rem, 2.4vw, 2.1rem);
    color: var(--heading);
    margin: 0.75rem 0 1rem 0;
}
.vault-text p {
    color: var(--body-text);
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}
.vault-text-left {
    justify-self: end;
    text-align: right;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 800ms var(--ease), transform 800ms var(--ease);
}
.vault-text-right {
    justify-self: start;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 800ms var(--ease) 180ms, transform 800ms var(--ease) 180ms;
}
.vault-text.in {
    opacity: 1;
    transform: translateY(0);
}

.vault-door {
    position: relative;
    width: clamp(260px, 42vw, 460px);
    aspect-ratio: 1 / 1;
}
.vault-door svg {
    width: 100%;
    height: 100%;
    display: block;
}

.vault-path {
    stroke-dasharray: 1400;
    stroke-dashoffset: 1400;
    transition: stroke-dashoffset 2000ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.vault-door.drawn .vault-path {
    stroke-dashoffset: 0;
}

.vault-caption {
    position: absolute;
    bottom: -2rem;
    left: 0;
    right: 0;
    text-align: center;
}

/* ---- Seal Section ---- */
.seal-section {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem clamp(1.5rem, 4vw, 3rem) 4rem;
}

.seal-wrap {
    text-align: center;
    width: 100%;
    max-width: 540px;
}

.seal {
    position: relative;
    width: 280px;
    height: 280px;
    margin: 0 auto 3rem auto;
    animation: spin 120s linear infinite;
}

.seal-ring {
    position: absolute;
    border-radius: 50%;
    inset: 0;
}
.seal-ring-outer {
    border: 1px solid rgba(176, 180, 188, 0.6);
}
.seal-ring-mid {
    inset: 12px;
    border: 1px dashed rgba(176, 180, 188, 0.5);
}
.seal-ring-inner {
    inset: 28px;
    border: 1px solid rgba(176, 180, 188, 0.35);
}

.seal-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.seal-foot {
    border-top: 1px solid rgba(138, 141, 148, 0.2);
    padding-top: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.seal-foot p {
    margin: 0;
}

/* ---- Animations ---- */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes panelIn {
    from { opacity: 0; transform: translateY(14px); clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% 12px, 100% 12px, 12px 12px, 12px 12px, 12px 12px); }
    to { opacity: 1; transform: translateY(0); clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px); }
}

@keyframes bandSlide {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---- Responsive ---- */
@media (max-width: 960px) {
    .dashboard-grid {
        grid-template-columns: 1fr 1fr;
        min-height: auto;
    }
    .panel { padding: 1.4rem; }

    .vault-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .vault-text-left, .vault-text-right {
        justify-self: center;
        text-align: center;
        max-width: 44ch;
    }

    .band {
        grid-template-columns: 48px 1fr auto;
        gap: 1rem;
    }
    .band-secondary {
        display: none;
    }
}

@media (max-width: 600px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
    .nav { gap: 1.2rem; }
    .nav a { font-size: 0.65rem; letter-spacing: 0.14em; }
    .brand { font-size: 1rem; }

    .band { grid-template-columns: 40px 1fr; height: 96px; }
    .band-status { grid-column: 1 / -1; justify-self: start; }
    .band:hover { height: 170px; }

    .seal { width: 230px; height: 230px; }
}