@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.75); }
  80%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes navSlideDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes heroCardReveal {
  from { opacity: 0; transform: translateY(40px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes heroTitleReveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUpReveal {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes flipInX {
  from { opacity: 0; transform: perspective(600px) rotateX(30deg) translateY(20px); }
  to   { opacity: 1; transform: perspective(600px) rotateX(0deg) translateY(0); }
}

@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { opacity: 1; transform: scale(1.06); }
  80%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

.navbar {
  animation: navSlideDown 0.5s ease both;
}

.hero-card {
  animation: heroCardReveal 0.8s ease 0.2s both;
}

.hero-title {
  animation: heroTitleReveal 0.8s ease 0.35s both;
}

.hero-text {
  animation: fadeUp 0.7s ease 0.5s both;
}

.hero-btn {
  animation: fadeUp 0.7s ease 0.65s both;
}

.abouthero-card {
  animation: heroCardReveal 0.8s ease 0.2s both;
}

.abouthero-title {
  animation: heroTitleReveal 0.8s ease 0.35s both;
}

.abouthero-text {
  animation: fadeUp 0.7s ease 0.5s both;
}

.productshero-card {
  animation: heroCardReveal 0.8s ease 0.2s both;
}

.productshero-title {
  animation: heroTitleReveal 0.8s ease 0.35s both;
}

.productshero-text {
  animation: fadeUp 0.7s ease 0.5s both;
}

.brandhero-card {
  animation: heroCardReveal 0.8s ease 0.2s both;
}

.brandhero-title {
  animation: heroTitleReveal 0.8s ease 0.35s both;
}

.educationalhero-card,
.eduhero-card {
  animation: heroCardReveal 0.8s ease 0.2s both;
}

.educationalhero-title,
.eduhero-title {
  animation: heroTitleReveal 0.8s ease 0.35s both;
}

.contacthero-card {
  animation: heroCardReveal 0.8s ease 0.2s both;
}

.contacthero-title {
  animation: heroTitleReveal 0.8s ease 0.35s both;
}

.nav-logo {
  transition: transform 0.3s ease;
}

.nav-logo:hover {
  transform: scale(1.07);
}

.footer-logo {
  transition: transform 0.3s ease;
}

.footer-logo:hover {
  transform: scale(1.07);
}

.anim-fade-up,
.anim-fade-left,
.anim-fade-right,
.anim-zoom,
.anim-pop,
.anim-wave,
.anim-rotate,
.anim-flip,
.anim-slide-up,
.anim-bounce {
  opacity: 0;
  transition: opacity 0.1s;
}

.anim-fade-up.anim-visible {
  animation: fadeUp 0.65s ease both;
}

.anim-fade-left.anim-visible {
  animation: slideInLeft 0.65s ease both;
}

.anim-fade-right.anim-visible {
  animation: slideInRight 0.65s ease both;
}

.anim-zoom.anim-visible {
  animation: scaleUp 0.6s ease both;
}

.anim-pop.anim-visible {
  animation: popIn 0.6s ease both;
}

.anim-wave.anim-visible {
  animation: fadeUp 0.7s ease both;
}

.anim-rotate.anim-visible {
  animation: scaleUp 0.6s ease both;
}

.anim-flip.anim-visible {
  animation: flipInX 0.7s ease both;
}

.anim-slide-up.anim-visible {
  animation: slideUpReveal 0.8s ease both;
}

.anim-bounce.anim-visible {
  animation: bounceIn 0.65s ease both;
}

.anim-delay-1 { animation-delay: 0.1s !important; }
.anim-delay-2 { animation-delay: 0.2s !important; }
.anim-delay-3 { animation-delay: 0.3s !important; }
.anim-delay-4 { animation-delay: 0.4s !important; }
.anim-delay-5 { animation-delay: 0.5s !important; }
.anim-delay-6 { animation-delay: 0.6s !important; }

.features-title,
.whyus-title,
.introduce-title,
.owners-title,
.mv-title,
.products-title,
.brand-title,
.edu-title,
.contact-title {
  position: relative;
  display: inline-block;
}

.feature-card {
  transition: transform 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-6px) scale(1.02);
}

.feature-circle {
  transition: transform 0.3s ease;
}

.feature-card:hover .feature-circle {
  transform: scale(1.1);
}

.whyus-row {
  transition: transform 0.3s ease;
}

.whyus-row:hover {
  transform: translateY(-4px);
}

.whyus-circle {
  transition: transform 0.3s ease;
}

.whyus-row:hover .whyus-circle {
  transform: scale(1.08);
}

.whyus-card {
  transition: transform 0.3s ease;
}

.whyus-row:hover .whyus-card {
  transform: translateX(4px);
}

.about-card {
  transition: transform 0.3s ease;
}

.about-card:hover {
  transform: translateY(-5px);
}

.owner-card {
  transition: transform 0.3s ease;
}

.owner-card:hover {
  transform: translateY(-5px);
}

.mv-pink-box,
.mv-blue-box {
  transition: transform 0.3s ease;
}

.mv-pink-box:hover {
  transform: scale(1.03);
}

.mv-blue-box:hover {
  transform: scale(1.03);
}

.product-card,
.prod-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

.product-card:hover,
.prod-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.13) !important;
}

.product-card img,
.prod-card img {
  transition: transform 0.4s ease;
}

.product-card:hover img,
.prod-card:hover img {
  transform: scale(1.06);
}

.shopee-btn,
.product-btn,
.prod-btn {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.shopee-btn:hover,
.product-btn:hover,
.prod-btn:hover {
  transform: scale(1.08);
}

.brand-logo:hover,
.brand-img:hover {
  animation-play-state: paused;
}

.brand-card,
.cert-card,
.certificate-card {
  transition: transform 0.35s ease;
}

.brand-card:hover,
.cert-card:hover,
.certificate-card:hover {
  transform: translateY(-8px);
}

.edu-card,
.tip-card,
.guide-card {
  transition: transform 0.3s ease;
}

.edu-card:hover,
.tip-card:hover,
.guide-card:hover {
  transform: translateY(-6px) scale(1.01);
}

.faq-card,
.strength-item,
.strength-card {
  transition: transform 0.3s ease;
}

.faq-card:hover {
  transform: translateY(-5px);
}

.faq-toggle,
.faq-icon {
  transition: transform 0.3s ease;
}

.faq-open .faq-toggle,
.faq-open .faq-icon {
  transform: rotate(180deg);
}

.credentials-card {
  transition: transform 0.4s ease;
}

.credentials-card:hover {
  transform: translateY(-6px);
}

.contact-card,
.contactus-card {
  transition: transform 0.3s ease;
}

.contact-card:hover,
.contactus-card:hover {
  transform: translateY(-5px);
}

.contact-form input,
.contact-form textarea,
.contactus-form input,
.contactus-form textarea {
  transition: border-color 0.3s ease, transform 0.2s ease;
}

.contact-form input:focus,
.contact-form textarea:focus,
.contactus-form input:focus,
.contactus-form textarea:focus {
  border-color: #ff8fab;
  transform: scale(1.01);
  outline: none;
}

.contact-icon-circle {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.contact-icon-circle:hover {
  transform: rotate(20deg) scale(1.15);
}

.contact-detail,
.contact-info-item,
.contactus-info-item {
  transition: transform 0.3s ease;
}

.contact-detail:hover,
.contact-info-item:hover,
.contactus-info-item:hover {
  transform: translateX(10px);
}

.icon-circle {
  transition: transform 0.3s ease;
}

.icon-circle:hover {
  transform: scale(1.1);
}

.nav-links a {
  transition: color 0.25s ease;
}

.nav-links a:hover {
  color: #ffffff;
}

.footer-links a {
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.footer-links a:hover {
  opacity: 0.8;
  transform: translateX(4px);
}

.hero-btn {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.hero-btn:hover {
  transform: scale(1.1) !important;
}

.discover-btn {
  transition: filter 0.3s ease;
}

.discover-btn:hover {
  filter: brightness(0.93);
}

.sendbtn {
  transition: filter 0.3s ease;
}

.sendbtn:hover {
  filter: brightness(0.93);
}

.banner-btn {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
}

.banner-btn:hover {
  background: #c02d6e;
  transform: scale(1.07);
}

.backtop,
.whatsapp-float {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.backtop:hover,
.whatsapp-float:hover {
  transform: translateY(-4px) scale(1.08);
}

.introduce {
  transition: transform 0.3s ease;
}

.introduce-right {
  transition: transform 0.3s ease;
}

.whyus-team img {
  transition: transform 0.4s ease;
}

.whyus-team img:hover {
  transform: scale(1.02);
}

.search-bar:not(.hidden) {
  animation: fadeRight 0.3s ease both;
}

.user-popup,
.cart-dropdown,
.lang-dropdown {
  transform-origin: top right;
}

.user-popup.is-open,
.cart-dropdown.is-open,
.lang-dropdown.is-open,
.lang-dropdown.active {
  animation: fadeDown 0.3s ease both;
}

.popup-btn,
.cart-checkout-btn,
.lang-btn,
.menu-btn {
  transition: transform 0.25s ease;
}

.popup-btn:hover,
.cart-checkout-btn:hover,
.lang-btn:hover,
.menu-btn:hover {
  transform: translateY(-2px);
}

.footer-social a,
.social-icon {
  transition: transform 0.3s ease;
  display: inline-block;
}

.footer-social a:hover,
.social-icon:hover {
  transform: translateY(-4px) scale(1.12);
}

.modal,
.overlay-modal {
  animation: scaleUp 0.35s ease both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}