/* GLOBAL WEB FONT IMPORT */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');

:root {
    --stage-width: 1600px;
    --stage-height: 900px;

    /* How far the floating neon "Love In Flames" title sits from the
       top of the header. Was hardcoded as calc(680px - stage-height*0.12)
       with no mobile equivalent, so it drifted out of place whenever the
       hero text above it changed size at the mobile breakpoint. */
    --neon-title-top: 572px;

    /* Extra height added to the hero background/texture masks beyond
       #main-content's own height, and the amount #bottom-content gets
       pulled up to overlap it. Tuned for the 1440px desktop stage --
       gets rescaled for the narrower mobile stage below. */
    --content-mask-overlap: 150px;
}

@keyframes smoothEmerge {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background-color: #000000;
    overflow-x: hidden; 
    scroll-behavior: smooth;
}

body {
    background-image: url('../assets/texture.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    background-attachment: fixed;
    font-family: 'Inter', sans-serif;
    color: #ffffff;
    line-height: 1.6;
    margin: 0;
    overflow-x: hidden;
    position: relative;
    opacity: 0;
    animation: smoothEmerge 1.5s ease-out forwards;
}

#page-stage {
    width: var(--stage-width);
    transform-origin: top left;
    position: absolute;
    top: 0;
    left: 0;
}

#wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px 0 20px;
    position: relative;
    z-index: 3; 
}

#header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-bottom: none; 
    padding-bottom: 20px;
    margin-bottom: 40px;
    position: relative;
    z-index: 5; 
    height: 90px; 
}

.logo-group {
    position: absolute;
    top: calc(15px + 5%); 
    left: 50%; 
    transform: translateX(-50%);
    width: 100%; 
    display: flex;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
}

.vipress-title-logo {
    width: 75%; 
    max-width: 752px; 
    max-height: 191px; 
    height: auto;
    object-fit: contain;
    position: relative;
    left: 2%; 
    z-index: 5;
}

.album-title-graphic {
    position: absolute;
    top: var(--neon-title-top);
    left: 50%; 
    transform: translateX(-50%);
    width: 100%; 
    display: flex;
    justify-content: center; 
    margin-top: 0;
    z-index: 10;
    pointer-events: none; 
}

.neon-title {
    width: 40%; 
    max-height: none; 
    height: auto;
    object-fit: contain;
}

#main-content {
    display: flex;
    gap: 40px;
    margin-bottom: 0;
    padding-bottom: 50px;
    position: relative;
    z-index: 3;
    min-height: 750px; 
}

#main-content::before {
    content: "";
    position: absolute;
    top: calc(-1 * var(--content-mask-overlap) - 10%); 
    left: 50%;
    transform: translateX(-50%);
    width: var(--stage-width);
    height: calc(110% + var(--content-mask-overlap)); 
    z-index: -2; 
    background-image: url('../assets/album-art.jpg'); 
    background-repeat: no-repeat;
    background-size: cover; 
    background-position: center top; 
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 75%, transparent 100%);
}

#main-content::after {
    content: "";
    position: absolute;
    top: calc(-1 * var(--content-mask-overlap) - 10%);
    left: 50%;
    transform: translateX(-50%);
    width: var(--stage-width);
    height: calc(110% + var(--content-mask-overlap));
    z-index: -1; 
    pointer-events: none;
    background-image: url('../assets/secondary-texture.png'); 
    background-repeat: no-repeat;
    background-size: cover; 
    background-position: center top; 
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 0%, black 75%, transparent 100%);
    opacity: 0.25; 
}

.left-column {
    flex: 7; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 3;
}       

.main-art-container {
    display: none !important;
}

@keyframes hardPunchIn {
    0% { opacity: 0; transform: scale(1.4); }
    100% { opacity: 1; transform: scale(1); }
}

.poster-heading {
    font-size: 3.8rem;
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.05;
    color: #ffffff;
    margin-top: 110px; 
    margin-bottom: 40px;
    letter-spacing: -1px;
    text-shadow: 0px 4px 12px rgba(0, 0, 0, 0.8);
    text-align: left;
    max-width: 250px; 
    word-spacing: var(--stage-width); 
    white-space: normal;
    position: relative;
    z-index: 5; 
}

