/* Verbatim excerpts of createdbymira.com, retrieved 2026-10-14.
   Kept separate so Daniel's requested adaptations are visible in style.css.
   Original source, with original line numbers, is preserved outside site/.
*/
        .page {
            position: fixed;
            top: 0; left: 0;
            width: 100vw; height: 100vh;
            display: none;
        }

        .page.active { display: flex; }

        #landing {
            align-items: center;
            justify-content: center;
            background: transparent;
        }

        .info-overlay {
            position: fixed;
            top: 0; left: 0;
            width: 100vw; height: 100vh;
            background: #000;
            z-index: 20000;
            display: none;
            overflow: hidden;
            padding: 32px 36px;
            transition: background 0.6s ease;
        }
        body.light-mode .info-overlay { background: #fff; }

        .info-overlay.active { display: block; }

        .info-close {
            position: fixed;
            top: 32px; right: 36px;
            font-size: 11px;
            font-weight: 400;
            letter-spacing: 0.08em;
            cursor: none;
            z-index: 20010;
            transition: color 0.4s ease, font-weight 0.3s ease, font-size 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            color: #f0f0f0;
            display: inline-block;
        }
        body.light-mode .info-close { color: #0a0a0a; }

        .info-close:hover { color: #7B2FBE; font-weight: 500; font-size: 12.5px; }

        .info-content {
            max-width: 720px;
            padding-top: 40px;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow: hidden;
            margin-top: -40px;
        }

        .info-row {
            display: flex;
            gap: 40px;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid #222;
        }
        body.light-mode .info-row { border-bottom-color: #eee; }

        .info-row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

        .info-label {
            width: 140px;
            flex-shrink: 0;
            font-size: 11px;
            font-weight: 400;
            letter-spacing: 0.05em;
            color: #666;
            padding-top: 2px;
        }
        body.light-mode .info-label { color: #999; }

        .info-value {
            font-size: 13px;
            font-weight: 400;
            line-height: 1.8;
            color: #f0f0f0;
        }
        body.light-mode .info-value { color: #0a0a0a; }

        .info-value a {
            color: #f0f0f0;
            text-decoration: none;
            cursor: none;
            transition: color 0.5s ease, font-weight 0.4s ease;
        }
        body.light-mode .info-value a { color: #0a0a0a; }

        .info-value a:hover {
            color: #7B2FBE;
            font-weight: 700;
        }

        /* Contact links grow on hover — slow and subtle */
        .info-link-grow {
            display: inline-block;
            font-size: 13px;
            transition: color 1s ease, font-weight 0.8s ease, font-size 1.2s cubic-bezier(0.16, 1, 0.3, 1), letter-spacing 1s ease;
        }
        .info-link-grow:hover {
            font-size: 15px;
            font-weight: 500;
            letter-spacing: 0.015em;
        }
        #work {
            flex-direction: row;
            overflow: hidden;
            background: #000;
            transition: background 0.6s ease;
        }
        body.light-mode #work { background: #fff; }

        .work-nav {
            position: fixed;
            top: 0; right: 0;
            z-index: 10001;
            padding: 32px 36px;
        }

        .work-nav span.nav-link {
            font-size: 11px;
            font-weight: 400;
            letter-spacing: 0.08em;
            color: #f0f0f0;
            cursor: none;
            transition: color 1s ease, font-weight 0.8s ease, font-size 1s cubic-bezier(0.16, 1, 0.3, 1);
            display: inline-block;
        }
        body.light-mode .work-nav span.nav-link { color: #0a0a0a; }

        .work-sidebar {
            width: 260px;
            padding: 0 0 0 36px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            flex-shrink: 0;
            height: 100vh;
            position: relative;
            overflow: visible;
        }

        .work-titles-track {
            transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
            will-change: transform;
        }

        .work-title-item {
            font-size: 13px;
            font-weight: 400;
            line-height: 2.2;
            color: #555;
            cursor: none;
            transition: color 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), font-size 0.6s cubic-bezier(0.16, 1, 0.3, 1), font-weight 0.5s ease;
            white-space: nowrap;
            overflow: visible;
        }
        body.light-mode .work-title-item { color: #ccc; }

        .work-title-item.active {
            color: #f0f0f0;
            font-weight: 500;
            font-size: 15px;
        }
        body.light-mode .work-title-item.active { color: #0a0a0a; }

        .work-title-item:hover { color: #999; }
        body.light-mode .work-title-item:hover { color: #888; }
        .work-title-item.active:hover { color: #f0f0f0; }
        body.light-mode .work-title-item.active:hover { color: #0a0a0a; }

        /* All Work link in sidebar */
        .work-title-item.all-work-link {
            color: #666;
            font-size: 10px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            margin-bottom: 12px;
            line-height: 2.2;
        }
        .work-title-item.all-work-link:hover { color: #f0f0f0; }
        body.light-mode .work-title-item.all-work-link { color: #bbb; }
        body.light-mode .work-title-item.all-work-link:hover { color: #0a0a0a; }

        .work-main {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 0 60px 0 40px;
            position: relative;
            overflow: hidden;
        }

        /* Scroll hint */
        .work-scroll-hint {
            position: fixed;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 9px;
            letter-spacing: 0.15em;
            color: #555;
            text-transform: uppercase;
            opacity: 1;
            transition: opacity 1s ease;
            z-index: 500;
            text-align: center;
        }
        body.light-mode .work-scroll-hint { color: #ccc; }

        .work-scroll-hint .scroll-arrow {
            display: block;
            margin-top: 6px;
            font-size: 16px;
            animation: scrollBounce 2s ease-in-out infinite;
        }
        @keyframes scrollBounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(5px); }
        }

        .work-video-container {
            width: 100%;
            max-width: 820px;
            position: relative;
            height: 500px;
        }

        .work-slide {
            width: 100%;
            position: absolute;
            top: 0; left: 0;
            opacity: 0;
            pointer-events: none;
        }

        .work-slide.active {
            opacity: 1;
            pointer-events: auto;
        }

        .work-player {
            width: 100%;
            aspect-ratio: 16/9;
            background: #111;
            overflow: hidden;
            cursor: none;
            position: relative;
        }
        body.light-mode .work-player { background: #f7f7f7; }

        .work-player iframe {
            width: 100%;
            height: 100%;
            border: none;
        }

        .work-placeholder {
            width: 100%; height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .work-play-icon {
            width: 56px; height: 56px;
            border: 2px solid rgba(255,255,255,0.8);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: border-color 0.3s, transform 0.3s, background 0.3s;
            background: rgba(0,0,0,0.15);
            backdrop-filter: blur(4px);
        }

        .work-player:hover .work-play-icon {
            border-color: #fff;
            transform: scale(1.08);
            background: rgba(0,0,0,0.3);
        }

        .work-play-icon svg {
            width: 16px; height: 16px;
            fill: rgba(255,255,255,0.9);
            margin-left: 3px;
        }

        .work-player:hover .work-play-icon svg { fill: #fff; }

        .work-credit-bar {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .work-credit-summary {
            display: flex;
            gap: 32px;
            font-size: 10px;
            font-weight: 300;
            color: #666;
            letter-spacing: 0.05em;
        }
        body.light-mode .work-credit-summary { color: #999; }

        .work-credit-summary strong {
            font-weight: 400;
            font-size: 9px;
            letter-spacing: 0.15em;
            text-transform: uppercase;
            display: block;
            margin-bottom: 3px;
            color: #666;
        }
        body.light-mode .work-credit-summary strong { color: #999; }

        .work-credit-summary .credit-val { color: #aaa; }
        body.light-mode .work-credit-summary .credit-val { color: #555; }

        .credits-toggle {
            font-size: 10px;
            letter-spacing: 0.08em;
            color: #f0f0f0;
            cursor: none;
            transition: color 0.3s ease, font-weight 0.2s ease;
            flex-shrink: 0;
            font-weight: 400;
        }
        body.light-mode .credits-toggle { color: #0a0a0a; }

        .work-back {
            position: fixed;
            top: 32px; left: 36px;
            font-size: 11px;
            letter-spacing: 0.08em;
            color: #f0f0f0;
            cursor: none;
            z-index: 10001;
            transition: color 1s ease, font-weight 0.8s ease, font-size 1s cubic-bezier(0.16, 1, 0.3, 1);
            display: inline-block;
        }
        body.light-mode .work-back { color: #0a0a0a; }

        .work-back.zone-active { color: #fff; font-weight: 600; font-size: 21px; }
        body.light-mode .work-back.zone-active { color: #0a0a0a; }

        /* Work page hover zones — larger click/hover targets */
        .work-zone-back {
            position: fixed;
            top: 0; left: 0;
            width: 30%; height: 25%;
            z-index: 10000;
            cursor: none;
        }

        .work-zone-info {
            position: fixed;
            top: 0; right: 0;
            width: 30%; height: 25%;
            z-index: 10000;
            cursor: none;
        }

        .work-nav span.nav-link.zone-active {
            color: #fff;
            font-weight: 600;
            font-size: 21px;
        }
        body.light-mode .work-nav span.nav-link.zone-active { color: #0a0a0a; }

@media (max-width: 768px) {
            /* Work page mobile */
            .work-nav {
                position: fixed;
                bottom: 0; right: 0;
                top: auto;
                padding: 20px 24px;
                z-index: 500;
            }
            .work-nav span.nav-link {
                font-size: 13px;
                cursor: pointer;
                -webkit-tap-highlight-color: transparent;
                padding: 12px 18px;
                border-radius: 24px;
                border: 1px solid #333;
                min-height: 44px;
                display: inline-flex;
                align-items: center;
            }
            body.light-mode .work-nav span.nav-link { border-color: #ddd; }
            .work-nav span.nav-link:active { color: #7B2FBE; border-color: #7B2FBE; }
            .work-bottom { display: none; }
            .work-sidebar { display: none; }
            .work-scroll-hint { display: none; }
            #work {
                flex-direction: column;
                overflow: hidden;
            }
            .work-main {
                padding: 0;
                width: 100%;
                height: 100vh;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                transform: translateY(-8vh);
            }
            .work-video-container {
                width: 100%;
                max-width: 100%;
                padding: 0 16px;
                height: calc((100vw - 32px) * 9 / 16);
                position: relative;
            }
            .work-slide {
                transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            }
            .work-credit-bar { display: none; }
            .work-credit-summary { flex-direction: column; gap: 6px; }
            .credits-panel { width: 100%; }

            .mobile-work-nav {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 16px;
                margin-bottom: 14px;
                width: 100%;
                flex-shrink: 0;
            }

            .mobile-work-prev,
            .mobile-work-next {
                font-size: 11px;
                color: #666;
                letter-spacing: 0.04em;
                display: flex;
                align-items: center;
                gap: 6px;
                cursor: pointer;
                -webkit-tap-highlight-color: transparent;
                max-width: 28%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                transition: color 0.3s ease;
                min-height: 48px;
                padding: 8px 4px;
            }
            body.light-mode .mobile-work-prev,
            body.light-mode .mobile-work-next { color: #999; }
            .mobile-work-prev:active,
            .mobile-work-next:active { color: #7B2FBE; }

            .mobile-work-arrow {
                font-size: 20px;
                color: #666;
            }
            body.light-mode .mobile-work-arrow { color: #aaa; }

            .mobile-work-current {
                font-size: 16px;
                font-weight: 500;
                color: #f0f0f0;
                text-align: center;
                flex-shrink: 0;
                max-width: 44%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            body.light-mode .mobile-work-current { color: #0a0a0a; }

            .work-mobile-title { display: none; }

            .work-back {
                position: fixed;
                bottom: 0; left: 0;
                top: auto;
                padding: 20px 24px;
                font-size: 13px;
                cursor: pointer;
                -webkit-tap-highlight-color: transparent;
                border-radius: 24px;
                min-height: 44px;
                display: inline-flex;
                align-items: center;
            }
            .work-back:active { color: #7B2FBE; }

            .mobile-credits-row {
                display: flex;
                gap: 10px;
                justify-content: center;
                position: fixed;
                bottom: 80px;
                left: 50%;
                transform: translateX(-50%);
                white-space: nowrap;
            }

            .mobile-credits-btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                padding: 10px 20px;
                font-size: 11px;
                letter-spacing: 0.08em;
                color: #888;
                cursor: pointer;
                -webkit-tap-highlight-color: transparent;
                transition: color 0.3s ease;
                border: 1px solid #333;
                border-radius: 24px;
                min-height: 40px;
            }
            body.light-mode .mobile-credits-btn { color: #999; border-color: #ddd; }
            .mobile-credits-btn:active { color: #7B2FBE; border-color: #7B2FBE; }

            .mobile-swipe-hint {
                display: block;
                position: fixed;
                bottom: 48px;
                left: 0;
                right: 0;
                text-align: center;
                font-size: 9px;
                letter-spacing: 0.1em;
                color: #555;
                opacity: 1;
                transition: opacity 1s ease;
            }
            body.light-mode .mobile-swipe-hint { color: #ccc; }

            .info-overlay {
                padding: 24px;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
            }
            .info-content {
                margin-top: 0;
                padding-top: 20px;
                height: auto;
                overflow: visible;
            }
            .info-close {
                position: fixed;
                bottom: 24px; right: 24px;
                top: auto;
                cursor: pointer;
                -webkit-tap-highlight-color: transparent;
                padding: 12px 20px;
                border-radius: 24px;
                border: 1px solid #333;
                min-height: 48px;
                display: inline-flex;
                align-items: center;
                background: #000;
                z-index: 20010;
            }
            body.light-mode .info-close { border-color: #ddd; background: #fff; }
            .info-close:active { color: #7B2FBE; border-color: #7B2FBE; }
            .info-row { flex-direction: column; gap: 8px; }
            .info-label { width: auto; }
            .info-value { font-size: 14px; line-height: 1.9; }
            .info-value a {
                cursor: pointer;
                padding: 4px 0;
                display: inline-block;
            }

}

        .text-cursor {
            position: fixed;
            pointer-events: none;
            z-index: 50000;
            font-family: 'Sequel Black', 'Arial Black', Impact, sans-serif;
            font-size: 14px;
            font-weight: 900;
            letter-spacing: 0.15em;
            color: #f0f0f0;
            transform: translate(-50%, -50%);
            opacity: 0;
            transition: opacity 0.3s ease, color 0.6s ease;
            white-space: nowrap;
        }
        body.light-mode .text-cursor { color: #0a0a0a; }

        .text-cursor.active { opacity: 1; }
        .text-cursor.active.hovering { opacity: 0.25; }
        .text-cursor.active.very-faded { opacity: 0.1; }