/* ══════════════════════════════════════════════════════════
   Mascot Animations — Topic Detail Page
   Six animated scenes for the mascot companion.
   ══════════════════════════════════════════════════════════ */

/* ══ Shared Base ══ */

.mascot-scene {
    position: relative;
    width: 260px;
    height: 260px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.mascot-shadow {
    position: absolute;
    bottom: 28px;
    width: 100px;
    height: 12px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    z-index: 0;
}

.dark .mascot-shadow {
    background: rgba(255, 255, 255, 0.05);
}

.mascot-character {
    position: relative;
    z-index: 1;
    width: 160px;
    height: 160px;
    margin-bottom: -8px;
}

.mascot-character img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: bottom center;
}

@keyframes mascot-glow-gentle {
    0%, 100% { transform: scale(0.95); opacity: 0.35; }
    50%      { transform: scale(1.05); opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
    .mascot-shadow {
        animation: none;
        opacity: 0.08;
    }
}


/* ══ Sport (icon="running") ══ */

/* Energy rings */
.sport-ring {
    position: absolute;
    width: 160px;
    height: 160px;
    border: 2px solid rgba(249, 115, 22, 0.3);
    border-radius: 50%;
    animation: sport-ring-pulse 1.8s ease-out infinite;
}
.sport-ring-2 { animation-delay: 0.6s; }
.sport-ring-3 { animation-delay: 1.2s; }

@keyframes sport-ring-pulse {
    0%   { transform: scale(0.3); opacity: 0.6; }
    100% { transform: scale(1.5); opacity: 0; }
}

/* Speed lines */
.sport-lines {
    position: absolute;
    width: 120px;
    height: 180px;
    z-index: 0;
}
.sport-lines span {
    position: absolute;
    width: 2px;
    height: 20px;
    background: rgba(251, 146, 60, 0.4);
    border-radius: 1px;
    animation: sport-line-rise 0.8s ease-out infinite;
    opacity: 0;
}
.sport-lines span:nth-child(1) { left: 10px;  bottom: 30px; animation-delay: 0s; }
.sport-lines span:nth-child(2) { left: 35px;  bottom: 20px; animation-delay: 0.15s; }
.sport-lines span:nth-child(3) { left: 60px;  bottom: 35px; animation-delay: 0.3s; }
.sport-lines span:nth-child(4) { left: 85px;  bottom: 25px; animation-delay: 0.45s; }
.sport-lines span:nth-child(5) { left: 110px; bottom: 30px; animation-delay: 0.6s; }

@keyframes sport-line-rise {
    0%   { transform: translateY(0); opacity: 0.6; }
    100% { transform: translateY(-50px); opacity: 0; }
}

/* Ground shadow */
.sport-shadow {
    animation: sport-shadow-pulse 0.6s ease-in-out infinite;
}

@keyframes sport-shadow-pulse {
    0%, 100% { transform: scaleX(1);   opacity: 0.12; }
    50%      { transform: scaleX(0.7); opacity: 0.06; }
}

/* Character bounce */
.sport-character img {
    animation: sport-bounce 0.6s ease-in-out infinite;
}

@keyframes sport-bounce {
    0%, 100% { transform: translateY(0) scaleX(1) scaleY(1); }
    30%      { transform: translateY(-18px) scaleX(0.97) scaleY(1.05); }
    50%      { transform: translateY(-14px) scaleX(1) scaleY(1); }
    80%      { transform: translateY(0) scaleX(1.03) scaleY(0.95); }
}

/* Sweat drops */
.sport-character::before,
.sport-character::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 8px;
    background: rgba(147, 197, 253, 0.7);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    opacity: 0;
    z-index: 2;
}
.sport-character::before {
    top: 25px;
    right: 20px;
    animation: sport-sweat 1.2s ease-out infinite 0.2s;
}
.sport-character::after {
    top: 35px;
    left: 22px;
    animation: sport-sweat-left 1.2s ease-out infinite 0.7s;
}

