/* Grundläggande styling för body, centrerar innehållet och sätter bakgrundsfärg */
body {
    margin: 0;
    display: flex;
    justify-content: center; /* Centrerar horisontellt */ 
    align-items: center; /* Centrerar vertikalt */
    min-height: 100vh; /* Säkerställer att body tar upp hela viewport-höjden */
    background-color: #333333; /* Mörkgrå bakgrundsfärg */
    overflow: hidden; /* Förhindrar scrollning om animationen går utanför skärmen */
    font-family: 'Inter', sans-serif; /* Använder Inter-typsnittet */
    color: #fff; /* Standard textfärg (vit) */
}

/* Behållare för glitch-texten, används för att positionera och begränsa effekten */
.glitch-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* Wrapper för att hantera positionering av glitch-elementet */
.glitch-wrapper {
    position: relative;
    width: fit-content; /* Anpassar bredden till innehållet */
    /* Lägger till lite extra marginal för att effekten ska synas bra */
    padding: 20px;
}

/* Huvudstilen för glitch-texten */
.glitch {
    position: relative;
    font-size: 250px; /* Textstorlek 250px */
    font-weight: bold; /* Fet stil */
    color: #fff; /* Vit textfärg */
    text-transform: uppercase; /* Gemener till versaler */
    /* Uppdaterade text-skuggor med mörkare, mer slumpmässiga färger */
    text-shadow: 0 0 5px rgba(0, 51, 102, 0.7), /* Mörkblå skugga */
                 0 0 10px rgba(51, 0, 51, 0.7), /* Mörklila skugga */
                 0 0 15px rgba(0, 51, 0, 0.7); /* Mörkgrön skugga */
    animation: glitch-main 1s infinite alternate; /* Huvudanimation för texten */
    white-space: nowrap; /* Förhindrar radbrytning */
    border-radius: 10px; /* Rundade hörn för texten */
    padding: 10px 20px; /* Lite padding runt texten */
}

/* Pseudo-element för glitch-effekten (::before och ::after) */
/* Dessa skapar två extra lager av text som förskjuts och klipps */
.glitch::before,
.glitch::after {
    content: attr(data-text); /* Hämtar texten från data-text attributet i HTML */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #333333; /* Samma bakgrundsfärg som body för att "dölja" delar av texten */
    overflow: hidden; /* Döljer innehåll som går utanför elementets gränser */
    border-radius: 10px; /* Rundade hörn för pseudo-elementen */
}

/* Styling och animation för det första pseudo-elementet (vänster förskjutning) */
.glitch::before {
    left: 2px; /* Flyttar lagret något åt höger */
    text-shadow: -2px 0 #330033; /* Mörklila skugga */
    animation: glitch-left 1.5s infinite alternate-reverse; /* Animation för vänstra lagret */
}

/* Styling och animation för det andra pseudo-elementet (höger förskjutning) */
.glitch::after {
    left: -2px; /* Flyttar lagret något åt vänster */
    text-shadow: -2px 0 #003366; /* Mörkblå skugga */
    animation: glitch-right 1s infinite alternate-reverse; /* Animation för högra lagret */
}

/* Keyframe-animation för huvudtexten (lätt skakning och skuggförändringar) */
@keyframes glitch-main {
    0% {
        text-shadow: 0 0 5px rgba(0, 51, 102, 0.7),
                     0 0 10px rgba(51, 0, 51, 0.7),
                     0 0 15px rgba(0, 51, 0, 0.7);
        transform: translate(0);
        filter: blur(0px); /* Ingen oskärpa */
    }
    10% {
        filter: blur(1px); /* Lätt oskärpa */
    }
    20% {
        text-shadow: 0 0 5px rgba(0, 51, 102, 0.7),
                     0 0 10px rgba(51, 0, 51, 0.7),
                     0 0 15px rgba(0, 51, 0, 0.7);
        transform: translate(-5px, 5px) rotate(0.5deg); /* Mer aggressiv förskjutning och rotation */
        filter: blur(0px);
    }
    30% {
        filter: blur(2px); /* Mer oskärpa */
    }
    40% {
        text-shadow: 0 0 5px rgba(0, 51, 102, 0.7),
                     0 0 10px rgba(51, 0, 51, 0.7),
                     0 0 15px rgba(0, 51, 0, 0.7);
        transform: translate(-5px, -5px) rotate(-0.5deg);
        filter: blur(0px);
    }
    50% {
        filter: blur(1px);
    }
    60% {
        text-shadow: 0 0 5px rgba(0, 51, 102, 0.7),
                     0 0 10px rgba(51, 0, 51, 0.7),
                     0 0 15px rgba(0, 51, 0, 0.7);
        transform: translate(5px, 5px) rotate(0.5deg);
        filter: blur(0px);
    }
    70% {
        filter: blur(2px);
    }
    80% {
        text-shadow: 0 0 5px rgba(0, 51, 102, 0.7),
                     0 0 10px rgba(51, 0, 51, 0.7),
                     0 0 15px rgba(0, 51, 0, 0.7);
        transform: translate(5px, -5px) rotate(-0.5deg);
        filter: blur(0px);
    }
    90% {
        filter: blur(1px);
    }
    100% {
        text-shadow: 0 0 5px rgba(0, 51, 102, 0.7),
                     0 0 10px rgba(51, 0, 51, 0.7),
                     0 0 15px rgba(0, 51, 0, 0.7);
        transform: translate(0);
        filter: blur(0px);
    }
}

