/**
 * home-eggs-modes.css - Body State Effects
 *
 * Upside-down, dizzy, reverse gravity, disco mode classes,
 * screen shake, and body-level state animations.
 */

/* ========================================
   KEYFRAME ANIMATIONS — Modes
   ======================================== */

@keyframes screenShake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-10px) rotate(-1deg); }
    20% { transform: translateX(10px) rotate(1deg); }
    30% { transform: translateX(-10px) rotate(-1deg); }
    40% { transform: translateX(10px) rotate(1deg); }
    50% { transform: translateX(-5px); }
    60% { transform: translateX(5px); }
    70% { transform: translateX(-5px); }
    80% { transform: translateX(5px); }
    90% { transform: translateX(-2px); }
}

@keyframes explodeOut {
    0% { transform: scale(0) rotate(0deg); opacity: 1; }
    50% { transform: scale(1.5) rotate(180deg); opacity: 1; }
    100% { transform: scale(0.5) rotate(360deg) translateY(-100px); opacity: 0; }
}

@keyframes floatUp {
    to {
        top: -100px !important;
        bottom: auto !important;
        transform: translateY(-100px) rotate(180deg);
    }
}

@keyframes floatDown {
    to {
        top: calc(100vh + 50px) !important;
    }
}

@keyframes dizzyWobble {
    0%, 100% { transform: rotate(-2deg) scale(1.02); }
    50% { transform: rotate(2deg) scale(0.98); }
}

@keyframes dizzyRotate {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(5deg); }
    50% { transform: rotate(-5deg); }
    75% { transform: rotate(3deg); }
    100% { transform: rotate(0deg); }
}

@keyframes dizzySpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes arrowBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

@keyframes discoSpin {
    from { transform: translateX(-50%) rotate(0deg); }
    to { transform: translateX(-50%) rotate(360deg); }
}

@keyframes discoBackground {
    0% { background: #ff6b6b; }
    25% { background: #feca57; }
    50% { background: #48dbfb; }
    75% { background: #ff9ff3; }
    100% { background: #ff6b6b; }
}

@keyframes rainbowPulse {
    0%, 100% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.05); }
}

@keyframes confettiFall {
    0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ========================================
   BODY STATES
   ======================================== */

/* Body shake state */
body.shaking {
    animation: screenShake 0.5s ease;
}

/* Upside down mode */
body.upside-down {
    transform: rotate(180deg);
    transition: transform 0.5s ease;
}

.upside-down-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(180deg);
    font-size: 2.5rem;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 20px #ff006e;
    z-index: var(--z-modal);
    animation: popIn 0.5s ease;
    pointer-events: none;
}

/* Dizzy mode */
body.dizzy-mode {
    animation: dizzyRotate 3s ease-in-out;
}

body.dizzy-mode * {
    transition: transform 0.3s ease;
}

.dizzy-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: var(--z-modal);
    animation: dizzyWobble 0.5s ease infinite;
}

.dizzy-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 20px #ff006e, 0 0 40px #8338ec;
    z-index: var(--z-modal);
    animation: dizzySpin 0.5s linear infinite;
    pointer-events: none;
}

/* Reverse gravity mode */
body.reverse-gravity .clickable-emoji {
    animation: floatUp 1s ease forwards !important;
}

body.reverse-gravity .bouncing-emoji {
    animation: floatUp 1s ease forwards !important;
}

body.reverse-gravity .unicorn {
    animation: floatUp 1s ease forwards !important;
}

body.reverse-gravity .greeting-card {
    transform: rotate(180deg) !important;
    transition: transform 0.5s ease;
}

body.reverse-gravity .disco-ball {
    animation: floatDown 1s ease forwards !important;
}

/* Reverse gravity text */
.gravity-text {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(180deg);
    font-size: 2rem;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 20px #3a86ff;
    z-index: var(--z-modal);
    animation: popIn 0.5s ease;
    pointer-events: none;
}

/* Gravity arrow indicator */
.gravity-arrow {
    position: fixed;
    font-size: 4rem;
    z-index: var(--z-modal);
    animation: arrowBounce 0.5s ease infinite;
    pointer-events: none;
}

/* Disco mode body state */
body.disco-mode {
    animation: discoBackground 0.5s infinite;
}

/* Disco ball */
.disco-ball {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3rem;
    cursor: pointer;
    z-index: var(--z-overlay);
    animation: discoSpin 4s linear infinite;
    transition: transform 0.2s;
}

.disco-ball:hover {
    transform: translateX(-50%) scale(1.2);
}

/* Rainbow arc (hidden until activated) */
.rainbow {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 150px;
    background: conic-gradient(from 180deg,
        red, orange, yellow, green, blue, indigo, violet,
        violet, indigo, blue, green, yellow, orange, red);
    border-radius: 0 0 300px 300px;
    opacity: 0;
    z-index: var(--z-background);
    transition: opacity 1s;
}

.rainbow.show {
    opacity: 0.5;
    animation: rainbowPulse 2s ease infinite;
}

/* Confetti particle */
.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    z-index: var(--z-popover);
    animation: confettiFall 3s linear forwards;
}

