/* ============================================================
   Homepage
   ============================================================ */

.home-section {
    width: 100%;
}

.home-section + .home-section {
    margin-top: 30px;
}


/* ============================================================
   Compact homepage introduction
   ============================================================ */

.home-intro {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 128px;

    margin-bottom: 22px;
    padding: 22px 28px;

    overflow: hidden;

    border: 1px solid #999999; /*rgba(49, 91, 155, 0.16);*/
    border-radius: 14px;

    background:
        linear-gradient(
            120deg,
            #ffffff 0%,
            #f5f9ff 54%,
            #edf5ff 100%
        );

    box-shadow:
        0 3px 10px rgba(32, 62, 105, 0.05),
        0 14px 32px rgba(32, 62, 105, 0.04);
}


.home-intro::before {
    content: "";

    position: absolute;

    width: 430px;
    height: 430px;

    right: -120px;
    top: -230px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(44, 105, 206, 0.18),
            rgba(44, 105, 206, 0.06) 42%,
            transparent 70%
        );

    pointer-events: none;
}


.home-intro-content {
    position: relative;
    z-index: 2;

    max-width: 720px;
}



.home-intro-eyebrow {
    margin-bottom: 5px;

    color: #52729b;

    font-size: 0.7rem;
    font-weight: 750;

    letter-spacing: 0.115em;
    text-transform: uppercase;
}


.home-intro h1 {
    margin: 0;

    color: #172235;

    font-size: clamp(
        1.65rem,
        2.5vw,
        2.25rem
    );

    font-weight: 790;
    line-height: 1.05;

    letter-spacing: -0.035em;
}


.home-intro-tagline {
    position: relative;

    display: inline-block;

    margin-top: 10px;
    padding-left: 14px;

    color: #415168;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 0.98rem;
    font-style: italic;
    line-height: 1.4;

    letter-spacing: 0.005em;
}


.home-intro-tagline::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0.18em;
    bottom: 0.18em;

    width: 2px;

    border-radius: 999px;

    background:
        linear-gradient(
            to bottom,
            rgba(61, 113, 177, 0.72),
            rgba(197, 148, 63, 0.42)
        );
}


.home-intro p {
    margin: 7px 0 0 14px;

    max-width: 600px;

    color: #768296;

    font-size: 0.84rem;
    line-height: 1.45;
}


/* ============================================================
   Intro constellation
   ============================================================ */

.home-intro-graphic {
    position: absolute;

    right: 22px;
    top: 50%;

    width: 330px;
    height: 118px;

    transform: translateY(-50%);

    pointer-events: none;

    opacity: 0.88;
}


.home-intro-constellation {
    position: absolute;

    inset: 0;

    -webkit-mask-image:
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0.72),
            rgba(0, 0, 0, 1) 40%,
            rgba(0, 0, 0, 0.38) 88%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0.72),
            rgba(0, 0, 0, 1) 40%,
            rgba(0, 0, 0, 0.38) 88%,
            transparent 100%
        );
}


/* ------------------------------------------------------------
   Stars
   ------------------------------------------------------------ */

.home-constellation-star {
    position: absolute;
    z-index: 2;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        rgba(56, 110, 185, 0.34);

    box-shadow:
        0 0 0 2px
        rgba(56, 110, 185, 0.035),
        0 0 9px
        rgba(56, 110, 185, 0.12);

    animation:
        home-star-pulse
        5s
        ease-in-out
        infinite
        alternate;
}


/*
 * Give a few of the stars slightly different
 * intensities so the pattern feels less mechanical.
 */

.home-constellation-star:nth-child(2),
.home-constellation-star:nth-child(5) {
    background:
        rgba(41, 123, 184, 0.46);

    box-shadow:
        0 0 0 2px
        rgba(41, 123, 184, 0.045),
        0 0 11px
        rgba(41, 123, 184, 0.16);
}


.home-constellation-star:nth-child(6) {
    background:
        rgba(226, 167, 58, 0.40);

    box-shadow:
        0 0 10px
        rgba(226, 167, 58, 0.13);
}


/* ------------------------------------------------------------
   Connecting lines
   ------------------------------------------------------------ */