@keyframes sport-sweat {
    0%        { transform: translate(0, 0) scale(1); opacity: 0; }
    15%       { opacity: 0.8; }
    100%      { transform: translate(18px, -24px) scale(0.4); opacity: 0; }
}
@keyframes sport-sweat-left {
    0%        { transform: translate(0, 0) scale(1); opacity: 0; }
    15%       { opacity: 0.8; }
    100%      { transform: translate(-18px, -24px) scale(0.4); opacity: 0; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sport-character img { animation: none; }
    .sport-lines span   { animation: none; display: none; }
    .sport-character::before,
    .sport-character::after { animation: none; display: none; }
    .sport-ring-2,
    .sport-ring-3        { display: none; }
    .sport-ring-1        {
        animation: sport-ring-gentle 3s ease-in-out infinite;
    }
}
@keyframes sport-ring-gentle {
    0%, 100% { transform: scale(0.9); opacity: 0.2; }
    50%      { transform: scale(1.1); opacity: 0.35; }
}


/* ══ Think (icon="brain") ══ */

/* Idea glow */
.think-glow {
    position: absolute;
    width: 180px;
    height: 180px;
    top: 10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.25) 0%, transparent 70%);
    animation: think-glow-pulse 3s ease-in-out infinite;
    z-index: 0;
}

@keyframes think-glow-pulse {
    0%, 100% { transform: scale(0.9);  opacity: 0.5; }
    50%      { transform: scale(1.15); opacity: 0.8; }
}

/* Neural sparkles */
.think-sparkles {
    position: absolute;
    width: 200px;
    height: 160px;
    top: 10px;
    z-index: 2;
}
.think-sparkles span {
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(196, 132, 252, 0.8);
    box-shadow: 0 0 6px 2px rgba(168, 85, 247, 0.6);
    opacity: 0;
    animation: think-sparkle-twinkle 2s ease-in-out infinite;
}
.think-sparkles span:nth-child(1) { top: 15px;  left: 30px;  animation-delay: 0s; }
.think-sparkles span:nth-child(2) { top: 5px;   left: 100px; animation-delay: 0.33s; }
.think-sparkles span:nth-child(3) { top: 20px;  right: 30px; animation-delay: 0.66s; }
.think-sparkles span:nth-child(4) { top: 55px;  left: 15px;  animation-delay: 1s; }
.think-sparkles span:nth-child(5) { top: 45px;  right: 15px; animation-delay: 1.33s; }
.think-sparkles span:nth-child(6) { top: 75px;  left: 100px; animation-delay: 1.66s; }

@keyframes think-sparkle-twinkle {
    0%, 100% { transform: scale(0.3); opacity: 0; }
    50%      { transform: scale(1.2); opacity: 1; }
}

/* Thought bubbles */
.think-bubbles {
    position: absolute;
    width: 60px;
    height: 120px;
    right: 35px;
    top: 20px;
    z-index: 2;
}
.think-bubbles span {
    position: absolute;
    border-radius: 50%;
    background: rgba(168, 85, 247, 0.15);
    border: 1.5px solid rgba(168, 85, 247, 0.35);
    opacity: 0;
    animation: think-bubble-rise 3.5s ease-out infinite;
}
.think-bubbles span:nth-child(1) {
    width: 10px;
    height: 10px;
    bottom: 0;
    left: 10px;
    animation-delay: 0s;
}
.think-bubbles span:nth-child(2) {
    width: 16px;
    height: 16px;
    bottom: 30px;
    left: 20px;
    animation-delay: 0.4s;
}
.think-bubbles span:nth-child(3) {
    width: 24px;
    height: 24px;
    bottom: 65px;
    left: 25px;
    animation-delay: 0.8s;
}

@keyframes think-bubble-rise {
    0%   { transform: translateY(0) scale(0.5); opacity: 0; }
    20%  { opacity: 0.8; }
    80%  { opacity: 0.6; }
    100% { transform: translateY(-60px) scale(1.2); opacity: 0; }
}

/* Ground shadow */
.think-shadow {
    animation: think-shadow-sway 2.5s ease-in-out infinite;
}

@keyframes think-shadow-sway {
    0%, 100% { transform: scaleX(1);    opacity: 0.1; }
    50%      { transform: scaleX(0.85); opacity: 0.07; }
}

/* Character sway */
.think-character img {
    animation: think-sway 2.5s ease-in-out infinite;
}

@keyframes think-sway {
    0%, 100% { transform: translateX(0) rotate(0); }
    25%      { transform: translateX(-3px) rotate(-1.5deg); }
    75%      { transform: translateX(3px) rotate(1.5deg); }
}

