/* heisei.boo - Skeuomorphic Time Capsule */

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

:root{
    --cream-plastic:#F5ECD7;
    --midnight-indigo:#0F1B2D;
    --amber-crt:#FFBF00;
    --heisei-teal:#2A9D8F;
    --translucent-lilac:#C8B8DB;
    --cool-steel:#8C9BAA;
    --charcoal-grip:#3A3A3C;
    --power-green:#39FF14;
    --vermillion:#C4544A;
}

html{scroll-behavior:smooth}

body{
    background:var(--cream-plastic);
    background-image:
        repeating-linear-gradient(87deg,transparent,transparent 12px,rgba(139,115,85,0.06) 12px,rgba(139,115,85,0.06) 13px);
    color:var(--midnight-indigo);
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.95rem,1.2vw,1.15rem);
    line-height:1.65;
    overflow-x:hidden;
    perspective:1200px;
}

/* Boot screen */
.boot-screen{
    position:fixed;
    inset:0;
    background:var(--midnight-indigo);
    z-index:200;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    padding:40px;
    transition:transform 0.6s ease-in-out;
}

.boot-screen.dismissed{
    transform:translateY(-100vh);
}

.boot-content{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(0.75rem,1vw,0.9rem);
    color:var(--amber-crt);
    letter-spacing:0.05em;
}

.boot-cursor{
    animation:blink 1s steps(1) infinite;
}

@keyframes blink{
    0%,50%{opacity:1}
    51%,100%{opacity:0}
}

.boot-text{
    white-space:pre-wrap;
    margin-top:8px;
}

.boot-progress{
    margin-top:16px;
    width:300px;
    height:16px;
    border:1px solid var(--cool-steel);
    position:relative;
    display:none;
}

.boot-progress.active{display:block}

.progress-bar{
    height:100%;
    width:0%;
    background:var(--amber-crt);
    transition:width 2s linear;
}

.progress-pct{
    position:absolute;
    right:-40px;
    top:0;
    font-size:0.75rem;
    color:var(--amber-crt);
}

/* Workspace */
.workspace{
    display:none;
}

.workspace.visible{display:block}

/* Toolbar */
.toolbar{
    position:sticky;
    top:0;
    z-index:50;
    background:var(--midnight-indigo);
    display:flex;
    align-items:center;
    padding:4px 12px;
    height:32px;
    box-shadow:0 2px 8px rgba(15,27,45,0.3);
}

.start-btn{
    font-family:'DM Sans',sans-serif;
    font-weight:700;
    font-size:0.75rem;
    color:var(--cream-plastic);
    background:var(--charcoal-grip);
    border:1px solid var(--cool-steel);
    border-radius:4px;
    padding:2px 12px;
    cursor:pointer;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 1px 3px rgba(0,0,0,0.3);
    transition:transform 0.1s,box-shadow 0.1s;
}

.start-btn:active{
    transform:translateY(1px) scale(0.98);
    box-shadow:inset 0 1px 2px rgba(0,0,0,0.3);
}

.toolbar-space{flex:1}

.system-tray{
    display:flex;
    align-items:center;
    gap:12px;
}

.tray-icon{
    font-size:12px;
    color:var(--cool-steel);
}

.tray-clock{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.7rem;
    color:var(--amber-crt);
    letter-spacing:0.05em;
}

/* Timeline ribbon */
.timeline-ribbon{
    background:var(--midnight-indigo);
    padding:8px 24px;
    overflow-x:auto;
}

.timeline-track{
    position:relative;
    height:40px;
    border-top:2px solid var(--amber-crt);
    margin:0 20px;
}

.tl-mark{
    position:absolute;
    top:-6px;
    transform:translateX(-50%);
    display:flex;
    flex-direction:column;
    align-items:center;
}

.tl-mark::before{
    content:'';
    width:2px;
    height:10px;
    background:var(--amber-crt);
}

.tl-year{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.65rem;
    color:var(--amber-crt);
    margin-top:2px;
}

.tl-event{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.55rem;
    color:var(--cool-steel);
    white-space:nowrap;
}

/* Tab dividers */
.tab-dividers{
    position:fixed;
    right:0;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:4px;
    z-index:40;
}

.tab-div{
    writing-mode:vertical-rl;
    text-orientation:upright;
    font-family:'DM Sans',sans-serif;
    font-weight:700;
    font-size:0.65rem;
    letter-spacing:0.1em;
    color:var(--midnight-indigo);
    padding:8px 6px;
    text-decoration:none;
    border-radius:4px 0 0 4px;
    box-shadow:-2px 2px 4px rgba(15,27,45,0.15);
    transition:transform 0.15s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.15s;
    cursor:pointer;
}

.tab-div:active{
    transform:translateY(2px);
    box-shadow:-1px 1px 2px rgba(15,27,45,0.1);
}

.tab-teal{background:rgba(42,157,143,0.7)}
.tab-amber{background:rgba(255,191,0,0.5)}
.tab-lilac{background:rgba(200,184,219,0.7)}
.tab-green{background:rgba(57,255,20,0.3)}

/* Workbench */
.workbench{
    max-width:1100px;
    margin:0 auto;
    padding:clamp(24px,4vw,48px) clamp(16px,3vw,40px);
    padding-right:clamp(48px,6vw,80px);
}

/* Section header */
.section-header{
    display:flex;
    align-items:center;
    gap:16px;
    margin:clamp(32px,6vh,64px) 0 clamp(16px,2vh,24px);
}

.mon-icon{
    width:48px;
    height:48px;
    flex-shrink:0;
}

