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

        .hero {
            position: relative;
            width: 100%;
            height: 100svh;
            overflow: hidden;
            background: #111;
        }


        /* ========================================
           16:9 SVG STAGE
           ======================================== */

        .hero-stage {
            position: absolute;
            width: 1920px;
            height: 1080px;
            left: 50%;
            top: 50%;

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

            transform-origin: center center;
            overflow: visible;
        }


        /* ========================================
           SVG LAYERS
           ======================================== */

        .svg-layer {
            position: absolute;
            width: 1920px;
            height: 1080px;
            left: 0;
            top: 0;

            object-fit: fill;

            pointer-events: none;
            user-select: none;
        }


        /* ========================================
           Z ORDER
           ======================================== */

        .bg {
            z-index: 1;
        }

        .sun {
            z-index: 2;

            will-change: transform;
        }

        .cloud_00 {
            z-index: 3;

            will-change: transform;
        }

        .cloud_01 {
            z-index: 3;

            will-change: transform;
        }

        .cloud_rainbow {
            z-index: 4;

            will-change: transform;
        }

        .brownbird {
            z-index: 5;

            will-change: transform;
        }

        .bluebird {
            z-index: 6;

            will-change: transform;
        }

        .scribble {
            z-index: 7;
        }

        .bg_words {
            z-index: 8;
        }

        .trees {
            z-index: 9;
        }

        .apartments {
            z-index: 10;
        }

        .foreground {
            z-index: 11;
        }


        /*
         * Drop-shadows live on the static inner
         * images, NOT the animated wrappers.
         * Filter + transform on one element
         * forces a repaint every frame.
         */

        .sun img,
        .cloud_00 img,
        .cloud_01 img,
        .cloud_rainbow img,
        .brownbird img,
        .bluebird img {
            filter:
                drop-shadow(
                    3px 3px 2px rgba(0, 0, 0, .7)
                );
        }


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

        .hero-content {
            position: absolute;

            left: 50%;
            top: 50%;

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

            z-index: 20;

            text-align: center;

            width: 70%;

            color: #ffffff;

            pointer-events: auto;
        }

        .hero-content h1 {
            font-family:
                'League Spartan',
                sans-serif;

            font-size:
                clamp(30px, 5vw, 90px);

            font-weight: 900;

            letter-spacing: 1px;

            margin-bottom: 12px;

            text-shadow:
                3px 3px 2px rgba(0, 0, 0, .7);
        }

        .hero-content p {
            font-family:
                'League Spartan',
                sans-serif;

            font-size:
                clamp(30px, 10vw, 180px);

            font-weight: 900;

            margin-bottom: 0;

            letter-spacing: 2px;

            text-shadow:
                3px 3px 2px rgba(0, 0, 0, .7);
        }

        .watch-button {
            display: inline-flex;

            align-items: center;
            justify-content: center;

            padding: 18px 50px;

            margin-top: 15px;

            border-radius: 999px;

            background:
                #004a98;

            color: white;

            font-family:
                'League Spartan',
                sans-serif;

            font-size:
                clamp(18px, 1.6vw, 29px);

            font-weight: 600;

            letter-spacing: 4px;

            text-transform: uppercase;

            text-decoration: none;

            transition:
                transform 0.3s ease,
                background 0.3s ease;
        }

        .watch-button:hover {
            transform: scale(1.04);

            background:
                #0060b9;
        }