/* Define the Header Font */
@font-face {
    font-family: 'HeaderFont';
    src: url('fonts/headerFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Define the Body Font */
@font-face {
    font-family: 'BodyFont';
    src: url('fonts/bodyFont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Remove default margin */
html,
body {
    height: 100%;
    margin: 0;
    overflow: auto;
    /* Allow scrolling */
    -webkit-user-select: none;
    /* Safari */
    user-select: none;
    /* Standard syntax */
    background-color: black;
    /* Critical for loading fallback */
}

/* Disable image dragging */
img {
    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
    user-drag: none;
}

/* --- LOADING STATE --- */
/* Hide everything until assets are ready */
body.loading .bg-wrapper,
body.loading .desktop-view,
body.loading .mobile-view {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Ensure the transition overlay is ALWAYS visible during loading */
body.loading .page-transition {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}


/* --- HOME AUDIO INDICATORS --- */
.music-indicator-home {
    position: absolute;
    width: 3.5%;
    z-index: 10;
    pointer-events: auto;
    cursor: pointer;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform;
}

.music-indicator-home.visible {
    transform: translate(-50%, -50%) scale(1);
}

.music-indicator-home:hover {
    filter: brightness(1.2);
}

/* Position: Listen (Rotated) */
.music-indicator-home.pos-listen {
    top: 69%;
    left: 8%;
    transform: translate(-50%, -50%) scale(0) rotate(240deg);
}

.music-indicator-home.pos-listen.visible {
    filter: brightness(1.5);
    transform: translate(-50%, -50%) scale(1.8) rotate(240deg);
}

.music-indicator-home.pos-listen.visible:hover {
    transform: translate(-50%, -50%) scale(2.0) rotate(260deg);
    filter: brightness(1.8);
}

/* Position: Lessons (Normal) */
.music-indicator-home.pos-lessons {
    top: 40%;
    left: 23%;
    transform: translate(-50%, -50%) scale(0) rotate(-20deg);
}

.music-indicator-home.pos-lessons.visible {
    filter: brightness(1.5);
    transform: translate(-50%, -50%) scale(1.8) rotate(-20deg);
}

.music-indicator-home.pos-lessons.visible:hover {
    transform: translate(-50%, -50%) scale(2.0);
    filter: brightness(1.8);
}

/* --- GLOBAL AUDIO INDICATOR (Subpages) --- */
.global-audio-indicator {
    position: absolute;
    top: 18%;
    left: 8%;
    width: 5.8%;
    z-index: 10;
    pointer-events: auto;
    cursor: pointer;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform;
}

.global-audio-indicator.visible {
    transform: translate(-50%, -50%) scale(1);
}

.global-audio-indicator:hover {
    transform: translate(-50%, -50%) scale(1.2);
    filter: brightness(1.2);
}

/* --- GLOBAL STYLES --- */

.bg-wrapper {
    position: relative;
    width: fit-content;
    height: fit-content;
    line-height: 0;
    overflow: hidden;
    /* Prevent white space overflow from absolute elements */
    background-color: black;
    /* Fallback to prevent white flash */
}

.overlay-link,
.overlay-simple {
    position: absolute;
    height: auto;
    transform: translate(-50%, -50%);
    transition: transform 0.2s, filter 0.2s;
}

.overlay-link:hover {
    transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
    cursor: pointer;
    filter: brightness(1.2);
}

.overlay-simple:hover {
    transform: translate(-50%, -50%) scale(1);
    cursor: pointer;
    filter: brightness(1.2);
}

.overlay-bright {
    position: absolute;
    height: auto;
    transform: translate(-50%, -50%);
    transition: transform 0.2s, filter 0.2s;
}

.overlay-bright:hover {
    transform: translate(-50%, -50%) scale(1);
    cursor: pointer;
    filter: brightness(1.5);
    /* Brighter than simple */
}

.overlay-img {
    width: 100%;
    height: auto;
    display: block;
}

.background-img {
    display: block;
    /* Default fallback */
    min-width: 100vw;
    min-height: 100vh;
}

.mobile-bg-img {
    display: none;
    /* Hide on desktop */
}

.exit-btn {
    position: absolute;
    width: 10%;
    /* Placeholder size */
    z-index: 100;
}

/* Shake Animation */
@keyframes shake {
    0% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }

    20% {
        transform: translate(-50%, -50%) scale(1.1) rotate(-3deg);
    }

    40% {
        transform: translate(-50%, -50%) scale(1.1) rotate(3deg);
    }

    60% {
        transform: translate(-50%, -50%) scale(1.1) rotate(-3deg);
    }

    80% {
        transform: translate(-50%, -50%) scale(1.1) rotate(3deg);
    }

    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
}


/* --- HOME PAGE --- */

.home-wrapper {
    background-color: black;
}

/* Background Scaling */
/* Image Dimensions: 3633 x 2850, Aspect Ratio: 1.2747 */
@media (min-aspect-ratio: 4314/3391) {
    .home-bg {
        width: 100vw;
        height: auto;
        min-width: 0;
        min-height: 0;
    }
}

@media (max-aspect-ratio: 4314/3391) {
    .home-bg {
        width: auto;
        height: 100vh;
        min-width: 0;
        min-height: 0;
    }
}

/* Navigation */

.home-title {
    position: absolute;
    top: 3%;
    left: 2%;
    width: 50%;
    /* Adjust size as needed */
    z-index: 40;
    rotate: -1deg;
    transform-origin: center;
    /* Shake around center */
    /* Above background, below interactive menus potentially */
}


.home-title.title-shake {
    animation: progressive-shake 1.5s linear forwards;
}

.home-title.is-totem {
    width: 25% !important;
    /* Smaller size for totem */
    rotate: 0deg;
    /* Optional: Reset rotation if needed, or keep -1deg */
}

@keyframes progressive-shake {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    5% {
        transform: translate(-1px, 0px) rotate(-1deg);
    }

    /* Start very subtle */
    10% {
        transform: translate(1px, 0px) rotate(1deg);
    }

    15% {
        transform: translate(-1px, 1px) rotate(-0.5deg);
    }

    20% {
        transform: translate(1px, -1px) rotate(0.5deg);
    }

    25% {
        transform: translate(-2px, 0px) rotate(-1.5deg);
    }

    30% {
        transform: translate(2px, 0px) rotate(1.5deg);
    }

    /* Building up */
    35% {
        transform: translate(-2px, 2px) rotate(-1deg);
    }

    40% {
        transform: translate(2px, -2px) rotate(1deg);
    }

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

    50% {
        transform: translate(3px, 0px) rotate(2deg);
    }

    55% {
        transform: translate(-3px, 3px) rotate(-2.5deg);
    }

    60% {
        transform: translate(3px, -3px) rotate(2.5deg);
    }

    /* Maximum intensity around 5px */
    65% {
        transform: translate(-4px, 0px) rotate(-3deg);
    }

    70% {
        transform: translate(4px, 0px) rotate(3deg);
    }

    75% {
        transform: translate(-5px, 4px) rotate(-3.5deg);
    }

    80% {
        transform: translate(5px, -4px) rotate(3.5deg);
    }

    85% {
        transform: translate(-4px, 0px) rotate(-3deg);
    }

    90% {
        transform: translate(4px, 0px) rotate(3deg);
    }

    95% {
        transform: translate(-2px, 1px) rotate(-1deg);
    }

    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

/* Buttons */
.listen-btn {
    top: 75.45%;
    left: 15.5%;
    width: 7.5%;
    z-index: 3;
}

.shop-btn {
    top: 62.6%;
    left: 33.5%;
    width: 9.2%;
    z-index: 3;
}

.shows-btn {
    top: 76%;
    left: 76%;
    width: 20%;
    rotate: 15.6deg;
    z-index: 3;
}

.lessons-btn {
    top: 47.3%;
    left: 16.3%;
    width: 9.8%;
    z-index: 3;
}

.contact-btn {
    position: absolute;
    height: auto;
    transform: translate(-50%, -50%);
    top: 33.25%;
    left: 57.05%;
    width: 11.9%;
    z-index: 3;
}

.watch-btn {
    top: 52%;
    left: 64%;
    width: 8%;
}

/* Interactive Elements */
.shake-on-click {
    position: absolute;
    height: auto;
    transform: translate(-50%, -50%);
    transition: transform 0.2s;
    cursor: pointer;
}

.shake-on-click.shaking {
    animation: shake 1s ease-in-out;
}

.apple-tree {
    top: 26%;
    left: 90%;
    width: 20%;
    z-index: 10;
}

.physics-apple {
    position: absolute;
    top: 29%;
    /* Starting position behind/near tree */
    left: 92%;
    width: 2.5%;
    z-index: 35;
    /* Ensure this is well above scroll (30) */
    display: none;
    /* JS toggles this */
    will-change: transform, top, left;
}

.birdhouse-hole {
    position: absolute;
    top: 36.5%;
    left: 52.5%;
    width: 2%;
    z-index: 1;
    transform: translate(-50%, -50%);
}

.cardinal-head {
    position: absolute;
    top: 36.2%;
    left: 54.3%;
    width: 2%;
    z-index: 2;
    transform: translate(-50%, -50%);
    transition: transform 0.5s ease;
    will-change: transform;
}

/* Cardinal Head (Animated) */
.cardinal-head-contact {
    position: absolute;
    top: 35%;
    left: 50%;
    width: 2.5%;
    z-index: 2;
    transform: translate(-50%, -50%);
    transition: transform 0.5s ease;
    will-change: transform;
}

.contact-corner {
    position: absolute;
    top: 36.6%;
    left: 50.12%;
    width: 2.07%;
    z-index: 1;
    transform: translate(50%, -50%);
}

.contact-btn:hover~.cardinal-head,
.contact-corner:hover~.cardinal-head {
    transform: translate(-130%, -50%);
}

/* Basket */
.basket-top {
    position: absolute;
    top: 73%;
    left: 52%;
    width: 13%;
    z-index: 1;
    display: block;
    rotate: -20deg;
}

.basket-bottom {
    position: absolute;
    top: 73%;
    left: 52%;
    width: 13%;
    /* z-index: 1001; Always on top now */
    z-index: 1001;
    display: block;
    rotate: -20deg;

    /* Improve Click Transparency */
    pointer-events: none;
    /* Let clicks pass through by default */
    clip-path: polygon(0% 20%, 100% 20%, 90% 100%, 10% 100%);
    /* Trim transparent corners (approximate) */
}

.basket-recoverable {
    cursor: pointer;
    transition: filter 0.2s;
    pointer-events: auto;
    /* Re-enable clicks only when active */
}

.basket-recoverable:hover {
    filter: brightness(1.2);
    /* No scale transform as requested */
}

.debug-throw-radius {
    position: absolute;
    border: 2px dashed rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 0, 0, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10;
    display: none;
    /* JS toggles this */
}

.debug-drop-zone {
    position: absolute;
    background-color: rgba(255, 0, 0, 0.2);
    border: 2px solid rgba(255, 0, 0, 0.5);
    transform: translateX(-50%);
    /* Start from bottom center */
    transform-origin: bottom center;
    pointer-events: none;
    z-index: 10;
    display: none;
}

.debug-radius-shows {
    position: absolute;
    border: 2px dashed rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 0, 0, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 10;
    display: none;
    /* JS toggles this */
}

/* Physics Debug Rectangles */
.debug-rect {
    position: absolute;
    /* Red background removed for production */
    background-color: transparent;
    z-index: 100;
    /* Visible on top */
}

/* Left Wall */
.basket-bound-1 {
    top: 88.5%;
    left: 55.5%;
    width: 1%;
    height: 5%;
    transform: rotate(-30deg);
}

/* Bottom */
.basket-bound-2 {
    top: 90%;
    left: 57%;
    width: 8%;
    height: 2%;
    transform: rotate(-20deg);
}

/* Right Wall */
/* Taco Truck Animation */
.taco-truck-driving {
    position: absolute;
    top: 50%;
    /* Vertical center */
    left: 150%;
    /* Start off-screen right */
    width: 60%;
    /* Adjust size as needed */
    z-index: 20;
    /* Above everything */
    transform: translate(0, -50%);
    /* Center vertical anchor */
    transition: left 4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Smooth drive in */
    will-change: left;
}

/* Class to trigger drive-in */
.taco-truck-driving.drive-in {
    left: 50%;
    /* Center screen */
    transform: translate(-50%, -50%);
    /* Center anchor */
}

/* Reposition: Move Up and Left */
.taco-truck-driving.drive-reposition {
    left: 40% !important;
    top: 35% !important;
    transition: left 2s ease-in-out, top 2s ease-in-out;
}

/* Exit: Drive off left */
.taco-truck-driving.drive-exit {
    left: -50% !important;
    transition: left 2s ease-in;
    z-index: 41 !important;
}

/* Scroll Animation */
.scroll-item {
    position: absolute;
    top: 60%;
    left: 47.5%;
    width: 6%;
    /* Estimated size */
    z-index: 21;
    /* Behind truck initially? */
    pointer-events: none;
    /* No interaction while flying */
    will-change: top, left, transform;
}

.scroll-item.fly-to-spot {
    animation: falling-leaf 3s ease-in-out forwards;
}

.scroll-item.landed {
    pointer-events: auto;
    /* Interactive after landing */
}

.scroll-item.landed:hover {
    transform: translate(-50%, -50%) scale(1.1);
    /* Scale up, no rotation */
    filter: brightness(1.2);
    cursor: pointer;
}

@keyframes falling-leaf {
    0% {
        top: 60%;
        left: 47.5%;
        transform: translate(-50%, -50%) rotate(0deg);
        animation-timing-function: ease-in;
    }

    /* 1. Swing Right (Dip Down -> Up to Peak) */
    25% {
        top: 65%;
        /* Dip low */
        left: 50%;
        transform: translate(-50%, -50%) rotate(-10deg);
        animation-timing-function: ease-out;
    }

    40% {
        top: 63%;
        /* Peak Right */
        left: 53%;
        transform: translate(-50%, -50%) rotate(-30deg);
        /* Tips Left */
        animation-timing-function: ease-in;
    }

    /* 2. Swing Left (Dip Down -> Up to Peak) */
    60% {
        top: 68%;
        /* Dip lower */
        left: 50%;
        transform: translate(-50%, -50%) rotate(10deg);
        animation-timing-function: ease-out;
    }

    75% {
        top: 66%;
        /* Peak Left */
        left: 48%;
        transform: translate(-50%, -50%) rotate(30deg);
        /* Tips Right */
        animation-timing-function: ease-in;
    }

    /* 3. Final Swoop to Land (Dip Down -> Up to Land) */
    90% {
        top: 76%;
        /* Deepest Dip */
        left: 53%;
        transform: translate(-50%, -50%) rotate(-10deg);
        animation-timing-function: ease-out;
    }

    100% {
        top: 73%;
        /* Land (Swoop Up) */
        left: 58%;
        transform: translate(-50%, -50%) rotate(0deg);
    }
}

.scroll-item {
    position: absolute;
    top: 60%;
    left: 47.5%;
    width: 5%;
    z-index: 30;
    /* Above Truck (20), Below Apple (100+) */
    transform: translate(-50%, -50%);
    pointer-events: none;
    /* Interactive only when landed */
}

.scroll-item.landed {
    top: 73% !important;
    left: 58% !important;
    transform: translate(-50%, -50%) rotate(0deg) !important;
    pointer-events: auto;
}

/* Recipe Popup */
.recipe-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    /* Dark backdrop */
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.recipe-content {
    position: relative;
    height: 90vh;
    /* Full height with padding */
    max-width: 90vw;
    background: transparent;
    transform: scale(0);
    /* Start scaled down */
    transition: transform 0.3s ease-in;
    /* Smooth close (no bounce) */
    will-change: transform;
}

.recipe-content.scale-in {
    transform: scale(1);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy open */
}

.recipe-content.scale-out {
    transform: scale(0);
}

.recipe-content img {
    height: 100%;
    width: auto;
    object-fit: contain;
    border-radius: 10px;
}

.close-recipe {
    position: absolute;
    top: 10px;
    right: 20px;
    color: white;
    font-size: 50px;
    font-weight: bold;
    cursor: pointer;
    text-shadow: 2px 2px 5px #000;
    z-index: 2001;
    line-height: 0.5;
}

.close-recipe:hover {
    color: #ff4444;
    /* Red hint on hover */
}

/* --- TRICKSHOT REWARD MODAL --- */
.trickshot-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.trickshot-modal-content {
    position: relative;
    background: linear-gradient(145deg, #8B4513, #654321);
    border: 4px solid #D2691E;
    border-radius: 15px;
    padding: 30px 40px;
    max-width: 500px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 2px 10px rgba(255, 255, 255, 0.1);
    animation: modalPopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalPopIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.trickshot-modal-content h2 {
    font-family: 'HeaderFont', cursive;
    color: #FFD700;
    font-size: 2rem;
    margin: 0 0 15px 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.trickshot-modal-content p {
    font-family: 'BodyFont', sans-serif;
    color: #FFF8DC;
    font-size: 1.1rem;
    margin: 10px 0;
    line-height: 1.5;
}

.trickshot-modal-content strong {
    color: #FFD700;
}

.close-trickshot {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #FFF8DC;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
    line-height: 1;
}

.close-trickshot:hover {
    color: #ff4444;
    transform: scale(1.2);
}

.trickshot-download-btn {
    display: inline-block;
    margin-top: 20px;
    padding: 15px 30px;
    background: linear-gradient(145deg, #228B22, #006400);
    color: white;
    font-family: 'HeaderFont', cursive;
    font-size: 1.2rem;
    text-decoration: none;
    border-radius: 10px;
    border: 3px solid #32CD32;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s, box-shadow 0.2s, filter 0.2s;
}

.trickshot-download-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    filter: brightness(1.1);
}

.basket-bound-3 {
    top: 85%;
    left: 64%;
    width: 1%;
    height: 5%;
    transform: rotate(-10deg);
}

/* Shows Sign Boundary */
.shows-bound {
    top: 78%;
    left: 75.5%;
    width: 18%;
    height: 16%;
    z-index: 2;
    /* Estimated height */
    transform: rotate(20deg) translate(-50%, -50%);
    /* Match overlay positioning logic */
    transform-origin: center center;
}

.shows-bound-top {
    top: 69.8%;
    left: 81%;
    width: 15%;
    /* Longer */
    height: 5%;
    /* Skinnier */
    z-index: 2;
    transform: rotate(17deg) translate(-50%, -50%);
    /* Same rotation */
    transform-origin: center center;
}

.shows-bound-corner {
    top: 65.2%;
    left: 73%;
    width: 3%;
    height: 5%;
    z-index: 2;
    transform: rotate(12deg) translate(-50%, -50%);
    transform-origin: center center;
}

/* --- EASTER EGGS (HOME) --- */

.egg {
    position: absolute;
    width: 3.5%;
    display: none;
    /* Hidden by default */
}

/* Slot 1 (Old Shop Position) */
.egg-slot-1 {
    top: 80%;
    left: 58%;
    z-index: 2;
    transform: translateX(-50%);
    rotate: -20deg;
}

/* Slot 2 (Old Lessons Position) */
.egg-slot-2 {
    top: 82%;
    left: 55%;
    z-index: 3;
    rotate: -30deg;
}

/* Slot 3 (Old Contact Position) */
.egg-slot-3 {
    top: 81%;
    left: 58.5%;
    z-index: 3;
    rotate: -10deg;
}

/* Slot 4 (Old Listen Position) */
.egg-slot-4 {
    top: 84%;
    left: 54%;
    z-index: 4;
    rotate: -45deg;
}

/* Slot 5 (Old Watch Position) */
.egg-slot-5 {
    top: 81.2%;
    left: 60.6%;
    z-index: 4;
    rotate: 5deg;
}

/* Override display for active eggs handled by JS, or just use JS to show them */



/* --- LESSONS PAGE --- */

/* Background Scaling */
/* Image Dimensions: 3502 x 2769, Aspect Ratio: 1.2647 */
@media (min-aspect-ratio: 4260/3334) {
    .lessons-bg {
        width: 100vw;
        height: auto;
        min-width: 0;
        min-height: 0;
    }
}

@media (max-aspect-ratio: 4260/3334) {
    .lessons-bg {
        width: auto;
        height: 100vh;
        min-width: 0;
        min-height: 0;
    }
}

/* Exit Button */
.exit-lessons {
    top: 8%;
    left: 8%;
}

/* Buttons */
.teachers-btn {
    top: 23%;
    left: 51%;
    width: 35%;
}

.bass-btn {
    top: 42%;
    left: 43%;
    width: 10%;
}

.drums-btn {
    top: 37%;
    left: 34%;
    width: 5%;
}

.guitar-btn {
    top: 42%;
    left: 57%;
    width: 10%;
}

.microphone-btn {
    top: 35%;
    left: 65%;
    width: 5%;
}

.piano-btn {
    top: 35%;
    left: 50%;
    width: 10%;
}

/* Instrument Images (Simple Overlay) */
.djembe-img {
    top: 59.5%;
    left: 43%;
    width: 4.8%;
}

.piano-img {
    top: 63.2%;
    left: 18.7%;
    width: 25.7%;
}

.microphone-img {
    top: 52.3%;
    left: 85.5%;
    width: 5%;
}

.bass-img {
    top: 72.8%;
    left: 7.25%;
    width: 5.9%;
}

.guitar-img {
    top: 60.4%;
    left: 64.1%;
    width: 13.4%;
}


/* --- LISTENING PAGE --- */

/* Background Scaling */
/* Aspect Ratio: 1.26468 (approx) */
@media (min-aspect-ratio: 4279/3347) {
    .listening-bg {
        width: 100vw;
        height: auto;
        min-width: 0;
        min-height: 0;
    }
}

@media (max-aspect-ratio: 4279/3347) {
    .listening-bg {
        width: auto;
        height: 100vh;
        min-width: 0;
        min-height: 0;
    }
}

/* Exit Button */
.exit-listening {
    top: 8%;
    left: 8%;
}

/* Buttons */
.skip-btn {
    top: 21.6%;
    left: 86.2%;
    width: 12.3%;
}

.start-stop-btn {
    top: 49%;
    left: 47.2%;
    width: 8.47%;
}

.duck-grapes-img {
    top: 71.7%;
    left: 57.25%;
    width: 7.7%;
}

/* Wall Art (Listening Page) */
.wall-art {
    position: absolute;
    top: 34%;
    left: 11.5%;
    width: 11%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.bird-music-link {
    top: 15%;
    left: 66%;
    width: 9%;
    z-index: 5;

    /* Ensure it's clickable */
}

/* Music Animations */
.music-anim {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    transform: scale(0);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* Bouncy grow effect */
}

.music-anim.visible {
    transform: scale(1);
}

.purple-sound {
    top: 56%;
    left: 63%;
    width: 4%;
    rotate: 15deg;
}

.yellow-sound {
    top: 48.6%;
    left: 66%;
    width: 3%;
    rotate: 15deg;
}

.red-sound {
    top: 31.8%;
    left: 58.7%;
    width: 3%;
    rotate: 20deg;
}


/* --- SHOP PAGE --- */

.shop-wrapper {
    background-color: black;
}

/* Background Scaling */
/* Image Dimensions: 3287 x 2650, Aspect Ratio: 1.2403 */
@media (min-aspect-ratio: 4226/3297) {
    .shop-bg {
        width: 100vw;
        height: auto;
        min-width: 0;
        min-height: 0;
    }
}

@media (max-aspect-ratio: 4226/3297) {
    .shop-bg {
        width: auto;
        height: 100vh;
        min-width: 0;
        min-height: 0;
    }
}

/* Exit Button */
.exit-shop {
    top: 8%;
    left: 8%;
}

/* Buttons */
.door-btn {
    top: 21.5%;
    left: 23%;
    width: 11%;
    transition: transform 0.5s ease, filter 0.2s;
    transform-origin: left center;
}

.door-btn:hover {
    transform: translate(-50%, -50%) perspective(1000px) rotateY(-50deg);
}

.stuff-btn {
    top: 40.55%;
    left: 52%;
    width: 17.2%;
}

.shop-item1-btn {
    top: 14.7%;
    left: 40.5%;
    width: 20%;
    z-index: 3;
}

.shop-item2-btn {
    top: 15.5%;
    left: 54.5%;
    width: 13.7%;
    z-index: 3;
}

.shop-item3-btn {
    top: 16%;
    /* Placeholder position */
    left: 68%;
    width: 12%;
    z-index: 3;
}

.shop-item1-btn:hover,
.shop-item2-btn:hover,
.shop-item3-btn:hover {
    transform: translate(-50%, -50%) scale(1.1) rotate(0deg);
}

.shop-keep {
    position: absolute;
    top: 21.5%;
    left: 55%;
    width: 20%;
    z-index: 4;
    pointer-events: none;
    /* specific request was just to add image, assuming non-interactive for now */
}

/* Flower 1 */
.flower-1 {
    position: absolute;
    top: 77.7%;
    left: 85.2%;
    width: 1.1%;
    z-index: 2;
    transform: rotate(-40deg);
    transform-origin: center center;
}

.flower-1-static {
    width: 100%;
    /* Inherit parent width logic */
}

.flower-1-anim {
    position: absolute;
    top: 0%;
    left: -80%;
    width: 240%;
    z-index: 3;
}

.flower-1:hover {
    transform: rotate(-40deg) scale(1);
}

.flower-4:hover {
    transform: rotate(5deg) scale(1);
}

/* Flower 2 */
.flower-2 {
    position: absolute;
    top: 77.5%;
    left: 86.5%;
    width: 1.5%;
    z-index: 2;
    transform: rotate(-20deg);
    transform-origin: center center;
}

.flower-2:hover {
    transform: rotate(-20deg) scale(1);
}

.flower-2-static {
    width: 100%;
}

.flower-2-anim {
    position: absolute;
    top: -0;
    left: -25%;
    width: 150%;
    z-index: 3;
}

/* Flower 3 */
.flower-3 {
    position: absolute;
    top: 76%;
    left: 88%;
    width: 1.5%;
    z-index: 2;
    transform: rotate(-15deg);
    transform-origin: center center;
}

.flower-3:hover {
    transform: rotate(-15deg);
}

.flower-3-static {
    width: 100%;
}

.flower-3-anim {
    position: absolute;
    top: 0;
    left: -40%;
    width: 190%;
    z-index: 3;
}

/* Flower 4 */
.flower-4 {
    position: absolute;
    top: 66.7%;
    left: 89.4%;
    width: 2%;
    /* Flower 4 seemed larger in file size, maybe needs unique width? */
    z-index: 2;
    transform: rotate(5deg);
    transform-origin: center center;
}

.flower-4-static {
    width: 100%;
}

.flower-4-anim {
    position: absolute;
    top: 0;
    left: -40%;
    width: 190%;
    z-index: 3;
}



.flower-cluster {
    position: absolute;
    top: 60%;
    left: 75%;
    width: 25%;
    height: 40%;
    z-index: 1;
    /* Below flowers (2) */
    touch-action: none;
    /* Disable scroll in this zone */
    /* background: rgba(255, 0, 0, 0.2); Debugging */
}

.shop-flower {
    touch-action: none;
    /* Disable scroll on flowers themselves */
}


/* --- CONTACT PAGE --- */

/* Background Scaling */
/* Image Dimensions: 5204 x 4060, Aspect Ratio: 1.2818 */
@media (min-aspect-ratio: 4205/3310) {
    .contact-bg {
        width: 100vw;
        height: auto;
        min-width: 0;
        min-height: 0;
    }
}

@media (max-aspect-ratio: 4205/3310) {
    .contact-bg {
        width: auto;
        height: 100vh;
        min-width: 0;
        min-height: 0;
    }
}

/* Exit Button */
.exit-contact {
    top: 8%;
    left: 8%;
}

.contact-desk {
    position: absolute;
    top: 64%;
    left: 70.7%;
    width: 31.8%;
    transform: translate(-50%, -50%);
    z-index: 2;
}





.cardinal-head-contact {
    position: absolute;
    top: 62%;
    left: 72%;
    width: 10%;
    transform: translate(-50%, -50%) rotate(-45deg);
    transform-origin: bottom center;
    transition: transform 0.5s ease-out;
    z-index: 1;
}

.hola-btn {
    top: 96.3%;
    left: 23.4%;
    width: 12%;
    z-index: 5;
}

/* Social Icons Row */
.youtube-btn {
    top: 43%;
    left: 26%;
    width: 8%;
    z-index: 5;
}

.patreon-btn {
    top: 55%;
    left: 26%;
    width: 7%;
    z-index: 5;
}

.instagram-btn {
    top: 43%;
    left: 40%;
    width: 6%;
    z-index: 5;
}

.tiktok-btn {
    top: 55%;
    left: 40%;
    width: 6%;
    z-index: 5;
}

.email-btn {
    top: 67%;
    left: 32%;
    width: 8%;
    z-index: 5;
}

.contact-info-box {
    position: absolute;
    top: 80%;
    left: 32%;
    transform: translate(-50%, -50%);
    z-index: 6;
    /* On top of email button if it's there */
    border: 3px solid #f6e45c;
    /* Bright yellow border */
    background-color: rgba(62, 39, 35, 0.95);
    /* More opaque */
    color: #fff;
    padding: 1.5%;
    /* Scalable padded */
    border-radius: 12px;
    font-family: 'BodyFont', sans-serif;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
    width: 30%;
    /* Scalable width */
    min-width: 0;
    /* Remove fixed min-width */
    line-height: 1.6;
    /* Improve readability */
}

.contact-info-box p {
    margin: 3% 0;
    /* Scalable margin */
    font-size: 1.1vw;
    /* Scalable font */
    letter-spacing: 0.5px;
}

@media (max-aspect-ratio: 4205/3310) {
    .contact-info-box p {
        font-size: 1.4vh;
        /* Maintain size relative to height-locked background */
    }
}

/* Talking Animation (Slide Down-Left, Shake, Return) */
/* TALKING LOOP: Child Image Bobbing (Relative) */
@keyframes talk-bob-child {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-5deg);
    }
}

.talking {
    display: block;
    /* 1. Move to the "OUT" position (Transition handled by base class) */
    transform: translate(-100%, +27%) rotate(-55deg);
    /* NO animation on parent to avoid conflict with transition */
}

.talking img {
    /* 2. Child image handles the bobbing */
    /* Add delay (0.5s) to wait for slide-out to finish */
    animation: talk-bob-child 0.2s ease-in-out 0.5s infinite alternate;
}

/* Physics Apple */
.physics-apple {
    display: none;
    /* Hidden until activated */
    position: fixed;
    top: 90%;
    /* Start somewhere visible */
    left: 90%;
    width: 3.5%;
    height: auto;
    z-index: 1000;
    cursor: grab;
    user-select: none;
    touch-action: none;
    /* Prevent scroll on mobile drag */
}

.physics-apple:active {
    cursor: grabbing;
}

/* --- MODAL STYLES --- */

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    font-weight: bold;
}

.modal-content {
    background-color: #1a4014;
    margin: 15% auto;
    padding: 20px;
    border: 8px solid #6a4001;
    width: fit-content;
    max-width: 90vw;
    height: auto;
    max-height: 80vh;
    overflow-y: auto;
    border-radius: 0px;
    text-align: center;
    position: relative;
    color: white;
    font-family: 'BodyFont', sans-serif;
    pointer-events: auto;
}

.modal-content h2 {
    font-family: 'HeaderFont', serif;
    font-size: 2em;
    margin-bottom: 15px;
}

.close-btn {
    color: #ffffff;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    top: 10px;
    right: 20px;
}

.close-btn:hover,
.close-btn:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.three-column-layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    align-items: start;
    margin-top: 20px;
    gap: 10px;
}

.four-column-layout {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    gap: 40px;
}

.two-column-layout {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 20px;
    gap: 40px;
}

.single-column-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    font-size: 0.9em;
    min-width: 300px;
    max-width: 350px;
}

.modal-content .teacher-name {
    font-size: 20px;
    color: #f6e45c;
    margin-top: 0;
    margin-bottom: 10px;
    font-family: 'HeaderFont', serif;
}


/* --- WATCH PAGE --- */

/* Background Scaling */
/* Image Dimensions: 4379 x 3415, Aspect Ratio: 1.28228 */
@media (min-aspect-ratio: 4379/3415) {
    .watch-bg {
        width: 100vw;
        height: auto;
        min-width: 0;
        min-height: 0;
    }
}

@media (max-aspect-ratio: 4379/3415) {
    .watch-bg {
        width: auto;
        height: 100vh;
        min-width: 0;
        min-height: 0;
    }
}

/* Exit Button */
.exit-watch {
    top: 8%;
    left: 8%;
}

/* Watch Page Images */
.curtain-left {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 17%;
    z-index: 3;
}

.curtain-right {
    position: absolute;
    top: -1%;
    left: 84%;
    width: 15.6%;
    z-index: 3;
}

.chair-skater-btn {
    top: 93.55%;
    left: 84.2%;
    width: 11.2%;
    z-index: 3;
}

/* .chair-skater-btn:hover~.skater-behind {}  -- REMOVED per user request for class-based control */
.skater-behind.rising {
    transform: translate(-0%, -56%);
}

.skater-behind.falling {
    transform: translate(0, 0);
    transition: transform 0.2s ease-in;
}

.no-skating {
    position: absolute;
    top: 40%;
    left: 80%;
    width: 10%;
    z-index: 1;
}

.skater-behind {
    position: absolute;
    top: 90%;
    left: 82%;
    width: 4%;
    z-index: 2;
    z-index: 2;
    transition: transform 4s ease;
    /* Required for rising animation */
    will-change: transform;
}

.skater-flat {
    position: absolute;
    top: 44%;
    left: 95%;
    width: 10%;
    z-index: 2;
    display: none;
    transition: transform 8s ease;
}

/* Video Container */
.video-container {
    position: absolute;
    top: 10%;
    left: 25%;
    width: 50%;
    height: 35%;
    z-index: 1;
    /* Behind skater (z-index 2) */
    /* Helper border */
}

.police-car {
    position: absolute;
    top: 50%;
    left: 95%;
    width: 20%;
    z-index: 2;
    display: none;
    transition: transform 8s ease;
}

.police-car img {
    /* Default correction to make it look flat */
    transform: rotate(-2deg);
    transform-origin: 85% 90%;
    /* Pivot around back wheel */
    transition: transform 0.5s ease;
}

/* Wheelie Animation */
@keyframes wheelie {
    0% {
        transform: rotate(-2deg);
    }

    30% {
        transform: rotate(10deg);
        /* Lift up */
    }

    60% {
        transform: rotate(-6deg);
        /* Bounce down */
    }

    80% {
        transform: rotate(-1deg);
        /* Rebound */
    }

    100% {
        transform: rotate(-2deg);
        /* Back to flat */
    }
}

.wheelie-anim {
    animation: wheelie 1s ease-out forwards;
    animation-delay: 0.2s;
}

.skater-flat img {
    transition: transform 0.6s ease;
}

.skater-behind.falling {
    transition: transform 0.2s ease-in !important;
    transform: translate(0, 0) !important;
}



/* --- CONTACT PAGE --- */

/* --- PAGE TRANSITION --- */
.page-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    z-index: 2147483647;
    /* Max Z-Index to ensure it's on top */
    opacity: 1;
    pointer-events: all;
    transition: opacity 0.3s ease;
    /* Faster fade to black */
}

.page-transition.hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 2.0s ease;
    /* Even slower fade in */
}

/* Loading Animation (Egg GIFs) */
.loading-eggs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    /* Hidden by default */
    flex-direction: column;
    align-items: center;
    gap: 0;
    opacity: 0;
    /* Start invisible for fade-in effect */
    transition: opacity 0.6s ease;
    pointer-events: none;
}

/* Only show eggs when transition overlay is visible (not hidden) */
.page-transition:not(.hidden) .loading-eggs {
    display: flex;
}

.loading-eggs.visible {
    opacity: 1;
}

.loading-eggs.fading-out {
    opacity: 0;
}

.loading-egg-gif {
    width: 400px;
    height: auto;
}

/* Audio Interaction Styles */
@keyframes pulse-brightness {
    0% {
        filter: brightness(1) drop-shadow(0 0 0px rgba(255, 255, 255, 0));
    }

    50% {
        filter: brightness(1.5) drop-shadow(0 0 10px rgba(255, 255, 255, 0.5));
    }

    100% {
        filter: brightness(1) drop-shadow(0 0 0px rgba(255, 255, 255, 0));
    }
}

.active-instrument img {
    animation: pulse-brightness 2s infinite ease-in-out;
}



/* Dynamic Popup in Listening Room */
/* Dynamic Popup in Listening Room */
.dynamic-popup {
    position: absolute;
    top: 55%;
    left: 56%;
    width: 12%;
    /* decreased further (was 20%) */
    transform: scale(0);
    /* Start scaled down */
    transform-origin: bottom left;
    /* Grow from bottom left */
    z-index: 10;
    pointer-events: none;
}

.popup-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Animation Class */
.popup-animate {
    animation: popup-grow-shrink 2.0s forwards ease-in-out;
    /* Reduced to 2s */
}

@keyframes popup-grow-shrink {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    20% {
        /* Overshoot to 1.1 */
        transform: scale(1.1);
        opacity: 1;
    }

    30% {
        /* Settle back to 1.0 */
        transform: scale(1);
        opacity: 1;
    }

    75% {
        /* Hold */
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0);
        opacity: 0;
    }
}