.home-constellation-line {
    position: absolute;
    z-index: 1;

    height: 1px;

    transform-origin:
        0 50%;

    background:
        linear-gradient(
            90deg,
            rgba(65, 109, 167, 0.14),
            rgba(65, 109, 167, 0.07)
        );
}


/* ------------------------------------------------------------
   Very faint glow behind the constellation
   ------------------------------------------------------------ */

.home-intro-graphic::before {
    content: "";

    position: absolute;

    width: 290px;
    height: 180px;

    right: -30px;
    top: 50%;

    transform:
        translateY(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(72, 135, 211, 0.09),
            rgba(72, 135, 211, 0.025) 45%,
            transparent 72%
        );
}


/* ============================================================
   Constellation animation
   ============================================================ */

@keyframes home-star-pulse {
    from {
        opacity: 0.62;

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

    to {
        opacity: 1;

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


/* ============================================================
   Homepage widget grid
   ============================================================ */

.home-widget-grid {
    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    gap: 22px;
}


.home-widget {
    border: 1px solid #e1e6ed;
    border-radius: 14px;

    padding: 18px 20px;

    background: #ffffff;

    box-shadow:
        0 2px 5px rgba(15, 23, 42, 0.025),
        0 8px 20px rgba(15, 23, 42, 0.025);
}


.widget-full {
    grid-column: span 12;
}


.widget-half {
    grid-column: span 6;
}


.widget-third {
    grid-column: span 4;
}


/* ============================================================
   Widget headers
   ============================================================ */

.home-widget-header {
    margin-bottom: 16px;
}


.home-widget-header h2 {
    margin: 0;

    color: #202938;

    font-size: 1.35rem;
    font-weight: 750;
    line-height: 1.2;

    letter-spacing: -0.015em;
}


.home-widget-header p {
    margin: 4px 0 0;

    color: #718096;

    font-size: 0.88rem;
}


.home-muted {
    margin: 0;

    color: #7b8798;

    font-size: 0.86rem;
}


/* ============================================================
   Important dates card
   ============================================================ */

.countdown-widget {
    position: relative;
    isolation: isolate;

    overflow: hidden;

    border-color: #999999; /*c9d8eb;*/

    background:
        linear-gradient(
            125deg,
            #f8fbff 0%,
            #edf6ff 48%,
            #fff8e9 100%
        );

    box-shadow:
        0 4px 12px rgba(43, 78, 125, 0.07),
        0 18px 38px rgba(43, 78, 125, 0.07);
}


/* ------------------------------------------------------------
   Large cool moving wash
   ------------------------------------------------------------ */

.countdown-widget::before {
    content: "";

    position: absolute;
    z-index: -2;

    width: 720px;
    height: 720px;

    top: -310px;
    right: -120px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(44, 120, 210, 0.24) 0%,
            rgba(63, 145, 220, 0.15) 30%,
            rgba(74, 171, 210, 0.08) 50%,
            transparent 70%
        );

    animation:
        countdown-glow-one
        13s
        ease-in-out
        infinite
        alternate;

    pointer-events: none;
}


/* ------------------------------------------------------------
   Warm moving wash
   ------------------------------------------------------------ */

.countdown-widget::after {
    content: "";

    position: absolute;
    z-index: -2;

    width: 560px;
    height: 560px;

    left: -180px;
    bottom: -300px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 183, 50, 0.22) 0%,
            rgba(255, 183, 50, 0.10) 35%,
            transparent 70%
        );

    animation:
        countdown-glow-two
        17s
        ease-in-out
        infinite
        alternate;

    pointer-events: none;
}


/* ============================================================
   Countdown header decoration
   ============================================================ */

.countdown-widget
.home-widget-header {
    position: relative;
    z-index: 2;

    min-height: 62px;

    padding-right: 125px;
}


/*
 * Faint diagonal texture behind the header.
 */
.countdown-widget
.home-widget-header::after {
    content: "";

    position: absolute;

    inset: -18px -20px auto;

    height: 170px;

    z-index: -2;

    background:
        repeating-linear-gradient(
            135deg,
            rgba(68, 101, 154, 0.035) 0,
            rgba(68, 101, 154, 0.035) 1px,
            transparent 1px,
            transparent 17px
        );

    pointer-events: none;
}


