/* gamelicen.se - Muji + Art Deco Game Licensing Archive */

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

:root{
    --parchment:#F5F0E8;
    --charcoal:#1A1A1E;
    --soot:#2E2E2E;
    --bone:#E8E0D4;
    --gold:#C9A84C;
    --magenta:#FF2D6B;
    --cyan:#00F5D4;
    --yellow:#E8FF00;
    --amber:#F4A523;
    --kraft:#D4C5A9;
    --muted:#8A8478;
}

body{
    background:var(--parchment);
    color:var(--soot);
    font-family:'Libre Baskerville',Georgia,serif;
    font-weight:400;
    font-size:clamp(1rem,1.2vw,1.25rem);
    line-height:1.75;
    overflow-x:hidden;
    scroll-behavior:smooth;
}

/* Paper grain texture */
body::before{
    content:'';
    position:fixed;inset:0;
    z-index:999;pointer-events:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    mix-blend-mode:multiply;
}

/* Progress wax indicator */
.progress-wax{
    position:fixed;
    right:12px;
    top:10%;
    height:80%;
    width:4px;
    background:var(--kraft);
    border-radius:2px;
    z-index:50;
    overflow:hidden;
}

.wax-fill{
    width:100%;
    height:0%;
    background:linear-gradient(180deg,var(--amber),var(--magenta));
    border-radius:2px;
    transition:height 0.1s linear;
}

/* Strata */
.stratum{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:clamp(2rem,4vw,4rem);
}

.stratum-warm{background:var(--parchment)}
.stratum-dark{background:var(--charcoal);color:var(--bone)}

/* Hero / Foyer */
.foyer-content{text-align:center}

.hero-domain{
    font-family:'Poiret One',sans-serif;
    font-weight:400;
    font-size:clamp(3rem,8vw,7rem);
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--soot);
}

.skel-letter{
    display:inline-block;
    position:relative;
    opacity:0;
    transition:opacity 0.5s ease;
}

.skel-letter::before{
    content:'';
    position:absolute;
    inset:10% 0;
    background:var(--bone);
    border-radius:2px;
    animation:shimmer 1.5s ease infinite;
}

.skel-letter.resolved{
    opacity:1;
}

.skel-letter.resolved::before{
    display:none;
}

@keyframes shimmer{
    0%{background-position:-200% 0}
    100%{background-position:200% 0}
}

.gold-rule{
    width:clamp(100px,30vw,300px);
    height:1px;
    background:var(--gold);
    margin:2rem auto;
}

.epigraph{
    font-family:'Libre Baskerville',Georgia,serif;
    font-style:italic;
    font-size:clamp(0.9rem,1.1vw,1.05rem);
    color:var(--muted);
    max-width:40ch;
    margin:0 auto;
    opacity:0;
    transition:opacity 0.8s ease 0.5s;
}

.epigraph.visible{opacity:1}

/* Index cards */
#index{
    gap:clamp(3rem,5vh,6rem);
    padding:clamp(3rem,6vw,6rem) clamp(2rem,8vw,8rem);
}

.index-card{
    background:var(--kraft);
    border:1px solid var(--muted);
    padding:clamp(1.5rem,2vw,2rem) clamp(2rem,3vw,3rem);
    max-width:700px;
    width:100%;
    display:flex;
    align-items:flex-start;
    gap:1.5rem;
    opacity:0;
    transform:translateY(8px);
    transition:opacity 0.5s ease,transform 0.5s ease;
}

.index-card.revealed{
    opacity:1;
    transform:translateY(0);
}

.candle-icon{
    width:24px;
    height:40px;
    flex-shrink:0;
}

.flame-path{
    animation:flameFlicker 3s ease-in-out infinite;
    transform-origin:center bottom;
}

@keyframes flameFlicker{
    0%,100%{transform:translateX(0) scaleY(1)}
    25%{transform:translateX(1px) scaleY(1.05)}
    50%{transform:translateX(-1px) scaleY(0.95)}
    75%{transform:translateX(1px) scaleY(1.02)}
}

.card-title{
    font-family:'Poiret One',sans-serif;
    font-size:clamp(1.2rem,2vw,1.6rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--soot);
    margin-bottom:0.5rem;
}

.card-desc{
    font-size:clamp(0.85rem,1vw,0.95rem);
    color:var(--muted);
}

/* Neon Chamber */
.neon-chamber{
    gap:0;
    padding:0;
}

