/* ---------- Scroll reveal / fade animations ---------- */
.js .reveal{opacity:0;transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms);will-change:opacity,transform}
.js .reveal[data-anim="fade-up"]{transform:translateY(28px)}
.js .reveal[data-anim="fade-down"]{transform:translateY(-18px)}
.js .reveal[data-anim="fade-left"]{transform:translateX(34px)}
.js .reveal[data-anim="fade-right"]{transform:translateX(-44px)}
.js .reveal[data-anim="zoom-in"]{transform:scale(.94)}
.js .reveal.in{opacity:1;transform:none}
@keyframes heroIn{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
.js .pshot img{animation:heroIn 1s ease both}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.pshot{animation:floaty 6s ease-in-out 1.2s infinite}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1!important;transform:none!important;transition:none!important}
  .pshot,.js .pshot img{animation:none!important}
  html{scroll-behavior:auto}
}

/* ---------- Product detail ---------- */
.banner[style*="--c"]{border-bottom-color:var(--c)}
.pdetail{background:linear-gradient(180deg,color-mix(in srgb,var(--c) 10%,#fff),#fff 70%)}
.pshot{border-radius:1.1rem;overflow:hidden;background:#fff;border:6px solid #fff;box-shadow:0 24px 50px rgba(20,33,61,.2),0 0 0 2px var(--c)}
.pshot img{display:block;width:100%;height:auto;transition:transform .6s ease}
.pshot:hover img{transform:scale(1.04)}
.ptitle{font-size:clamp(2rem,4vw,3rem);margin:.7rem 0 .2rem}
.psub{font-weight:700;color:var(--c);filter:brightness(.8);margin-bottom:.8rem}
.plead{color:var(--mute);font-size:1.08rem}
.phead{font-size:1.15rem;margin:1.6rem 0 .8rem;letter-spacing:.4px;text-transform:uppercase}
.warranty-box{display:flex;gap:.9rem;align-items:center;background:var(--navy);color:#fff;border-radius:.8rem;padding:.9rem 1.1rem;border-left:6px solid var(--yellow);margin-top:1rem}
.warranty-box i{font-size:1.9rem;color:var(--yellow)}
.warranty-box strong{display:block;font-size:1.15rem}
.warranty-box small{color:#c9d0e0}
.warranty-box.neutral{background:#fff;color:var(--navy);border:1px solid var(--border);border-left:6px solid var(--c)}
.warranty-box.neutral i{color:var(--c)}
.warranty-box.neutral small{color:var(--mute)}
.flist{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}
.flist li{display:flex;gap:.65rem;align-items:flex-start;background:#fff;border:1px solid var(--border);border-radius:.6rem;padding:.6rem .85rem;font-weight:600;color:var(--navy);box-shadow:0 2px 8px rgba(26,62,104,.05)}
.flist i{color:var(--c);margin-top:.15rem}
.wrapscroll{overflow-x:auto;border-radius:.9rem;box-shadow:var(--card-shadow);background:#fff;-webkit-overflow-scrolling:touch}
.wrapscroll img{min-width:760px;width:100%;display:block}
.pager a{display:flex;align-items:center;gap:.8rem;padding:.8rem 1.1rem;border:1px solid var(--border);border-radius:.7rem;color:var(--navy);font-weight:700;background:#fff;transition:transform .25s,box-shadow .25s,border-color .25s}
.pager a:hover{transform:translateY(-3px);box-shadow:var(--card-shadow);border-color:var(--red)}
.pager small{display:block;font-weight:400;color:var(--mute);font-size:.8rem}
.pager i{font-size:1.3rem;color:var(--red)}
.rcard{display:block;height:100%;border-radius:.9rem;overflow:hidden;background:#fff;box-shadow:0 2px 20px #21252961;color:inherit;transition:transform .3s,box-shadow .3s}
.rcard:hover{transform:translateY(-6px);box-shadow:0 14px 30px #21252940;color:inherit}
.rcard img{aspect-ratio:3/2;object-fit:cover;width:100%;transition:transform .5s}
.rcard:hover img{transform:scale(1.05)}
.rcard .bar{height:6px;background:var(--c)}
.rcard h3{font-size:20px}
.rcard,.pcard{display:block;color:inherit}
a.pcard:hover{color:inherit}
.pcard{overflow:hidden}
.pcard img{transition:transform .5s ease}
.pcard:hover img{transform:scale(1.05)}
.chip{color:#fff}

/* ---------- Site-wide page transitions & fade-out ---------- */
@keyframes pageIn{from{opacity:0}to{opacity:1}}
.js body{animation:pageIn .6s ease both}
.js body.page-out{opacity:0;transition:opacity .3s ease}
.js .reveal[data-anim="fade-in"]{transform:none}
[data-anim="fade-out"]{will-change:opacity}
@media (prefers-reduced-motion:reduce){.js body{animation:none}.js body.page-out{opacity:1;transition:none}}