/* Keyframe-animation för det vänstra pseudo-elementet (klippning och förskjutning) */
@keyframes glitch-left {
    0% {
        clip: rect(35px, 9999px, 85px, 0); /* Klippning av texten */
        transform: translate(-8px, 0); /* Mer aggressiv förskjutning */
    }
    10% {
        clip: rect(10px, 9999px, 120px, 0);
        transform: translate(0);
    }
    20% {
        clip: rect(100px, 9999px, 50px, 0);
        transform: translate(8px, 0);
    }
    30% {
        clip: rect(20px, 9999px, 100px, 0);
        transform: translate(-4px, 0);
    }
    40% {
        clip: rect(50px, 9999px, 110px, 0);
        transform: translate(4px, 0);
    }
    50% {
        clip: rect(0, 9999px, 120px, 0);
        transform: translate(0);
    }
    60% {
        clip: rect(90px, 9999px, 10px, 0);
        transform: translate(-6px, 0);
    }
    70% {
        clip: rect(40px, 9999px, 70px, 0);
        transform: translate(6px, 0);
    }
    80% {
        clip: rect(10px, 9999px, 60px, 0);
        transform: translate(-3px, 0);
    }
    90% {
        clip: rect(70px, 9999px, 30px, 0);
        transform: translate(3px, 0);
    }
    100% {
        clip: rect(0, 9999px, 120px, 0); /* Återgå till full höjd */
        transform: translate(0);
    }
}

/* Keyframe-animation för det högra pseudo-elementet (klippning och förskjutning) */
@keyframes glitch-right {
    0% {
        clip: rect(10px, 9999px, 70px, 0);
        transform: translate(8px, 0);
    }
    10% {
        clip: rect(0, 9999px, 120px, 0);
        transform: translate(0);
    }
    20% {
        clip: rect(80px, 9999px, 20px, 0);
        transform: translate(-8px, 0);
    }
    30% {
        clip: rect(40px, 9999px, 90px, 0);
        transform: translate(4px, 0);
    }
    40% {
        clip: rect(110px, 9999px, 10px, 0);
        transform: translate(-4px, 0);
    }
    50% {
        clip: rect(0, 9999px, 120px, 0);
        transform: translate(0);
    }
    60% {
        clip: rect(60px, 9999px, 120px, 0);
        transform: translate(6px, 0);
    }
    70% {
        clip: rect(20px, 9999px, 30px, 0);
        transform: translate(-6px, 0);
    }
    80% {
        clip: rect(90px, 9999px, 5px, 0);
        transform: translate(3px, 0);
    }
    90% {
        clip: rect(30px, 9999px, 80px, 0);
        transform: translate(-3px, 0);
    }
    100% {
        clip: rect(0, 9999px, 120px, 0);
        transform: translate(0);
    }
}

/* Responsivitet: Anpassar textstorleken för mindre skärmar */
@media (max-width: 1200px) {
    .glitch {
        font-size: 150px; /* Anpassad för större surfplattor/mindre laptops */
    }
}

@media (max-width: 768px) {
    .glitch {
        font-size: 100px; /* Anpassad för medelstora skärmar */
    }
}

@media (max-width: 480px) {
    .glitch {
        font-size: 60px; /* Anpassad för små skärmar (mobil) */
    }
}