/*
 * Motion & animation — หน้า index / กำหนดการ / โครงการ / หน้ารอง (body.page-inner)
 * รองรับ prefers-reduced-motion
 */

@media (prefers-reduced-motion: no-preference) {
  html:has(body.page-index),
  html:has(body.page-schedule),
  html:has(body.page-project),
  html:has(body.page-inner) {
    scroll-behavior: smooth; } }

/* --- Navbar shadow on scroll --- */
body.page-index .custom-navbar,
body.page-schedule .custom-navbar,
body.page-project .custom-navbar,
body.page-inner .custom-navbar {
  -webkit-transition: -webkit-box-shadow 0.35s ease, background-color 0.35s ease;
  transition: box-shadow 0.35s ease, background-color 0.35s ease; }

body.page-index .custom-navbar.index-nav-scrolled,
body.page-schedule .custom-navbar.index-nav-scrolled,
body.page-project .custom-navbar.index-nav-scrolled,
body.page-inner .custom-navbar.index-nav-scrolled {
  -webkit-box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); }

/* --- Hero: fade-up on load --- */
@media (prefers-reduced-motion: no-preference) {
  body.page-index .index-hero-in {
    opacity: 0;
    -webkit-animation: indexHeroIn 0.88s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation: indexHeroIn 0.88s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  body.page-index .index-hero-in--1 {
    -webkit-animation-delay: 0.06s;
    animation-delay: 0.06s; }
  body.page-index .index-hero-in--2 {
    -webkit-animation-delay: 0.18s;
    animation-delay: 0.18s; }
  body.page-index .index-hero-in--3 {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s; }
  body.page-index .index-hero-in--4 {
    -webkit-animation-delay: 0.42s;
    animation-delay: 0.42s; }
  body.page-index .index-hero-in--5 {
    -webkit-animation-delay: 0.34s;
    animation-delay: 0.34s; }

  body.page-index .hero .hero-img-wrap.index-hero-float-wrap {
    -webkit-animation: indexHeroFloat 7s ease-in-out 1.05s infinite;
    animation: indexHeroFloat 7s ease-in-out 1.05s infinite; }

  body.page-index .hero .hero-img-wrap img.index-hero-in {
    will-change: opacity, transform; }

  body.page-index .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: transparent;
    -webkit-animation: none;
    animation: none;
    opacity: 0; } }

@-webkit-keyframes heroGlowA {
  0% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); }
  100% {
    -webkit-transform: translate(6%, 10%) scale(1.12);
    transform: translate(6%, 10%) scale(1.12); } }

@keyframes heroGlowA {
  0% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); }
  100% {
    -webkit-transform: translate(6%, 10%) scale(1.12);
    transform: translate(6%, 10%) scale(1.12); } }

@-webkit-keyframes heroGlowB {
  0% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); }
  100% {
    -webkit-transform: translate(-8%, -5%) scale(1.08);
    transform: translate(-8%, -5%) scale(1.08); } }

@keyframes heroGlowB {
  0% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); }
  100% {
    -webkit-transform: translate(-8%, -5%) scale(1.08);
    transform: translate(-8%, -5%) scale(1.08); } }

@-webkit-keyframes heroGlowC {
  0% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); }
  100% {
    -webkit-transform: translate(-5%, 12%) scale(1.15);
    transform: translate(-5%, 12%) scale(1.15); } }

@keyframes heroGlowC {
  0% {
    -webkit-transform: translate(0, 0) scale(1);
    transform: translate(0, 0) scale(1); }
  100% {
    -webkit-transform: translate(-5%, 12%) scale(1.15);
    transform: translate(-5%, 12%) scale(1.15); } }

@-webkit-keyframes heroBannerSheen {
  0%, 100% {
    background-position: 12% 50%, 0 0;
    opacity: 0.72; }
  50% {
    background-position: 88% 50%, 0 0;
    opacity: 1; } }

@keyframes heroBannerSheen {
  0%, 100% {
    background-position: 12% 50%, 0 0;
    opacity: 0.72; }
  50% {
    background-position: 88% 50%, 0 0;
    opacity: 1; } }

