/* =========================================================
   อนิเมชันทั้งเว็บไซต์ (หน้าสาธารณะ) — โหลดต่อจาก style.css
   ปิดอัตโนมัติถ้าผู้ใช้ตั้งค่า "ลดการเคลื่อนไหว" ในอุปกรณ์
   ========================================================= */
:root{--ease:cubic-bezier(.22,.8,.24,1)}

/* ---------- โหลดหน้า ---------- */
@keyframes aFade{from{opacity:0}to{opacity:1}}
@keyframes aUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes aDown{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:none}}
@keyframes aZoom{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@keyframes aBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes aDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(-30px,24px) scale(1.12)}}
body{animation:aFade .5s ease both}
.site-header{animation:aDown .7s var(--ease) both}
.page-head .crumb,.page-head h1{animation:aUp .8s var(--ease) both}
.page-head h1{animation-delay:.12s}
.page-head::after{animation:aDrift 9s ease-in-out infinite alternate}

/* ---------- เลื่อนลงแล้วค่อยๆ ปรากฏ ---------- */
.rv,.card.rv{opacity:0;translate:0 30px;scale:.98;
  transition:opacity .8s var(--ease),translate .8s var(--ease),scale .8s var(--ease),transform .3s,box-shadow .3s,background .25s,color .25s,border-color .25s}
.rv[data-rv=left]{translate:-48px 0}
.rv[data-rv=right]{translate:48px 0}
.rv[data-rv=zoom]{translate:0 0;scale:.86}
.rv.in,.card.rv.in{opacity:1;translate:0 0;scale:1}

/* หัวข้อส่วน: เส้นใต้ไหลออกมา */
.sec-head h2::after{content:"";display:block;width:0;height:4px;margin-top:8px;border-radius:99px;background:linear-gradient(90deg,var(--m),var(--p7));transition:width .9s .35s var(--ease)}
.sec-head.in h2::after{width:64px}

/* ---------- แถบความคืบหน้าการเลื่อน ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:100;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--m),#8B5CF6);pointer-events:none}

/* ---------- เมนู / โลโก้ / ปุ่ม ---------- */
.brand>:first-child{transition:transform .45s var(--ease)}
.brand:hover>:first-child{transform:rotate(-10deg) scale(1.1)}
.nav a{position:relative}
.nav a:not(.nav-cta)::after{content:"";position:absolute;left:50%;bottom:4px;width:0;height:2px;border-radius:2px;background:var(--m);transition:width .3s var(--ease),left .3s var(--ease)}
.nav a:not(.nav-cta):hover::after,.nav a.on::after{width:calc(100% - 28px);left:14px}
.nav a.nav-cta{transition:background .2s,transform .25s,box-shadow .25s}
.nav a.nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(224,21,123,.45)}
.btn{position:relative;overflow:hidden}
.btn:active{transform:translateY(0) scale(.97)}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.45);transform:scale(0);animation:aRipple .65s ease-out forwards;pointer-events:none}
@keyframes aRipple{to{transform:scale(1);opacity:0}}

/* ---------- การ์ด / รูป / ข่าว ---------- */
.card .cb strong{transition:color .25s}
.card:hover .cb strong{color:var(--m)}
.card .count{transition:transform .3s}
.card:hover .count{transform:scale(1.08)}
.news-item{transition:opacity .8s var(--ease),translate .8s var(--ease),scale .8s var(--ease),transform .3s,box-shadow .3s,background .25s}
.news-item:hover{transform:translateX(8px)}
.person img,.person .initial{transition:transform .45s var(--ease),box-shadow .35s}
.person:hover img,.person:hover .initial{transform:translateY(-6px) scale(1.06);box-shadow:0 16px 32px rgba(224,21,123,.28)}
.stat,.vm-card{transition:opacity .8s var(--ease),translate .8s var(--ease),scale .8s var(--ease),transform .35s var(--ease),box-shadow .35s}
.stat:hover,.vm-card:hover{transform:translateY(-6px);box-shadow:0 18px 38px rgba(74,26,122,.2)}
.stat-ic,.vm-ic{animation:aBob 3.6s ease-in-out infinite}
.vm-mission .vm-ic{animation-delay:-1.6s}
.tile .ico{transition:transform .35s var(--ease)}
.tile:hover .ico{transform:rotate(-8deg) scale(1.12)}
.mission-list li{transition:transform .3s var(--ease)}
.mission-list li:hover{transform:translateX(6px)}
.gallery a{display:block;overflow:hidden;border-radius:12px}
.gallery img{transition:transform .6s var(--ease)}
.gallery a:hover img{transform:scale(1.07)}
.c-box{transition:opacity .8s var(--ease),translate .8s var(--ease),scale .8s var(--ease),transform .35s var(--ease),box-shadow .35s}
.c-box:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(74,26,122,.16)}

/* รูปค่อยๆ เฟดเข้าเมื่อโหลดเสร็จ */
.img-fade{opacity:0;transition:opacity .7s ease,transform .6s}
.img-fade.loaded{opacity:1}

/* ---------- พารัลแลกซ์โลโก้หน้าแรก ---------- */
.sun{translate:0 var(--py,0px);will-change:translate}

/* ---------- ปุ่มกลับขึ้นบน ---------- */
.to-top{position:fixed;right:20px;bottom:22px;z-index:90;width:46px;height:46px;border:0;border-radius:50%;cursor:pointer;color:#fff;font-size:1.3rem;line-height:1;background:linear-gradient(135deg,var(--m),#8B5CF6);box-shadow:0 10px 24px rgba(224,21,123,.45);opacity:0;transform:translateY(18px) scale(.8);pointer-events:none;transition:opacity .3s,transform .35s var(--ease)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{transform:translateY(-4px) scale(1.06)}
.to-top:active{transform:scale(.94)}

/* ---------- Lightbox ---------- */
.lb.on{animation:aFade .25s ease both}
.lb.on img{animation:aZoom .35s var(--ease) both}

/* ---------- ท้ายเว็บ ---------- */
.site-footer a{transition:color .2s,opacity .2s}
.soc a{transition:transform .25s}
.soc a:hover{transform:translateY(-3px)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .rv{opacity:1!important;translate:none!important;scale:none!important}
  .img-fade{opacity:1!important}
  .scroll-progress,.to-top{display:none}
}