/* --- Reset & Base Styles --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #FFF1E6;
    animation: bgPhase 40s infinite ease-in-out;
}

/* --- Cinematic Grain Overlay --- */
.noise {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    /* Stays above the background, but below the text */
    opacity: 0.08;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* --- Blurred Shapes (Orbs) --- */
.blobs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.8;
    will-change: transform, background-color;
}

.blob-1 {
    width: 55vw;
    height: 55vw;
    top: -10vw;
    left: -10vw;
    animation:
        blob1Phase 40s infinite ease-in-out,
        float1 20s infinite alternate ease-in-out;
}

.blob-2 {
    width: 65vw;
    height: 65vw;
    bottom: -15vw;
    right: -15vw;
    animation:
        blob2Phase 40s infinite ease-in-out,
        float2 22s infinite alternate ease-in-out;
}

.blob-3 {
    width: 45vw;
    height: 45vw;
    top: 30vh;
    left: 25vw;
    animation:
        blob3Phase 40s infinite ease-in-out,
        float3 18s infinite alternate ease-in-out;
}

/* --- Typography & Layout --- */
.content {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo {
    position: absolute;
    top: 3rem;
    left: 4rem;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: -0.03em;
    animation: textPhase 40s infinite ease-in-out;
}

.main-text {
    font-size: clamp(3.5rem, 8vw, 7rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    text-align: center;
    line-height: 1.1;
    padding: 0 1rem;
    animation: textPhase 40s infinite ease-in-out;
}

/* --- Minimal Footer & Wiping Indicator --- */
.footer {
    position: absolute;
    bottom: 2rem;
    left: 0;
    width: 100%;
    padding: 0 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10;

    font-size: 0.75rem;
    font-weight: 300;
    letter-spacing: 0.05em;
    opacity: 0.55;
    animation: textPhase 40s infinite ease-in-out;
}

.phase-indicator {
    position: relative;
    width: 160px;
    height: 1.2em;
    display: flex;
    justify-content: flex-end;
}

.phase {
    position: absolute;
    right: 0;
    top: 0;
    white-space: nowrap;
}

/* Smooth storm wipes using a fluid bezier curve */
.p1 {
    animation: wipeP1 40s infinite cubic-bezier(0.65, 0, 0.35, 1);
}

.p2 {
    animation: wipeP2 40s infinite cubic-bezier(0.65, 0, 0.35, 1);
}

.p3 {
    animation: wipeP3 40s infinite cubic-bezier(0.65, 0, 0.35, 1);
}

.p4 {
    animation: wipeP4 40s infinite cubic-bezier(0.65, 0, 0.35, 1);
}

/* --- 4-Part Cycle Animations (Sunrise -> Zenith -> Sunset -> Night) --- */

@keyframes bgPhase {

    0%,
    5% {
        background-color: #FFF1E6;
    }

    20%,
    30% {
        background-color: #E3F2FD;
    }

    45%,
    55% {
        background-color: #E8D8F8;
    }

    70%,
    80% {
        background-color: #0B0C10;
    }

    95%,
    100% {
        background-color: #FFF1E6;
    }
}

@keyframes blob1Phase {

    0%,
    5% {
        background-color: #FFB399;
    }

    20%,
    30% {
        background-color: #90CAF9;
    }

    45%,
    55% {
        background-color: #FF8BA7;
    }

    70%,
    80% {
        background-color: #1E1B4B;
    }

    95%,
    100% {
        background-color: #FFB399;
    }
}

@keyframes blob2Phase {

    0%,
    5% {
        background-color: #FFD4C4;
    }

    20%,
    30% {
        background-color: #B3E5FC;
    }

    45%,
    55% {
        background-color: #C8B6FF;
    }

    70%,
    80% {
        background-color: #121A5F;
    }

    95%,
    100% {
        background-color: #FFD4C4;
    }
}

@keyframes blob3Phase {

    0%,
    5% {
        background-color: #FFECA1;
    }

    20%,
    30% {
        background-color: #E1F5FE;
    }

    45%,
    55% {
        background-color: #FFC6FF;
    }

    70%,
    80% {
        background-color: #0A2266;
    }

    95%,
    100% {
        background-color: #FFECA1;
    }
}

@keyframes textPhase {

    0%,
    5% {
        color: #4A3A35;
    }

    20%,
    30% {
        color: #1A365D;
    }

    45%,
    55% {
        color: #3A2B52;
    }

    70%,
    80% {
        color: #E8EAF6;
    }

    95%,
    100% {
        color: #4A3A35;
    }
}

/* --- Wipe Keyframes (Left -> Right blackouts and reveals) --- */
/* Opacity is used invisibly in the background so the clip-path resetting doesn't backward-flash on the screen */

@keyframes wipeP1 {

    0%,
    21% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }

    24% {
        clip-path: inset(0 0 0 100%);
        opacity: 1;
    }

    24.1%,
    95.9% {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
    }

    96% {
        clip-path: inset(0 100% 0 0);
        opacity: 1;
    }

    99%,
    100% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
}

@keyframes wipeP2 {

    0%,
    22.9% {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
    }

    23% {
        clip-path: inset(0 100% 0 0);
        opacity: 1;
    }

    26%,
    46% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }

    49% {
        clip-path: inset(0 0 0 100%);
        opacity: 1;
    }

    49.1%,
    100% {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
    }
}

@keyframes wipeP3 {

    0%,
    47.9% {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
    }

    48% {
        clip-path: inset(0 100% 0 0);
        opacity: 1;
    }

    51%,
    71% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }

    74% {
        clip-path: inset(0 0 0 100%);
        opacity: 1;
    }

    74.1%,
    100% {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
    }
}

@keyframes wipeP4 {

    0%,
    72.9% {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
    }

    73% {
        clip-path: inset(0 100% 0 0);
        opacity: 1;
    }

    76%,
    96% {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }

    99% {
        clip-path: inset(0 0 0 100%);
        opacity: 1;
    }

    99.1%,
    100% {
        clip-path: inset(0 100% 0 0);
        opacity: 0;
    }
}

/* --- Floating Movement Animations --- */
@keyframes float1 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(8vw, 12vh) scale(1.1);
    }
}

@keyframes float2 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(-10vw, -8vh) scale(0.9);
    }
}

@keyframes float3 {
    0% {
        transform: translate(0, 0) scale(1);
    }

    100% {
        transform: translate(12vw, -15vh) scale(1.05);
    }
}

/* --- Mobile Responsiveness --- */
@media (max-width: 768px) {
    .logo {
        top: 2rem;
        left: 2rem;
    }

    .blob {
        filter: blur(80px);
    }

    .footer {
        padding: 0 2rem;
        bottom: 1.5rem;
        font-size: 0.65rem;
    }
}