@-webkit-keyframes heroBannerPulse {
  0% {
    opacity: 0.75;
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1.06);
    transform: scale(1.06); } }

@keyframes heroBannerPulse {
  0% {
    opacity: 0.75;
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    opacity: 1;
    -webkit-transform: scale(1.06);
    transform: scale(1.06); } }

@-webkit-keyframes indexHeroIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(26px);
    transform: translateY(26px); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes indexHeroIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(26px);
    transform: translateY(26px); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@-webkit-keyframes indexHeroFloat {
  0%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); } }

@keyframes indexHeroFloat {
  0%, 100% {
    -webkit-transform: translateY(0);
    transform: translateY(0); }
  50% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px); } }

@media (prefers-reduced-motion: reduce) {
  body.page-index .index-hero-in,
  body.page-index .hero .hero-img-wrap.index-hero-float-wrap {
    opacity: 1 !important;
    -webkit-animation: none !important;
    animation: none !important;
    -webkit-transform: none !important;
    transform: none !important; }
  body.page-index .hero::before,
  body.page-index .hero-backdrop::after,
  body.page-index .hero-backdrop__glow--a,
  body.page-index .hero-backdrop__glow--b,
  body.page-index .hero-backdrop__glow--c {
    -webkit-animation: none !important;
    animation: none !important;
    -webkit-transform: none !important;
    transform: none !important;
    opacity: 1 !important; }
  body.page-index .hero::before {
    content: none !important; } }

/* --- Post / product cards subtle lift on hover (index only) --- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.page-index .product-section .product-item,
  body.page-index .popular-product .product-item-sm,
  body.page-index .blog-section .post-entry {
    -webkit-transition: -webkit-transform 0.35s ease, -webkit-box-shadow 0.35s ease;
    transition: transform 0.35s ease, box-shadow 0.35s ease; }
  body.page-index .product-section .product-item:hover,
  body.page-index .popular-product .product-item-sm:hover,
  body.page-index .blog-section .post-entry:hover {
    -webkit-transform: translateY(-4px);
    -ms-transform: translateY(-4px);
    transform: translateY(-4px);
    -webkit-box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1); } }

/* --- หน้า login: เข้าหน้าแบบนุ่ม (navbar + การ์ดฟอร์ม) --- */
@-webkit-keyframes loginPageNavIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(-14px);
    transform: translateY(-14px); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@keyframes loginPageNavIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(-14px);
    transform: translateY(-14px); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0); } }

@-webkit-keyframes loginPageCardIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(28px) scale(0.98);
    transform: translateY(28px) scale(0.98); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1); } }

@keyframes loginPageCardIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(28px) scale(0.98);
    transform: translateY(28px) scale(0.98); }
  to {
    opacity: 1;
    -webkit-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: no-preference) {
  html:has(body.login-page) {
    scroll-behavior: smooth; }
  body.login-page .custom-navbar {
    opacity: 0;
    -webkit-animation: loginPageNavIn 0.58s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation: loginPageNavIn 0.58s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
  body.login-page .login-page-card {
    opacity: 0;
    -webkit-animation: loginPageCardIn 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.14s forwards;
    animation: loginPageCardIn 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.14s forwards; } }

@media (prefers-reduced-motion: reduce) {
  body.login-page .custom-navbar,
  body.login-page .login-page-card {
    opacity: 1 !important;
    -webkit-animation: none !important;
    animation: none !important;
    -webkit-transform: none !important;
    transform: none !important;
    will-change: auto !important; } }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body.login-page .login-page-card {
    -webkit-transition: -webkit-transform 0.35s ease, -webkit-box-shadow 0.35s ease;
    transition: transform 0.35s ease, box-shadow 0.35s ease; }
  body.login-page .login-page-card:hover {
    -webkit-transform: translateY(-3px);
    transform: translateY(-3px);
    -webkit-box-shadow: 0 28px 72px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    box-shadow: 0 28px 72px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.08); } }