*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI',sans-serif;
}

body{
    background:#05070d;
    color:white;
    overflow-x:hidden;
}

/* ===== LOADING ===== */
.loading{
    position:fixed;
    inset:0;
    background:#000;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    z-index:999;
    transition:.8s;
}
.loading.hide{opacity:0;pointer-events:none;}

.loader{
    width:65px;height:65px;
    border:3px solid rgba(255,255,255,.2);
    border-top:3px solid cyan;
    border-radius:50%;
    animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ===== HOME ===== */
.home{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
}

.emblem-wrap{
    text-align:center;
    perspective:1000px;
    position:relative;
}

/* aura energy */
.aura{
    position:absolute;
    width:320px;height:320px;
    border-radius:50%;
    background:radial-gradient(circle,
      rgba(0,255,255,.35), transparent 70%);
    filter:blur(35px);
    animation:pulseAura 3s ease-in-out infinite;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
}

@keyframes pulseAura{
    50%{transform:translate(-50%,-50%) scale(1.2);}
}

.emblem-3d{
    position:relative;
    display:inline-block;
    animation:softFloat 4s infinite;
    transition:.15s;
}

.emblem{
    width:210px;height:210px;
    border-radius:50%;
    object-fit:cover;
    position:relative;
    z-index:2;
    box-shadow:0 20px 45px rgba(0,0,0,.45);
}

.hologram-glow{
    position:absolute;
    inset:-20px;
    border-radius:50%;
    background:radial-gradient(circle,
      rgba(0,255,255,.5), transparent 70%);
    filter:blur(22px);
    animation:glowPulse 2.5s infinite;
}

@keyframes glowPulse{
    50%{transform:scale(1.12);opacity:1;}
}

@keyframes softFloat{
    50%{transform:translateY(-12px);}
}

.hint{margin-top:18px;opacity:.75;}

.zoomOut{
    animation:zoom .7s forwards;
}
@keyframes zoom{
    to{transform:scale(2);opacity:0;filter:blur(15px);}
}

/* ===== GALLERY ===== */
.dynamic-bg{
    position:fixed;
    inset:0;
    filter:blur(100px);
    transition:1s;
    z-index:-1;
}

.gallery{
    padding:20px;
    scroll-snap-type:y mandatory;
}

.glass-noise{
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(15px);
    border-radius:18px;
    padding:16px;
    margin-bottom:20px;
    position:sticky;
    top:10px;
}

/* foto reels style */
.vertical-gallery{
    display:flex;
    flex-direction:column;
    gap:30px;
}

.photo{
    width:100%;
    max-width:560px;
    margin:auto;
    border-radius:18px;
    opacity:0;
    transform:translateY(60px) scale(.95);
    transition:.8s;
    scroll-snap-align:center;
}

.photo.show{
    opacity:1;
    transform:translateY(0) scale(1);
}

.photo.focus{
    transform:scale(1.06);
    box-shadow:0 18px 40px rgba(0,255,255,.35);
}
