/* licensor.directory -- pixel-art retro-futuristic modular grid */

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

:root{
    --cosmic:#0D0D18;
    --teal:#0A3D3D;
    --purple:#2A1040;
    --rust:#3A1A10;
    --cyan:#00E5D0;
    --pink:#E040B0;
    --gold:#E8B030;
    --chrome:#C0C8D8;
    --frost:#E8ECF0;
    --slate:#7A8090;
    --grid-line:#1A1A28;
}

html{scroll-behavior:smooth;font-size:16px}

body{
    background:var(--cosmic);
    color:var(--frost);
    font-family:'Crimson Pro',serif;
    font-weight:400;
    font-size:clamp(0.9rem,1vw,1rem);
    line-height:1.65;
    overflow-x:hidden;
}

/* Status bar */
.status-bar{
    position:fixed;
    top:0;left:0;right:0;
    height:32px;
    background:var(--cosmic);
    border-bottom:2px solid var(--grid-line);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:3rem;
    z-index:100;
}

.status-icon{
    display:flex;
    align-items:center;
    gap:0.5rem;
    text-decoration:none;
    color:var(--slate);
    transition:color 0.2s ease;
}

.status-icon.active{color:var(--cyan)}
.status-icon:hover{color:var(--pink)}

.pixel-sprite{
    display:inline-block;
    width:12px;height:12px;
    background:var(--chrome);
    image-rendering:pixelated;
}

.sprite-key{border-radius:0;background:var(--cyan)}
.sprite-grid{background:var(--pink)}
.sprite-stack{background:var(--gold)}
.sprite-star{background:var(--chrome)}

.status-label{
    font-family:'Silkscreen',cursive;
    font-size:0.7rem;
    letter-spacing:0.02em;
}

/* Floating layer */
.floating-layer{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:50;
}

.float-sprite{
    position:absolute;
    width:8px;height:8px;
    border-radius:0;
    opacity:0.4;
    animation:float-drift 10s ease-in-out infinite;
}

@keyframes float-drift{
    0%,100%{transform:translateY(0) translateX(0)}
    25%{transform:translateY(-20px) translateX(10px)}
    50%{transform:translateY(-10px) translateX(-10px)}
    75%{transform:translateY(-30px) translateX(5px)}
}

/* Sections */
.dir-section{
    min-height:100vh;
    padding:48px 16px 16px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* Module grid */
.module-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:4px;
    max-width:900px;
    width:100%;
}

.module{
    padding:clamp(1rem,2vw,2rem);
    position:relative;
    overflow:hidden;
    opacity:0;
    transform:scale(0.95);
    transition:opacity 0.3s ease,transform 0.3s ease;
}

.module.shown{
    opacity:1;
    transform:scale(1);
}

/* Module sizes */
.mod-1x1{grid-column:span 1;grid-row:span 1}
.mod-2x1{grid-column:span 2;grid-row:span 1}
.mod-1x2{grid-column:span 1;grid-row:span 2}
.mod-2x2{grid-column:span 2;grid-row:span 2}
.mod-full{grid-column:1/-1}

/* Module colors */
.bg-teal{background:var(--teal)}
.bg-purple{background:var(--purple)}
.bg-rust{background:var(--rust)}
.bg-dark{background:var(--grid-line)}

/* Pixel border */
.pixel-border{
    position:absolute;
    inset:6px;
    border:2px solid var(--chrome);
    opacity:0.3;
    pointer-events:none;
}

/* Hero */
.hero-module{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.hero-title{
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-size:clamp(2.5rem,6vw,6rem);
    color:var(--frost);
    letter-spacing:0.03em;
    line-height:1.1;
}

.hero-sub{
    font-family:'Silkscreen',cursive;
    font-size:0.7rem;
    color:var(--cyan);
    letter-spacing:0.02em;
    margin-top:1rem;
}

.module-icon{
    font-size:2rem;
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
    opacity:0.3;
}

/* Module content */
.module-title{
    font-family:'Cormorant Garamond',serif;
    font-weight:600;
    font-size:clamp(1.3rem,2vw,2rem);
    color:var(--frost);
    letter-spacing:0.01em;
    margin-bottom:0.5rem;
}

.module-desc{
    font-family:'Crimson Pro',serif;
    font-weight:400;
    font-size:clamp(0.85rem,1vw,0.95rem);
    line-height:1.65;
    color:var(--frost);
    opacity:0.8;
}

/* Archive labels */
.archive-grid{
    gap:4px;
}

.archive-label{
    font-family:'Silkscreen',cursive;
    font-size:0.8rem;
    font-weight:700;
    color:var(--cyan);
    display:flex;
    align-items:center;
    justify-content:center;
    height:100%;
    min-height:80px;
}

/* Credits */
.credits-stack{
    max-width:900px;
    width:100%;
    display:flex;
    flex-direction:column;
    gap:4px;
}

.credits-final{
    font-family:'Cormorant Garamond',serif;
    font-weight:400;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--frost);
    text-align:center;
    margin-bottom:1rem;
}

.credits-domain{
    font-family:'Silkscreen',cursive;
    font-size:0.8rem;
    color:var(--pink);
    text-align:center;
    letter-spacing:0.02em;
}

/* Responsive */
@media(max-width:768px){
    .module-grid{grid-template-columns:repeat(2,1fr)}
    .mod-2x2{grid-column:span 2}
    .status-bar{gap:1.5rem}
}

@media(max-width:480px){
    .module-grid{grid-template-columns:1fr}
    .mod-2x1,.mod-2x2{grid-column:span 1}
}

@media(prefers-reduced-motion:reduce){
    .module{opacity:1;transform:none;transition:none}
    .float-sprite{animation:none}
}