/* Design palette tokens */
:root {
    --chrome-base: #c0c4cc;
    --chrome-highlight: #e8eaef;
    --chrome-shadow: #6b6e76;
    --chrome-striation-a: #b8bcc4;
    --chrome-striation-b: #c8ccd4;
    --chrome-reflection: #d4d8e0;
    --chrome-stroke: #9ca0a8;
    --black-structure: #0a0a0a;
    --white-panel: #f8f8f2;
    --soft-black: #2a2a2e;
    --warm-brass: #b8a07a;
}

/* gamelicen.se — Chrome Monastery / Neubrutalist Zen */

/* ============================================
   RESET & BASE
   ============================================ */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    line-height: 1.72;
    color: #2a2a2e;
    overflow-x: hidden;
    /* Chrome Ground Plane — brushed steel striations */
    background-color: #c0c4cc;
    background-image: repeating-linear-gradient(
        87deg,
        #b8bcc4 0px,
        #b8bcc4 1px,
        #c8ccd4 1px,
        #c8ccd4 3px
    );
}

/* ============================================
   FLOATING GEOMETRY PLANE (z: 2)
   ============================================ */
#floating-geometry {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
}

.geo-shape {
    position: absolute;
    opacity: 0;
    animation: geoFadeIn 2s ease forwards;
}

.geo-hexagon {
    width: 80px;
    height: 80px;
    top: 15%;
    left: 8%;
    animation-delay: 1.8s;
}

.geo-circle {
    width: 60px;
    height: 60px;
    top: 40%;
    right: 12%;
    animation-delay: 2.0s;
}

.geo-triangle {
    width: 70px;
    height: 70px;
    top: 70%;
    left: 20%;
    animation-delay: 2.2s;
}

.geo-hexagon-2 {
    width: 50px;
    height: 50px;
    top: 25%;
    right: 25%;
    animation-delay: 2.4s;
}

.geo-circle-2 {
    width: 45px;
    height: 45px;
    top: 80%;
    right: 8%;
    animation-delay: 2.6s;
}

@keyframes geoFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes geoDrift {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(15px, -20px) rotate(2deg); }
    50% { transform: translate(-10px, -35px) rotate(-1deg); }
    75% { transform: translate(20px, -15px) rotate(3deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

.geo-hexagon { animation: geoFadeIn 2s 1.8s ease forwards, geoDrift 45s 3.8s ease-in-out infinite; }
.geo-circle { animation: geoFadeIn 2s 2.0s ease forwards, geoDrift 52s 4.0s ease-in-out infinite reverse; }
.geo-triangle { animation: geoFadeIn 2s 2.2s ease forwards, geoDrift 60s 4.2s ease-in-out infinite; }
.geo-hexagon-2 { animation: geoFadeIn 2s 2.4s ease forwards, geoDrift 48s 4.4s ease-in-out infinite reverse; }
.geo-circle-2 { animation: geoFadeIn 2s 2.6s ease forwards, geoDrift 55s 4.6s ease-in-out infinite; }

/* ============================================
   ORGANIC BLOBS (ground plane)
   ============================================ */
#organic-blobs {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.blob {
    position: absolute;
    background: #d4d8e0;
    opacity: 0.20;
    border-radius: 50%;
}

.blob-1 {
    width: 40vw;
    height: 40vw;
    top: 10%;
    left: -10%;
    clip-path: polygon(30% 0%, 70% 5%, 100% 30%, 95% 70%, 65% 100%, 25% 95%, 0% 65%, 5% 30%);
    animation: blobPulse 8s ease-in-out infinite;
}

.blob-2 {
    width: 35vw;
    height: 35vw;
    top: 50%;
    right: -5%;
    clip-path: polygon(25% 5%, 75% 0%, 100% 35%, 90% 75%, 60% 100%, 20% 90%, 0% 60%, 10% 25%);
    animation: blobPulse 8s 2.5s ease-in-out infinite;
}

.blob-3 {
    width: 30vw;
    height: 30vw;
    bottom: 5%;
    left: 30%;
    clip-path: polygon(35% 0%, 80% 10%, 100% 40%, 85% 80%, 50% 100%, 15% 85%, 0% 50%, 15% 15%);
    animation: blobPulse 8s 5s ease-in-out infinite;
}

@keyframes blobPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}

