/* ==========================================================
   AWARDS
   ========================================================== */

.awards-page {
    width: 100%;
}


/* ==========================================================
   HERO
   ========================================================== */

.awards-hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 90px 8%;
    box-sizing: border-box;
    border-bottom: 1px solid var(--border-color);
    background:
        radial-gradient(
            circle at 70% 50%,
            rgba(138,123,182,.14),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            rgba(138,123,182,.08),
            transparent 60%
        );
}

.awards-hero-content {
    position: relative;
    z-index: 10;
    max-width: 700px;
}

.awards-hero h1 {
    margin: 18px 0 24px;
    font-size: clamp(52px, 8vw, 100px);
    line-height: .88;
    letter-spacing: -3px;
}

.awards-hero p {
    max-width: 560px;
    margin: 0;
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1.6;
}


/* ==========================================================
   HERO ANIMATION
   ========================================================== */

.awards-hero-animation {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}


/* ==========================================================
   STARS
   ========================================================== */

.awards-stars {
    position: absolute;
    inset: 0;
    opacity: .75;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.85) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255,255,255,.55) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(138,123,182,.7) 1px, transparent 1.5px);
    background-size:
        95px 95px,
        137px 137px,
        61px 61px;
    background-position:
        20px 30px,
        70px 80px,
        15px 55px;
    animation: awardsStars 24s linear infinite;
}

@keyframes awardsStars {

    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(80px, 60px);
    }

}


/* ==========================================================
   COMETS
   ========================================================== */

.awards-comet {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: white;
    box-shadow:
        0 0 8px rgba(255,255,255,.9),
        0 0 18px rgba(138,123,182,.9);
    transform: rotate(45deg);
    opacity: 0;
}

.awards-comet::before {
    content: "";
    position: absolute;
    right: 3px;
    top: 50%;
    width: 140px;
    height: 2px;
    transform: translateY(-50%);
    transform-origin: right center;
    background: linear-gradient(
        90deg,
        rgba(138,123,182,0),
        rgba(138,123,182,.2),
        rgba(255,255,255,.7)
    );
    filter: blur(1px);
}

.awards-comet-1 {
    left: 12%;
    top: 18%;
    animation: awardsComet1 9s linear infinite;
}

.awards-comet-2 {
    left: 42%;
    top: 8%;
    animation: awardsComet2 12s linear infinite 3s;
}

.awards-comet-3 {
    left: 25%;
    top: 72%;
    animation: awardsComet3 14s linear infinite 6s;
}

@keyframes awardsComet1 {

    0% {
        opacity: 0;
        transform: translate(-100px, -100px) rotate(45deg);
    }

    8% {
        opacity: 1;
    }

    35% {
        opacity: 1;
    }

    45% {
        opacity: 0;
        transform: translate(500px, 350px) rotate(45deg);
    }

    100% {
        opacity: 0;
        transform: translate(500px, 350px) rotate(45deg);
    }

}

@keyframes awardsComet2 {

    0% {
        opacity: 0;
        transform: translate(-100px, -80px) rotate(45deg);
    }

    8% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }

    40% {
        opacity: 0;
        transform: translate(500px, 380px) rotate(45deg);
    }

    100% {
        opacity: 0;
        transform: translate(500px, 380px) rotate(45deg);
    }

}

@keyframes awardsComet3 {

    0% {
        opacity: 0;
        transform: translate(-120px, -80px) rotate(45deg);
    }

    8% {
        opacity: 1;
    }

    32% {
        opacity: 1;
    }

    42% {
        opacity: 0;
        transform: translate(520px, 300px) rotate(45deg);
    }

    100% {
        opacity: 0;
        transform: translate(520px, 300px) rotate(45deg);
    }

}


/* ==========================================================
   GALAXY
   ========================================================== */

.awards-galaxy {
    position: absolute;
    width: 650px;
    height: 650px;
    right: -30px;
    top: 50%;
    transform: translateY(-50%);
}


