/* ==========================================================================
   1. RESET AND LAYOUT ENGINE
   ========================================================================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
@font-face {
    font-family: LatoThin;
    src: url(../fonts/Lato-Thin.ttf);
}

@font-face {
    font-family: LatoLight;
    src: url(../fonts/Lato-Light.ttf);
}
html, body {
    width: 100%;
    height: 100dvh; 
    overflow: hidden;
    font-family: 'LatoLight', Verdana, sans-serif;
    background: #94618E; 
    color: #ffffff;
}

.axaTag {
    color: #49274A;
    font-weight: bold;
    font-size: 16px;
}

.app-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    background-color: #49274A;
}

.logo img {
    height: 80px;
    margin-top: 5px;
    filter: brightness(0) saturate(100%) invert(88%) sepia(12%) saturate(220%) hue-rotate(330deg);
    opacity: 0.7;
}

#vidPromoL {border-radius: 20px; pointer-events: none;  width: 100%; max-width: 100%; height: auto; display: block; object-fit: cover;}

nav {
    display: inline-block; 
    margin-right: 50px;
}

nav a img {    
    width: 40px;
    height: 40px;
    filter: brightness(0) saturate(100%) invert(88%) sepia(12%) saturate(220%) hue-rotate(330deg);
    margin-left: 10px;
    opacity: 0.7;
    transition: opacity 0.3s;
}

nav a img:hover { opacity: 1; }

main {
    flex-grow: 1;
    min-height: 0; 
    display: flex;
    flex-direction: row; 
    gap: 1.5rem;
    padding: 1.5rem;
}

.left-panel {
    flex: 0 0 33%;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background: rgba(255, 255, 255, 0.03);*/
    border-radius: 12px;
    padding: 1rem;
}

.right-panel {
    flex: 0 0 66%;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background: rgba(255, 255, 255, 0.05); */
    border-radius: 12px;
    overflow: hidden; 
    position: relative;
    container-type: size; 
}

.myLyrics, .myBio {
    background-color: rgba(248,238,231,.7);
    color: #000;
    padding: 20px;
    border-radius: 25px;
    line-height: 1.6;
    text-align: left;
    border: 1px solid #49274A;
}


footer {
    flex-shrink: 0;
    display: flex;
    align-items: center; 
    padding: 0 20px;
    color: #94618E;
    background-color: #49274A;
    height: 50px;
}

.footer-text {
    display: inline-block;
    width: 50%;
}



/* ==========================================================================
   2. LEFT ART CARD ENGINE
   ========================================================================== */
.art-card {
    width: 70%;          
    max-height: 95%;     
    display: block;      
    overflow: hidden;    
    border-radius: 40px; 
}

.art-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.desktop-art { display: block; }
.mobile-art { display: none; }

.art-card:hover {
    box-shadow: 0 0 25px rgba(0,180,255,0.45);
}

/* ==========================================================================
   3. INTEGRATED 3D CAROUSEL CONTROLLER
   ========================================================================== */
:root {
    --carousel-transition-duration: 250ms;
    --carousel-transition-ease: ease-out;
    --carousel-bg-color-rgb: 73, 39, 74; 
    --carousel-shadow-color-rgb: 148, 97, 142;
--carousel-diameter: 700px;        
--carousel-item-width: 200px;
--carousel-item-height: 200px;
    --carousel-item-hover-effect: 1.075;
    --carousel-item-reflection-blur: 0.15rem;
    --carousel-item-empty-color-rgb: 255, 255, 255;
    --carousel-item-glow-color-rgb: 255, 255, 255;
    --carousel-item-glow-size: 3rem;
    --carousel-3d-perspective: 1200px;
    --carousel-3d-perspective-origin: 50% 20%;
    --carousel-control-button-width: 1.25rem;
    --carousel-control-button-height: 4rem;
    --carousel-control-color-rgb: 255, 255, 255;
    --carousel-animation-duration: 40s;
    --carousel-animation-play-state: running;
    --carousel-direction-animation-play-state: paused;
}

.carousel {
    --_diameter: var(--carousel-diameter);
    --_radius: calc(var(--_diameter) / 2);
    --_item-width: var(--carousel-item-width);
    --_item-height: var(--carousel-item-height);
    perspective: var(--carousel-3d-perspective);
    perspective-origin: var(--carousel-3d-perspective-origin);
    width: var(--_diameter);
    height: var(--_diameter);
    position: relative;
}