/* ============================================================
   Decorative clock
   ============================================================ */

/*
 * Clock face and hour ticks.
 */
.countdown-widget
.home-widget-header::before {
    content: "";

    position: absolute;
    z-index: -1;

    top: -8px;
    right: 15px;

    width: 96px;
    height: 96px;

    box-sizing: border-box;

    border: 5px solid
        rgba(46, 93, 150, 0.085);

    border-radius: 50%;

    background:
        repeating-conic-gradient(
            from 0deg,
            rgba(
                46,
                93,
                150,
                0.09
            ) 0deg 2deg,
            transparent 2deg 30deg
        );

    /*
     * The mask keeps the conic tick marks
     * around the outer portion of the clock.
     */
    -webkit-mask:
        radial-gradient(
            circle,
            transparent 0 35px,
            #000 36px
        );

    mask:
        radial-gradient(
            circle,
            transparent 0 35px,
            #000 36px
        );

    opacity: 0.9;

    pointer-events: none;
}


/*
 * Clock hands.
 *
 * These use the heading's pseudo-elements because
 * the header pseudo-elements are already used for
 * the clock face and texture.
 */
.countdown-widget
.home-widget-header h2 {
    position: relative;
}


.countdown-widget
.home-widget-header h2::before,
.countdown-widget
.home-widget-header h2::after {
    content: "";

    position: absolute;
    z-index: -1;

    /*
     * Move the hands over to the clock on
     * the far right side of the header.
     */
    top: 44px;
    left: calc(100% + 61px);

    width: 4px;

    border-radius: 999px;

    background:
        rgba(46, 93, 150, 0.095);

    transform-origin:
        50% 100%;

    pointer-events: none;
}


/* Hour hand */

.countdown-widget
.home-widget-header h2::before {
    height: 27px;

    transform:
        translateY(-100%)
        rotate(
            var(
                --clock-hour-angle,
                0deg
            )
        );
}


.countdown-widget
.home-widget-header h2::after {
    height: 37px;

    transform:
        translateY(-100%)
        rotate(
            var(
                --clock-minute-angle,
                0deg
            )
        );
}



/* ============================================================
   Important dates list
   ============================================================ */

.countdown-widget
.countdown-list {
    position: relative;
    z-index: 2;
}


.countdown-list {
    column-count: 2;
    column-gap: 34px;
}


.countdown-row {
    break-inside: avoid;

    display: grid;

    grid-template-columns:
        190px
        minmax(0, 1fr);

    align-items: center;

    gap: 8px;

    min-width: 0;

    margin-bottom: 5px;
}


.countdown-title {
    min-width: 0;

    font-size: 0.80rem;
    font-weight: 600;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* ============================================================
   Countdown tracks
   ============================================================ */

.countdown-track {
    position: relative;

    width: 100%;
    height: 25px;

    overflow: hidden;

    border:
        1px solid
        rgba(91, 116, 151, 0.18);

    border-radius: 7px;

    background:
        rgba(255, 255, 255, 0.68);

    box-shadow:
        inset 0 1px 2px rgba(15, 23, 42, 0.055),
        0 1px 0 rgba(255, 255, 255, 0.78);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}


.countdown-fill {
    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    min-width: 5px;

    border-radius:
        6px 0 0 6px;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.26);

    transition:
        width 250ms ease;
}


.countdown-label {
    position: absolute;
    z-index: 2;

    left: 8px;
    top: 50%;

    transform: translateY(-50%);

    color: #20252c;

    font-size: 0.72rem;
    font-weight: 520;
    line-height: 1;

    white-space: nowrap;

    pointer-events: none;
}


/* ============================================================
   Finished countdowns
   ============================================================ */

.countdown-finished
.countdown-title {
    opacity: 0.52;
}


.countdown-finished
.countdown-fill {
    opacity: 0.38;
}


.countdown-finished
.countdown-label {
    opacity: 0.62;
}


/* ============================================================
   Countdown animation
   ============================================================ */

