/* 8.8.8.8 — subtle Google nod. The IP (h1) cycles Google's four brand colors a
   few times, then settles. Hidden until the egg activates (body.egg-on). */

body.egg-on h1 { animation: g-cycle 3s ease-in-out 4; }

@keyframes g-cycle {
    0%, 100% { color: #4285F4; } /* blue */
    25%      { color: #EA4335; } /* red */
    50%      { color: #FBBC05; } /* yellow */
    75%      { color: #34A853; } /* green */
}

#g-quip {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
    z-index: 9999; display: flex; align-items: center; gap: .4rem;
    padding: .5rem .9rem; border-radius: 999px; font-size: .85rem;
    background: var(--color-bg-elevated); border: 1px solid var(--color-border);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .35); color: var(--color-text);
    opacity: 0;
}
#g-quip b { color: #4285F4; }
body.egg-on #g-quip { animation: g-quip-in .5s ease-out .3s forwards; }

@keyframes g-quip-in {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    body.egg-on h1 { animation: none; }
    body.egg-on #g-quip { animation: none; opacity: 1; }
}