/* =========================================================
   Magnolia Studio — Fairy V1
   Elf Hold the Lamp
   Image size: 373 × 423 px
   ========================================================= */

.fairy-stage {
    position: absolute;
    width: 224px;
    height: 254px;

    /* 这里以后根据 Hero Section 实际位置调整 */
    right: 8%;
    bottom: 8%;

    transform: none;

    pointer-events: none;
    z-index: 20;
}

/* ---------------------------------------------------------
   Main fairy
   --------------------------------------------------------- */

.fairy-character {
    position: absolute;
    inset: 0;

    width: 224px;
    height: 254px;

    object-fit: contain;

    transform-origin: 118px 161px;

    animation:
        fairy-float 5.5s ease-in-out infinite,
        fairy-breathe 7s ease-in-out infinite;

    will-change: transform;
}

/* ---------------------------------------------------------
   Gentle floating
   --------------------------------------------------------- */

@keyframes fairy-float {

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

    25% {
        transform:
            translate3d(0, -4px, 0)
            rotate(-0.35deg);
    }

    50% {
        transform:
            translate3d(0, -8px, 0)
            rotate(0deg);
    }

    75% {
        transform:
            translate3d(0, -4px, 0)
            rotate(0.35deg);
    }

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

/* ---------------------------------------------------------
   Very subtle body breathing
   --------------------------------------------------------- */

@keyframes fairy-breathe {

    0%,
    100% {
        scale: 1;
    }

    50% {
        scale: 1.008;
    }
}

/* ---------------------------------------------------------
   Head movement layer

   Head anchor based on:
   chin      = 155,190
   left ear  = 115,164
   right ear = 196,154
   head top  = 137,69
   hat tip   = 216,9
   --------------------------------------------------------- */

.fairy-head-motion {
    position: absolute;

    left: 0;
    top: 0;

    width: 373px;
    height: 423px;

    transform-origin: 155px 190px;

    animation: fairy-head 8s ease-in-out infinite;
}

@keyframes fairy-head {

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

    76% {
        transform: rotate(-0.7deg);
    }

    80% {
        transform: rotate(0.45deg);
    }

    84% {
        transform: rotate(0deg);
    }
}

/* ---------------------------------------------------------
   Oil lamp glow
   Center:
   X = 37
   Y = 210
   --------------------------------------------------------- */

.fairy-lamp-glow {
    position: absolute;

    left: 37px;
    top: 210px;

    width: 90px;
    height: 90px;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 245, 205, 0.42) 0%,
            rgba(255, 225, 145, 0.20) 25%,
            rgba(255, 205, 100, 0.08) 48%,
            rgba(255, 205, 100, 0) 72%
        );

    filter: blur(2px);

    animation: lamp-breathe 3.8s ease-in-out infinite;

    pointer-events: none;
}

@keyframes lamp-breathe {

    0%,
    100% {
        opacity: 0.55;
        transform:
            translate(-50%, -50%)
            scale(0.92);
    }

    50% {
        opacity: 0.90;
        transform:
            translate(-50%, -50%)
            scale(1.08);
    }
}

/* ---------------------------------------------------------
   Tiny warm light core
   --------------------------------------------------------- */

.fairy-lamp-light {
    position: absolute;

    left: 37px;
    top: 210px;

    width: 13px;
    height: 13px;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background: rgba(255, 247, 215, 0.92);

    box-shadow:
        0 0 8px rgba(255, 235, 165, 0.75),
        0 0 18px rgba(255, 220, 120, 0.45);

    animation: lamp-core 2.8s ease-in-out infinite;

    pointer-events: none;
}

@keyframes lamp-core {

    0%,
    100% {
        opacity: 0.72;
        scale: 0.92;
    }

    50% {
        opacity: 1;
        scale: 1.08;
    }
}

/* ---------------------------------------------------------
   Hover — very subtle attention response
   --------------------------------------------------------- */

.fairy-stage.is-hovered .fairy-character {
    animation-play-state: paused;

    transform:
        translateY(-5px)
        rotate(-0.4deg)
        scale(1.015);
}

/* ---------------------------------------------------------
   Respect reduced motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .fairy-character,
    .fairy-head-motion,
    .fairy-lamp-glow,
    .fairy-lamp-light {
        animation: none !important;
    }
}