/* ── ANIMATIONS ── */
@keyframes fade-in {
  from { background-color: rgba(0,0,0,0); }
  to { background-color: rgba(0,0,0,0.8); }
}
@keyframes fade-out {
  from { background-color: rgba(0,0,0,0.8); }
  to { background-color: rgba(0,0,0,0); }
}
@keyframes slide-in {
  from { transform: translateX(500px); }
  to { transform: translateX(0px); }
}
@keyframes slide-out {
  from { transform: translateX(0px); }
  to { transform: translateX(500px); }
}
@keyframes loading {
  0% { left: -50%; }
  to { left: 100%; }
}
@keyframes floatRandom {
  0% { transform: translate(0,0) rotate(0deg); }
  20% { transform: translate(-6px,-10px) rotate(-1deg); }
  40% { transform: translate(4px,-5px) rotate(1deg); }
  60% { transform: translate(-4px,-12px) rotate(-1.5deg); }
  80% { transform: translate(3px,-7px) rotate(1deg); }
  100% { transform: translate(0,0) rotate(0deg); }
}
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes dialog-in {
  from { opacity: 0; scale: 50%; }
  to { opacity: 1; scale: 100%; }
}
@keyframes dialog-out {
  from { opacity: 1; scale: 100%; }
  to { opacity: 0; scale: 50%; }
}

/* ── CART DRAWER ── */
#cart-drawer[data-state="open"] { animation: fade-in 0.4s forwards; }
body.cart-open { overflow: hidden; padding-right: var(--scrollbar-width, 0px); }
#cart-drawer[data-state="closed"] { animation: fade-out 0.4s forwards; }
#cart-drawer[data-state="open"] > div { animation: slide-in 0.4s forwards; }
#cart-drawer[data-state="closed"] > div { animation: slide-out 0.4s forwards; }

/* ── DIALOG ── */
.dialog[data-state="open"] { animation: fade-in 0.4s forwards; }
.dialog[data-state="closed"] { animation: fade-out 0.4s forwards; }
.dialog[data-state="open"] > div { animation: dialog-in 0.2s forwards; }
.dialog[data-state="closed"] > div { animation: dialog-out 0.2s forwards; }

/* ── REVEAL ── */
.reveal-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  transition-delay: var(--delay, 0s);
}
.reveal-fade-up.visible { opacity: 1; transform: translateY(0); }

/* ── GRID BG ── */
.grid-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(to right, hsla(0,0%,100%,.03) 1px, transparent 1px),
    linear-gradient(to bottom, hsla(0,0%,100%,.03) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── GRADIENT TEXT ── */
.gradient-text {
  background: linear-gradient(45deg, hsl(var(--primary)), hsl(var(--primary)/.8), hsl(var(--primary)/.6), hsl(var(--primary)/.9), hsl(var(--primary)), hsl(var(--primary)/.7));
  background-size: 400% 400%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 3s ease-in-out infinite;
}

/* ── FLOAT ── */
.animate-float { animation: floatRandom 15s ease-in-out infinite; }

/* ── GLASS SHINE ── */
.glass {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
}
.glass::after {
  content: "";
  transition: all 850ms cubic-bezier(.19,1,.22,1);
  background-color: white;
  opacity: .2;
  width: 50px;
  height: 200px;
  position: absolute;
  left: -85px;
  top: -80px;
  z-index: 1;
  transform: rotate(30deg);
  filter: blur(2px);
}
.glass:hover::after { left: 130%; }

/* ── FAQ ── */
.faq-item .faq-content {
  overflow: hidden;
  transition: height 0.3s cubic-bezier(0.4,0,0.2,1);
}
.faq-item:not([open]) .faq-content { height: 0; }
.faq-item summary { list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; content: ''; }

/* ── CUSTOM BG MASK ── */
.custom-bg-mask {
  mask-image: linear-gradient(hsl(var(--background)), rgba(0,0,0,0.3), rgba(0,0,0,0));
}

/* ── DETAIL DASH ── */
.detail-dash {
  background-image: linear-gradient(to right, rgba(255,255,255,0.1) 50%, transparent 0%);
  background-position: center bottom;
  background-size: 16px;
  background-repeat: repeat-x;
  width: 100%;
  height: 1px;
}

/* ── SCROLLBAR ── */
.custom-scrollbar::-webkit-scrollbar { width: 3px; height: 3px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: hsl(var(--primary)); border-radius: 0.25rem; }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--primary) / 0.4); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--primary) / 0.6); }

/* ── KEEN SLIDER ── */
.keen-slider { overflow: visible !important; }