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

html{
    scroll-behavior: smooth;
}
body{
    background: #09070d;
    color:#f5f2ff ;
    font-family: 'Inter', sans-serif;
    overflow-x:hidden;
}

.hero{
    min-height: 100vh;
    display: flex;
    align-items: center;
     justify-content:center;
    text-align:center;
    padding:40px;
    position:relative;

}


  .hero-content{
    position: relative;
    z-index: 2;

    margin-left: 8vw;
}

.eyebrow{
    font-family: 'IBM Plex Mono' ,monospace;
    font-size: .8rem;
    letter-spacing:4px;
     color:#9c84ff;

    margin-bottom:30px;
}

.hero h1{
    font-family:'Syne',sans-serif;
    font-size:clamp(3rem,8vw,7rem);
    line-height:.9;
    letter-spacing:-3px;

    max-width:100%;
    word-break:break-word;
}
.subtitle{
    margin-top:25px;
    font-size:1.2rem;
    color: #bdb6d8

}

.enter-btn{
    display:inline-block;
    margin-top:60px;
    padding:18px 42px;
    border:1px solid #8e73ff;
     color:white;

    text-decoration:none;
    font-family:'IBM Plex Mono',monospace;
    letter-spacing:3px;

    transition:.35s;

}
.enter-btn:hover{

background:#8e73ff;

    color:#09070d;

}
.bg-glow{
    position:fixed;
    border-radius:50%;
    filter:blur(160px);
    z-index:-3;
    pointer-events:none;
}.glow-1{

    width:500px;
    height:500px;

    background:#6b3cff;

    top:-150px;
    left:-120px;

    opacity:.18;

}

.glow-2{

    width:420px;
    height:420px;
    background:#9d72ff;

    bottom:-120px;
    right:-100px;

    opacity:.15;
}

.noise{

    position:fixed;
    inset:0;

    pointer-events:none;
    opacity:.12;

    background-image:

    repeating-radial-gradient(
        circle at 0 0,
        rgba(255,255,255,.05) 0px,
        rgba(255,255,255,.02) 1px,
        transparent 2px,
        transparent 4px
    );

    mix-blend-mode:overlay;

    z-index:999;

}

    .line{
 position:fixed;
    height:1px;

    background:rgba(180,151,255,.18);
    z-index:-1;
}

.top-line{

    top:70px;
    left:0;
    width:45%;

}
.bottom-line{

    bottom:90px;
    right:0;
    width:38%;
}
/* ===========================
   HERO IMAGE
=========================== */

.hero-image{

    width:260px;

    margin:45px auto;

    display:flex;

    justify-content:center;

}

.hero-image img{

    width:100%;

    display:block;

    filter:
        drop-shadow(0 0 40px rgba(153,118,255,.35));

    transition:.4s;
}

.hero-image img:hover{
    transform:scale(1.03);

}
.moon{
    position:absolute;
    right:-220px;
    top:40px;
    width:650px;
    
    filter:
        blur(.3px)
        drop-shadow(0 0 80px #8d6cff);
    pointer-events:none;
    z-index:-1;
    opacity: .28;
filter:
    drop-shadow(0 0 90px rgba(162,120,255,.45));
}
.activate{

    animation:

        hologram 1.6s ease forwards;

}
@keyframes hologram{

0%{

color:white;

filter:none;

}

20%{

color:#8de8ff;

text-shadow:

0 0 10px #8de8ff,

0 0 25px #7a6dff;

}

45%{

color:#c79dff;

text-shadow:

0 0 18px #c79dff,

0 0 40px #8de8ff;

}

70%{
color:#ffffff;
text-shadow:
0 0 8px white,
0 0 30px #9d6fff;
}
100%{
color:white;
text-shadow:
0 0 3px white;
}

}
.scan-line{
    position:absolute;
    height: 6px;
    width:0;
    left:0;
    left:50%;
    top: 50%;transform: translate(-50%, -50%);

    background: 
    linear-gradient(
        90deg,transparent,
        #ffffff,#7cecff,
        transparent);
       
     opacity:0;
     filter:blur(2px);
}
.scan{

animation:
scanEffect 1.3s ease forwards;

}
@keyframes scanEffect{

0%{
width:0;
opacity:0;
}
15%{
opacity:1;
}
50%{

width:700px;
}
100%{
width:900px;
opacity:0;
}

}
.moon-active{
animation:
moonGlow 2s ease forwards;
}

@keyframes moonGlow{

0%{
opacity:.18;
filter:blur(.5px);

}
100%{
opacity:.35;
filter:
drop-shadow(0 0 90px #8666ff);
}
}
body{
    cursor:url("assets/cursor/butterfly_cursor_64.png") 12 12, auto;
}
body::after{

content:"";

position:fixed;

inset:0;

background:
repeating-linear-gradient(
transparent 0px,
transparent 3px,
rgba(255,255,255,.025) 4px
);

pointer-events:none;

}
.screen-glitch{

    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999999;

    opacity: 0;

    background:
    repeating-linear-gradient(
        0deg,
        rgba(255,255,255,.12) 0px,
        rgba(255,255,255,.12) 2px,
        transparent 2px,
        transparent 5px
    );

    animation: screenGlitch 6s infinite;

}

@keyframes screenGlitch{

0%,95%,100%{
    opacity:0;
    transform:none;
}

96%{
    opacity:1;
    transform:translateX(-8px) skewX(3deg);
}

96.3%{
    transform:translateX(10px);
}

96.6%{
    transform:translateX(-6px);
}

97%{
    opacity:0;
    transform:none;
}

}

@keyframes crt{

0%,96%,100%{

transform:none;

}

96.5%{

transform:translateY(-2px);
}
97%{
transform:translateY(2px);
}
97.5%{

transform:translateX(-1px);

}

98%{

transform:none;
}

}
body.glitch{

    transform: translateX(5px);

    filter:
        contrast(1.15)
        brightness(1.08)
        saturate(1.2);

}
body.glitch #logo{
    text-shadow:
   -4px 0 #8f5cff,
     4px 0 #5fe9ff,
     0 0 25px  rgba(175,120,255,.8);
     filter: brightness(1.2);
    
}

body.glitch .hero{
    transform:translateX(4px);

}

.archive{
    width:100%;
    height:100vh;
    position:relative;
    overflow:hidden;

}
body.glitch #logo{

    text-shadow:
        -4px 0 #b26cff,
         4px 0 #63e7ff,
         0 0 25px rgba(178,108,255,.9);
    transform: translateX(2px);
    filter: brightness(1.15);
}


