/* ===== Animations Pack ===== */
@keyframes anFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes anFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes anScaleIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes anSlideRight { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes anSlideLeft { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes anHeroZoom { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes anFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes anBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes anShimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes anPulse { 0%,100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes anGradientShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes anScrollDot { 0% { transform: translateY(-4px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateY(8px); opacity: 0; } }
@keyframes anRailLine { 0%,100% { transform: scaleY(.6); } 50% { transform: scaleY(1); } }
@keyframes anSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes anWidth { from { width: 0; } }
@keyframes anQrPop { from { opacity: 0; transform: scale(.5) rotate(-8deg); } to { opacity: 1; transform: none; } }

/* hero entrance */
.hero-bg { animation: anHeroZoom 8s ease-out both; }
.hero-thai { animation: anFadeUp .8s .15s ease-out both; }
.hero-title > span { display: inline-block; animation: anFadeUp .9s ease-out both; }
.hero-title > span:nth-child(1) { animation-delay: .25s; }
.hero-title > span:nth-child(2) { animation-delay: .4s; }
.hero-title > span:nth-child(3) {
  animation-delay: .55s;
  background-size: 200% auto;
  animation: anFadeUp .9s .55s ease-out both, anGradientShift 6s ease-in-out infinite;
}
.hero-desc { animation: anFadeUp .9s .75s ease-out both; }
.hero-content .btn-dark { animation: anFadeUp .9s .9s ease-out both; }
.hero-rail { animation: anFade 1s 1.1s ease-out both; }
.hero-rail .rail-icons a { transition: transform .25s, color .25s; }
.hero-rail .rail-icons a:hover { transform: translateY(-3px) scale(1.1); color: var(--accent-2); }
.rail-line { transform-origin: center; animation: anRailLine 3.5s ease-in-out infinite; }
.rail-scroll svg { animation: anBounce 1.8s ease-in-out infinite; }

/* portrait hero (profile / portfolio) */
.hero-portrait-bg, .hero-portfolio .hero-portrait-bg { animation: anHeroZoom 8s ease-out both; }
.hp-thai { animation: anFadeUp .7s .15s ease-out both; }
.hp-title { animation: anFadeUp .9s .3s cubic-bezier(.2,.7,.2,1) both; }
.hp-role, .hp-tagline { animation: anFadeUp .8s .55s ease-out both; }
.hp-desc { animation: anFadeUp .8s .7s ease-out both; }
.hp-actions { animation: anFadeUp .8s .85s ease-out both; }
.crumbs { animation: anFade .6s ease-out both; }

/* nav hover */
.site-nav-link { transition: color .25s, opacity .25s; }
.site-nav-link::before {
  content: ""; position: absolute; left: 50%; right: 50%; bottom: 4px; height: 1px;
  background: currentColor; opacity: .6; transition: left .3s, right .3s;
}
.site-nav-link:hover::before { left: 0; right: 0; }
.site-nav-link.is-active::after { transform-origin: left; animation: anWidth .5s ease-out; }

/* buttons */
.btn-dark, .btn-purple, .btn-light-outline, .btn-outline-light, .btn-load, .btn-ghost {
  position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .25s, background .25s, color .25s, border-color .25s;
}
.btn-dark:hover, .btn-purple:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(237,28,36,.25); }
.btn-light-outline:hover, .btn-outline-light:hover, .btn-load:hover { transform: translateY(-2px); border-color: var(--accent); color: var(--accent); }
.btn-dark::after, .btn-purple::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.18), transparent);
  transition: left .6s;
}
.btn-dark:hover::after, .btn-purple:hover::after { left: 140%; }

/* stats counter style — float on hover */
.stat-item { transition: transform .3s; }
.stat-item:hover { transform: translateY(-4px); }
.stat-n { background: linear-gradient(90deg, #fff 0%, #f56b71 100%); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% auto; }
.stat-item:hover .stat-n { animation: anGradientShift 2s ease infinite; }

/* section reveal (scroll-triggered) */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal-1 { transition-delay: .08s; }
.reveal-2 { transition-delay: .16s; }
.reveal-3 { transition-delay: .24s; }
.reveal-4 { transition-delay: .32s; }

/* exhibition cards */
.exh-card { transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .35s; }
.exh-card:hover { transform: translateY(-6px); border-color: rgba(245,107,113,.4); box-shadow: 0 18px 40px rgba(0,0,0,.45); }
.exh-card .exh-img { transition: transform .8s ease; }
.exh-card:hover .exh-img { transform: scale(1.06); }
.exh-card { overflow: hidden; }
.exh-arrow { transition: transform .25s, background .25s; }
.exh-arrow:hover { transform: translateY(-50%) scale(1.1); background: var(--accent); border-color: var(--accent); }

/* filter pills */
.pill { transition: transform .2s, background .2s, color .2s; }
.pill:hover { transform: translateY(-1px); }

/* project tiles + portfolio tiles */
.project-tile { position: relative; overflow: hidden; transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.project-tile::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(237,28,36,.5));
  opacity: 0; transition: opacity .35s;
}
.project-tile:hover { transform: translateY(-6px) scale(1.02); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.project-tile:hover::after { opacity: 1; }
.projects-grid { perspective: 1200px; }

/* news */
.news-card { transition: transform .35s; overflow: hidden; }
/* Scale lives on ::before so it's clipped inside the image box — doesn't overlap text */
.news-card .news-img {
  position: relative;
  overflow: hidden;
}
.news-card .news-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  transition: transform .8s ease;
}
.news-card:hover .news-img::before { transform: scale(1.05); }
.read-more { transition: color .2s, gap .25s; }
.read-more:hover { color: var(--accent-2); }
.read-more svg { transition: transform .25s; }
.read-more:hover svg { transform: translateX(4px); }

/* featured cards */
.feat-card .feat-img { transition: transform .7s ease, filter .35s; overflow: hidden; }
.feat-card { overflow: hidden; }
.feat-card:hover .feat-img { transform: scale(1.05); filter: brightness(1.05); }
.feat-card .feat-t { transition: color .25s; }
.feat-card:hover .feat-t { color: var(--accent); }

/* portfolio cards */
.port-card .port-img { transition: transform .7s ease; overflow: hidden; }
.port-card { overflow: hidden; }
.port-card:hover .port-img { transform: scale(1.04); }
.port-card .port-meta h3 { transition: color .25s; }
.port-card:hover .port-meta h3 { color: var(--accent); }

/* portfolio tabs underline */
.port-tab::after {
  content: ""; position: absolute; bottom: -1px; left: 0; right: 100%; height: 2px;
  background: var(--accent); transition: right .3s ease;
}
.port-tab:hover::after { right: 0; }
.port-tab.is-active::after { right: 0; }
.port-tab.is-active::before { display: none; }

/* skills bars */
.skill-fill, .sw-fill, .fp-fill { background: linear-gradient(90deg, var(--accent-2), var(--accent)); background-size: 200% 100%; animation: anShimmer 3s linear infinite; transition: width .8s cubic-bezier(.2,.7,.2,1); }
.skill-row { transition: transform .25s; }
.skill-row:hover { transform: translateX(4px); }

.ps-tile { transition: transform .3s, border-color .25s, color .25s; }
.ps-tile:hover { transform: translateY(-3px); border-color: var(--accent); }
.ps-tile:hover svg { animation: anFloat 1.4s ease-in-out infinite; }

/* timeline */
.tl-dot { transition: transform .25s, box-shadow .25s; box-shadow: 0 0 0 0 rgba(237,28,36,.4); }
.tl-item:hover .tl-dot { transform: scale(1.4); box-shadow: 0 0 0 6px rgba(237,28,36,.15); }
.award-row { transition: transform .25s, background .25s; padding-left: 8px; margin-left: -8px; border-radius: 4px; }
.award-row:hover { transform: translateX(4px); background: var(--accent-bg); }
.award-ic { transition: transform .3s; }
.award-row:hover .award-ic { transform: rotate(-8deg) scale(1.08); }

/* work CTA */
.work-cta h2 { background: linear-gradient(90deg, #fff, #f56b71); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% auto; animation: anGradientShift 6s ease infinite; }
.qr-card { animation: anQrPop 1s cubic-bezier(.34,1.56,.64,1) both; transition: transform .35s; }
.qr-card:hover { transform: translateY(-4px) rotate(-1deg); }

/* footers — social hover */
.footer-social a, .footer-light-social a { transition: transform .25s, color .25s; display: inline-flex; }
.footer-social a:hover, .footer-light-social a:hover { transform: translateY(-3px) scale(1.15); color: var(--accent-2); }
.footer-col ul li, .footer-light-cols > div ul li { transition: color .2s, transform .2s, padding-left .25s; }
.footer-col ul li:hover, .footer-light-cols > div ul li:hover { padding-left: 6px; color: var(--accent-2); }

/* top tab */
.top-tab button { transition: background .25s, color .25s, transform .2s; }
.top-tab button:hover:not(.is-active) { transform: translateY(-1px); color: var(--accent); }

/* form interactions */
.step-item { transition: background .25s, transform .25s; }
.step-item:hover { transform: translateX(4px); }
.step-num { transition: transform .35s, background .25s, border-color .25s; }
.step-item.is-active .step-num { animation: anPulse 1.8s ease-in-out infinite; }
.collapsed-card { transition: transform .25s, border-color .25s, box-shadow .25s; }
.collapsed-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(237,28,36,.1); }
.ff-input, .ff-textarea, .ff-select select { transition: border-color .2s, box-shadow .2s, transform .2s; }
.chip { transition: transform .2s, background .25s, color .25s, border-color .25s; }
.chip:hover { transform: translateY(-2px); background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.work-card .work-img { transition: transform .5s ease; overflow: hidden; }
.work-card:hover .work-img { transform: scale(1.04); }

/* icon hover */
.icon-btn { transition: transform .25s, background .25s; }
.icon-btn:hover { transform: scale(1.08); }

/* logo float */
.logo-mark { transition: transform .3s; }
.logo:hover .logo-mark { transform: translateY(-2px); }

/* page enter */
.page-home, .page-profile, .page-portfolio, .page-form { animation: anFade .5s ease-out both; }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-delay: 0s !important;
    transition-duration: .001s !important;
  }
}