/* css/components/animations.css — Star/meteor animations, ASTRA mascot */

/* ═══ STAR / METEOR ANIMATIONS ═══ */
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes bounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes star-trail{0%{top:-40px;right:-40px;opacity:0}10%{opacity:.9}50%{opacity:.4}80%,100%{top:140%;right:140%;opacity:0}}
@keyframes btn-shine{0%,70%,100%{left:-100%}40%{left:130%}}
@keyframes float-star{0%,100%{transform:translateY(0) scale(1);opacity:.6}50%{transform:translateY(-6px) scale(1.1);opacity:1}}
@keyframes glow-pulse{0%,100%{box-shadow:0 0 12px rgba(139,123,184,.2)}50%{box-shadow:0 0 28px rgba(139,123,184,.45),0 0 50px rgba(139,123,184,.1)}}
@keyframes orbit{from{transform:rotate(0deg) translateX(12px) rotate(0deg)}to{transform:rotate(360deg) translateX(12px) rotate(-360deg)}}

/* Random star delays for cards */
.card:nth-child(odd){--star-dur:9s;--star-del:1s}
.card:nth-child(even){--star-dur:11s;--star-del:4s}
.card:nth-child(3n){--star-dur:7s;--star-del:2s}

.skel{background:rgba(139,123,184,.12);border-radius:var(--r1);animation:pulse 1.5s infinite}

/* ═══ SHOOTING STARS BACKGROUND ═══ */
@keyframes shoot-star{
  0%{transform:translate(0,0) rotate(-35deg);opacity:0}
  8%{opacity:1}
  60%{opacity:.5}
  100%{transform:translate(280px,280px) rotate(-35deg);opacity:0}
}
@keyframes twinkle{0%,100%{opacity:.2;transform:scale(1)}50%{opacity:.8;transform:scale(1.3)}}
.ss{position:absolute;border-radius:50%;animation:shoot-star linear infinite;opacity:0}
.ts{position:absolute;border-radius:50%;background:rgba(180,167,208,.6);animation:twinkle ease-in-out infinite}

@media (prefers-reduced-motion: reduce){
  .ss,.ts{animation:none!important;opacity:.3!important}
  .btn::before{animation:none!important}
  .card::before{animation:none!important}
}
@media (max-width:430px) and (pointer:coarse){
  /* ลด star count บน low-end mobile — ควบคุมผ่าน JS */
}

/* ─── ASTRA MASCOT ANIMATIONS ─── */
@keyframes astra-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.02)}}
@keyframes astra-talk{0%,100%{opacity:0}50%{opacity:1}}
@keyframes astra-bounce{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.astra-mascot{position:relative;display:inline-block}
.astra-mascot img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 20px rgba(139,123,184,.5))}
.astra-idle{animation:astra-float 3s ease-in-out infinite}
.astra-talking .v-mouth-close{display:none}
.astra-talking .v-mouth-open{display:block!important}
.astra-idle .v-mouth-close{display:block}
.astra-idle .v-mouth-open{display:none}
.astra-frame{position:absolute;inset:0}

/* ─── CHARACTER LAYER SYSTEM (Astra · Nova) ─────────────────────────
 * ชี้ไปที่ assets จริงใน components/astra/ และ components/nova/
 * scale ถูกคำนวณจาก JS ตาม container size
 * --------------------------------------------------------------- */
@keyframes char-mini-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes char-mini-glow{0%,100%{opacity:0.3}50%{opacity:0.8}}
@keyframes char-mini-orbit{from{transform:translate(var(--cmtx),var(--cmty)) rotateY(0deg)}to{transform:translate(var(--cmtx),var(--cmty)) rotateY(360deg)}}
@keyframes char-mini-pulse{0%,100%{opacity:0.8;transform:translate(var(--cmtx),var(--cmty)) scale(1)}50%{opacity:1;transform:translate(var(--cmtx),var(--cmty)) scale(1.06)}}
.char-mini-wrap{position:relative;overflow:hidden}
.char-mini-anchor{position:absolute;left:50%;width:0;height:0;z-index:1}
.char-mini-float{animation:char-mini-float 3s ease-in-out infinite}
.char-mini-layer{position:absolute;left:0;top:0;pointer-events:none;user-select:none;will-change:transform}
.char-mini-glow{animation:char-mini-glow 2.5s ease-in-out infinite}
.char-mini-orbit{animation:char-mini-orbit 6s linear infinite}
.char-mini-orbit-rev{animation:char-mini-orbit 4s linear infinite reverse}
.char-mini-pulse{animation:char-mini-pulse 2s ease-in-out infinite}