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

body{
    font-family:"UnifrakturMaguntia", serif;
    background:#020202;
    color:#d6d6d6;
    min-height:100vh;
    overflow-x:hidden;

    background:
        radial-gradient(circle at top, rgba(255,255,255,0.04), transparent 40%),
        linear-gradient(to bottom,#000,#050505 40%,#0b0b0b);
}

/* GLOBAL TYPO FIX */
h1, h2, h3, p, a, div{
    font-family:inherit;
}

/* FOG */
.fog{
    position:fixed;
    inset:0;
    pointer-events:none;

    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.03), transparent 25%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.02), transparent 35%);

    animation:fogMove 12s ease-in-out infinite alternate;
}

@keyframes fogMove{
    from{transform:translateY(0px);}
    to{transform:translateY(-20px);}
}

/* CONTAINER */
.container{
    max-width:1100px;
    margin:auto;
    padding:60px 20px;
    text-align:center;
}

/* SKY */
.sky-zone{
    position:relative;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    margin-bottom:25px;
    height:280px;
}

/* =========================
   TOUR (SANS HALO)
========================= */

.tower{
    position:relative;
    width:120px;
    height:240px;

    filter:none;
    box-shadow:none;
}

.tower *{
    box-shadow:none !important;
    filter:none !important;
}

/* crenels */
.crenels{
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:90px;
    height:20px;
    background:repeating-linear-gradient(90deg,#777 0 10px,#444 10px 20px);
}

/* body */
.tower-body{
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:90px;
    height:220px;

    background:
        linear-gradient(to bottom,#9a9a9a,#555,#222),
        repeating-linear-gradient(0deg, rgba(0,0,0,0.15) 0 2px, transparent 2px 4px);
}

/* windows */
.window{
    position:absolute;
    width:10px;
    height:18px;
    background:#050505;
}

.w1{top:60px;left:18px;}
.w2{top:110px;right:18px;}
.w3{top:30px;left:50%;transform:translateX(-50%);}

/* door */
.door{
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:30px;
    height:55px;
    background:#050505;
    border-radius:15px 15px 0 0;
}

/* =========================
   BATS
========================= */

.bat{
    position:absolute;
    width:42px;
    opacity:0;
    pointer-events:none;
    will-change:transform, opacity;
}

.bat svg{
    width:100%;
    animation:flap 0.12s infinite alternate;
}

@keyframes flap{
    from{transform:scaleY(1);}
    to{transform:scaleY(0.75);}
}

.bat1{
    left:50%;
    top:70px;
    transform:translateX(-40px);
}

.bat2{
    left:50%;
    top:60px;
    transform:translateX(40px);
}

/* hover trigger */
.sky-zone:hover .bat1{
    animation:flyLeft 3s ease-out forwards;
}

.sky-zone:hover .bat2{
    animation:flyRight 3.3s ease-out forwards;
}

/* MOVEMENT */
@keyframes flyLeft{
    0%{opacity:0;transform:translate(0,0) scale(0.3);}
    10%{opacity:1;}
    40%{transform:translate(-90px,-50px) rotate(-20deg) scale(0.7);}
    70%{transform:translate(-220px,-30px) rotate(10deg) scale(0.9);}
    100%{opacity:0;transform:translate(-500px,-180px) rotate(-35deg) scale(1.2);}
}

@keyframes flyRight{
    0%{opacity:0;transform:translate(0,0) scale(0.3);}
    10%{opacity:1;}
    40%{transform:translate(120px,-60px) rotate(25deg) scale(0.7);}
    70%{transform:translate(280px,-120px) rotate(-15deg) scale(0.9);}
    100%{opacity:0;transform:translate(520px,-220px) rotate(40deg) scale(1.2);}
}

/* =========================
   TITLE
========================= */

h1{
    font-size:clamp(3rem, 6vw, 5.5rem);
    letter-spacing:6px;
    color:#f1f1f1;

    text-shadow:
        4px 4px 0 #666,
        8px 8px 0 #333,
        12px 12px 25px rgba(0,0,0,0.8);

    margin:20px 0;
}

/* subtitle */
.subtitle{
    font-size:1.2rem;
    color:#8f8f8f;
    margin-bottom:70px;
    line-height:1.6;
}

/* artists */
.artist-link{
    font-size:2rem;
    color:#d8d8d8;
    text-decoration:none;
}

.artist-link:hover{
    color:#fff;
}

/* socials */
.socials{
    margin-top:80px;
}

.instagram-link{
    width:42px;
    height:42px;
    color:#aaa;
    display:inline-block;
    transition:transform 0.25s ease, color 0.25s ease;
}

.instagram-link:hover{
    color:#fff;
    transform:scale(1.15);
}