/* Brain wave lines */
.think-character::before,
.think-character::after {
    content: '';
    position: absolute;
    height: 2px;
    background: rgba(168, 85, 247, 0.4);
    border-radius: 1px;
    top: 30px;
    z-index: 2;
    animation: think-brainwave 2s ease-in-out infinite;
}
.think-character::before {
    left: -15px;
    width: 25px;
}
.think-character::after {
    right: -15px;
    width: 25px;
    animation-delay: 0.5s;
}

@keyframes think-brainwave {
    0%, 100% { transform: scaleX(0.4); opacity: 0.3; }
    50%      { transform: scaleX(1);   opacity: 0.7; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .think-character img   { animation: none; }
    .think-sparkles span   { animation: none; display: none; }
    .think-bubbles span    { animation: none; display: none; }
    .think-character::before,
    .think-character::after { animation: none; display: none; }
    .think-glow {
        animation: mascot-glow-gentle 4s ease-in-out infinite;
    }
}


/* ══ Study (icon="book") ══ */

/* Book glow */
.study-glow {
    position: absolute;
    width: 180px;
    height: 180px;
    bottom: 30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(96, 165, 250, 0.2) 0%, transparent 70%);
    animation: study-glow-pulse 3.5s ease-in-out infinite;
    z-index: 0;
}

@keyframes study-glow-pulse {
    0%, 100% { transform: scale(0.85); opacity: 0.4; }
    50%      { transform: scale(1.1);  opacity: 0.7; }
}

/* Knowledge particles */
.study-particles {
    position: absolute;
    width: 200px;
    height: 160px;
    bottom: 40px;
    z-index: 2;
}
.study-particles span {
    position: absolute;
    width: 18px;
    height: 14px;
    border-radius: 2px;
    background: rgba(147, 197, 253, 0.85);
    border-left: 3px solid rgba(59, 130, 246, 0.8);
    box-shadow: 0 0 8px 2px rgba(96, 165, 250, 0.35);
    opacity: 0;
    animation: study-particle-rise 2.5s ease-out infinite;
}
.study-particles span:nth-child(1) { bottom: 10px; left: 30px;  animation-delay: 0s; }
.study-particles span:nth-child(2) { bottom: 5px;  left: 70px;  animation-delay: 0.4s; }
.study-particles span:nth-child(3) { bottom: 15px; left: 110px; animation-delay: 0.8s; }
.study-particles span:nth-child(4) { bottom: 8px;  left: 150px; animation-delay: 1.2s; }
.study-particles span:nth-child(5) { bottom: 12px; left: 50px;  animation-delay: 1.6s; }
.study-particles span:nth-child(6) { bottom: 6px;  left: 130px; animation-delay: 2.0s; }

@keyframes study-particle-rise {
    0%   { transform: translateY(0); opacity: 0; }
    15%  { opacity: 0.8; }
    85%  { opacity: 0.6; }
    100% { transform: translateY(-55px); opacity: 0; }
}

/* Floating pages */
.study-pages {
    position: absolute;
    width: 200px;
    height: 160px;
    bottom: 40px;
    z-index: 2;
}
.study-pages span {
    position: absolute;
    width: 14px;
    height: 18px;
    border-radius: 3px;
    background: rgba(96, 165, 250, 0.12);
    border: 1.5px solid rgba(96, 165, 250, 0.3);
    opacity: 0;
    animation: study-page-float 4s ease-out infinite;
}
.study-pages span:nth-child(1) { bottom: 10px; left: 45px;  animation-delay: 0s; }
.study-pages span:nth-child(2) { bottom: 5px;  left: 100px; animation-delay: 1.3s; }
.study-pages span:nth-child(3) { bottom: 15px; left: 145px; animation-delay: 2.6s; }

@keyframes study-page-float {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
    15%  { opacity: 0.7; }
    85%  { opacity: 0.5; }
    100% { transform: translateY(-70px) rotate(15deg); opacity: 0; }
}

/* Ground shadow */
.study-shadow {
    animation: study-shadow-nod 3s ease-in-out infinite;
}

@keyframes study-shadow-nod {
    0%, 100% { transform: scaleX(1);    opacity: 0.1; }
    50%      { transform: scaleX(0.88); opacity: 0.07; }
}

/* Character nod */
.study-character img {
    animation: study-nod 3s ease-in-out infinite;
}

