/* ============================================================
   AERO — Electric Velocity
   Custom styles that sit on top of the Tailwind design tokens.
   These are the few rules Tailwind utilities can't express
   (backdrop blur surfaces, skew helpers, keyframe motion).

   SHOPIFY NOTE: in a Shopify theme this whole file becomes
   assets/theme.css, linked once from layout/theme.liquid via
   {{ 'theme.css' | asset_url | stylesheet_tag }}.
   ============================================================ */

/* Material Symbols default axis settings */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-outlined.fill {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---- Glassmorphism surface (nav, spec panels, cart, modals) ---- */
.glass-panel {
  background: rgba(26, 26, 26, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* ---- "Velocity" skew helpers ----
   The brand language slants interactive elements ~12deg. When a
   skewed button has skewed text, wrap the label in .skew-reverse
   (or a span) to keep the text upright. */
.skew-velocity { transform: skewX(-12deg); }
.skew-velocity-active { transform: skewX(-6deg); }
.skew-reverse { transform: skewX(12deg); display: inline-block; }
.skew-button { transform: skewX(-12deg); }
.skew-button > span { transform: skewX(12deg); display: inline-block; }

/* ---- Neon "volt" bloom for primary CTAs / active indicators ---- */
.glow-volt { box-shadow: 0 0 30px rgba(172, 214, 0, 0.3); }
.glow-volt-hover:hover { box-shadow: 0 0 20px rgba(172, 214, 0, 0.6); }
.neon-glow-volt { box-shadow: 0 0 15px rgba(172, 214, 0, 0.4); }

/* ---- Carbon-weave dotted texture for neutral surfaces ---- */
.bg-carbon {
  background-image: radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
  background-size: 24px 24px;
}

/* ---- Motion: floating / drifting hero product ---- */
@keyframes aero-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(-2deg); }
}
.hero-float { animation: aero-float 6s ease-in-out infinite; }

@keyframes aero-drift {
  0% { transform: translate(0, 0); }
  50% { transform: translate(-10px, 10px); }
  100% { transform: translate(0, 0); }
}
.animate-drift { animation: aero-drift 8s ease-in-out infinite; }

/* ---- Slide-in cart drawer easing ---- */
.cart-slide-in { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }

/* ============================================================
   Transparent product-shoe effects
   The racing shoes are cut-out PNGs, so we float them over a
   radial "stage" glow, drop a soft volt shadow under them, and
   crossfade between colorways.
   ============================================================ */
@keyframes shoe-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-1deg); }
}
.shoe-bob { animation: shoe-bob 5s ease-in-out infinite; }

/* Soft volt shadow that reads as a light bloom under the shoe. */
.shoe-glow { filter: drop-shadow(0 22px 18px rgba(172, 214, 0, 0.28)); }

/* Radial "stage" backdrop behind a cut-out shoe (cards + hero). */
.shoe-stage {
  background:
    radial-gradient(circle at 50% 42%, rgba(172, 214, 0, 0.16), transparent 58%),
    linear-gradient(180deg, #201f1f 0%, #0e0e0e 100%);
}
/* Faint floor reflection ellipse. */
.shoe-floor::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 14%;
  width: 62%; height: 16px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55), transparent 70%);
  filter: blur(4px);
}

/* Crossfade used when swapping colorways on the product hero. */
.variant-fade { transition: opacity 0.25s ease, transform 0.4s ease; }

@media (prefers-reduced-motion: reduce) {
  .shoe-bob, .hero-float, .animate-drift { animation: none; }
}

/* ---- Inputs: thin bottom border, volt focus glow ---- */
input:focus, textarea:focus, select:focus { outline: none; }
.field-input:focus {
  border-bottom-color: #acd600 !important;
  box-shadow: 0 4px 12px -4px rgba(172, 214, 0, 0.3);
}

/* ---- Thin "high-speed" scrollbars ---- */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #0e0e0e; }
::-webkit-scrollbar-thumb { background: #353534; }
::-webkit-scrollbar-thumb:hover { background: #acd600; }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }