/* loves.quest - Memphis + Ma Negative Space */
/* Colors: #FEFAF2, #EDE0CA, #9B7FC4, #F5EBD5, #2E8B8B, #E8634A, #E8B84B, #3D2E1E */
/* Fonts: Outfit 300-800, Space Mono 400/700 */

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

html, body {
    width: 100%;
    min-height: 100vh;
    background: #F5EBD5;
    color: #3D2E1E;
    font-family: 'Outfit', sans-serif;
    overflow-x: hidden;
}

/* Void Canvas */
#void-canvas {
    position: relative;
    width: 100%;
    min-height: 100vh;
}

#memphis-shapes {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.memphis-tri,
.memphis-dot,
.memphis-zig,
.memphis-squig {
    opacity: 0;
    transition: opacity 1.5s ease;
}

.memphis-tri.visible,
.memphis-dot.visible,
.memphis-zig.visible,
.memphis-squig.visible {
    opacity: 1;
}

.memphis-tri {
    animation: gentleDrift 12s ease-in-out infinite;
}

.memphis-dot {
    animation: gentlePulse 8s ease-in-out infinite;
}

.memphis-zig {
    animation: gentleDrift 15s ease-in-out infinite reverse;
}

.memphis-squig {
    animation: squiggleWave 10s ease-in-out infinite;
}

@keyframes gentleDrift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(5px, -8px) rotate(3deg); }
}

@keyframes gentlePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

@keyframes squiggleWave {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(8px); }
}

/* Content Islands */
.content-island {
    position: relative;
    z-index: 1;
    padding: 15vh 10vw;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.content-island:first-child {
    padding-top: 30vh;
    justify-content: center;
    align-items: center;
}

#closing {
    padding-bottom: 30vh;
    justify-content: center;
    align-items: center;
}

.island-block {
    max-width: 550px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.island-block.visible {
    opacity: 1;
    transform: translateY(0);
}

.island-block.right-aligned {
    margin-left: auto;
}

.island-block.center-block {
    margin: 0 auto;
    text-align: center;
}

.quest-declaration {
    text-align: center;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 1.2s ease, transform 1.2s ease;
}

.quest-declaration.visible {
    opacity: 1;
    transform: scale(1);
}

/* Typography */
.display-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: clamp(2.5rem, 7vw, 6rem);
    line-height: 1.05;
    color: #3D2E1E;
    letter-spacing: -0.02em;
}

.display-text.large {
    font-size: clamp(5rem, 15vw, 12rem);
    font-weight: 800;
    color: #9B7FC4;
    letter-spacing: -0.04em;
}

.display-text.kinetic {
    animation: kineticBreath 6s ease-in-out infinite;
}

@keyframes kineticBreath {
    0%, 100% {
        letter-spacing: -0.02em;
        opacity: 1;
    }
    50% {
        letter-spacing: 0.02em;
        opacity: 0.85;
    }
}

.mono-label {
    display: block;
    font-family: 'Space Mono', monospace;
    font-weight: 400;
    font-size: clamp(0.6rem, 1vw, 0.8rem);
    letter-spacing: 0.15em;
    color: #2E8B8B;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.closing-label {
    margin-top: 24px;
    margin-bottom: 0;
    color: #E8634A;
}

.body-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 2vw, 1.3rem);
    line-height: 1.7;
    color: #3D2E1E;
    margin-top: 12px;
}

.body-text.centered {
    text-align: center;
}

/* Rotation from data attributes applied via JS */

/* Responsive */
@media (max-width: 768px) {
    .content-island {
        padding: 12vh 8vw;
    }
    .island-block.right-aligned {
        margin-left: 0;
    }
}