/* Eltaris — intro */

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

body {
    margin: 0;
    background: #000;
    overflow: hidden;
}

.intro {
    position: relative;
    width: 100%;
    height: 100vh;
}

/* --- Tło --- */

.background {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #000;
}

.background__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
}

.background__overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.45) 100%),
        linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.6) 100%);
}

/* --- Pioruny --- */

.lightning {
    position: absolute;
    top: 0;
    right: 0;
    width: 58%;
    height: 68%;
    pointer-events: none;
    z-index: 1;
}

.lightning__bolt {
    position: absolute;
    inset: 0;
    opacity: 0;
    mix-blend-mode: screen;
}

.lightning__bolt--1 {
    background:
        radial-gradient(ellipse 28% 38% at 72% 22%, rgba(220, 180, 255, 0.95) 0%, transparent 70%),
        radial-gradient(ellipse 18% 28% at 58% 35%, rgba(255, 255, 255, 0.7) 0%, transparent 65%);
    animation: bolt-flash-1 4.5s infinite;
}

.lightning__bolt--2 {
    background:
        radial-gradient(ellipse 22% 32% at 80% 28%, rgba(190, 130, 255, 0.9) 0%, transparent 68%),
        linear-gradient(155deg, transparent 30%, rgba(255, 255, 255, 0.45) 48%, transparent 62%);
    animation: bolt-flash-2 6.2s infinite 1.8s;
}

.lightning__bolt--3 {
    background:
        radial-gradient(ellipse 35% 42% at 65% 18%, rgba(160, 100, 255, 0.85) 0%, transparent 72%);
    animation: bolt-flash-3 5.8s infinite 3.4s;
}

@keyframes bolt-flash-1 {
    0%, 82%, 100% { opacity: 0; }
    83% { opacity: 1; }
    84% { opacity: 0.2; }
    85% { opacity: 0.95; }
    86% { opacity: 0.1; }
    87% { opacity: 0.6; }
    88% { opacity: 0; }
}

@keyframes bolt-flash-2 {
    0%, 76%, 100% { opacity: 0; }
    77% { opacity: 0.85; }
    78% { opacity: 0; }
    79% { opacity: 1; }
    80% { opacity: 0.15; }
    81% { opacity: 0.5; }
    82% { opacity: 0; }
}

@keyframes bolt-flash-3 {
    0%, 88%, 100% { opacity: 0; }
    89% { opacity: 0.7; }
    90% { opacity: 0; }
    91% { opacity: 1; }
    92% { opacity: 0.25; }
    93% { opacity: 0.8; }
    94% { opacity: 0; }
}

/* --- Logo na środku --- */

.intro__logo {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    cursor: pointer;
    text-decoration: none;
    opacity: 0;
    animation: logo-appear 2.2s ease-out 0.4s forwards;
    transition: filter 0.35s ease, transform 0.35s ease;
}

.intro__logo img {
    display: block;
    width: clamp(220px, 38vw, 420px);
    height: auto;
    background: transparent;
    filter: drop-shadow(0 0 30px rgba(212, 175, 55, 0.35));
}

.intro__logo:hover img {
    filter: drop-shadow(0 0 45px rgba(232, 201, 106, 0.65));
}

.intro__logo:hover {
    transform: translate(-50%, -50%) scale(1.04);
}

@keyframes logo-appear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.82);
        filter: blur(6px);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        filter: blur(0);
    }
}

/* --- Wyjście po kliknięciu --- */

body.intro--leaving .intro__logo {
    animation: logo-leave 1.2s ease-in forwards;
}

body.intro--leaving .background__image,
body.intro--leaving .background__overlay,
body.intro--leaving .lightning {
    animation: intro-fade 1.2s ease-in forwards;
}

@keyframes logo-leave {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.08);
        filter: blur(4px);
    }
}

@keyframes intro-fade {
    to {
        opacity: 0;
    }
}