/* REGISTER  */
@font-face {
    font-family: 'Aileron';
    src: url('aileron.otf');
}
/* Body font */
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
   
}


.corner-title {
    position: absolute;
    top: 40px;
    left: 40px;
    font-family: 'Aileron', sans-serif;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.2;
    color: #fde7cf;
    z-index: 100;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* UPDATE: Right Column */
.right-column {
    flex: 1;
    padding-left: 20px;
    margin-top: 0;
}
/* BASE */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    
    background-image: url('mainpagelements/background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    color: #fff;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    overflow-x: hidden; 
}

/* PRIVACY */
#privacy-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #151515; 
    z-index: 9999; 
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease;
}

.login-box {
    text-align: center;
    background: #222;
    padding: 40px;
    border-radius: 12px;
    border: 1px solid #333;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.login-box h2 {
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.login-box p {
    color: #aaa;
    margin-bottom: 20px;
    font-size: 0.9rem;
}

.login-box input {
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #444;
    background: #333;
    color: white;
    margin-right: 10px;
    outline: none;
}

.login-box button {
    padding: 12px 25px;
    background: linear-gradient(to bottom, #ffeebb 0%, #eacda3 100%);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
    color: #4b3621;
}

.login-box button:hover {
    opacity: 0.9;
}

/* MAIN CONTENT */
.container {
    display: flex;
    width: 90%;
    max-width: 1400px;
    gap: 80px;
    align-items: flex-start;
    
    margin-top: 18vh;  
    margin-bottom: 50px; 
    
    opacity: 0; 
    transition: opacity 1s ease;
    position: relative; 
    z-index: 10;       
}


.left-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- CDS --- */

.cd-container {
    width: 100%;
    max-width: 650px; 
    margin-bottom: 30px; 
}

.cd-image {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(10px 10px 20px rgba(0,0,0,0.5)); 
    transition: transform 0.3s ease;
}

.cd-image:hover {
    transform: scale(1.02); 
}

.pre-order {
    margin-top: 25px;
    text-align: right;
    width: 100%;
    max-width: 450px;
    font-size: 0.75rem;
    letter-spacing: 1.5px;
    font-weight: bold;
    color: #fde7cf;
    text-transform: uppercase;
}

/* RIGHT COLUMN */
.right-column {
    flex: 1;
    padding-left: 20px;
    padding-top: 20px; 
}

h1 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #e0e0e0;
}

.bio {
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 40px;
    color: #fde7cf;
}

.enjoy {
    margin-top: 20px;
    font-weight: 800;
    font-size: 1.2rem;
}

.section-group {
    margin-bottom: 35px;
}

h3 {
    font-size: 0.95rem;
    margin-bottom: 12px;
    color: #fde7cf;
    font-weight: 700;
}

/* BUTTONS */
.button-grid {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    gap: 15px;
}

.gold-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, #ffeebb 0%, #eacda3 100%);
    color: #4b3621;
    text-decoration: none;
    padding: 10px 0;
    border-radius: 25px;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.4);
    transition: transform 0.2s;
}

.gold-btn:hover {
    transform: scale(1.05);
    background: linear-gradient(180deg, #fff5d6 0%, #f3dcae 100%);
}

.pill-large {
    width: 100px;
}

/* --- INTERACTIVE BACKGROUND EFFECTS --- */

.effects-container {
    position: fixed; /* Stays in place when scrolling */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; 
    z-index: 1; 
    overflow: hidden;
}

.gradient-sphere {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px); 
    opacity: 0.6; 
   
}

.sphere-1 {
    width: 50vw;
    height: 50vw;
    background: linear-gradient(40deg, rgba(255, 0, 128, 0.8), rgba(255, 102, 0, 0.4));
    top: -10%;
    left: -10%;
    animation: float-1 20s ease-in-out infinite alternate;
}

.sphere-2 {
    width: 40vw;
    height: 40vw;
    background: linear-gradient(240deg, rgba(72, 0, 255, 0.8), rgba(0, 183, 255, 0.4));
    bottom: -10%;
    right: -10%;
    animation: float-2 25s ease-in-out infinite alternate;
}

.sphere-3 {
    width: 30vw;
    height: 30vw;
    background: linear-gradient(120deg, rgba(133, 89, 255, 0.5), rgba(98, 216, 249, 0.3));
    top: 40%;
    left: 30%;
    animation: float-3 22s ease-in-out infinite alternate;
}

@keyframes float-1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(10%, 10%) scale(1.1); }
}
@keyframes float-2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-10%, -5%) scale(1.15); }
}
@keyframes float-3 {
    0% { transform: translate(0, 0) scale(1); opacity: 0.4; }
    100% { transform: translate(-5%, 10%) scale(1.05); opacity: 0.7; }
}

.noise-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

.particles-container {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2;
}

.particle {
    position: absolute;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%); 
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    animation: fadeOut 1s forwards; 
}

@keyframes fadeOut {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
}



.blur-text-wrapper {
    display: flex;
    flex-wrap: wrap;
    font-size: 1.05rem; 
    line-height: 1.6;
    color: #fde7cf;     
}

.blur-word {
    display: inline-block;
    will-change: transform, filter, opacity;
   
}

/*Subway cloudberry keyboard toaster elevator humidity brick paperclip mountain logic sandwich clockwork suspension. Static nebula keyboard rectangle symphony tofu equilibrium mustache folder avocado pajamas resonance spatula microwave catastrophe. Velvet bicycle translucent gravity puddle folder avocado logic sandwich*/