@keyframes countdown-glow-one {
    from {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    to {
        transform:
            translate3d(-95px, 75px, 0)
            scale(1.14);
    }
}


@keyframes countdown-glow-two {
    from {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    to {
        transform:
            translate3d(85px, -55px, 0)
            scale(1.15);
    }
}


/* ============================================================
   Courses
   ============================================================ */

.courses-section {
    margin-top: 22px;
    margin-bottom: 40px;
}


.course-launcher-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 22px;
}


/* ============================================================
   Shared course launcher
   ============================================================ */

.course-launcher {
    position: relative;

    display: block;

    min-height: 158px;

    padding: 22px 26px;

    overflow: hidden;

    color: inherit;
    text-decoration: none;

    border: 1px solid #555555;
    /*
        1px solid
        rgba(
            var(--course-rgb),
            0.28
        );
*/
    border-radius: 14px;

    background:
        linear-gradient(
            130deg,
            rgba(
                var(--course-rgb),
                0.025
            ) 0%,
            rgba(
                var(--course-rgb),
                0.07
            ) 55%,
            rgba(
                var(--course-rgb),
                0.14
            ) 100%
        );

    box-shadow:
        0 4px 12px
        rgba(
            var(--course-rgb),
            0.08
        ),
        0 15px 32px
        rgba(
            var(--course-rgb),
            0.07
        );

    transition:
        transform 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;
}


.course-launcher::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 6px;

    background: 
        var(--course-color);
}


.course-launcher:hover {
    transform:
        translateY(-3px);

    border-color: 1px solid #555555;
    /*
        rgba(
            var(--course-rgb),
            0.48
        );
   */

    box-shadow:
        0 7px 18px
        rgba(
            var(--course-rgb),
            0.14
        ),
        0 18px 38px
        rgba(
            var(--course-rgb),
            0.11
        );
}


/* ============================================================
   Course content
   ============================================================ */

.course-launcher-content {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;

    min-height: 114px;
}


.course-launcher-eyebrow {
    margin-bottom: 5px;

    color:
        var(--course-color);

    font-size: 0.74rem;
    font-weight: 800;

    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.course-launcher h2 {
    margin: 0;

    color: #1f2937;

    font-size: 1.22rem;
    font-weight: 760;
    line-height: 1.2;

    letter-spacing: -0.015em;
}


.course-launcher p {
    max-width: 72%;

    margin: 7px 0 0;

    color: #5f6e82;

    font-size: 0.87rem;
    line-height: 1.38;
}


.course-launcher-arrow {
    margin-top: auto;

    padding-top: 13px;

    color:
        var(--course-color);

    font-size: 0.81rem;
    font-weight: 700;
}


.course-launcher-arrow::after {
    content: " \2192";

    display: inline-block;

    margin-left: 3px;

    transition:
        transform 150ms ease;
}


.course-launcher:hover
.course-launcher-arrow::after {
    transform:
        translateX(5px);
}


/* ============================================================
   Shared course graphic
   ============================================================ */

.course-launcher-graphic {
    position: absolute;
    z-index: 1;

    top: 0;
    right: 0;

    width: 46%;
    height: 100%;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 68% 45%,
            rgba(
                var(--course-rgb),
                0.16
            ) 0%,
            rgba(
                var(--course-rgb),
                0.06
            ) 38%,
            transparent 68%
        );
}


/* ============================================================
   Java course visual
   ============================================================ */

.course-visual-java::before {
    content: "{ }";

    position: absolute;

    right: 18px;
    top: 50%;

    transform:
        translateY(-56%);

    color:
        rgba(
            var(--course-rgb),
            0.18
        );

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 6.6rem;
    font-weight: 800;

    letter-spacing: -0.17em;
}


.course-visual-java::after {
    content:
        "public class\A"
        "if (value)\A"
        "for (int i";

    white-space: pre;

    position: absolute;

    right: 42px;
    top: 26px;

    color:
        rgba(
            var(--course-rgb),
            0.13
        );

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 0.7rem;
    line-height: 1.75;
}


/* ============================================================
   Network course visual
   ============================================================ */

