/* UI ร่วมทุกหน้า: ช่องกรอกพื้นขาว + ไอคอนอนิเมชัน (CSS ล้วน บน Material Symbols)
   ไอคอนอนิเมชัน —
   ic-float / ic-pulse = เล่นวนตลอด · ic-in = เล่นครั้งเดียวตอนปรากฏ
   ที่เหลือเล่นเมื่อ hover ปุ่ม/ลิงก์/ป้าย ที่ครอบไอคอนอยู่ */
/* ช่องกรอกทุกชนิดพื้นขาว (ธีม nord ให้พื้นเทา) */
.input, .select, .textarea, .input-bordered, .select-bordered, .textarea-bordered{ background-color:#fff; }
.input:disabled, .select:disabled, .textarea:disabled{ background-color:#f1f5f9; }

[class*="ic-"]{ display:inline-block; transform-origin:center; }

.ic-float{ animation: icFloat 3.2s ease-in-out infinite; }
.ic-pulse{ animation: icPulse 2.4s ease-in-out infinite; }
.ic-in{ animation: icPopIn .5s cubic-bezier(.34,1.56,.64,1) both; }

:is(.btn,a,button,label,.ic-host):hover .ic-wiggle{ animation: icWiggle .65s ease; }
:is(.btn,a,button,label,.ic-host):hover .ic-spin{ animation: icSpin .7s ease; }
:is(.btn,a,button,label,.ic-host):hover .ic-spin-rev{ animation: icSpinRev .7s ease; }
:is(.btn,a,button,label,.ic-host):hover .ic-bounce{ animation: icBounce .6s ease; }
:is(.btn,a,button,label,.ic-host):hover .ic-down{ animation: icDown .6s ease; }
:is(.btn,a,button,label,.ic-host):hover .ic-nudge-l{ animation: icNudgeL .6s ease; }
:is(.btn,a,button,label,.ic-host):hover .ic-pop{ animation: icPop .5s ease; }
:is(.btn,a,button,label,.ic-host):hover .ic-shake{ animation: icShake .5s ease; }
:is(.btn,a,button,label,.ic-host):hover .ic-rot90{ animation: icRot90 .4s ease forwards; }
.ic-host:hover .ic-float{ animation-play-state: paused; transform: scale(1.12); }

@keyframes icFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-3px) } }
@keyframes icPulse{ 0%,100%{ transform:scale(1); opacity:1 } 50%{ transform:scale(1.18); opacity:.7 } }
@keyframes icPopIn{ from{ transform:scale(.3) rotate(-25deg); opacity:0 } to{ transform:none; opacity:1 } }
@keyframes icWiggle{ 0%,100%{ transform:rotate(0) } 20%{ transform:rotate(-14deg) } 45%{ transform:rotate(12deg) } 70%{ transform:rotate(-8deg) } }
@keyframes icSpin{ to{ transform:rotate(360deg) } }
@keyframes icSpinRev{ to{ transform:rotate(-360deg) } }
@keyframes icBounce{ 0%,100%{ transform:translateY(0) } 35%{ transform:translateY(-4px) } 65%{ transform:translateY(1px) } }
@keyframes icDown{ 0%,100%{ transform:translateY(0) } 40%{ transform:translateY(4px) } }
@keyframes icNudgeL{ 0%,100%{ transform:translateX(0) } 40%{ transform:translateX(-4px) } }
@keyframes icPop{ 0%{ transform:scale(1) } 45%{ transform:scale(1.3) } 100%{ transform:scale(1) } }
@keyframes icShake{ 0%,100%{ transform:translateX(0) } 20%{ transform:translateX(-2px) rotate(-8deg) } 50%{ transform:translateX(2px) rotate(8deg) } 80%{ transform:translateX(-1px) rotate(-4deg) } }
@keyframes icRot90{ to{ transform:rotate(90deg) } }

/* ไอคอนหน้าข้อความในแท็บเหตุ — ขยับเมื่อกดเลือก (เล่นตอน input ถูก checked) และขยับเล็กน้อยเมื่อ hover */
.tab-ic{ display:block; font-size:18px; line-height:1; transition: transform .25s ease; }
.seg label:hover .tab-ic{ transform: scale(1.15); }
.seg label:has(input:checked) .tab-ic.t-go{ animation: tabDrive .7s cubic-bezier(.34,1.3,.5,1); }
.seg label:has(input:checked) .tab-ic.t-sick{ animation: tabBeat .8s ease; }
.seg label:has(input:checked) .tab-ic.t-personal{ animation: tabSwing .8s ease; }
.seg label:has(input:checked) .tab-ic.t-other{ animation: tabDots .7s ease; }
@keyframes tabDrive{ 0%{ transform:translateX(-10px); opacity:.2 } 60%{ transform:translateX(3px); opacity:1 } 100%{ transform:none } }
@keyframes tabBeat{ 0%,100%{ transform:scale(1) } 15%{ transform:scale(1.4) } 30%{ transform:scale(1) } 45%{ transform:scale(1.3) } 60%{ transform:scale(1) } }
@keyframes tabSwing{ 0%{ transform:rotate(0) } 20%{ transform:rotate(-22deg) } 45%{ transform:rotate(18deg) } 70%{ transform:rotate(-8deg) } 100%{ transform:rotate(0) } }
@keyframes tabDots{ 0%{ transform:translateY(0) scale(1) } 30%{ transform:translateY(-5px) scale(1.2) } 60%{ transform:translateY(1px) } 100%{ transform:none } }

@media (prefers-reduced-motion: reduce){
  [class*="ic-"], .tab-ic{ animation:none !important; transition:none !important; }
}