/* ============================================
   SECTIONS — GENERAL
   ============================================ */
.section {
    position: relative;
    z-index: 1;
}

/* ============================================
   SECTION 1: THE VOID WELCOME
   ============================================ */
#void-welcome {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.void-content {
    text-align: center;
}

.kinetic-text {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(2.8rem, 6vw, 5.2rem);
    letter-spacing: -0.02em;
    color: #0a0a0a;
    display: inline-block;
}

.char {
    display: inline-block;
    opacity: 0;
    transform: scale(0.3) rotate(45deg);
    animation: charReveal 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: calc(0.6s + var(--i) * 0.08s);
}

@keyframes charReveal {
    0% {
        opacity: 0;
        transform: scale(0.3) rotate(45deg);
        clip-path: circle(0% at 50% 50%);
    }
    50% {
        opacity: 0.7;
        clip-path: circle(50% at 50% 50%);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
        clip-path: circle(100% at 50% 50%);
    }
}

.subtitle {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    color: #6b6e76;
    margin-top: 1.5rem;
    opacity: 0;
    transform: translateY(12px);
    animation: subtitleFadeIn 0.8s ease forwards;
    animation-delay: 2.2s;
}

@keyframes subtitleFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   NEUBRUTALIST PANELS (shared)
   ============================================ */
.panel {
    background: #f8f8f2;
    border: 4px solid #0a0a0a;
    box-shadow: 6px 6px 0px #0a0a0a;
    padding: 2rem 1.8rem;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    position: relative;
}

.panel:hover {
    box-shadow: 3px 3px 0px #0a0a0a;
    transform: translate(3px, 3px);
    background: #e8eaef;
}

.panel:active {
    box-shadow: 0px 0px 0px #0a0a0a;
    transform: translate(6px, 6px);
}

.panel-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
}

.panel-icon svg {
    width: 100%;
    height: 100%;
}

.panel-label {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.7rem, 0.9vw, 0.85rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6b6e76;
    display: block;
    margin-bottom: 0.5rem;
}

.panel-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    letter-spacing: -0.02em;
    color: #0a0a0a;
    margin-bottom: 0.75rem;
}

.panel-body {
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.2vw, 1.15rem);
    line-height: 1.72;
    color: #2a2a2e;
    max-width: 42ch;
}

/* ============================================
   SECTION 2: THE LICENSE GARDEN
   ============================================ */
#license-garden {
    min-height: 100vh;
    padding: 8vh 5vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.garden-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 48px 36px;
    max-width: 1200px;
    width: 100%;
}

.panel-ip {
    grid-column: 1 / 6;
    transform: rotate(-1.2deg);
}

.panel-distribution {
    grid-column: 7 / 13;
    transform: rotate(0.8deg);
    margin-top: 60px;
}

.panel-derivatives {
    grid-column: 2 / 7;
    transform: rotate(1.5deg);
}

.panel-preservation {
    grid-column: 8 / 12;
    transform: rotate(-0.6deg);
    margin-top: -20px;
}

/* Garden panel entry animation */
.garden-grid .panel {
    opacity: 0;
    transform-origin: center center;
}