.course-visual-network {
    background-image:
        radial-gradient(
            circle at 20% 28%,
            rgba(
                var(--course-rgb),
                0.22
            ) 0 4px,
            transparent 5px
        ),

        radial-gradient(
            circle at 48% 22%,
            rgba(
                var(--course-rgb),
                0.19
            ) 0 4px,
            transparent 5px
        ),

        radial-gradient(
            circle at 78% 40%,
            rgba(
                var(--course-rgb),
                0.22
            ) 0 4px,
            transparent 5px
        ),

        radial-gradient(
            circle at 42% 70%,
            rgba(
                var(--course-rgb),
                0.19
            ) 0 4px,
            transparent 5px
        ),

        radial-gradient(
            circle at 82% 78%,
            rgba(
                var(--course-rgb),
                0.20
            ) 0 4px,
            transparent 5px
        ),

        radial-gradient(
            circle at 68% 45%,
            rgba(
                var(--course-rgb),
                0.13
            ),
            transparent 66%
        );
}


.course-visual-network::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            32deg,
            transparent 31%,
            rgba(
                var(--course-rgb),
                0.14
            ) 31.5%,
            rgba(
                var(--course-rgb),
                0.14
            ) 32.2%,
            transparent 32.7%
        ),

        linear-gradient(
            145deg,
            transparent 43%,
            rgba(
                var(--course-rgb),
                0.13
            ) 43.5%,
            rgba(
                var(--course-rgb),
                0.13
            ) 44.2%,
            transparent 44.7%
        );
}


.course-visual-network::after {
    content:
        "0101 1010\A"
        "1100 0011";

    white-space: pre;

    position: absolute;

    right: 20px;
    bottom: 17px;

    color:
        rgba(
            var(--course-rgb),
            0.17
        );

    font-family:
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        monospace;

    font-size: 0.76rem;
    line-height: 1.5;

    letter-spacing: 0.08em;
}


/* ============================================================
   Intro animation
   ============================================================ */

@keyframes home-orbit-one {
    from {
        transform:
            translate(-50%, -50%)
            rotate(-13deg);
    }

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


@keyframes home-orbit-two {
    from {
        transform:
            translate(-50%, -50%)
            rotate(24deg);
    }

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


/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 800px) {
    .home-intro-graphic {
        opacity: 0.58;
    }


    .countdown-list {
        column-count: 1;
    }


    .course-launcher-grid {
        grid-template-columns: 1fr;
    }


    .widget-half,
    .widget-third {
        grid-column: span 12;
    }
}


@media (max-width: 620px) {
    .home-intro {
        min-height: 0;

        padding: 20px;
    }


    .home-intro-content {
        max-width: 88%;
    }


    .home-intro-graphic {
        right: -35px;

        opacity: 0.36;
    }


    .home-intro p {
        max-width: 86%;
    }


    .home-widget {
        padding:
            16px 17px;
    }


    .countdown-widget
    .home-widget-header {
        padding-right: 95px;
    }


    .countdown-widget
    .home-widget-header::before {
        right: 4px;

        width: 78px;
        height: 78px;

        border-width: 4px;
    }


    .countdown-widget
    .home-widget-header h2::before,
    .countdown-widget
    .home-widget-header h2::after {
        display: none;
    }


    .countdown-row {
        grid-template-columns:
            145px
            minmax(0, 1fr);

        margin-bottom: 9px;
    }


    .course-launcher {
        min-height: 145px;

        padding:
            20px 22px;
    }


    .course-launcher p {
        max-width: 76%;
    }
}


@media (max-width: 480px) {
    .home-intro-graphic {
        display: none;
    }


    .home-intro-content,
    .home-intro p {
        max-width: none;
    }


    .countdown-widget
    .home-widget-header {
        min-height: 0;

        padding-right: 0;
    }


    .countdown-widget
    .home-widget-header::before {
        display: none;
    }


    .countdown-row {
        grid-template-columns:
            1fr;

        gap: 5px;

        margin-bottom: 12px;
    }


    .course-launcher p {
        max-width: 84%;
    }


    .course-launcher-graphic {
        width: 42%;
    }
}


/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .countdown-widget::before,
    .countdown-widget::after,
    .home-intro-orbit-one,
    .home-intro-orbit-two {
        animation: none;
    }


    .course-launcher {
        transition: none;
    }


    .course-launcher:hover {
        transform: none;
    }

    .home-constellation-star {
        animation: none;
    }
}