/* ==========================================================
   GALAXY GLOW
   ========================================================== */

.awards-galaxy-glow {
    position: absolute;
    width: 260px;
    height: 260px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(138,123,182,.3),
        rgba(138,123,182,.08) 35%,
        transparent 70%
    );
    filter: blur(12px);
    animation: galaxyGlow 4s ease-in-out infinite;
}

@keyframes galaxyGlow {

    0% {
        transform: translate(-50%, -50%) scale(.9);
        opacity: .65;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(.9);
        opacity: .65;
    }

}


/* ==========================================================
   GALAXY ORBITS
   ========================================================== */

.awards-galaxy-orbit {
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(138,123,182,.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.awards-galaxy-orbit-1 {
    width: 180px;
    height: 180px;
    animation: galaxyOrbit1 10s linear infinite;
}

.awards-galaxy-orbit-2 {
    width: 300px;
    height: 210px;
    transform: translate(-50%, -50%) rotate(55deg);
    border-color: rgba(138,123,182,.16);
    animation: galaxyOrbit2 14s linear infinite;
}

.awards-galaxy-orbit-3 {
    width: 430px;
    height: 280px;
    transform: translate(-50%, -50%) rotate(-35deg);
    border-color: rgba(138,123,182,.12);
    animation: galaxyOrbit3 18s linear infinite;
}

.awards-galaxy-orbit-4 {
    width: 560px;
    height: 360px;
    transform: translate(-50%, -50%) rotate(25deg);
    border-color: rgba(138,123,182,.08);
    animation: galaxyOrbit4 24s linear infinite;
}

@keyframes galaxyOrbit1 {

    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }

}

@keyframes galaxyOrbit2 {

    from {
        transform: translate(-50%, -50%) rotate(55deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(415deg);
    }

}

@keyframes galaxyOrbit3 {

    from {
        transform: translate(-50%, -50%) rotate(-35deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(325deg);
    }

}

@keyframes galaxyOrbit4 {

    from {
        transform: translate(-50%, -50%) rotate(25deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(385deg);
    }

}


/* ==========================================================
   GALAXY POINTS
   ========================================================== */

.awards-galaxy-points {
    position: absolute;
    inset: 30px;
    border-radius: 50%;
    opacity: .8;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.8) 2px, transparent 2.5px),
        radial-gradient(circle, rgba(138,123,182,.8) 2px, transparent 2.5px),
        radial-gradient(circle, rgba(255,255,255,.5) 1px, transparent 2px);
    background-size:
        73px 73px,
        101px 101px,
        43px 43px;
    background-position:
        10px 20px,
        40px 60px,
        20px 10px;
    border-radius: 50%;
    animation: galaxyPoints 30s linear infinite;
}

@keyframes galaxyPoints {

    from {
        transform: rotate(0deg) scale(1);
    }

    to {
        transform: rotate(360deg) scale(1);
    }

}


/* ==========================================================
   GALAXY CORE
   ========================================================== */

.awards-galaxy-core {
    position: absolute;
    width: 18px;
    height: 18px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: white;
    box-shadow:
        0 0 10px white,
        0 0 25px rgba(138,123,182,.9),
        0 0 55px rgba(138,123,182,.7),
        0 0 100px rgba(138,123,182,.35);
    animation: galaxyCore 3s ease-in-out infinite;
}

@keyframes galaxyCore {

    0% {
        transform: translate(-50%, -50%) scale(.8);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
    }

    100% {
        transform: translate(-50%, -50%) scale(.8);
    }

}


/* ==========================================================
   SECTIONS
   ========================================================== */

.awards-section {
    padding-top: 65px;
    padding-bottom: 65px;
}

.awards-section-header {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 30px;
}

.awards-section-header h2 {
    flex-shrink: 0;
    margin: 0;
    font-size: 30px;
}

.awards-section-header hr {
    flex: 1;
    height: 1px;
    margin: 0;
    border: none;
    background: var(--border-color);
}


/* ==========================================================
   AWARDS WALL
   ========================================================== */

.awards-wall {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: start;
}
.award-item {
    width: 100%;
    aspect-ratio: 210 / 297;
    overflow: hidden;
    border: 1px solid rgba(138,123,182,.7);
    background: var(--surface);
    box-shadow:
        0 0 10px rgba(138,123,182,.95),
        0 0 34px rgba(138,123,182,.75);
}
.award-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.light-theme .award-item {
    border-color: rgba(90,80,150,.65);
    box-shadow:
        0 0 10px rgba(90,80,150,.85),
        0 0 34px rgba(90,80,150,.6);
}
/* ==========================================================
   LIGHT THEME
   ========================================================== */

.light-theme .awards-hero {
    background:
        radial-gradient(
            circle at 70% 50%,
            rgba(90,140,210,.12),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            rgba(138,123,182,.08),
            transparent 60%
        );
}

.light-theme .awards-stars {
    opacity: .65;
    background-image:
        radial-gradient(circle, rgba(70,70,90,.65) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(90,70,130,.5) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(70,100,150,.55) 1px, transparent 1.5px);
}

.light-theme .awards-comet {
    background: #5f4f8c;
    box-shadow:
        0 0 8px rgba(95,79,140,.7),
        0 0 18px rgba(95,79,140,.45);
}

.light-theme .awards-comet::before {
    background: linear-gradient(
        90deg,
        rgba(95,79,140,0),
        rgba(95,79,140,.15),
        rgba(95,79,140,.65)
    );
}

.light-theme .awards-galaxy-glow {
    background: radial-gradient(
        circle,
        rgba(100,130,190,.2),
        rgba(138,123,182,.08) 35%,
        transparent 70%
    );
}

.light-theme .awards-galaxy-orbit {
    border-color: rgba(90,100,150,.2);
}

.light-theme .awards-galaxy-orbit-2 {
    border-color: rgba(90,100,150,.16);
}

.light-theme .awards-galaxy-orbit-3 {
    border-color: rgba(90,100,150,.12);
}

.light-theme .awards-galaxy-orbit-4 {
    border-color: rgba(90,100,150,.08);
}

.light-theme .awards-galaxy-points {
    background-image:
        radial-gradient(circle, rgba(70,70,90,.6) 2px, transparent 2.5px),
        radial-gradient(circle, rgba(95,79,140,.55) 2px, transparent 2.5px),
        radial-gradient(circle, rgba(70,100,150,.45) 1px, transparent 2px);
}

.light-theme .awards-galaxy-core {
    background: #ffffff;
    box-shadow:
        0 0 10px rgba(80,80,100,.7),
        0 0 25px rgba(95,79,140,.55),
        0 0 55px rgba(95,79,140,.35),
        0 0 100px rgba(95,79,140,.2);
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 1000px) {

    .awards-wall {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .awards-galaxy {
        right: -180px;
    }

}

@media (max-width: 700px) {

    .awards-hero {
        min-height: 430px;
        padding: 70px 30px;
    }

    .awards-hero h1 {
        font-size: 58px;
    }

    .awards-hero p {
        font-size: 16px;
    }

    .awards-galaxy {
        width: 480px;
        height: 480px;
        right: -210px;
        opacity: .65;
    }

    .awards-galaxy-orbit-1 {
        width: 140px;
        height: 140px;
    }

    .awards-galaxy-orbit-2 {
        width: 220px;
        height: 160px;
    }

    .awards-galaxy-orbit-3 {
        width: 320px;
        height: 220px;
    }

    .awards-galaxy-orbit-4 {
        width: 420px;
        height: 280px;
    }

    .awards-wall {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

}

@media (max-width: 450px) {

    .awards-wall {
        grid-template-columns: 1fr;
    }

    .awards-galaxy {
        right: -210px;
        opacity: .65;
    }

}