/* gamelicens.ing - Dark-Academia Celestial Licensing */

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

:root{
    --desk:#1C1914;
    --vellum:#D8D0C4;
    --gold:#C4A35A;
    --walnut:#3A3229;
    --sepia:#8B7355;
    --wax:#6B2D3E;
    --silver:#B8B2A6;
    --night:#1A2238;
    --dim-gold:#9E8A5E;
}

body{
    background:var(--desk);
    color:var(--silver);
    font-family:'Source Serif 4',Georgia,serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.2vw,1.15rem);
    line-height:1.75;
    overflow-x:hidden;
}

/* Wood grain texture */
body::before{
    content:'';
    position:fixed;inset:0;
    z-index:0;pointer-events:none;
    background:repeating-linear-gradient(90deg,transparent,transparent 120px,rgba(60,50,40,0.03) 120px,rgba(60,50,40,0.03) 121px);
}

/* Constellation nav */
.constellation-nav{
    position:fixed;
    top:16px;right:16px;
    z-index:100;
    width:56px;
    cursor:pointer;
}

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

.const-star{
    transition:opacity 0.3s ease;
    cursor:pointer;
}

.const-star.active{
    opacity:1 !important;
    filter:drop-shadow(0 0 6px #C4A35A);
}

/* The Arrival */
.arrival{
    min-height:100svh;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.star-chart{
    position:absolute;
    inset:0;
    z-index:0;
    transition:transform 0.1s linear;
}

.chart-svg{
    width:100%;
    height:100%;
}

.arrival-content{
    position:relative;
    z-index:1;
    text-align:center;
}

.hero-domain{
    font-family:'Libre Baskerville',Georgia,serif;
    font-weight:700;
    font-size:clamp(3rem,8vw,7rem);
    letter-spacing:0.06em;
}

.hero-silver{color:var(--silver)}
.hero-gold{color:var(--gold)}

.hero-rule{
    width:60%;
    height:1px;
    background:var(--gold);
    margin:1.5rem auto;
}

.hero-subtitle{
    font-family:'Caveat',cursive;
    font-size:clamp(1rem,1.5vw,1.3rem);
    color:var(--sepia);
    min-height:2em;
}

/* The Desk zone */
.desk-zone{
    position:relative;
    min-height:300vh;
    padding:10vh 0;
}

/* Document fragments */
.doc-fragment{
    position:absolute;
    width:clamp(280px,35vw,450px);
    background:var(--vellum);
    color:var(--walnut);
    padding:clamp(1.5rem,2.5vw,2.5rem);
    clip-path:polygon(2% 0%,98% 1%,100% 3%,99% 97%,97% 100%,3% 99%,0% 96%,1% 2%);
    box-shadow:0 4px 24px rgba(0,0,0,0.45);
    transform:rotate(var(--rest-rot,0deg));
    z-index:1;
}

/* Paper noise on fragments */
.doc-fragment::before{
    content:'';
    position:absolute;inset:0;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events:none;
    border-radius:inherit;
}

/* Watercolor bleed edges */
.doc-fragment::after{
    content:'';
    position:absolute;inset:-5px;
    background:
        radial-gradient(ellipse 60px 40px at 5% 10%,rgba(196,163,90,0.08),transparent),
        radial-gradient(ellipse 50px 50px at 95% 90%,rgba(107,45,62,0.06),transparent),
        radial-gradient(ellipse 40px 60px at 90% 15%,rgba(196,163,90,0.05),transparent);
    pointer-events:none;
    z-index:-1;
}

/* Fragment entrance */
.frag-enter{
    opacity:0;
    transform:translateX(var(--enter-x,0)) rotate(0deg);
    transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1),transform 0.9s cubic-bezier(0.16,1,0.3,1);
}

.frag-enter.shown{
    opacity:1;
    transform:translateX(0) rotate(var(--rest-rot,0deg));
}

.frag-title{
    font-family:'Libre Baskerville',Georgia,serif;
    font-weight:400;
    font-size:clamp(1.2rem,2vw,1.8rem);
    letter-spacing:0.02em;
    line-height:1.2;
    color:var(--walnut);
    margin-bottom:1rem;
}

.frag-body{
    font-family:'Source Serif 4',Georgia,serif;
    font-weight:300;
    line-height:1.75;
    margin-bottom:1rem;
}

.frag-code{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.85rem;
    letter-spacing:0.08em;
    color:#6B6258;
}

/* Handwritten annotations */
.annotation{
    position:absolute;
    font-family:'Caveat',cursive;
    font-size:clamp(1rem,1.3vw,1.2rem);
    color:var(--sepia);
    opacity:0;
    transition:opacity 0.8s ease 0.5s;
    pointer-events:none;
    white-space:nowrap;
}

.frag-enter.shown .annotation{
    opacity:0.7;
}

/* The Seal */
.seal-section{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:2;
}

.seal-container{
    width:clamp(180px,25vw,260px);
    margin-bottom:2rem;
}

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

.seal-fill{transition:opacity 1.2s ease}
.seal-motif{transition:opacity 0.8s ease 1.4s}
.seal-text{transition:opacity 0.6s ease 2s}
.seal-crack{transition:opacity 0.4s ease 1.6s}

.seal-container.revealed .seal-fill{opacity:0.9}
.seal-container.revealed .seal-motif{opacity:1}
.seal-container.revealed .seal-text{opacity:1}
.seal-container.revealed .seal-crack{opacity:0.5}

.seal-closing{
    font-family:'Libre Baskerville',Georgia,serif;
    font-style:italic;
    font-size:clamp(0.85rem,1vw,1rem);
    color:var(--silver);
    opacity:0;
    transition:opacity 0.8s ease;
    max-width:30ch;
    text-align:center;
}

.seal-section.shown .seal-closing{opacity:0.7}

/* Responsive */
@media(max-width:768px){
    .doc-fragment{
        position:relative;
        left:auto !important;top:auto !important;
        width:calc(100% - 2rem);
        margin:2rem auto;
        transform:rotate(0deg) !important;
    }
    .frag-enter{--enter-x:0 !important}
    .frag-enter.shown{transform:rotate(0deg) !important}
    .desk-zone{min-height:auto;padding:2rem 1rem}
    .constellation-nav{display:none}
}

@media(prefers-reduced-motion:reduce){
    .frag-enter{opacity:1;transform:rotate(var(--rest-rot,0deg));transition:none}
    .annotation{opacity:0.7;transition:none}
    .seal-fill,.seal-motif,.seal-text,.seal-crack{transition:none}
    .seal-fill{opacity:0.9}.seal-motif{opacity:1}.seal-text{opacity:1}.seal-crack{opacity:0.5}
    .seal-closing{opacity:0.7;transition:none}
}