/* Keyframes & rare rules not easy with utilities */
@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes float-y {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-30px) rotate(8deg); }
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(255,0,110,.55); }
  70%  { box-shadow: 0 0 0 24px rgba(255,0,110,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,0,110,0); }
}
.animated-gradient {
  background: linear-gradient(120deg,#FF006E,#8338EC,#3A86FF,#FF006E);
  background-size: 300% 300%;
  animation: gradient-shift 14s ease infinite;
}
.float-shape { animation: float-y 9s ease-in-out infinite; }
.pulse-ring  { animation: pulse-ring 2.4s infinite; }

/* Reveal-on-scroll */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-scale { opacity: 0; transform: scale(.9); transition: opacity .7s ease, transform .7s ease; }
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Floating label */
.field { position: relative; }
.field input, .field textarea, .field select {
  width: 100%; padding: 22px 14px 8px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.15); border-radius: 14px; color: #FBFBFB;
  outline: none; transition: border-color .3s, box-shadow .3s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field label {
  position: absolute; left: 14px; top: 16px; color: rgba(251,251,251,.55);
  pointer-events: none; transition: all .2s ease; font-size: 14px;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: #FF006E; box-shadow: 0 0 0 3px rgba(255,0,110,.25);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label,
.field select:focus + label,
.field select:valid + label {
  top: 6px; font-size: 11px; color: #FF006E; letter-spacing: .08em; text-transform: uppercase;
}

/* Accordion */
.acc-content { max-height: 0; overflow: hidden; transition: max-height .5s ease; }
.acc-item.open .acc-content { max-height: 500px; }
.acc-item.open .acc-icon { transform: rotate(45deg); }

/* Nav underline */
.nav-link { position: relative; }
.nav-link::after {
  content:''; position:absolute; left:0; bottom:-6px; width:100%; height:2px;
  background: linear-gradient(90deg,#FF006E,#3A86FF);
  transform: scaleX(0); transform-origin: right; transition: transform .35s ease;
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); transform-origin: left; }

/* Cart drawer */
.drawer { transform: translateX(100%); transition: transform .4s ease; }
.drawer.open { transform: translateX(0); }
.overlay { opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.overlay.open { opacity: 1; pointer-events: auto; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #03001C; }
::-webkit-scrollbar-thumb { background: linear-gradient(#FF006E,#8338EC); border-radius: 10px; }

html { scroll-behavior: smooth; }
body { font-family: 'Rajdhani', sans-serif; }
h1,h2,h3,h4,h5 { font-family: 'Orbitron', sans-serif; letter-spacing: .02em; }