/* =========================================================================
    NPTT.SHOP — style.css
   Tailwind (CDN/Play) handles almost all utility styling directly in the
   HTML classes. This file only holds what Tailwind utilities can't express:
   keyframes, the sakura canvas layer, scrollbars, and a few fine details.
   ========================================================================= */

:root{
  --ease: cubic-bezier(.22,.9,.32,1);
}

html{ scroll-behavior:smooth; }
body{ font-family:'Inter', system-ui, sans-serif; }
.font-display{ font-family:'Be Vietnam Pro', system-ui, sans-serif; }

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

/* ---------- page load fade-in (section 18) ---------- */
@keyframes pageFadeIn{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}
.page-fade-in{ animation:pageFadeIn .5s var(--ease) both; }

/* ---------- sakura canvas layer ---------- */
#sakuraCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:0;
  opacity:.85;
}

/* keep real content above the canvas without every section needing z-index utilities */
.site-header, main, .site-footer{
  position:relative;
  z-index:1;
}

/* ---------- pill tab underlying transition (Alpine x-show pairs with this) ---------- */
.tab-panel[x-cloak]{ display:none !important; }
[x-cloak]{ display:none !important; }

/* ---------- toast ---------- */
@keyframes toastIn{
  from{ opacity:0; transform:translate(-50%,10px); }
  to{ opacity:1; transform:translate(-50%,0); }
}
@keyframes toastOut{
  to{ opacity:0; transform:translate(-50%,6px); }
}
.toast-in{ animation:toastIn .25s var(--ease) both; }
.toast-out{ animation:toastOut .2s var(--ease) both; }

/* ---------- horizontal scroll rows (utility grid, filter chips on small screens) ---------- */
.scrollbar-thin::-webkit-scrollbar{ height:6px; }
.scrollbar-thin::-webkit-scrollbar-thumb{ background:#E5E7EB; border-radius:6px; }
.scrollbar-thin::-webkit-scrollbar-track{ background:transparent; }

/* ---------- line-clamp fallback (in case a Tailwind build without core line-clamp is swapped in later) ---------- */
.line-clamp-1{ display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---------- focus states (accessibility, not covered by Tailwind Play defaults) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid #8B5CF6;
  outline-offset:2px;
  border-radius:6px;
}

/* ---------- prevent layout shift on deal images before they load ---------- */
.deal-media{ background:#F1F5F9; }

/* ---------- disabled utility chip (Card 3 — Tool Sắp Ra Mắt) ---------- */
.chip-soon{
  background:repeating-linear-gradient(135deg,#F8FAFC,#F8FAFC 6px,#F1F5F9 6px,#F1F5F9 12px);
}