.poster-heading::first-line {
    word-spacing: normal;
}

.bam-text {
    display: inline-block; 
    opacity: 0; 
    animation: hardPunchIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.bam-text:nth-of-type(1) { animation-delay: 0.5s; } 
.bam-text:nth-of-type(2) { animation-delay: 0.9s; } 
.bam-text:nth-of-type(3) { animation-delay: 1.3s; } 
.bam-text:nth-of-type(4) { animation-delay: 1.7s; } 

.bite-container {
    position: relative;
    display: inline-block;
    word-spacing: normal; 
}

.bite-word {
    position: relative;
    z-index: 10;
    color: #ffffff;
}

.lipstick-stain {
    position: absolute;
    display: block;
    width: 140px; 
    height: auto;
    top: -15px; 
    left: -6px; 
    z-index: 20; 
    pointer-events: none; 
    opacity: 0;
    animation: kissStamp 0.15s ease-in forwards;
    animation-delay: 2.1s; 
}

@keyframes kissStamp {
    0% { opacity: 0; transform: scale(4) rotate(-25deg); }
    75% { opacity: 1; transform: scale(0.85) rotate(-15deg); }
    100% { opacity: 0.9; transform: scale(1) rotate(-15deg); }
}

.credits-list {
    margin-top: auto; 
    padding: 20px 0; 
    display: block; 
    position: relative;
    z-index: 5; 
}

.bottom-credits {
    margin-top: 0;
    margin-bottom: 25px; 
}

.ghost-block {
    visibility: hidden;
    pointer-events: none;
    user-select: none;
    opacity: 0;
}

.credits-list h3, .bio-text h3 { 
    color: #ed2c2e; 
    text-transform: uppercase; 
    margin-bottom: 12px; 
    font-size: 1.4rem; 
    font-weight: 700; 
}

.credits-list p, .credits-list a, .bio-text p { 
    color: #ccc; 
    font-size: 1rem; 
}

.credits-list p { margin-bottom: 8px; }
.credits-list a { text-decoration: none; display: block; transition: color 0.2s ease; }
.credits-list a:hover { color: #ffffff; }

.right-column {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 360px; 
    /* Horizontal nudge only -- purely visual, doesn't consume extra
       row width, so it's safe as a transform. The vertical nudge is
       margin-top instead of part of this transform: a transform never
       makes the parent grow to fit the shifted position, which let the
       tracklist visually spill past where #main-content thought it
       ended and into #bottom-content below it. margin-top is counted
       in layout, so #main-content actually reserves the space. */
    transform: translateX(140px); 
    margin-top: 70px;
    z-index: 20; 
}

.sidebar-title {
    font-size: 1.8rem;
    text-transform: uppercase;
    color: #ed2c2e;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center; 
    justify-content: flex-start;
    height: 90px; 
    padding-bottom: 0; 
}

.playlist {
    list-style: none;
    margin-top: -15px; 
}

.track-item {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 12px 5px;
    transition: background 0.2s ease;
}

.track-row {
    display: flex;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.track-item:hover { background-color: rgba(255, 255, 255, 0.05); }
.track-item.active { background-color: rgba(237, 44, 46, 0.15); }

/* Centered Play Button */
.play-btn {
    background: none;
    border: 2px solid #ed2c2e;
    color: #ed2c2e;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    cursor: pointer;
    margin-right: 15px;
    transition: all 0.2s ease;
    padding-left: 0;
    flex-shrink: 0;
}

.play-btn:hover, .track-item.active .play-btn { background-color: #ed2c2e; color: #fff; }

.track-num { font-weight: bold; margin-right: 15px; min-width: 25px; color: #888; }
.track-name { font-size: 1.05rem; transition: color 0.2s ease; }
.track-item.active .track-name { color: #ed2c2e; font-weight: bold; }

.inline-player {
    display: flex;
    align-items: center;
    gap: 12px; 
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0, 1, 0, 1), opacity 0.2s ease, margin-top 0.2s ease;
}

.track-item.active .inline-player {
    max-height: 60px; 
    opacity: 1;
    margin-top: 12px;
    padding: 5px 0;
}

.skip-controls-group { display: flex; gap: 6px; align-items: center; }

.skip-btn {
    background: none;
    border: 1px solid #444;
    color: #aaa;
    border-radius: 50%;
    width: 36px; 
    height: 36px; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.skip-btn:hover { border-color: #ed2c2e; color: #ed2c2e; }

.current-time, .total-duration { font-size: 0.8rem; color: #aaa; min-width: 32px; text-align: center; }

.duration-slider {
    flex: 1;
    max-width: 130px; 
    -webkit-appearance: none;
    appearance: none;
    background: #444;
    height: 4px;
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}

.duration-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ed2c2e;
    transition: transform 0.1s ease;
}

.duration-slider::-webkit-slider-thumb:hover { transform: scale(1.3); }

#bottom-content {
    display: flex;
    gap: 40px;
    margin-top: calc(-1 * var(--content-mask-overlap)); 
    padding: 80px 20px 40px 20px; 
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.45) 250px);
    position: relative;
    z-index: 5; 
    width: 100%; 
    justify-content: center;
    pointer-events: none; 
}

.gallery-col:first-of-type, .gallery-col:last-of-type {
    max-width: 580px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    pointer-events: auto; 
}

.bio-text { margin-top: 25px; padding: 20px 0 0; }

.fluid-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.8);
    position: relative;
    z-index: 5; 
}

img[src*="band-photo-1.jpg"] {
    width: 115%;
    margin-left: 0;
    margin-top: -25px;
    margin-bottom: auto;
}

img[src*="band-photo-2.jpg"] {
    width: 98%;
    margin-left: 0;
    margin-right: auto;
    margin-top: 20px;
}

#footer {
    display: flex;
    justify-content: center; 
    flex-wrap: wrap;
    gap: 50px; 
    margin-top: 0;
    padding: 30px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 5; 
    width: 100%;
}

#footer a {
    display: flex;
    align-items: center;
    gap: 8px; 
    color: #aaa;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s ease;
    position: relative;
}

