/* rainbow.css */
.rainbow-text {
    display: inline-flex;
    justify-content: center;
    font-size: 100px; 
}

.rainbow-text span {
    font-size: 1em;
    -webkit-text-stroke: 2px black;
    text-shadow: 3px 3px 0px #000;
    display: inline-block;
    position: relative;
    transform-origin: bottom center; /* Makes squishing look natural */
}

/* --- THE CHARACTER TIMELINE --- */
.rainbow-text span:nth-child(1) {
    color: #FF6B6B;
    animation: p-full-sequence 22s ease-in-out infinite;
}

.rainbow-text span:nth-child(4) {
    color: #A8E6CF;
    animation: t-full-sequence 22s ease-in-out infinite;
}

.rainbow-text span:nth-child(6) {
    color: #FFE66D;
    animation: f-full-sequence 22s ease-in-out infinite;
}

/* Static Rainbow Colors */
.rainbow-text span:nth-child(2) { color: #FFD93D; }
.rainbow-text span:nth-child(3) { color: #4ECDC4; }
.rainbow-text span:nth-child(5) { color: #FF6B6B; }
.rainbow-text span:nth-child(7) { color: #95E1D3; }
.rainbow-text span:nth-child(8) { color: #FF9FF3; }
.rainbow-text span:nth-child(9) { color: #FFD93D; }

/* --- REFINED KEYFRAMES --- */
@keyframes swap-p-mischief {
    0%, 10%, 20%, 30%, 40% { transform: translate(0,0) rotate(2deg); }
    5%, 15%, 25%, 35%, 45% { transform: translate(0,0) rotate(-2deg); }
    50%  { transform: translate(0,0) scaleY(0.8); } 
    60%  { transform: translate(0, -1.4em) scaleY(1.1); } 
    /* REDUCED: Was 2.55em, now 2.1em to account for wider letters */
    85%  { transform: translate(2.1em, -1.4em); } 
    95%  { transform: translate(2.1em, 0.1em) scaleY(0.7); } 
    100% { transform: translate(2.1em, 0) scaleY(1); } 
}

@keyframes swap-f-reaction {
    0%, 88% { transform: translate(0,0); } 
    90%  { transform: translate(0, 0.3em) scaleY(0.6); } 
    /* REDUCED: Was -2.55em, now -2.1em */
    96%  { transform: translate(-2.1em, 0.3em); } 
    100% { transform: translate(-2.1em, 0); } 
}

@keyframes t-to-front-mischief {
    0%, 10%, 20%, 30% { transform: translate(0,0) translateX(0.05em); }
    5%, 15%, 25%, 35% { transform: translate(0,0) translateX(-0.05em); }
    45% { transform: translate(0, 0) scaleY(0.7); } 
    55% { transform: translate(0, -1.5em) scaleY(1.1); } 
    /* REDUCED: Was -1.55em, now -1.2em */
    85% { transform: translate(-1.2em, -1.5em); }
    95% { transform: translate(-1.2em, 0.1em) scaleY(0.7); } 
    100% { transform: translate(-1.2em, 0) scaleY(1); }
}

@keyframes f-back-home-reaction {
    /* REDUCED: Was -2.55em, now -2.1em */
    0%, 45% { transform: translate(-2.1em, 0); }
    50% { transform: translate(-2.1em, 0.2em) scaleY(0.8); } 
    80% { transform: translate(0, 0.2em); } 
    100% { transform: translate(0, 0); }
}

@keyframes p-to-gap-mischief {
    0%, 20%, 40% { transform: translate(2.1em, 0) rotate(3deg); }
    10%, 30%, 50% { transform: translate(2.1em, 0) rotate(-3deg); }
    58% { transform: translate(2.1em, -1.1em); } 
    /* REDUCED: Was 1.55em, now 1.25em */
    85% { transform: translate(1.25em, -1.1em); } 
    100% { transform: translate(1.25em, 0); }
}

@keyframes p-return-home {
    0%   { transform: translate(1.25em, 0); }
    100% { transform: translate(0, 0); }
}

@keyframes t-return-home {
    0%   { transform: translate(-1.25em, 0); }
    100% { transform: translate(0, 0); }
}

@keyframes f-hold-position {
    0%, 100% { transform: translate(0, 0); }
}

@keyframes t-hold-position {
    0%, 100% { transform: translate(0, 0); }
}

/* --- CONSOLIDATED FULL SEQUENCE ANIMATIONS (22s each) --- */
@keyframes p-full-sequence {
    /* 0-3.5s: completely idle */
    0%, 15.91% { transform: translate(0,0); }

    /* 3.5-4.5s: gentle wiggle (2 wiggles in 1 second) */
    16.5% { transform: translate(0,0) rotate(2deg); }
    17.5% { transform: translate(0,0) rotate(-2deg); }
    18.5% { transform: translate(0,0) rotate(2deg); }
    19.5% { transform: translate(0,0) rotate(-2deg); }
    20.45% { transform: translate(0,0); }

    /* 4.5-8s (20.45-36.36%): jump and move right - 3.5s phase */
    /* Map original 0-100% to 20.45-36.36% (15.91% range) */
    /* 0%, 10%, 20%, 30%, 40% */
    20.45%, 22.04%, 23.64%, 25.23%, 26.82% { transform: translate(0,0) rotate(2deg); }
    /* 5%, 15%, 25%, 35%, 45% */
    21.25%, 22.84%, 24.43%, 26.03%, 27.62% { transform: translate(0,0) rotate(-2deg); }
    /* 50% - squish */
    28.41% { transform: translate(0,0) scaleY(0.8); }
    /* 60% - jump */
    30.00% { transform: translate(0, -1.4em) scaleY(1.1); }
    /* 85% - move right */
    33.97% { transform: translate(2.1em, -1.4em); }
    /* 95% - land squish */
    35.57% { transform: translate(2.1em, 0.1em) scaleY(0.7); }
    /* 100% - settle */
    36.36% { transform: translate(2.1em, 0) scaleY(1); }

    /* 8-13s: hold at 2.1em */
    59.09% { transform: translate(2.1em, 0) scaleY(1); }

    /* 13-17.5s (59.09-79.55%): wiggle and move to gap - 4.5s phase */
    /* Map original 0-100% to 59.09-79.55% (20.46% range) */
    /* 0%, 20%, 40% */
    59.09%, 63.18%, 67.27% { transform: translate(2.1em, 0) rotate(3deg); }
    /* 10%, 30%, 50% */
    61.14%, 65.23%, 69.32% { transform: translate(2.1em, 0) rotate(-3deg); }
    /* 58% - jump up */
    70.96% { transform: translate(2.1em, -1.1em); }
    /* 85% - move to gap */
    76.48% { transform: translate(1.25em, -1.1em); }
    /* 100% - settle */
    79.55% { transform: translate(1.25em, 0); }

    /* 17.5-20s (79.55-90.91%): hold at 1.25em */
    90.91% { transform: translate(1.25em, 0); }

    /* 20-22s (90.91-100%): return home */
    100% { transform: translate(0, 0); }
}

@keyframes t-full-sequence {
    /* 0-12s (0-54.55%): completely idle, no movement */
    0%, 54.55% { transform: translate(0,0); }

    /* 12-15.5s (54.55-70.45%): jump and move left - 3.5s phase */
    /* Map original 0-100% to 54.55-70.45% (15.9% range) */
    /* 0%, 10%, 20%, 30% */
    54.55%, 56.14%, 57.73%, 59.32% { transform: translate(0,0) translateX(0.05em); }
    /* 5%, 15%, 25%, 35% */
    55.34%, 56.93%, 58.52%, 60.11% { transform: translate(0,0) translateX(-0.05em); }
    /* 45% - squish */
    61.68% { transform: translate(0, 0) scaleY(0.7); }
    /* 55% - jump */
    63.27% { transform: translate(0, -1.5em) scaleY(1.1); }
    /* 85% - move left */
    68.05% { transform: translate(-1.2em, -1.5em); }
    /* 95% - land squish */
    69.77% { transform: translate(-1.2em, 0.1em) scaleY(0.7); }
    /* 100% - settle */
    70.45% { transform: translate(-1.2em, 0) scaleY(1); }

    /* 15.5-20s: hold at -1.2em */
    90.91% { transform: translate(-1.2em, 0); }

    /* 20-22s: return home (t-return-home) */
    100% { transform: translate(0, 0); }
}

@keyframes f-full-sequence {
    /* 0-4.5s (0-20.45%): idle */
    0%, 20.45% { transform: translate(0,0); }

    /* 4.5-8s (20.45-36.36%): get squished and move left - 3.5s phase */
    /* Map original 0-100% to 20.45-36.36% (15.91% range) */
    /* 88% - still idle */
    34.45% { transform: translate(0,0); }
    /* 90% - squish */
    34.77% { transform: translate(0, 0.3em) scaleY(0.6); }
    /* 96% - move */
    35.72% { transform: translate(-2.1em, 0.3em); }
    /* 100% - settle */
    36.36% { transform: translate(-2.1em, 0); }

    /* 8-13s (36.36-59.09%): hold at -2.1em */
    59.09% { transform: translate(-2.1em, 0); }

    /* 13-16.5s (59.09-75%): bounce back home - 3.5s phase */
    /* Map original 0-100% to 59.09-75% (15.91% range) */
    /* 45% - hold */
    66.25% { transform: translate(-2.1em, 0); }
    /* 50% - squish */
    67.05% { transform: translate(-2.1em, 0.2em) scaleY(0.8); }
    /* 80% - move */
    71.82% { transform: translate(0, 0.2em); }
    /* 100% - home */
    75% { transform: translate(0, 0); }

    /* 16.5-22s (75-100%): hold at home */
    100% { transform: translate(0, 0); }
}


@media (max-width: 480px) {
    .rainbow-text {
        /* Bumped up from 44px to 54px */
        font-size:76px !important; 
        letter-spacing: -2px;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .landing-logo {
        width: 100%;
        /* Ensure it has room to breathe */
        padding: 0 5px; 
    }

    /* Make the dates and subtitle slightly larger to match */
    .landing-dates {
        font-size: 20px;
    }
    .landing-subtitle {
        font-size: 16px;
    }
}