.section-title{
    font-family:'DM Serif Display',serif;
    font-size:clamp(2.5rem,6vw,5rem);
    color:var(--midnight-indigo);
    line-height:1.1;
}

.section-sub{
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(0.9rem,1.2vw,1.1rem);
    color:var(--cool-steel);
}

/* Card grid */
.card-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:2rem;
}

/* Base card */
.card{
    border-radius:8px;
    box-shadow:4px 4px 8px rgba(15,27,45,0.15);
    transition:transform 0.2s cubic-bezier(0.34,1.56,0.64,1),box-shadow 0.2s;
    cursor:default;
}

.card:hover{
    transform:translateY(-4px) rotateX(2deg);
    box-shadow:8px 12px 24px rgba(15,27,45,0.25);
}

/* Device cards */
.device-card{
    background:var(--translucent-lilac);
    padding:16px;
    position:relative;
}

.device-bezel{
    background:var(--charcoal-grip);
    border-radius:6px;
    padding:12px;
    position:relative;
    border:2px solid var(--cool-steel);
}

.device-screen{
    background:var(--midnight-indigo);
    border-radius:2px;
    padding:16px;
    min-height:80px;
}

.lcd-screen{
    background-image:repeating-linear-gradient(
        0deg,transparent,transparent 2px,rgba(255,191,0,0.03) 2px,rgba(255,191,0,0.03) 3px
    );
}

.screen-text{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.85rem;
    color:var(--amber-crt);
    letter-spacing:0.05em;
}

.screen-sub{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.7rem;
    color:var(--cool-steel);
    margin-top:4px;
}

.device-controls{
    display:flex;
    gap:8px;
    justify-content:center;
    margin-top:8px;
}

.device-btn{
    font-size:10px;
    color:var(--cool-steel);
    background:var(--midnight-indigo);
    border-radius:50%;
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:transform 0.1s;
}

.device-btn:active{
    transform:scale(0.92);
}

/* Screws */
.screw{
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    background:radial-gradient(circle,#bbb,#888);
    transition:transform 0.3s;
}

.screw::after{
    content:'';
    position:absolute;
    top:2px;left:1px;
    width:4px;height:1px;
    background:#666;
}

.screw-tl{top:6px;left:6px}
.screw-br{bottom:6px;right:6px}

.device-card:hover .screw{
    transform:rotate(90deg);
}

/* Power LED */
.power-led{
    position:absolute;
    top:8px;right:8px;
    width:4px;height:4px;
    border-radius:50%;
    background:var(--power-green);
    box-shadow:0 0 4px 1px var(--power-green);
    animation:ledPulse 2s ease-in-out infinite;
}

@keyframes ledPulse{
    0%,100%{opacity:0.6}
    50%{opacity:1}
}

/* Document cards */
.document-card{
    background:var(--cream-plastic);
    border:1px solid #d4c9b0;
    padding:24px;
    position:relative;
    background-image:linear-gradient(180deg,transparent 49%,rgba(0,0,0,0.02) 50%,transparent 51%);
}

.doc-title{
    font-family:'DM Serif Display',serif;
    font-size:1.2rem;
    margin-bottom:8px;
    color:var(--midnight-indigo);
}

.doc-body{
    font-family:'DM Sans',sans-serif;
    font-size:0.9rem;
    line-height:1.65;
    color:var(--charcoal-grip);
    margin-top:8px;
}

.tall-card{
    grid-row:span 2;
}

/* Hanko stamp */
.hanko-stamp{
    position:absolute;
    bottom:12px;
    right:12px;
    width:32px;
    height:32px;
    border:2px solid var(--vermillion);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:serif;
    font-size:14px;
    color:var(--vermillion);
    transform:rotate(-3deg);
    opacity:0.7;
}

/* Media cards */
.media-card{
    background:var(--midnight-indigo);
    padding:4px;
    border-radius:4px;
}

.media-case{
    background:var(--charcoal-grip);
    border-radius:2px;
    padding:24px;
    border:1px solid var(--cool-steel);
}

.media-label{
    font-family:'DM Serif Display',serif;
    font-size:1.3rem;
    color:var(--cream-plastic);
}

.media-sub{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.7rem;
    color:var(--cool-steel);
    margin-top:4px;
}

/* Sticker cards */
.sticker-card{
    background:var(--amber-crt);
    border-radius:40% 50% 45% 55% / 55% 45% 50% 40%;
    padding:20px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    min-height:100px;
}

.sticker-text{
    font-family:'DM Sans',sans-serif;
    font-weight:700;
    font-size:1.1rem;
    color:var(--midnight-indigo);
}

.sticker-sub{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.7rem;
    color:var(--charcoal-grip);
    margin-top:4px;
}

/* LCD flicker */
@keyframes lcdFlicker{
    0%{opacity:0}
    10%{opacity:1}
    15%{opacity:0}
    25%{opacity:1}
    30%{opacity:0}
    40%{opacity:1;filter:brightness(1.3)}
    100%{opacity:1;filter:brightness(1)}
}

.lcd-screen.flicker{
    animation:lcdFlicker 0.4s ease-out forwards;
}

/* Responsive */
@media(max-width:640px){
    .card-grid{grid-template-columns:1fr}
    .tab-dividers{
        position:relative;
        right:auto;top:auto;
        transform:none;
        flex-direction:row;
        overflow-x:auto;
        padding:8px;
        gap:8px;
    }
    .tab-div{
        writing-mode:horizontal-tb;
        border-radius:4px;
        padding:4px 12px;
    }
    .tall-card{grid-row:span 1}
    .workbench{padding-right:16px}
}