/* Animated guide illustrations: homepage guide cards, article banners and "Keep exploring" cards. */
.guide-grid-art{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.guide-card.has-art{display:flex;flex-direction:column;padding:0 0 18px;overflow:hidden;border-radius:22px}
.guide-card.has-art>:not(.guide-art){margin-left:20px;margin-right:20px}
.guide-card.has-art .number{margin-top:14px}
.guide-card.has-art h3{margin:6px 20px 6px}
.guide-card.has-art p{flex:1;margin-top:0}
.guide-card.has-art .read-more{font-weight:800;color:var(--primary-dark)}
.guide-card.has-art:hover .read-more{text-decoration:underline}
.guide-art{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:6px;height:150px;overflow:hidden;background:linear-gradient(180deg,#bfe9ff,#e9f7ff 70%,#d5f3d9 70%,#c5edcb)}
.guide-art .ga-pet{position:relative;z-index:1;height:112px;width:auto;margin-bottom:10px;filter:drop-shadow(0 8px 6px #1f2f5f26);transform-origin:50% 90%;animation:ga-bob 3s ease-in-out infinite}
.guide-card.has-art:hover .ga-pet{animation-duration:1.2s}
.guide-art i,.guide-art b{position:absolute;z-index:2;font-style:normal;line-height:1;pointer-events:none}

.ga-swap{background:linear-gradient(180deg,#d9d0ff,#f1edff 70%,#d6c9ff 70%,#cbbcff)}
.ga-swap .ga-pet{height:92px}
.ga-swap .ga-pet.a{animation:ga-swap-a 3.2s ease-in-out infinite}
.ga-swap .ga-pet.b{animation:ga-swap-b 3.2s ease-in-out infinite}
.ga-swap .ga-arrows{position:static;align-self:center;font-size:30px;font-weight:800;color:#6c55f5;animation:ga-pulse 1.6s ease-in-out infinite}

.ga-win{background:linear-gradient(180deg,#fff2c2,#fffbea 70%,#ffe6a1 70%,#ffd98a)}
.ga-win .ga-pet{animation:ga-jump 1.8s cubic-bezier(.3,.6,.4,1) infinite}
.ga-star{color:#ffc21a;text-shadow:0 2px 0 #e59a00;animation:ga-twinkle 1.6s ease-in-out infinite}
.ga-star.s1{left:18%;top:22%;font-size:26px}.ga-star.s2{right:20%;top:14%;font-size:20px;animation-delay:.5s}.ga-star.s3{right:12%;top:52%;font-size:16px;animation-delay:1s}

.ga-demand{background:linear-gradient(180deg,#ffd9ec,#fff1f8 70%,#ffc9e2 70%,#ffb8d9)}
.ga-heart{bottom:40px;color:#ff4f93;font-size:22px;opacity:0;animation:ga-float-up 3s ease-in infinite}
.ga-heart.h1{left:28%}.ga-heart.h2{left:62%;font-size:16px;animation-delay:1s}.ga-heart.h3{left:45%;font-size:18px;animation-delay:2s}

.ga-neon{background:radial-gradient(circle at 50% 60%,#3a2c8a,#18124a 75%)}
.ga-neon .ga-pet{animation:ga-bob 3s ease-in-out infinite,ga-neon 2s ease-in-out infinite}

.ga-mega{background:linear-gradient(135deg,#ffd6f1,#d9d2ff,#c9f1ff,#d8ffd9,#fff3c4);background-size:300% 300%;animation:ga-rainbow-bg 6s linear infinite}
.ga-mega .ga-pet{animation:ga-bob 3s ease-in-out infinite,ga-hue 4s linear infinite}

.ga-fly{background:linear-gradient(180deg,#8fd3ff,#d7f0ff)}
.ga-fly .ga-pet{margin-bottom:22px;animation:ga-fly 2.6s ease-in-out infinite}
.ga-cloud{width:70px;height:22px;border-radius:20px;background:#fff;opacity:.9;box-shadow:18px -10px 0 4px #fff;animation:ga-drift 9s linear infinite}
.ga-cloud.c1{top:26px;left:-80px}.ga-cloud.c2{top:78px;left:-80px;transform:scale(.7);animation-duration:13s;animation-delay:-5s}

.ga-evaluate{background:linear-gradient(180deg,#d4f5ea,#f0fcf7 70%,#bfeccd 70%,#a9e3ba)}
.ga-lens{position:absolute;z-index:2;left:50%;top:26px;width:44px;height:44px;padding:8px;border-radius:50%;background:#ffffffd9;box-shadow:0 4px 10px #1f2f5f2e;animation:ga-scan 3s ease-in-out infinite}

.ga-change{background:linear-gradient(180deg,#fff0d9,#fff9ef 70%,#ffe0b0 70%,#ffd49a)}
.ga-trend{font-size:24px;animation:ga-rise 1.8s ease-in-out infinite}
.ga-trend.up{left:22%;top:34px;color:#2eb85c}
.ga-trend.down{right:22%;top:44px;color:#e8475f;animation-name:ga-fall}

.ga-safe{background:linear-gradient(180deg,#e2e9ff,#f3f6ff 70%,#cfd9ff 70%,#bfcdff)}
.ga-shield{position:absolute;z-index:0;left:50%;top:18px;width:84px;height:94px;margin-left:-8px;animation:ga-shield 2.4s ease-in-out infinite;filter:drop-shadow(0 6px 10px #4b3ad455)}
.ga-safe .ga-pet{margin-right:70px}

@keyframes ga-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes ga-swap-a{0%,100%{transform:translateX(0)}45%,55%{transform:translateX(12px) rotate(4deg)}}
@keyframes ga-swap-b{0%,100%{transform:translateX(0) scaleX(-1)}45%,55%{transform:translateX(-12px) scaleX(-1) rotate(4deg)}}
@keyframes ga-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@keyframes ga-jump{0%,100%{transform:translateY(0) scale(1,1)}10%{transform:translateY(0) scale(1.06,.94)}40%{transform:translateY(-22px) scale(.97,1.04)}70%{transform:translateY(0) scale(1.04,.96)}}
@keyframes ga-twinkle{0%,100%{transform:scale(.6) rotate(0);opacity:.4}50%{transform:scale(1.2) rotate(20deg);opacity:1}}
@keyframes ga-float-up{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:1}100%{transform:translateY(-90px) scale(1.1);opacity:0}}
@keyframes ga-neon{0%,100%{filter:drop-shadow(0 0 6px #52f5ff) drop-shadow(0 0 14px #52f5ff99)}50%{filter:drop-shadow(0 0 10px #ff6bf1) drop-shadow(0 0 22px #ff6bf1aa)}}
@keyframes ga-hue{to{filter:hue-rotate(360deg) drop-shadow(0 8px 6px #1f2f5f26)}}
@keyframes ga-rainbow-bg{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@keyframes ga-fly{0%,100%{transform:translate(-14px,4px) rotate(-6deg)}50%{transform:translate(14px,-12px) rotate(6deg)}}
@keyframes ga-drift{to{left:110%}}
@keyframes ga-scan{0%,100%{transform:translateX(-60px) rotate(-10deg)}50%{transform:translateX(20px) rotate(10deg)}}
@keyframes ga-rise{0%,100%{transform:translateY(6px);opacity:.5}50%{transform:translateY(-8px);opacity:1}}
@keyframes ga-fall{0%,100%{transform:translateY(-6px);opacity:.5}50%{transform:translateY(8px);opacity:1}}
@keyframes ga-shield{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

@media(max-width:1000px){.guide-grid-art{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.guide-grid-art{grid-template-columns:1fr}.guide-art{height:130px}.guide-art .ga-pet{height:96px}}
@media(prefers-reduced-motion:reduce){
  .guide-art *,.guide-art{animation:none!important}
  .ga-heart{opacity:1}.ga-cloud.c1{left:10%}.ga-cloud.c2{left:60%}
}

/* Article banner: the same scenes, larger, at the top of each guide. */
.guide-hero-art{height:240px;margin:-6px 0 24px;border-radius:22px;box-shadow:inset 0 0 0 1px #ffffff80}
.guide-hero-art .ga-pet{height:170px;margin-bottom:16px}
.guide-hero-art.ga-swap .ga-pet{height:140px}
.guide-hero-art.ga-swap .ga-arrows{font-size:46px}
.guide-hero-art .ga-star.s1{font-size:38px}.guide-hero-art .ga-star.s2{font-size:30px}.guide-hero-art .ga-star.s3{font-size:24px}
.guide-hero-art .ga-heart{font-size:30px;bottom:70px}
.guide-hero-art.ga-fly .ga-pet{height:140px;margin-bottom:40px}
.guide-hero-art .ga-cloud{width:110px;height:32px}
.guide-hero-art .ga-lens{width:64px;height:64px;padding:12px;top:36px}
.guide-hero-art .ga-trend{font-size:36px}
.guide-hero-art .ga-shield{width:124px;height:140px;top:30px}
.guide-hero-art.ga-safe .ga-pet{margin-right:110px}
/* Keep exploring cards on guide pages: compact scenes. */
.guide-grid .guide-card.has-art .guide-art:not(.guide-hero-art){height:120px}
.guide-grid .guide-card.has-art .guide-art:not(.guide-hero-art) .ga-pet{height:84px;margin-bottom:8px}
.guide-card.has-art>h3:first-of-type{margin-top:14px}
@media(max-width:600px){.guide-hero-art{height:180px;border-radius:16px}.guide-hero-art .ga-pet{height:120px}.guide-hero-art.ga-swap .ga-pet{height:100px}.guide-hero-art .ga-shield{width:92px;height:104px}.guide-hero-art.ga-safe .ga-pet{margin-right:80px}}

/* Extra scenes for page titles (About, Contact, FAQ, Methodology, Privacy, Updates, 404). */
.ga-friends{background:linear-gradient(180deg,#d7f0ff,#eef9ff 70%,#cdeed4 70%,#b9e6c3)}
.ga-friends .ga-pet{height:104px}
.ga-friends .ga-pet.a{animation:ga-bob 3s ease-in-out infinite}
.ga-friends .ga-pet.b{animation:ga-bob 3s ease-in-out -1.5s infinite}
.ga-mail{background:linear-gradient(180deg,#fff1dc,#fff9f0 70%,#ffe2bd 70%,#ffd6a4)}
.ga-mail .ga-pet{margin-right:60px}
.ga-mail .ga-prop{position:absolute;z-index:2;left:56%;top:22px;width:80px;height:60px;animation:ga-swing 2.4s ease-in-out infinite;transform-origin:50% 100%}
.ga-question{background:linear-gradient(180deg,#e4e8ff,#f3f5ff 70%,#d3daff 70%,#c3ccff)}
.ga-question .ga-q{bottom:50px;color:#6c55f5;font:400 26px/1 var(--font-game);opacity:0;animation:ga-float-up 3.2s ease-in infinite;text-shadow:0 2px 0 #fff}
.ga-question .ga-q.q1{left:26%}.ga-question .ga-q.q2{left:64%;font-size:20px;animation-delay:1.1s}.ga-question .ga-q.q3{left:46%;font-size:32px;animation-delay:2.2s}
.ga-gems{background:linear-gradient(180deg,#efe6ff,#f8f4ff 70%,#e2d3ff 70%,#d3bfff)}
.ga-gems .ga-gem{position:absolute;z-index:2;bottom:46px;width:22px;height:22px;color:#9446f7;opacity:0;animation:ga-float-up 3s ease-in infinite;filter:drop-shadow(0 2px 2px #4b3ad455)}
.ga-gems .ga-gem.g1{left:24%}.ga-gems .ga-gem.g2{left:66%;animation-delay:1s}.ga-gems .ga-gem.g3{left:46%;width:28px;height:28px;animation-delay:2s}
.ga-lock{background:linear-gradient(180deg,#dfe7ff,#f1f4ff 70%,#cdd8ff 70%,#bccbff)}
.ga-lock .ga-prop{position:absolute;z-index:0;left:52%;top:20px;width:84px;height:92px;animation:ga-shield 2.4s ease-in-out infinite}
.ga-lock .ga-pet{margin-right:78px}
.ga-clock{background:linear-gradient(180deg,#fff4d6,#fffaea 70%,#ffe9b0 70%,#ffdf94)}
.ga-clock .ga-prop{position:absolute;z-index:2;left:56%;top:24px;width:70px;height:70px}
.ga-clock .ga-hand{position:absolute;left:50%;top:50%;width:3px;height:24px;margin:-24px 0 0 -1.5px;border-radius:2px;background:#5b3be0;transform-origin:50% 100%;animation:ga-spin 4s linear infinite}
.ga-clock .ga-hand.short{height:16px;margin-top:-16px;animation-duration:48s}
.ga-lost{background:linear-gradient(180deg,#e9edf7,#f6f8fc 70%,#d9dfee 70%,#cbd3e6)}
.ga-lost .ga-pet{animation:ga-sway 2.6s ease-in-out infinite}
.ga-lost .ga-q{bottom:60px;color:#6f7896;font:400 28px/1 var(--font-game);opacity:0;animation:ga-float-up 3.4s ease-in infinite}
.ga-lost .ga-q.q1{left:30%}.ga-lost .ga-q.q2{left:60%;animation-delay:1.7s}
@keyframes ga-swing{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-6px)}}
@keyframes ga-spin{to{transform:rotate(360deg)}}
@keyframes ga-sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}