body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    perspective: 1000px;
}

.photo-container {
    opacity: 0;
    transform: scale(0.9) translateY(15px) rotateX(8deg);
    transition:
        opacity 1.2s cubic-bezier(0.34, 1.56, 0.64, 1),
        transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.loaded .photo-container {
    opacity: 1;
    transform: scale(1) translateY(0) rotateX(0deg);
}

.scan-line {
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.8), transparent);
    box-shadow: 0 0 12px 3px rgba(59, 130, 246, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 20;
}

.loaded .scan-line {
    animation: scan 1.4s cubic-bezier(0.43, 0.13, 0.23, 0.96) forwards;
    animation-delay: 0.2s;
}

.profile-img {
    filter: blur(10px) brightness(0.8) grayscale(30%);
    transition: filter 1.2s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0.4s;
}

.loaded .profile-img {
    filter: blur(0) brightness(1) grayscale(0%);
}

@keyframes scan {
    0% {
        top: 0%;
        opacity: 0;
    }

    10%,
    90% {
        opacity: 1;
    }

    100% {
        top: 100%;
        opacity: 0;
    }
}