html,
body {
    height: 100%;
}

body {
    scroll-behavior: smooth;
}

.panel {
    position: relative;
}

#panel-home {
    background-color: #020617;
    background-image:
        radial-gradient(circle at 20% 20%, rgba(59, 130, 246, 0.35), transparent 55%),
        radial-gradient(circle at 80% 0%, rgba(236, 72, 153, 0.32), transparent 60%),
        radial-gradient(circle at 0% 80%, rgba(56, 189, 248, 0.26), transparent 55%);
    background-repeat: no-repeat;
    background-size: cover;
}

#panel-creative {
    background-image:
        linear-gradient(135deg, rgba(15, 23, 42, 0.88), rgba(30, 64, 175, 0.72)),
        url('https://images.unsplash.com/photo-1526948531399-320e7e40f0ca?auto=format&fit=crop&w=1600&q=80');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#panel-post {
    background-image:
        linear-gradient(120deg, rgba(255, 255, 255, 0.92), rgba(237, 242, 247, 0.92)),
        url('https://images.unsplash.com/photo-1489515217757-5fd1be406fef?auto=format&fit=crop&w=1600&q=80');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#panel-about {
    background-image:
        linear-gradient(135deg, rgba(79, 70, 229, 0.82), rgba(244, 114, 182, 0.75)),
        url('https://images.unsplash.com/photo-1469334031218-e382a71b716b?auto=format&fit=crop&w=1600&q=80');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

#panel-contact {
    background-image:
        radial-gradient(circle at top, rgba(59, 130, 246, 0.25), rgba(14, 116, 144, 0.05)),
        linear-gradient(180deg, #f8fafc, #e2e8f0);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

section.extra-panel {
    background-image: linear-gradient(135deg, rgba(12, 74, 110, 0.85), rgba(59, 130, 246, 0.65));
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: #f8fafc;
}

[data-fullscreen-menu],
[data-credit-overlay] {
    transition: opacity 0.4s ease;
}

[data-credit-panel] {
    transition: transform 0.4s ease, opacity 0.4s ease;
}