/* ===== Animation – chỉ dùng transform/opacity để không ảnh hưởng tốc độ & CLS ===== */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .25s ease both}
::view-transition-new(root){animation:vt-in .35s ease both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

/* Thanh tiến trình cuộn */
.scroll-progress{position:fixed;left:0;top:0;height:3px;width:100%;background:#8dc63f;transform-origin:0 50%;transform:scaleX(0);z-index:9999;pointer-events:none}

@media (prefers-reduced-motion:no-preference){
  /* Hiệu ứng khi tải trang */
  header{animation:slide-down .6s cubic-bezier(.2,.7,.2,1) both}
  .top{animation:fade-in .6s ease both}
  .hero .wrap>div>*{animation:fade-up .8s cubic-bezier(.2,.7,.2,1) both}
  .hero .wrap>div>*:nth-child(1){animation-delay:.10s}
  .hero .wrap>div>*:nth-child(2){animation-delay:.22s}
  .hero .wrap>div>*:nth-child(3){animation-delay:.36s}
  .hero .wrap>div>*:nth-child(4){animation-delay:.50s}
  .hero .big{animation:pop-in 1s cubic-bezier(.2,.7,.2,1) .3s both,float 7s ease-in-out 1.3s infinite;transform-origin:50% 50%}
  .hero .pt{animation:drift 40s linear infinite}

  /* Hiện dần khi cuộn tới (chỉ bật khi JS chạy → không JS vẫn thấy đủ nội dung) */
  html.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
  html.js .reveal.in{opacity:1;transform:none}
  html.js .reveal.from-l{transform:translateX(-36px)}
  html.js .reveal.from-r{transform:translateX(36px)}
  html.js .reveal.from-l.in,html.js .reveal.from-r.in{transform:none}

  /* Thẻ sản phẩm */
  .card{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s ease}
  .card:hover,.card:focus-visible{transform:translateY(-8px);box-shadow:0 18px 36px rgba(35,31,32,.16)}
  .card .pic{overflow:hidden}
  .card .pic svg{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
  .card:hover .pic svg{transform:scale(1.08) rotate(-1deg)}

  /* Nút bấm */
  .btn{transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,color .2s ease}
  .btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,0,0,.18)}
  .btn:active{transform:translateY(0) scale(.97)}

  /* Menu */
  nav a{transition:color .2s ease}
  header nav a,footer nav a{position:relative}
  header nav a:not(.on)::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:#8dc63f;transform:scaleX(0);transform-origin:0 50%;transition:transform .3s ease}
  header nav a:not(.on):hover::after{transform:scaleX(1)}
  .logo svg{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
  .logo:hover svg{transform:scale(1.04) rotate(-1.5deg)}

  /* Khối giá trị, số liệu */
  .vals>div,.stats>div,.fam span{transition:transform .3s ease,box-shadow .3s ease}
  .vals>div:hover,.stats>div:hover{transform:translateY(-5px);box-shadow:0 12px 26px rgba(35,31,32,.12)}
  .fam span:hover{transform:translateY(-3px)}

  /* Trang chi tiết sản phẩm: hạt gạo nhún nhẹ */
  .dp svg{animation:float 8s ease-in-out infinite}

  /* Form */
  .coop input,.coop select,.coop textarea{transition:border-color .2s ease,box-shadow .2s ease}
  .coop input:focus,.coop select:focus,.coop textarea:focus{box-shadow:0 0 0 3px rgba(141,198,63,.35);outline:none}

  @keyframes fade-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
  @keyframes fade-in{from{opacity:0}to{opacity:1}}
  @keyframes slide-down{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
  @keyframes pop-in{from{opacity:0;transform:scale(.85) rotate(-8deg)}to{opacity:1;transform:none}}
  @keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(1.5deg)}}
  @keyframes drift{from{transform:translate(0,0)}to{transform:translate(-60px,-60px)}}
}

/* Người dùng bật "giảm chuyển động" hoặc khi in/xuất PDF: hiện đủ nội dung, không hiệu ứng */
@media (prefers-reduced-motion:reduce){
  html.js .reveal{opacity:1;transform:none;transition:none}
  .scroll-progress{display:none}
}
@media print{
  html.js .reveal{opacity:1!important;transform:none!important}
  .scroll-progress{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .hero::before{animation:sun 9s ease-in-out infinite}
  @keyframes sun{0%,100%{transform:scale(1);opacity:.55}50%{transform:scale(1.12);opacity:.72}}
}