@keyframes study-nod {
    0%, 100% { transform: translateY(0) rotate(0); }
    40%      { transform: translateY(2px) rotate(1.5deg); }
    70%      { transform: translateY(-2px) rotate(-1.5deg); }
}

/* Light rays */
.study-character::before,
.study-character::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 25px;
    background: rgba(96, 165, 250, 0.35);
    border-radius: 1px;
    z-index: 2;
    opacity: 0;
    animation: study-rays 2.5s ease-in-out infinite;
}
.study-character::before {
    top: 20px;
    left: 15px;
    transform: rotate(-20deg);
}
.study-character::after {
    top: 15px;
    right: 15px;
    transform: rotate(20deg);
    animation-delay: 1.25s;
}

@keyframes study-rays {
    0%, 100% { opacity: 0; }
    50%      { opacity: 0.6; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .study-character img   { animation: none; }
    .study-particles span  { animation: none; display: none; }
    .study-pages span      { animation: none; display: none; }
    .study-character::before,
    .study-character::after { animation: none; display: none; }
    .study-glow {
        animation: mascot-glow-gentle 4s ease-in-out infinite;
    }
}


/* ══ Sleep (icon="moon") ══ */

/* Scene override */
.sleep-scene {
    align-items: flex-end;
}

/* Moon glow */
.sleep-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    top: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(129, 140, 248, 0.18) 0%, transparent 70%);
    animation: sleep-glow-pulse 4s ease-in-out infinite;
    z-index: 0;
}

@keyframes sleep-glow-pulse {
    0%, 100% { transform: scale(0.9);  opacity: 0.4; }
    50%      { transform: scale(1.1);  opacity: 0.65; }
}

/* Stars */
.sleep-stars {
    position: absolute;
    width: 230px;
    height: 120px;
    top: 5px;
    z-index: 2;
}
.sleep-stars span {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(253, 230, 138, 0.9);
    box-shadow: 0 0 10px 3px rgba(253, 224, 71, 0.5);
    opacity: 0;
    animation: sleep-star-twinkle 3s ease-in-out infinite;
}
.sleep-stars span:nth-child(1) { top: 10px;  left: 30px;  animation-delay: 0s; }
.sleep-stars span:nth-child(2) { top: 25px;  left: 110px; animation-delay: 0.6s; }
.sleep-stars span:nth-child(3) { top: 8px;   left: 180px; animation-delay: 1.2s; }
.sleep-stars span:nth-child(4) { top: 50px;  left: 60px;  animation-delay: 1.8s; }
.sleep-stars span:nth-child(5) { top: 40px;  left: 200px; animation-delay: 2.4s; }

@keyframes sleep-star-twinkle {
    0%, 100% { transform: scale(0.4); opacity: 0; }
    50%      { transform: scale(1.3); opacity: 1; }
}

/* Floating Zzz */
.sleep-zzz {
    position: absolute;
    left: 50%;
    top: 40px;
    z-index: 3;
}
.sleep-zzz span {
    position: absolute;
    font-weight: 700;
    color: rgba(129, 140, 248, 0.7);
    opacity: 0;
    animation: sleep-zzz-float 3.5s ease-out infinite;
}
.sleep-zzz span:nth-child(1) {
    font-size: 20px;
    bottom: 0;
    left: 0;
    animation-delay: 0s;
}
.sleep-zzz span:nth-child(2) {
    font-size: 28px;
    bottom: 14px;
    left: 16px;
    animation-delay: 1.1s;
}
.sleep-zzz span:nth-child(3) {
    font-size: 36px;
    bottom: 30px;
    left: 36px;
    animation-delay: 2.2s;
}

@keyframes sleep-zzz-float {
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    15%  { opacity: 0.8; }
    80%  { opacity: 0.4; }
    100% { transform: translateY(-60px) translateX(20px); opacity: 0; }
}