.neon-numeral{
    min-height:50vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:clamp(2rem,4vw,4rem);
    width:100%;
    opacity:0;
    transition:opacity 0.6s ease;
}

.neon-numeral.revealed{opacity:1}

.neon-num{
    font-family:'Poiret One',sans-serif;
    font-size:clamp(20vw,30vw,40vw);
    letter-spacing:0.15em;
    color:white;
    text-shadow:
        0 0 10px var(--magenta),
        0 0 30px var(--magenta),
        0 0 60px var(--cyan),
        0 0 100px var(--cyan),
        0 0 150px rgba(232,255,0,0.3);
    line-height:1;
    animation:neonPulse 3s ease-in-out infinite;
}

@keyframes neonPulse{
    0%,100%{opacity:0.85}
    50%{opacity:1}
}

.neon-text{
    font-family:'Libre Baskerville',Georgia,serif;
    font-size:clamp(0.9rem,1.1vw,1.05rem);
    color:var(--bone);
    max-width:40ch;
    text-align:center;
    margin-top:2rem;
    line-height:1.7;
}

/* Reading Room */
.reading-room{
    align-items:flex-start;
    padding-left:20%;
}

.reading-content{
    max-width:600px;
}

.reading-pullquote{
    font-family:'Poiret One',sans-serif;
    font-size:clamp(1.25rem,2vw,1.8rem);
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:3rem;
    margin-left:-15%;
    opacity:0;
    transform:translateY(8px);
    transition:opacity 0.5s ease,transform 0.5s ease;
}

.reading-block{
    margin-bottom:2rem;
    opacity:0;
    transform:translateY(8px);
    transition:opacity 0.5s ease,transform 0.5s ease;
}

.reading-pullquote.revealed,.reading-block.revealed{
    opacity:1;
    transform:translateY(0);
}

.reading-body{
    max-width:38em;
}

/* Deco dividers */
.deco-divider{
    text-align:center;
    padding:2rem 0;
    background:var(--parchment);
}

.deco-dark{background:var(--charcoal)}

.deco-divider svg{
    width:200px;
    height:40px;
}

/* Seal Stratum */
.seal-stratum{
    gap:2rem;
}

.seal-emblem{
    position:relative;
    width:clamp(150px,20vw,200px);
    opacity:0;
    transition:opacity 0.6s ease;
}

.seal-emblem.revealed{opacity:1}

.seal-svg{width:100%;height:auto}

.seal-path{
    stroke-dasharray:600;
    stroke-dashoffset:600;
    transition:stroke-dashoffset 2s ease;
}

.seal-emblem.revealed .seal-path{
    stroke-dashoffset:0;
}

.orbit-flare{
    position:absolute;
    width:8px;height:8px;
    background:white;
    border-radius:50%;
    top:0;left:50%;
    box-shadow:0 0 12px rgba(255,255,255,0.8);
    animation:orbitFlare 8s linear infinite;
    transform-origin:0 100px;
}

@keyframes orbitFlare{
    from{transform:rotate(0deg) translateY(0) rotate(0deg)}
    to{transform:rotate(360deg) translateY(0) rotate(-360deg)}
}

.seal-domain{
    font-family:'Poiret One',sans-serif;
    font-size:clamp(1.5rem,3vw,2.5rem);
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:var(--bone);
}

.seal-date{
    font-family:'IBM Plex Mono',monospace;
    font-weight:300;
    font-size:clamp(0.75rem,0.9vw,0.875rem);
    letter-spacing:0.12em;
    color:var(--muted);
}

/* Responsive */
@media(max-width:768px){
    .progress-wax{display:none}
    .reading-room{padding-left:clamp(1rem,4vw,2rem);align-items:center}
    .reading-pullquote{margin-left:0}
    .neon-num{font-size:clamp(30vw,50vw,70vw)}
    .index-card{flex-direction:column;gap:0.75rem}
    .candle-icon{width:16px;height:28px}
}

@media(prefers-reduced-motion:reduce){
    .flame-path{animation:none}
    .neon-num{animation:none;opacity:1}
    .orbit-flare{animation:none}
    .skel-letter{opacity:1}.skel-letter::before{display:none}
    .index-card,.neon-numeral,.reading-pullquote,.reading-block,.seal-emblem{opacity:1;transform:none;transition:none}
    .seal-path{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
    .epigraph{opacity:1;transition:none}
}