/* ORIGIN ELECTRIC - Custom styles
   Brand: Orange (#F97316), Sky Blue (#38BDF8), White
   Goals: premium feel, strong motion, but performant
*/

:root{
  --brand-orange:#F97316;
  --brand-sky:#38BDF8;
  --brand-navy:#0B1B3A;
  --ring: rgba(56, 189, 248, 0.35);
}

html, body {
  scroll-behavior: smooth;
}

::selection {
  background: rgba(249, 115, 22, 0.25);
}

/* Smooth focus rings for accessibility */
:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--ring);
  border-radius: 14px;
}

/* Subtle premium background grain */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(56,189,248,0.09), transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(249,115,22,0.08), transparent 35%),
    radial-gradient(circle at 50% 90%, rgba(2,6,23,0.05), transparent 40%);
  z-index: -2;
}

/* Fancy soft noise overlay (very light) */
body::after{
  content:"";
  position: fixed;
  inset:0;
  pointer-events:none;
  opacity: 0.06;
  z-index:-1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* Swiper pagination styling */
.swiper-pagination-bullet{
  background: rgba(255,255,255,0.7) !important;
  opacity: 1 !important;
}
.swiper-pagination-bullet-active{
  background: var(--brand-orange) !important;
}

/* Premium card hover behavior */
.hover-lift{
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
  will-change: transform;
}
.hover-lift:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 55px rgba(2,6,23,0.12);
  border-color: rgba(148,163,184,0.35);
}

/* Button micro-interactions */
.btn-press{
  transition: transform 120ms ease, filter 200ms ease;
}
.btn-press:active{
  transform: translateY(1px) scale(0.99);
}

/* Floating WhatsApp button pulse */
#whatsappBtn{
  position: fixed;
}
#whatsappBtn::before{
  content:"";
  position:absolute;
  inset: -10px;
  border-radius: 999px;
  background: rgba(34,197,94,0.22);
  filter: blur(6px);
  animation: pulse 1.6s ease-in-out infinite;
  z-index: -1;
}
@keyframes pulse{
  0%{ transform: scale(0.92); opacity: 0.55; }
  50%{ transform: scale(1.06); opacity: 0.22; }
  100%{ transform: scale(0.92); opacity: 0.55; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  html, body{ scroll-behavior: auto; }
  #whatsappBtn::before{ animation: none; }
  .hover-lift, .btn-press{ transition: none; }
}

/* Mobile menu open/close animation helper */
.mobile-panel{
  transform-origin: top;
  animation: dropIn 200ms ease forwards;
}
@keyframes dropIn{
  from{ opacity: 0; transform: translateY(-6px) scaleY(0.98); }
  to{ opacity: 1; transform: translateY(0) scaleY(1); }
}