.garden-grid .panel.panel-visible {
    animation: panelEntry 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.panel-ip.panel-visible { animation-delay: 0s; transform: rotate(-1.2deg); }
.panel-distribution.panel-visible { animation-delay: 0.15s; transform: rotate(0.8deg); }
.panel-derivatives.panel-visible { animation-delay: 0.3s; transform: rotate(1.5deg); }
.panel-preservation.panel-visible { animation-delay: 0.45s; transform: rotate(-0.6deg); }

@keyframes panelEntry {
    0% {
        opacity: 0;
        transform: scale(0.85) translateY(30px) rotate(var(--tilt, 0deg));
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0) rotate(var(--tilt, 0deg));
    }
}

/* ============================================
   SECTION 3: THE MEDITATION LINE
   ============================================ */
#meditation-line {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.meditation-text {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    letter-spacing: -0.02em;
    color: #0a0a0a;
    text-align: center;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.meditation-text.text-visible {
    opacity: 1;
}

.meditation-above {
    margin-bottom: 3rem;
}

.meditation-below {
    margin-top: 3rem;
}

.meditation-line-container {
    width: 80vw;
    display: flex;
    justify-content: center;
}

.the-line {
    height: 2px;
    background: #0a0a0a;
    width: 0;
    transition: width 3s cubic-bezier(0.16, 1, 0.3, 1);
}

.the-line.line-animate {
    width: 100%;
}

/* ============================================
   SECTION 4: THE ARCHIVE DEPTH
   ============================================ */
#archive-depth {
    min-height: 100vh;
    padding: 10vh 5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    perspective: 1000px;
}

.depth-row {
    display: flex;
    gap: 36px;
    justify-content: center;
    width: 100%;
    max-width: 1100px;
    transition: transform 0.3s ease;
}

.depth-front {
    transform: scale(1);
    opacity: 1;
}

.depth-middle {
    transform: scale(0.95);
    opacity: 0.85;
}

.depth-back {
    transform: scale(0.9);
    opacity: 0.7;
}

.archive-panel {
    flex: 1;
    max-width: 480px;
}

.depth-front .archive-panel {
    opacity: 0;
}
.depth-middle .archive-panel {
    opacity: 0;
}
.depth-back .archive-panel {
    opacity: 0;
}

.depth-front .archive-panel.panel-visible { animation: archiveEntry 0.7s 0s ease forwards; }
.depth-middle .archive-panel.panel-visible { animation: archiveEntry 0.7s 0.3s ease forwards; }
.depth-back .archive-panel.panel-visible { animation: archiveEntry 0.7s 0.6s ease forwards; }

@keyframes archiveEntry {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   SECTION 5: THE SEAL
   ============================================ */
#the-seal {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.seal-container {
    width: clamp(200px, 40vw, 400px);
    height: clamp(200px, 40vw, 400px);
}

#license-seal {
    width: 100%;
    height: 100%;
}

/* Seal stroke draw animation */
.seal-hex,
.seal-line {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 2.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.seal-hex.seal-animate,
.seal-line.seal-animate {
    stroke-dashoffset: 0;
}

.seal-center {
    transform-origin: 200px 200px;
    transform: scale(0);
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 2.5s;
}

.seal-center.seal-animate {
    transform: scale(1);
}

/* Seal continuous rotation after assembly */
@keyframes sealRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#license-seal.seal-spinning {
    animation: sealRotate 600s linear infinite;
}

.seal-domain {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    color: #6b6e76;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-top: 2rem;
    opacity: 0;
    transition: opacity 1s ease 3s;
}

.seal-domain.seal-text-visible {
    opacity: 1;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .garden-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .panel-ip,
    .panel-distribution,
    .panel-derivatives,
    .panel-preservation {
        grid-column: 1 / -1;
        transform: rotate(0deg) !important;
        margin-top: 0;
    }

    .depth-row {
        flex-direction: column;
        align-items: center;
    }

    .archive-panel {
        max-width: 100%;
    }

    .geo-shape {
        display: none;
    }
}

@media (max-width: 480px) {
    .panel {
        padding: 1.5rem 1.2rem;
    }

    .kinetic-text {
        font-size: clamp(2rem, 8vw, 3rem);
    }
}