/* =========================================================
   Pixel SMP — Animations: dag/nat, parallax, glitch, shake
   ========================================================= */

/* ---------- Day/night cycle (60s loop) ---------- */
.hero {
    background: linear-gradient(180deg, #6cc9ff 0%, #95dcff 55%, #c1ecff 100%);
    animation: dayNight 60s linear infinite;
}
@keyframes dayNight {
    0%   { background: linear-gradient(180deg, #6cc9ff 0%, #95dcff 55%, #c1ecff 100%); }
    25%  { background: linear-gradient(180deg, #ffb46a 0%, #ff8e5f 50%, #ffd5a8 100%); }   /* sunset */
    50%  { background: linear-gradient(180deg, #0a0824 0%, #1d1450 55%, #3a2080 100%); }   /* night */
    75%  { background: linear-gradient(180deg, #ff9a4a 0%, #ffc78a 50%, #ffe7c2 100%); }   /* dawn */
    100% { background: linear-gradient(180deg, #6cc9ff 0%, #95dcff 55%, #c1ecff 100%); }
}

/* Sun stays + moon appears at night */
.hero .sun { animation: sunArc 60s linear infinite; }
@keyframes sunArc {
    0%   { transform: translate(-50%, 0) scale(1); opacity: 1; }
    40%  { transform: translate(-50%, -20px) scale(1); opacity: 1; }
    50%  { transform: translate(-50%, 200px) scale(.5); opacity: 0; }
    60%  { transform: translate(-50%, -20px) scale(1); opacity: 1; }
    100% { transform: translate(-50%, 0) scale(1); opacity: 1; }
}

.moon {
    position: absolute;
    top: 8%;
    left: 50%;
    width: 64px; height: 64px;
    background: #f4f1ff;
    box-shadow:
        inset -10px -8px 0 0 #b9b0e2,
        0 0 30px rgba(255,255,255,.6);
    image-rendering: pixelated;
    transform: translateX(-50%);
    opacity: 0;
    animation: moonArc 60s linear infinite;
}
@keyframes moonArc {
    0%,40%   { opacity: 0; transform: translate(-50%, 200px); }
    50%      { opacity: 1; transform: translate(-50%, 0); }
    60%,100% { opacity: 0; transform: translate(-50%, 200px); }
}

/* Stars (visible at night) */
.stars {
    position: absolute; inset: 0;
    background-image:
        radial-gradient(1px 1px at 20% 30%, #fff, transparent),
        radial-gradient(1px 1px at 80% 20%, #fff, transparent),
        radial-gradient(1px 1px at 65% 60%, #fff, transparent),
        radial-gradient(1px 1px at 30% 70%, #fff, transparent),
        radial-gradient(1px 1px at 90% 80%, #fff, transparent),
        radial-gradient(1px 1px at 10% 50%, #fff, transparent),
        radial-gradient(1px 1px at 50% 15%, #fff, transparent),
        radial-gradient(1px 1px at 75% 45%, #fff, transparent);
    background-size: 100% 100%;
    opacity: 0;
    animation: starsFade 60s linear infinite;
    pointer-events: none;
}
@keyframes starsFade {
    0%,30%   { opacity: 0; }
    50%      { opacity: 1; }
    70%,100% { opacity: 0; }
}

/* ---------- Flickering torches ---------- */
@keyframes flicker {
    0%,100% { transform: translate(0, 0); opacity: 1; }
    50%     { transform: translate(0, -1px); opacity: .9; }
}
@keyframes flickerGlow {
    from { opacity: .55; transform: scale(1); }
    to   { opacity: 1;   transform: scale(1.1); }
}

/* ---------- Birds (8-bit) ---------- */
.bird {
    position: absolute;
    width: 12px; height: 6px;
    background: #1f1f2e;
    box-shadow:
        -6px -3px 0 #1f1f2e,
         6px -3px 0 #1f1f2e;
    image-rendering: pixelated;
    z-index: 4;
    animation:
        birdFly 28s linear infinite,
        birdFlap .25s steps(2) infinite;
}
.bird-1 { top: 22%; left: -40px; }
.bird-2 { top: 35%; left: -40px; animation-duration: 38s, .3s; animation-delay: -10s, 0s; }
@keyframes birdFly {
    0%   { left: -40px; transform: translateY(0); }
    25%  { transform: translateY(-12px); }
    50%  { transform: translateY(0); }
    75%  { transform: translateY(-8px); }
    100% { left: 110%; transform: translateY(0); }
}
@keyframes birdFlap {
    0%,100% { box-shadow: -6px -3px 0 #1f1f2e, 6px -3px 0 #1f1f2e; }
    50%     { box-shadow: -6px  1px 0 #1f1f2e, 6px  1px 0 #1f1f2e; }
}

/* ---------- Falling pixel confetti ---------- */
.confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 3;
}
.confetti span {
    position: absolute;
    width: 6px; height: 6px;
    top: -10px;
    image-rendering: pixelated;
    animation: fall linear infinite;
}
.confetti span:nth-child(1) { left: 10%; background: var(--c-purple); animation-duration: 7s;  animation-delay: 0s;  }
.confetti span:nth-child(2) { left: 25%; background: var(--c-cyan);   animation-duration: 9s;  animation-delay: 2s;  }
.confetti span:nth-child(3) { left: 40%; background: var(--c-green);  animation-duration: 6s;  animation-delay: 4s;  }
.confetti span:nth-child(4) { left: 55%; background: #ffd84a;         animation-duration: 8s;  animation-delay: 1s;  }
.confetti span:nth-child(5) { left: 70%; background: var(--c-purple); animation-duration: 10s; animation-delay: 3s;  }
.confetti span:nth-child(6) { left: 85%; background: var(--c-cyan);   animation-duration: 7.5s;animation-delay: 5s;  }
.confetti span:nth-child(7) { left: 95%; background: var(--c-green);  animation-duration: 9.5s;animation-delay: 6s;  }
@keyframes fall {
    0%   { transform: translateY(0)    rotate(0); opacity: 1; }
    100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}

/* ---------- Block rain (Konami / 5-click logo) ---------- */
.block-rain {
    position: fixed; inset: 0; z-index: 9000;
    pointer-events: none; overflow: hidden;
}
.block-rain span {
    position: absolute;
    top: -40px;
    width: 32px; height: 32px;
    image-rendering: pixelated;
    border: 2px solid rgba(0,0,0,.6);
    box-shadow: inset 2px 2px 0 rgba(255,255,255,.25), inset -2px -2px 0 rgba(0,0,0,.4);
    animation: blockFall linear forwards;
}
@keyframes blockFall {
    from { transform: translateY(0)    rotate(0); }
    to   { transform: translateY(110vh) rotate(20deg); }
}

/* ---------- Section title shake on hover ---------- */
.section-title:hover {
    animation: shake .3s ease-in-out;
}
@keyframes shake {
    0%,100% { transform: translate(0,0); }
    20%     { transform: translate(-2px, 1px); }
    40%     { transform: translate(2px, -1px); }
    60%     { transform: translate(-1px, 2px); }
    80%     { transform: translate(1px, -2px); }
}

/* ---------- Creative mode (Konami) ---------- */
body.creative-mode {
    animation: rainbowBg 4s linear infinite;
}
@keyframes rainbowBg {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .hero { animation: none; }
    .sun, .moon, .stars, .bird, .confetti, .torch-flame, .torch-glow { animation: none !important; }
    .moon { opacity: 0; }
    .stars { opacity: 0; }
}