/* Bed frame */
.sleep-bed {
    position: absolute;
    bottom: 14px;
    width: 150px;
    height: 75px;
    z-index: 0;
}
.sleep-bed-headboard {
    position: absolute;
    left: 0;
    bottom: 18px;
    width: 14px;
    height: 65px;
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
    border-radius: 6px 0 0 4px;
}
.sleep-bed-mattress {
    position: absolute;
    bottom: 18px;
    left: 14px;
    right: 0;
    height: 24px;
    background: linear-gradient(180deg, #ede9fe, #ddd6fe);
    border-radius: 0 6px 6px 0;
    border: 1.5px solid rgba(167, 139, 250, 0.3);
    border-left: none;
}
.sleep-bed-pillow {
    position: absolute;
    bottom: 30px;
    left: 20px;
    width: 40px;
    height: 22px;
    background: #f5f3ff;
    border-radius: 10px;
    border: 1.5px solid rgba(167, 139, 250, 0.25);
}
.sleep-bed-blanket {
    position: absolute;
    bottom: 18px;
    left: 70px;
    right: 0;
    height: 48px;
    background: linear-gradient(180deg, rgba(129, 140, 248, 0.4), rgba(99, 102, 241, 0.5));
    border-radius: 6px 8px 6px 0;
    border: 1.5px solid rgba(129, 140, 248, 0.3);
    animation: sleep-blanket-breathe 4s ease-in-out infinite;
    transform-origin: bottom center;
}

@keyframes sleep-blanket-breathe {
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(1.04); }
}

/* Bed legs */
.sleep-bed-legs {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 18px;
}
.sleep-bed-legs span {
    position: absolute;
    bottom: 0;
    width: 8px;
    height: 18px;
    background: linear-gradient(180deg, #8b5cf6, #6d28d9);
    border-radius: 0 0 3px 3px;
}
.sleep-bed-legs span:nth-child(1) { left: 3px; }
.sleep-bed-legs span:nth-child(2) { right: 3px; }

/* Character (lying horizontal in bed) */
.sleep-character {
    position: absolute;
    width: 110px;
    height: 110px;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0;
}
.sleep-character img {
    transform: rotate(-90deg);
    transform-origin: center center;
    animation: sleep-breathe 4s ease-in-out infinite;
}

@keyframes sleep-breathe {
    0%, 100% { transform: rotate(-90deg) scaleX(1); }
    50%      { transform: rotate(-90deg) scaleX(1.03); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .sleep-character img   { animation: none; transform: rotate(-90deg); }
    .sleep-stars span      { animation: none; display: none; }
    .sleep-zzz span        { animation: none; display: none; }
    .sleep-bed-blanket     { animation: none; }
    .sleep-glow {
        animation: mascot-glow-gentle 5s ease-in-out infinite;
    }
}


/* ══ Nutrition (icon="apple") ══ */

/* Nature glow */
.nutrition-glow {
    position: absolute;
    width: 180px;
    height: 180px;
    bottom: 30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(74, 222, 128, 0.2) 0%, transparent 70%);
    animation: nutrition-glow-pulse 3.5s ease-in-out infinite;
    z-index: 0;
}

@keyframes nutrition-glow-pulse {
    0%, 100% { transform: scale(0.85); opacity: 0.4; }
    50%      { transform: scale(1.1);  opacity: 0.7; }
}

/* Falling apples */
.nutrition-apples {
    position: absolute;
    width: 220px;
    height: 200px;
    top: 0;
    z-index: 2;
}
.nutrition-apples span {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #f87171, #dc2626);
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25);
    opacity: 0;
    animation: nutrition-apple-fall 3.5s ease-in infinite;
}
/* Apple stem + leaf */
.nutrition-apples span::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 5px;
    background: #92400e;
    border-radius: 1px;
}
.nutrition-apples span::after {
    content: '';
    position: absolute;
    top: -5px;
    left: 55%;
    width: 7px;
    height: 5px;
    background: #4ade80;
    border-radius: 0 50% 50% 0;
    transform: rotate(10deg);
}
.nutrition-apples span:nth-child(1) { left: 25px;  top: -10px; animation-delay: 0s; }
.nutrition-apples span:nth-child(2) { left: 100px; top: -15px; animation-delay: 0.8s; }
.nutrition-apples span:nth-child(3) { left: 170px; top: -5px;  animation-delay: 1.6s; }
.nutrition-apples span:nth-child(4) { left: 60px;  top: -12px; animation-delay: 2.4s; }
.nutrition-apples span:nth-child(5) { left: 140px; top: -8px;  animation-delay: 1.2s; }

@keyframes nutrition-apple-fall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
    10%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translateY(200px) rotate(45deg); opacity: 0; }
}