.archive{
    position:relative;
    width:100%;
    height:100vh;
    overflow:hidden;
}

/* HEADER */

.archive-header{
    position:absolute;
    top:55px;
    left:50%;
    transform:translateX(-50%);
    width:100%;
    text-align:center;
}

.database{
    position:absolute;
    left:70px;
    top:0;

    font-family:"IBM Plex Mono";
    font-size:11px;
    letter-spacing:3px;
    color:#b59cff;
}

.status{
    position:absolute;
    right:70px;
    top:0;

    font-family:"IBM Plex Mono";
    font-size:11px;
    letter-spacing:3px;
    color:#8de8ff;
}

.archive-header h1{

    font-family:"Syne";

    font-size:clamp(4rem,7vw,6rem);

    letter-spacing:-3px;

    margin-top:50px;

}

.quote{

    margin-top:-10px;

    font-family:"IBM Plex Mono";

    color:#9992b9;

    letter-spacing:3px;

    font-size:12px;

}



.card{

    position:absolute;

    width:300px;

    padding:26px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.025);

    backdrop-filter:blur(14px);

    transition:.45s;

    animation:fadeUp 1s ease both;

}

.card::before{

content:"";

position:absolute;

left:0;

top:0;

width:100%;

height:2px;

background:

linear-gradient(
90deg,
transparent,
#8f6cff,
transparent);

opacity:.4;

}

.tag{

font-family:"IBM Plex Mono";

font-size:10px;

letter-spacing:4px;

color:#8d86b7;

}

.card h2{

margin:18px 0;

font-size:32px;

font-family:"Syne";

}

.card p{

color:#beb7d7;

line-height:1.8;

}



.identity{

left:90px;

top:230px;

animation-delay:.15s;

}

.toolkit{

right:100px;

top:210px;

animation-delay:.35s;

}

.network{

left:50%;

bottom:70px;

transform:translateX(-50%);

width:420px;

text-align:center;

animation-delay:.55s;

}



.card:hover{

transform:

translateY(-10px)

rotate(-1deg)

scale(1.02);

border-color:#8f6cff;

box-shadow:

0 0 45px rgba(143,108,255,.25);

}

.network:hover{

transform:

translateX(-50%)

translateY(-10px)

scale(1.02);

}


@keyframes fadeUp{

from{

opacity:0;

transform:

translateY(40px);

}

to{

opacity:1;

transform:

translateY(0);

}

}


.identity{

animation:

fadeUp .8s ease,

float1 8s ease-in-out infinite;

}

.toolkit{

animation:

fadeUp 1s ease,

float2 7s ease-in-out infinite;

}

.network{

animation:

fadeUp 1.2s ease,

float3 9s ease-in-out infinite;

}

@keyframes float1{

50%{

transform:translateY(-10px);

}

}

@keyframes float2{

50%{

transform:translateY(8px);

}

}

@keyframes float3{

50%{

transform:translateX(-50%) translateY(-8px);

}

}

/* ===========================
        BACKGROUND LIGHT
=========================== */

.archive::after{

content:"";

position:absolute;

inset:0;

pointer-events:none;

background:

radial-gradient(circle at center,
rgba(160,120,255,.08),
transparent 60%);

mix-blend-mode:screen;

animation:pulse 8s infinite;

}

@keyframes pulse{

50%{

opacity:.4;

}

}



.archive-header h1:hover{

text-shadow:

0 0 15px #9b6cff,

0 0 40px #74dfff;

transition:.4s;

letter-spacing:-1px;

cursor:default;

}
.network a{

    color:#f5f2ff;
    text-decoration:none;
    transition:.3s;
    border-bottom:1px solid transparent;

}

.network a:hover{

    color:#9d7dff;
    border-bottom:1px solid #9d7dff;
    text-shadow:0 0 12px rgba(157,125,255,.7);

}