/*
   Golden Nursery & Primary School — CARTOON SIDEKICK CHARACTERS
   Two animated characters fixed to the left & right edges of the viewport.
   SCROLL-DRIVEN: JS controls vertical position via --sidekick-top CSS variable.
   Entrance: slide in from sides on page load.
   GPU-accelerated (transform + opacity only).
*/

/* ══════════════════════════════════════
   SIDEKICK BASE
   ══════════════════════════════════════ */
.sidekick {
    position: fixed;
    /* Start at centre of viewport — JS scroll updates this smoothly */
    top: 45vh;
    z-index: 998;
    pointer-events: none;
    width: 95px;
    will-change: transform, top, opacity;
    /* Start hidden — entrance animation reveals them */
    opacity: 0;
    animation-fill-mode: forwards;
    /* Smooth transition driven by JS scroll updates */
    transition: top 0.15s linear;
}

/* ══════════════════════════════════════
   LEFT: Luna the Owl
   ══════════════════════════════════════ */
.sidekick-left {
    left: 0;
    animation: lunaSlideIn 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) 1.0s forwards;
}

/* ══════════════════════════════════════
   RIGHT: Sunny the Star Kid
   ══════════════════════════════════════ */
.sidekick-right {
    right: 0;
    animation: sunnySlideIn 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s forwards;
}

/* ══════════════════════════════════════
   ENTRANCE ANIMATIONS
   ══════════════════════════════════════ */
@keyframes lunaSlideIn {
    0% {
        transform: translateX(-120px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

@keyframes sunnySlideIn {
    0% {
        transform: translateX(120px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

/* ══════════════════════════════════════
   GENTLE BOB (after JS takes over top position)
   These only animate transform — not top — so they
   won't fight the scroll-driven JS positioning.
   ══════════════════════════════════════ */
.sidekick-left.scroll-active {
    animation: lunaBob 4.2s ease-in-out infinite;
}

.sidekick-right.scroll-active {
    animation: sunnyBob 4.8s ease-in-out infinite;
}

@keyframes lunaBob {

    0%,
    100% {
        transform: translateX(0px) translateY(0px) rotate(-2deg);
    }

    40% {
        transform: translateX(5px) translateY(-14px) rotate(2deg);
    }

    70% {
        transform: translateX(3px) translateY(-6px) rotate(-1deg);
    }
}

@keyframes sunnyBob {

    0%,
    100% {
        transform: translateX(0px) translateY(0px) rotate(2deg);
    }

    40% {
        transform: translateX(-5px) translateY(-16px) rotate(-3deg);
    }

    70% {
        transform: translateX(-2px) translateY(-6px) rotate(1deg);
    }
}

/* ══════════════════════════════════════
   SVG PART ANIMATIONS
   ══════════════════════════════════════ */
/* Luna wing wave */
.luna-wing {
    transform-origin: 22px 95px;
    animation: wingWave 3.5s ease-in-out 2.5s infinite;
}

@keyframes wingWave {

    0%,
    100% {
        transform: rotate(0deg);
    }

    30% {
        transform: rotate(-18deg);
    }

    60% {
        transform: rotate(8deg);
    }
}

/* Luna eye blink */
.luna-eye {
    animation: eyeBlink 4s ease-in-out 3s infinite;
}

@keyframes eyeBlink {

    0%,
    88%,
    100% {
        transform: scaleY(1);
    }

    92%,
    95% {
        transform: scaleY(0.1);
    }
}

/* Sunny sparkle ring spin */
.sunny-sparkle {
    animation: sparkleRotate 3s linear 2.8s infinite;
    transform-origin: 50px 50px;
}

@keyframes sparkleRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Sunny body squish */
.sunny-body {
    animation: sunnyWobble 2.8s ease-in-out 3.2s infinite;
    transform-origin: 50px 58px;
}

@keyframes sunnyWobble {

    0%,
    100% {
        transform: scaleX(1) scaleY(1);
    }

    35% {
        transform: scaleX(1.07) scaleY(0.93);
    }

    65% {
        transform: scaleX(0.94) scaleY(1.06);
    }
}

/* Sunny arm wave */
.sunny-arm-left {
    transform-origin: 25px 62px;
    animation: armWaveLeft 2.2s ease-in-out 3.5s infinite;
}

.sunny-arm-right {
    transform-origin: 75px 62px;
    animation: armWaveRight 2.2s ease-in-out 3.5s infinite;
}

@keyframes armWaveLeft {

    0%,
    100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(28deg);
    }
}

@keyframes armWaveRight {

    0%,
    100% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-28deg);
    }
}

/* ══════════════════════════════════════
   GLOW
   ══════════════════════════════════════ */
.sidekick-left svg {
    filter: drop-shadow(0 6px 18px rgba(168, 85, 247, 0.6)) drop-shadow(0 0 32px rgba(192, 132, 252, 0.28));
}

.sidekick-right svg {
    filter: drop-shadow(0 6px 18px rgba(244, 180, 0, 0.5)) drop-shadow(0 0 28px rgba(255, 213, 79, 0.22));
}

/* ══════════════════════════════════════
   HOVER (pointer devices only)
   ══════════════════════════════════════ */
@media (hover: hover) {
    .sidekick {
        pointer-events: auto;
        cursor: pointer;
    }
}

/* ══════════════════════════════════════
   RESPONSIVE SIZING
   ══════════════════════════════════════ */

/* Tablets */
@media (max-width: 1100px) {
    .sidekick {
        width: 78px;
    }
}

/* Small tablets / large phones */
@media (max-width: 768px) {
    .sidekick {
        width: 56px;
    }
}

/* Mobile phones */
@media (max-width: 480px) {
    .sidekick {
        width: 46px;
    }
}

/* Very tiny screens — hide to avoid crowding */
@media (max-width: 360px) {
    .sidekick {
        display: none;
    }
}

/* ══════════════════════════════════════
   RESPECT REDUCED MOTION
   ══════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

    .sidekick,
    .sidekick-left,
    .sidekick-right,
    .sidekick-left.scroll-active,
    .sidekick-right.scroll-active {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .luna-wing,
    .luna-eye,
    .sunny-sparkle,
    .sunny-body,
    .sunny-arm-left,
    .sunny-arm-right {
        animation: none !important;
        transform: none !important;
    }
}