/* Leaf particles */
.nutrition-leaves {
    position: absolute;
    width: 200px;
    height: 160px;
    top: 20px;
    z-index: 2;
}
.nutrition-leaves span {
    position: absolute;
    width: 10px;
    height: 6px;
    background: rgba(74, 222, 128, 0.7);
    border-radius: 0 50% 50% 50%;
    opacity: 0;
    animation: nutrition-leaf-drift 4s ease-in-out infinite;
}
.nutrition-leaves span:nth-child(1) { top: 20px;  left: 15px;  animation-delay: 0s; }
.nutrition-leaves span:nth-child(2) { top: 50px;  left: 170px; animation-delay: 1s; }
.nutrition-leaves span:nth-child(3) { top: 80px;  left: 40px;  animation-delay: 2s; }
.nutrition-leaves span:nth-child(4) { top: 35px;  left: 140px; animation-delay: 3s; }

@keyframes nutrition-leaf-drift {
    0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
    15%  { opacity: 0.8; }
    85%  { opacity: 0.5; }
    100% { transform: translateY(40px) translateX(15px) rotate(60deg); opacity: 0; }
}

/* Ground shadow */
.nutrition-shadow {
    animation: nutrition-shadow-bob 2.8s ease-in-out infinite;
}

@keyframes nutrition-shadow-bob {
    0%, 100% { transform: scaleX(1);    opacity: 0.1; }
    50%      { transform: scaleX(0.88); opacity: 0.07; }
}

/* Character bob */
.nutrition-character img {
    animation: nutrition-bob 2.8s ease-in-out infinite;
}

@keyframes nutrition-bob {
    0%, 100% { transform: translateY(0) rotate(0); }
    50%      { transform: translateY(-4px) rotate(0.5deg); }
}

/* Sparkle freshness */
.nutrition-character::before,
.nutrition-character::after {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(74, 222, 128, 0.6);
    box-shadow: 0 0 6px 2px rgba(74, 222, 128, 0.3);
    z-index: 2;
    opacity: 0;
    animation: nutrition-sparkle 2s ease-in-out infinite;
}
.nutrition-character::before {
    top: 20px;
    right: 10px;
}
.nutrition-character::after {
    top: 35px;
    left: 10px;
    animation-delay: 1s;
}

@keyframes nutrition-sparkle {
    0%, 100% { transform: scale(0.3); opacity: 0; }
    50%      { transform: scale(1.2); opacity: 0.8; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .nutrition-character img  { animation: none; }
    .nutrition-apples span    { animation: none; display: none; }
    .nutrition-leaves span    { animation: none; display: none; }
    .nutrition-character::before,
    .nutrition-character::after { animation: none; display: none; }
    .nutrition-glow {
        animation: mascot-glow-gentle 4s ease-in-out infinite;
    }
}


/* ══ Plan (icon="calendar") ══ */

/* Focus glow */
.plan-glow {
    position: absolute;
    width: 180px;
    height: 180px;
    bottom: 30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(52, 211, 153, 0.18) 0%, transparent 70%);
    animation: plan-glow-pulse 3.5s ease-in-out infinite;
    z-index: 0;
}

@keyframes plan-glow-pulse {
    0%, 100% { transform: scale(0.85); opacity: 0.4; }
    50%      { transform: scale(1.1);  opacity: 0.7; }
}

/* Floating checkmarks */
.plan-checks {
    position: absolute;
    width: 220px;
    height: 180px;
    top: 10px;
    z-index: 2;
}
.plan-checks span {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: rgba(16, 185, 129, 0.15);
    border: 1.5px solid rgba(16, 185, 129, 0.35);
    opacity: 0;
    animation: plan-check-pop 3s ease-out infinite;
}
/* Checkmark tick */
.plan-checks span::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 3px;
    width: 5px;
    height: 9px;
    border: solid rgba(16, 185, 129, 0.8);
    border-width: 0 2px 2px 0;
    transform: rotate(40deg);
}
.plan-checks span:nth-child(1) { top: 20px;  left: 15px;  animation-delay: 0s; }
.plan-checks span:nth-child(2) { top: 60px;  left: 185px; animation-delay: 0.6s; }
.plan-checks span:nth-child(3) { top: 10px;  left: 120px; animation-delay: 1.2s; }
.plan-checks span:nth-child(4) { top: 80px;  left: 40px;  animation-delay: 1.8s; }
.plan-checks span:nth-child(5) { top: 40px;  left: 160px; animation-delay: 2.4s; }