/* --- MOBILE LAYOUT --- */

/* Default: Hide Mobile View */
.mobile-view {
    display: none;
}

/* Mobile Breakpoint */
@media only screen and (max-width: 768px) {

    /* Hide Desktop View */
    .desktop-view {
        display: none !important;
    }

    /* Show Mobile View */
    .mobile-view {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        /* Start from top to allow scrolling */
        align-items: center;
        width: 100vw;
        min-height: 100dvh;
        /* Allow growing */
        height: auto;
        /* Remove internal scrolling, let body handle it */
        background-image: url('images/Home/homeBG_mobile.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        color: white;
        font-family: 'HeaderFont', sans-serif;
        text-align: center;
        position: relative;
        overflow-y: visible;
        /* Enable scroll */
        -webkit-overflow-scrolling: touch;
        /* Smooth scroll on iOS */
    }

    .mobile-post {
        position: absolute;
        top: 10%;
        height: 90%;
        left: 50%;
        transform: translateX(-50%);
        width: 15%;
        object-fit: fill;
        z-index: 1;
    }

    .mobile-bird {
        position: absolute;
        top: 3%;
        left: 50%;
        transform: translateX(-50%) perspective(800px) rotateY(0deg);
        transform-style: preserve-3d;
        width: 90%;
        height: auto;
        z-index: 9999;
        cursor: pointer;
        touch-action: pan-y;
    }

    .mobile-menu {
        display: flex;
        flex-direction: column;
        gap: 0px;
        z-index: 2;
        position: relative;
        /* In flow */
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        align-items: center;
        margin-top: 60%;
        /* Position lower to make room for bird image, uses % for consistent scaling */
        padding-bottom: 150px;
        /* Extra space at bottom */
    }

    .mobile-menu h1 {
        font-size: 3em;
        margin-bottom: 20px;
        color: #f0e68c;
    }

    /* ... skipping intervening lines if not editing ... actually I need to target .mobile-btn-img which is further down */

    /* --- LESSONS PAGE MOBILE --- */

    /* Hide Desktop Background and Instruments */
    .lessons-bg,
    .djembe-img,
    .piano-img,
    .bass-img,
    .guitar-img,
    .microphone-img {
        display: none !important;
    }

    /* Mobile Background */
    .lessons-wrapper {
        /* background-image: url('images/Lessons/lessonsBG_mobile.jpeg'); Removed favor of shim */
        background: none;
        width: 100%;
        /* Fix to page bounds */
        overflow-x: hidden;
        /* Prevent horizontal scroll */
        height: auto;
        /* Height defined by image shim */
        min-height: 0;
        position: relative;
        /* Enable absolute positioning for children */
        display: block;
        /* Remove flex column */
    }

    .mobile-bg-img {
        display: block;
        width: 100%;
        height: auto;
    }

    /* Re-flow Chalk Buttons */
    .teachers-btn,
    .bass-btn,
    .drums-btn,
    .guitar-btn,
    .microphone-btn,
    .piano-btn {
        position: static;
        width: 40%;
        /* Much smaller */
        max-width: 200px;
        margin: 0;
        transform: none !important;
        /* Reset any transforms */
    }

    /* Individual Button Positioning (Placeholders) */
    .teachers-btn {
        position: absolute !important;
        top: 10%;
        left: 20%;
        /* Centered */
        transform: translateX(-50%);
        width: 70%;
        /* Large but not overflowing */
        max-width: none;
        /* Override the 200px limit */
    }

    .bass-btn {
        position: absolute !important;
        top: 20%;
        left: 10%;
        width: 40%;
    }

    .drums-btn {
        position: absolute !important;
        top: 25%;
        left: 60%;
        width: 25%;
    }

    .guitar-btn {
        position: absolute !important;
        top: 35%;
        left: 15%;
        width: 35%;
    }

    .microphone-btn {
        position: absolute !important;
        top: 45%;
        left: 60%;
        width: 20%;
    }

    .piano-btn {
        position: absolute !important;
        top: 50%;
        left: 17%;
        width: 35%;
    }

    .exit-lessons {
        top: auto;
        top: 10%;
        left: auto;
        left: 10%;
        width: 15%;
        max-width: 80px;
    }

    .mobile-link {
        /* Remove text button styles */
        background: none;
        border: none;
        padding: 0;
        margin: 10px 0;
        cursor: pointer;
        transition: transform 0.2s;
        display: block;
        width: 100%;
        /* Ensure it wraps the image */
    }

    .mobile-btn-img {
        width: 60%;
        /* Increased from 30% */
        height: auto;
        display: block;
        margin: 0 auto;
        /* Center image */
    }

    .mobile-contact-btn {
        font-size: 3em;
        color: rgb(255, 128, 17);
        text-decoration: none;
        padding: 10px 20px;
        /* Reduced padding */
        width: fit-content;
        align-self: center;
        border: 2px solid rgba(255, 255, 255, 0.5);
        border-radius: 10px;
        background-color: #3e2723;
        /* Dark Brown, opaque */
        margin-top: 20px;
        /* Separation from images */
    }

    .mobile-link:active {
        transform: scale(0.95);
        background-color: transparent;
        /* Ensure no background on click */
    }

    .mobile-contact-btn:active {
        background-color: rgba(255, 255, 255, 0.2);
    }

    /* --- MOBILE MODAL LAYOUT --- */
    .modal-content {
        width: 80%;
        /* Reduced for better framing */
        max-height: 85vh;
        overflow-y: auto;
        /* Enable vertical scrolling */
        padding: 20px;
    }

    .two-column-layout,
    .three-column-layout,
    .four-column-layout {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px;
    }

    .single-column-layout {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100%;
    }

    .two-column-layout>div,
    .three-column-layout>div,
    .four-column-layout>div {
        width: 100% !important;
        text-align: center !important;
    }

    /* Override inline styles from script.js */
    .modal-content img {
        float: none !important;
        margin: 0 auto 15px auto !important;
        display: block;
        max-width: 100%;
        height: auto;
    }

    .teacher-name {
        text-align: center !important;
    }

    .modal-content ul {
        text-align: left;
        /* Keep list items left-aligned for readability */
        display: inline-block;
        /* Center the list block itself */
    }
}


/* --- CONTACT PAGE MOBILE --- */
@media only screen and (max-width: 768px) {

    /* Hide Desktop Background and Elements */
    .contact-bg,
    .contact-desk,
    .cardinal-head-contact,
    .hola-btn {
        display: none !important;
    }

    /* Mobile Background */
    .contact-wrapper {
        /* background-image: url('images/Contact/contactBG_mobile.png'); Removed favor of shim */
        background: none;
        width: 100%;
        /* Fix to page bounds */
        overflow-x: hidden;
        /* Prevent horizontal scroll */
        height: auto;
        min-height: 0;
        position: relative;
    }

    /* Grid/Flex Layout for Social Buttons */
    /* We'll use absolute positioning to place them in the "lower half" */

    .youtube-btn {
        position: absolute;
        top: 60%;
        left: 20%;
        width: 20%;
        transform: translate(-50%, -50%);
    }

    .instagram-btn {
        position: absolute;
        top: 60%;
        left: 50%;
        width: 18%;
        transform: translate(-50%, -50%);
    }

    .patreon-btn {
        position: absolute;
        top: 60%;
        left: 80%;
        width: 20%;
        transform: translate(-50%, -50%);
    }

    .tiktok-btn {
        position: absolute;
        top: 75%;
        left: 35%;
        width: 20%;
        transform: translate(-50%, -50%);
    }

    .email-btn {
        position: absolute;
        top: 75%;
        left: 65%;
        width: 20%;
        transform: translate(-50%, -50%);
    }

    .contact-info-box {
        position: absolute;
        top: 90%;
        /* Moved up to avoid overflowing bottom */
        left: 50%;
        transform: translate(-50%, -50%);
        width: 85%;
        font-size: 1.2em;
        /* Keep readable text on mobile (em is better relative to body than vw here usually, or fixed) */
        padding: 5%;
        border-color: rgb(255, 128, 17);
        border-width: 2px;
    }

    .contact-info-box p {
        font-size: 1em;
        /* Reset/Override the desktop 1.1vw */
        margin: 10px 0;
    }

    .exit-contact {
        top: 5%;
        bottom: auto;
        left: 10%;
        right: auto;
        width: 15%;
        max-width: 80px;
    }
}