#footer a:hover { color: #ed2c2e; }
#footer a svg { width: 18px; height: 18px; fill: currentColor; transition: fill 0.2s ease; }

/* ==============================
   MOBILE PROPORTIONAL OVERRIDE
   Keeps the exact desktop layout but changes proportions
   so it scales beautifully on small screens.
   ============================== */
@media (max-width: 850px) {
    :root {
        /* Narrows the canvas width, forcing the content to stack taller naturally.
           Widened from 950 to 1080 -- this is a pure "zoom out": the stage still
           always scales edge-to-edge to fill the viewport width (see scale.js),
           but a wider virtual canvas means everything on it renders proportionally
           smaller on the real screen. */
        --stage-width: 1080px; 

        /* Rescaled for the narrower mobile stage. The neon title has to clear
           BOTH the bottom of the heading (left column) and the bottom of the
           tracklist (right column) -- on mobile the tracklist is the taller of
           the two (8 rows at the bigger mobile type), so it's the real
           constraint. --neon-title-top is measured from the top of #header, so:
           150px (wrapper padding + header) + 70px (.right-column margin-top)
           + 90px (.sidebar-title height) + ~600px (8-row playlist at mobile
           type sizes) = ~910px before the tracklist is clear, plus breathing
           room. Nudge this one number if you want it sitting higher/lower --
           everything else on the page scales off it automatically. */
        --neon-title-top: 900px;
        --content-mask-overlap: 100px;
    }

    /* Adjust desktop columns to fit the narrower mobile canvas.
       No horizontal shift needed here (mobile stacks tighter), and the
       vertical 70px shift already comes from the base .right-column
       rule's margin-top -- it stays out of this override on purpose
       (see the comment there) so it keeps counting toward layout height
       instead of silently overflowing into #bottom-content again. */
    .right-column {
        width: 420px; 
        /* The base rule's translateX(140px) was tuned so the tracklist
           bleeds flush with the right edge of the 1440px desktop stage.
           On the narrower mobile stage the flex math already lands
           the column flush with the content edge on its own, so that same
           140px shift pushed the whole tracklist -- and the player bar
           inside each open track -- off the right edge of the screen.
           Cancel it out here. */
        transform: translateX(0);
    }

    .poster-heading {
        font-size: 5rem; /* Massive text so it's perfectly legible when scaled down */
        max-width: 450px;
        /* Was 50px, which put the heading's top ABOVE the tracklist's top
           (.right-column margin-top is 70px from the same origin) -- "WE" sat
           higher than "TRACKLIST". Bumped past 70px so the heading starts at
           or just below the tracklist, matching the desktop relationship
           where the tracklist sits above the heading, not the reverse. */
        margin-top: 90px;
    }

    /* The neon title inherits the desktop 40% width by default, which on the
       narrow mobile column made it tall enough to dip down into band-photo-2
       in the section below (there isn't much vertical room between the end
       of the tracklist and the start of the credits/photos section). Shrinking
       it keeps it legible while giving it enough clearance on both sides. */
    .neon-title {
        width: 33%;
    }

    /* The lipstick stamp's size/offsets were tuned against the 3.8rem
       desktop heading. Mobile's heading is 5rem (~1.316x bigger), so the
       word "BITE," it's meant to stamp over is proportionally wider too --
       without scaling the stamp up to match, it only covered the first
       couple letters instead of sitting over the whole word. */
    .lipstick-stain {
        width: 184px;
        top: -20px;
        left: -8px;
    }

    /* The 750px desktop min-height was tuned for the smaller desktop
       type. Mobile type below is 30-50% larger, so that same floor was
       too short for the real content height -- letting it size off the
       actual (taller) content keeps the background masks and the
       neon title lined up correctly instead of clipping/overlapping. */
    #main-content {
        min-height: 0;
    }

    /* Bump up all typography and buttons to survive the scale down */
    .credits-list h3, .bio-text h3 { font-size: 2.2rem; }
    .credits-list p, .credits-list a, .bio-text p { font-size: 1.5rem; line-height: 1.8; }
    .sidebar-title { font-size: 2.4rem; }
    .track-name { font-size: 1.6rem; }
    .track-num { font-size: 1.4rem; }
    
    .play-btn { width: 48px; height: 48px; font-size: 1.2rem; }
    .duration-slider { max-width: 180px; height: 6px; }
    .duration-slider::-webkit-slider-thumb { width: 16px; height: 16px; }
    .skip-btn { width: 44px; height: 44px; font-size: 0.9rem; }
    
    /* The desktop rules below deliberately bleed these photos wider than
       their column (115%/98%) since there's plenty of spare width on the
       1440px stage. On the much narrower mobile stage that same
       bleed eats into the neighboring column's text, so keep them
       contained here instead. */
    img[src*="band-photo-1.jpg"],
    img[src*="band-photo-2.jpg"] {
        width: 100%;
        margin: 0;
    }

    /* Adjust the bottom content to prevent overlapping as the columns get taller */
    #bottom-content {
        margin-top: 0px; 
        padding-top: 30px;
    }

    /* Trims the empty space between the end of the hero section (neon
       title) and the start of the credits section below it. */
    #main-content {
        padding-bottom: 30px;
    }

    /* The ghost credits block is invisible, but it still reserves layout
       space (it mirrors the real .bottom-credits block so the two columns
       stay roughly in step). At the mobile .credits-list font sizes that
       reserved block became very tall, which is what was actually pushing
       "page 1" and "page 2" apart -- not the small margins/paddings between
       them. Shrinking the ghost block back down to near-desktop sizing keeps
       it invisible (as intended) while reclaiming that dead space, closing
       up the gap between the two "pages" on mobile. */
    .ghost-block {
        padding: 10px 0;
    }
    .ghost-block h3 {
        font-size: 1.4rem;
        margin-bottom: 8px;
    }
    .ghost-block p {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 6px;
    }

    /* .gallery-col:first-of-type uses justify-content: space-between (base
       rule) so its two children -- the credits list and band-photo-1 -- sit
       flush to the top/bottom of the column. On mobile the neighboring
       column (photo-2 + bio) is taller, so space-between stretched a big
       gap between the credits and the photo, leaving the photo sitting well
       below the last credits line. Switching to flex-start makes the photo
       follow the credits directly, with just a small explicit gap. */
    .gallery-col:first-of-type {
        justify-content: flex-start;
    }

    img[src*="band-photo-1.jpg"] {
        margin-top: 25px;
    }
}