/* Shake explosion emoji */
.shake-emoji {
    position: fixed;
    font-size: 3rem;
    z-index: var(--z-overlay);
    animation: explodeOut 1s ease forwards;
    pointer-events: none;
}

/* ========================================
   CONGA LINE
   ======================================== */

@keyframes congaMove {
    0% { left: -80px; transform: translateY(0) rotate(-10deg); }
    10% { transform: translateY(-15px) rotate(10deg); }
    20% { transform: translateY(0) rotate(-10deg); }
    30% { transform: translateY(-15px) rotate(10deg); }
    40% { transform: translateY(0) rotate(-10deg); }
    50% { transform: translateY(-15px) rotate(10deg); }
    60% { transform: translateY(0) rotate(-10deg); }
    70% { transform: translateY(-15px) rotate(10deg); }
    80% { transform: translateY(0) rotate(-10deg); }
    90% { transform: translateY(-15px) rotate(10deg); }
    100% { left: calc(100vw + 80px); transform: translateY(0) rotate(-10deg); }
}

@keyframes congaMoveReverse {
    0% { right: -80px; transform: scaleX(-1) translateY(0) rotate(10deg); }
    10% { transform: scaleX(-1) translateY(-15px) rotate(-10deg); }
    20% { transform: scaleX(-1) translateY(0) rotate(10deg); }
    30% { transform: scaleX(-1) translateY(-15px) rotate(-10deg); }
    40% { transform: scaleX(-1) translateY(0) rotate(10deg); }
    50% { transform: scaleX(-1) translateY(-15px) rotate(-10deg); }
    60% { transform: scaleX(-1) translateY(0) rotate(10deg); }
    70% { transform: scaleX(-1) translateY(-15px) rotate(-10deg); }
    80% { transform: scaleX(-1) translateY(0) rotate(10deg); }
    90% { transform: scaleX(-1) translateY(-15px) rotate(-10deg); }
    100% { right: calc(100vw + 80px); transform: scaleX(-1) translateY(0) rotate(10deg); }
}

@keyframes congaTextPop {
    0% { transform: translateX(-50%) scale(0); }
    50% { transform: translateX(-50%) scale(1.3); }
    100% { transform: translateX(-50%) scale(1); }
}

/* Conga line emoji */
.conga-emoji {
    position: fixed;
    font-size: 4rem;
    z-index: var(--z-overlay);
    animation: congaMove 3s linear forwards;
    pointer-events: none;
}

/* Reverse conga line */
.conga-emoji-reverse {
    position: fixed;
    font-size: 4rem;
    z-index: var(--z-overlay);
    animation: congaMoveReverse 3s linear forwards;
    pointer-events: none;
    transform: scaleX(-1);
}

/* Conga announcement text */
.conga-text {
    position: fixed;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 20px #ff006e, 0 0 40px #8338ec;
    z-index: var(--z-modal);
    animation: congaTextPop 0.5s ease, trailFade 2s ease 1s forwards;
    pointer-events: none;
}

/* ========================================
   MOBILE ADJUSTMENTS
   ======================================== */

@media (max-width: 480px) {
    .disco-ball {
        font-size: 2.5rem;
    }

    .conga-emoji,
    .conga-emoji-reverse {
        font-size: 3rem;
    }
}