.carousel .carousel-control-button {
    --_width: var(--carousel-control-button-width);
    --_height: var(--carousel-control-button-height);
    z-index: 10;
    width: var(--_width);
    height: var(--_height);
    background-color: rgb(var(--carousel-control-color-rgb));
    opacity: 0.2;
    transition: opacity var(--carousel-transition-duration) var(--carousel-transition-ease);
    position: absolute;
}
.carousel .carousel-control-button:hover { opacity: 0.4; }
.carousel .carousel-control-button:has(input:checked) { opacity: 0.8; }
.carousel .carousel-control-button input {
    appearance: none;
    -webkit-appearance: none;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.carousel .carousel-control-button.left {
    clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
    top: calc(var(--_radius) - var(--_height) / 2);
    left: calc(var(--_radius) * -1); 
}
.carousel:has(.carousel-control-button.left input:checked) {
    --carousel-direction-animation-play-state: running;
}

.carousel .carousel-control-button.right {
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    top: calc(var(--_radius) - var(--_height) / 2);
    right: calc(var(--_radius) * -1);
}
.carousel:has(.carousel-control-button.right input:checked) {
    --carousel-direction-animation-play-state: paused;
}

.carousel .carousel-rotation-direction {
    --_direction-animation-play-state: var(--carousel-direction-animation-play-state);
    --_z: calc(var(--_radius) * -1);
    transform: translateZ(var(--_z));
    transform-style: preserve-3d;
    animation: carousel-rotation-reverse var(--carousel-animation-duration) reverse linear infinite var(--_direction-animation-play-state);
    transition: all var(--carousel-transition-duration) var(--carousel-transition-ease);
    width: 100%;
    height: 100%;
}

@keyframes carousel-rotation-reverse {
    from {transform: translateZ(var(--_z)) rotateY(0deg);}
    to {transform: translateZ(var(--_z)) rotateY(360deg);}
}

@keyframes carousel-rotation-normal {
    from {transform: rotateY(0deg);}
    to {transform: rotateY(360deg);}
}

.carousel .carousel-item-wrapper {
    transform-style: inherit;
    width: inherit;
    height: inherit;
    list-style-type: none;
    position: relative;
    animation: carousel-rotation-normal var(--carousel-animation-duration) normal linear infinite var(--carousel-animation-play-state);
    transition: all var(--carousel-transition-duration) var(--carousel-transition-ease);
}

.carousel .carousel-rotation-direction:has(.carousel-item:hover) {
    --carousel-animation-play-state: paused;
    --_direction-animation-play-state: paused;
}

.carousel .carousel-item {
    --_width: var(--_item-width);
    --_height: var(--_item-height);
    --_rotation: calc(360 / var(--_num-elements) * var(--_index) * 1deg);
    left: calc(var(--_radius) - var(--_item-width) / 2);
    top: calc(var(--_radius) - var(--_item-height) / 2);
    transform: rotateY(var(--_rotation)) translateZ(var(--_radius));
    transform-style: inherit;
    width: var(--_width);
    height: var(--_height);
    transition: all var(--carousel-transition-duration) var(--carousel-transition-ease);
    box-shadow: 0 0 var(--carousel-item-glow-size) transparent;
    position: absolute;
}

.carousel .carousel-item:hover {
    box-shadow: 0 0 var(--carousel-item-glow-size) rgb(var(--carousel-item-glow-color-rgb));
    transform: rotateY(var(--_rotation)) translateZ(calc(var(--_radius) * var(--carousel-item-hover-effect)));
}

.carousel .carousel-item a {
    display: block;
    width: inherit;
    height: inherit;
    text-indent: -9999px;
    background-color: rgba(var(--carousel-item-empty-color-rgb), 0.5);
    background-image: var(--_image-url);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: filter var(--carousel-transition-duration) var(--carousel-transition-ease);
    filter: grayscale(100%);
    border-radius: 8px;
}

.carousel .carousel-item:hover a { filter: grayscale(0%); }

.carousel .carousel-item::before {
    content: '';
    width: inherit;
    height: inherit;
    background-color: rgba(var(--carousel-item-empty-color-rgb), 0.5);
    background-image: 
        linear-gradient(to top, rgba(var(--carousel-bg-color-rgb), 0.25) 0%, rgba(var(--carousel-bg-color-rgb), 1.0) 75%), 
        var(--_image-url);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    pointer-events: none;
    filter: blur(var(--carousel-item-reflection-blur)) grayscale(100%);
    transition: filter var(--carousel-transition-duration) var(--carousel-transition-ease);
    transform-style: inherit;
    transform-origin: center bottom;
    transform: rotateX(90deg) rotateZ(180deg) rotateY(180deg);
    position: absolute;
    border-radius: 8px;
    opacity: 0.4;
}

.carousel .carousel-item:hover::before { filter: blur(var(--carousel-item-reflection-blur)) grayscale(0%); }

.carousel .carousel-ground {
    --_width: var(--_diameter);
    --_height: var(--_diameter);
    --_rotation: 90deg;
    left: calc(var(--_radius) - var(--_width) / 2);
    top: calc(var(--_radius) - var(--_height) / 2);
    transform: rotateX(var(--_rotation)) translateZ(calc(var(--_item-height) / -2));
    width: var(--_width);
    height: var(--_height);
    border-radius: 50%;
    background: radial-gradient(rgba(var(--carousel-shadow-color-rgb), 0.75) 15% , rgba(var(--carousel-bg-color-rgb), 0) 60%);
    opacity: 0.5;
    transition: opacity var(--carousel-transition-duration) var(--carousel-transition-ease);
    position: absolute;
}

.carousel .carousel-item-wrapper:has(.carousel-item:hover) .carousel-ground { opacity: 0.75; }

/* ==========================================================================
   4. MOBILE / PORTRAIT RESPONSIVE BREAKPOINT
   ========================================================================== */
@media (max-width: 768px), (orientation: portrait) {
    main {
        flex-direction: column; 
    }
/* Standardizes exact height equality between upper and lower stacked view boxes */
    
.left-panel, .right-panel {
    flex: 1 1 0px;
    width: 100%;
    height: calc(50% - 0.75rem);
}
.desktop-art { 
    display: none !important; 
}
.mobile-art { 
    display: block !important; 
}
.art-card {
    width: auto;
    height: 75%;
    aspect-ratio: 1 / 1;
}
.myBio {
    font-size: 12px;
}
    .axaTag {font-size: 12px;}
:root 
    {--carousel-diameter: 38cqh;
        --carousel-item-width: 8cqh;
        --carousel-item-height: 12cqh;
}
.carousel .carousel-control-button.left {
    left: calc(var(--_radius) * -0.7); 
}
.carousel .carousel-control-button.right {
    right: calc(var(--_radius) * -0.7); }
}

/* ==========================================================================
   4. MOBILE RESPONSIVENESS AND NO-SCROLL LAYOUT Engine
   ========================================================================== */
@media (max-width: 768px) {
    /* Prevent vertical scrolling across the layout engine */
    main {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem;
        height: 100%;
        overflow: hidden;
    }
    header {
        height: 80px; 
        padding: 0 10px;
    }
    .logo img {
        height: 50px;
    }
    nav {
        margin-right: 10px;
    }
    nav a img {    
        width: 28px;
        height: 28px;
    }

    /* Top Panel: Strict 40% viewport height allocation */
    .left-panel {
        flex: 0 0 40%;
        width: 100%;
        padding: 0.25rem;
    }

    /* Bottom Panel: Strict 60% viewport height allocation */
    .right-panel {
        flex: 0 0 60%;
        width: 100%;
        padding: 0;
    }

    /* Pull the carousel items into mobile viewport boundaries */
    :root {
--carousel-diameter: 350px;
--carousel-item-width: 100px;
--carousel-item-height: 100px;     
        --carousel-3d-perspective: 900px;
        
        /* ADJUSTED: Moves the camera point up, shifting the center of the ring up */
        --carousel-3d-perspective-origin: 50% 15%; 
    }
    
    /* Ensure the structural core stays bound to its frame container */
    .carousel {
        width: 100%;
        height: 100%;
        
        /* ADDED: Forces the entire 3D calculation space up away from the footer */
        transform: translateY(-15%); 
    }
}

/* ==========================================================================
   5. SMART LINK CARD COMPONENT ENGINE
   ========================================================================== */
.smart-link-card {
    max-width: 500px;
    width: 100%;
    margin: 2rem auto;
    background: transparent; /* Seamless blend over your purple layout background */
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Primary Dark Profile Headboard */
.card-header {
    background-color: rgba(30, 30, 30, 0.75);
    border-radius: 12px;
    padding: 2.5rem 1.5rem;
    text-align: center;
}

.album-artwork {
    width: 180px;
    height: 180px;
    border-radius: 8px;
    object-fit: cover;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.song-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.artist-name {
    font-size: 1rem;
    color: #b3b3b3;
    letter-spacing: 0.5px;
}

/* Custom Embedded Audio Player Track Layout */
.audio-player-container {
    background-color: rgba(30, 30, 30, 0.75);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.mp3-icon-badge {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background-color: #282828;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mp3-icon-badge img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.audio-native-frame {
    flex-grow: 1;
}

/* Resizing and cleaning up the browser standard audio layout appearance */
.audio-native-frame audio {
    width: 100%;
    height: 40px;
    display: block;
}

/* Platform Link Row Grid */
.links-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.platform-row {
    display: flex;
    align-items: center;
    background-color: rgba(30, 30, 30, 0.75);
    border-radius: 12px;
    padding: 14px 20px;
    text-decoration: none;
    color: #ffffff;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Hover brightening effect */
.platform-row:hover {
    background-color: rgba(50, 50, 50, 0.85); /* Smooth tint boost on interactive focus */
}

.platform-row:active {
    transform: scale(0.995); /* Slight micro-press response */
}

.platform-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin-right: 16px;
    flex-shrink: 0;
}

.platform-label {
    flex-grow: 1;
    font-size: 1rem;
    font-weight: 500;
}

.arrow-indicator {
    font-size: 0.7rem;
    color: #888888;
    opacity: 0.7;
}

/* Create the overlay structure dynamically without needing to edit your HTML */
@media screen and (max-device-width: 932px) and (orientation: landscape) {
    /* Hide the entire broken website layout */
    .app-container {
        display: none !important;
    }

    /* Force the body to become the fullscreen message screen */
    body {
        background-color: #49274A !important; /* Matches your header/footer color */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        height: 100vh !important;
        width: 100vw !important;
        overflow: hidden !important;
        padding: 20px !important;
        text-align: center !important;
    }

    /* Generate the text using CSS content injection */
    body::after {
        content: "Please rotate your device back to Portrait mode to view this site properly. 📱✨";
        font-family: 'Segoe UI', sans-serif;
        color: #ffffff;
        font-size: 1.25rem;
        font-weight: 500;
        line-weight: 1.5;
        max-width: 80%;
    }
}
/* Footer Layout Base Rules */
.bandcamp-custom-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 16px !important;
  background-color: #3b2343 !important; /* Your deep plum color */
}

.footer-right {
  display: flex;
  align-items: center;
  gap: 12px; /* Clean spacing gaps */
}

/* Button & Link Styles */
.menu-trigger-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: #a38ea6;
}

.nav-link {
  color: #a38ea6;
  text-decoration: none;
}

.menu-trigger-btn:hover, .nav-link:hover {
  color: #ffffff;
}

/* The Isolated Floating Card */
.popup-card {
  position: fixed;
  bottom: 60px; /* Sits perfectly above the bar */
  right: 16px;
  width: auto;
  background-color: #94618E;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  z-index: 99999;
  
  /* Start completely hidden */
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* The Toggle Rule controlled by JavaScript */
.popup-card.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Internal Card Details */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}

.card-header h3 {
  margin: 0;
  font-size: 4px;
  color: #49274A ;
}

.card-close-x {
  background: none;
  border: none;
  font-size: 20px;
  color: #999;
  cursor: pointer;
}

.card-links {
  list-style: none;
  padding: 8px 16px;
  margin: 0;
}

.card-links li a {
  display: block;
  padding: 6px 0;
  font-size: 14px;
  color: #F8EEE7;
  text-decoration: none;
}