@keyframes plan-check-pop {
    0%   { transform: scale(0.3) translateY(10px); opacity: 0; }
    20%  { transform: scale(1.15) translateY(-5px); opacity: 0.9; }
    30%  { transform: scale(1) translateY(0); opacity: 0.8; }
    80%  { opacity: 0.6; }
    100% { transform: scale(0.8) translateY(-30px); opacity: 0; }
}

/* Floating calendar pages */
.plan-pages {
    position: absolute;
    width: 200px;
    height: 160px;
    bottom: 50px;
    z-index: 2;
}
.plan-pages span {
    position: absolute;
    width: 16px;
    height: 20px;
    border-radius: 3px;
    background: rgba(52, 211, 153, 0.1);
    border: 1.5px solid rgba(52, 211, 153, 0.25);
    opacity: 0;
    animation: plan-page-drift 4.5s ease-in-out infinite;
}
/* Calendar header stripe */
.plan-pages span::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: rgba(16, 185, 129, 0.35);
    border-radius: 2px 2px 0 0;
}
/* Calendar dot grid */
.plan-pages span::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 3px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.4);
    box-shadow: 5px 0 0 rgba(16, 185, 129, 0.3), 0 -5px 0 rgba(16, 185, 129, 0.3), 5px -5px 0 rgba(16, 185, 129, 0.2);
}
.plan-pages span:nth-child(1) { bottom: 10px; left: 20px;  animation-delay: 0s; }
.plan-pages span:nth-child(2) { bottom: 25px; left: 160px; animation-delay: 1.5s; }
.plan-pages span:nth-child(3) { bottom: 5px;  left: 90px;  animation-delay: 3s; }

@keyframes plan-page-drift {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
    15%  { opacity: 0.7; }
    85%  { opacity: 0.5; }
    100% { transform: translateY(-60px) rotate(-12deg); opacity: 0; }
}

/* Progress bar */
.plan-progress {
    position: absolute;
    bottom: 55px;
    width: 120px;
    height: 6px;
    background: rgba(52, 211, 153, 0.15);
    border-radius: 3px;
    overflow: hidden;
    z-index: 2;
}
.plan-progress::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, rgba(16, 185, 129, 0.6), rgba(52, 211, 153, 0.8));
    border-radius: 3px;
    animation: plan-progress-fill 3.5s ease-in-out infinite;
}

@keyframes plan-progress-fill {
    0%        { width: 0%; }
    60%, 80%  { width: 100%; }
    100%      { width: 0%; opacity: 0; }
}

/* Ground shadow */
.plan-shadow {
    animation: plan-shadow-tick 2.5s ease-in-out infinite;
}

@keyframes plan-shadow-tick {
    0%, 100% { transform: scaleX(1);    opacity: 0.1; }
    50%      { transform: scaleX(0.9); opacity: 0.07; }
}

/* Character — purposeful sway */
.plan-character img {
    animation: plan-tick 2.5s ease-in-out infinite;
}

@keyframes plan-tick {
    0%, 100% { transform: translateY(0) rotate(0); }
    30%      { transform: translateY(-3px) rotate(1deg); }
    60%      { transform: translateY(0) rotate(-0.5deg); }
}

/* Sparkle accents */
.plan-character::before,
.plan-character::after {
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(52, 211, 153, 0.6);
    box-shadow: 0 0 6px 2px rgba(52, 211, 153, 0.3);
    z-index: 2;
    opacity: 0;
    animation: plan-sparkle 2.2s ease-in-out infinite;
}
.plan-character::before {
    top: 18px;
    right: 12px;
}
.plan-character::after {
    top: 30px;
    left: 12px;
    animation-delay: 1.1s;
}

@keyframes plan-sparkle {
    0%, 100% { transform: scale(0.3); opacity: 0; }
    50%      { transform: scale(1.2); opacity: 0.8; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .plan-character img    { animation: none; }
    .plan-checks span      { animation: none; display: none; }
    .plan-pages span       { animation: none; display: none; }
    .plan-progress::after  { animation: none; width: 65%; }
    .plan-character::before,
    .plan-character::after  { animation: none; display: none; }
    .plan-glow {
        animation: mascot-glow-gentle 4s ease-in-out infinite;
    }
}