/* ============================================================
   AMICRO & APPLE DESIGN SYSTEM — WERO SHOP
   Ported from Amicro & Apple Human Interface Guidelines (HIG)
   Liquid glass, 44pt touch targets, SF Pro precision, Wero Gold
   ============================================================ */

/* ── Apple HIG & Wero Luxury Tokens ───────────────────────── */
:root {
  /* Apple / Wero Palette */
  --wero-bg:          #000000;
  --wero-surface:     #070A15;
  --wero-surface-alt: #0F152D;
  --wero-gold:        #FDBF01;
  --wero-gold-alt:    #FFB351;
  --wero-gold-dim:    rgba(253, 191, 1, 0.15);
  --wero-gold-glow:   rgba(253, 191, 1, 0.30);
  --wero-text:        #ffffff;
  --wero-text-sec:    rgba(255, 255, 255, 0.72);
  --wero-text-faint:  rgba(255, 255, 255, 0.45);

  /* Apple Liquid Glass Controls */
  --glass-bg:         rgba(255, 255, 255, 0.05);
  --glass-border:     rgba(255, 255, 255, 0.10);
  --glass-blur:       blur(20px);
  --glass-card-bg:    rgba(7, 10, 21, 0.65);
  --glass-card-border:rgba(255, 255, 255, 0.08);

  /* Apple 44pt Min Touch Target */
  --touch-min:        44px;

  /* Spring configs ported from Amicro registry */
  --spring-bouncy:    cubic-bezier(0.34, 1.56, 0.64, 1);     /* stiffness:180, damping:12 */
  --spring-smooth:    cubic-bezier(0.16, 1, 0.3, 1);         /* easeOutExpo — Apple default */
  --spring-snappy:    cubic-bezier(0.2, 0.8, 0.2, 1);        /* stiffness:300, damping:20 */
  --spring-gentle:    cubic-bezier(0.25, 0.46, 0.45, 0.94);  /* easeOutQuad */
  --spring-heavy:     cubic-bezier(0.22, 1, 0.36, 1);        /* stiffness:120, damping:20 */
  --ease-out-expo:    cubic-bezier(0.16, 1, 0.3, 1);

  /* Timing tokens */
  --duration-fast:    150ms;
  --duration-base:    300ms;
  --duration-slow:    500ms;
  --duration-reveal:  600ms;
  --duration-dramatic:800ms;

  /* Stagger delay tokens */
  --stagger-1:  50ms;
  --stagger-2:  100ms;
  --stagger-3:  150ms;
  --stagger-4:  200ms;
  --stagger-5:  250ms;
  --stagger-6:  300ms;
  --stagger-7:  350ms;
  --stagger-8:  400ms;

  /* Elevation */
  --shadow-card: 0 4px 20px rgba(0,0,0,0.5);
  --shadow-lift: 0 16px 36px -8px rgba(0,0,0,0.6);
  --shadow-glow: none;
}

/* ── Entrance Animations ──────────────────────────────────── */

/* Fade Up — Amicro fadeUp (y:20→0, opacity:0→1) */
@keyframes amicro-fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade Down */
@keyframes amicro-fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade In */
@keyframes amicro-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Zoom In — Amicro zoomIn (scale:0.9→1) */
@keyframes amicro-zoomIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* Scale Pulse — Amicro appleScalePulse */
@keyframes amicro-scalePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* Slide In Right */
@keyframes amicro-slideRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Slide In Left */
@keyframes amicro-slideLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── Utility Classes ──────────────────────────────────────── */

/* Reveal on load (no JS required) */
.reveal          { animation: amicro-fadeIn var(--duration-reveal) var(--spring-smooth) both; }
.reveal-up       { animation: amicro-fadeUp var(--duration-reveal) var(--spring-smooth) both; }
.reveal-down     { animation: amicro-fadeDown var(--duration-reveal) var(--spring-smooth) both; }
.reveal-zoom     { animation: amicro-zoomIn var(--duration-reveal) var(--spring-smooth) both; }
.reveal-left     { animation: amicro-slideRight var(--duration-reveal) var(--spring-smooth) both; }
.reveal-right    { animation: amicro-slideLeft var(--duration-reveal) var(--spring-smooth) both; }

/* Stagger delays for child elements */
.stagger > *:nth-child(1) { animation-delay: var(--stagger-1); }
.stagger > *:nth-child(2) { animation-delay: var(--stagger-2); }
.stagger > *:nth-child(3) { animation-delay: var(--stagger-3); }
.stagger > *:nth-child(4) { animation-delay: var(--stagger-4); }
.stagger > *:nth-child(5) { animation-delay: var(--stagger-5); }
.stagger > *:nth-child(6) { animation-delay: var(--stagger-6); }
.stagger > *:nth-child(7) { animation-delay: var(--stagger-7); }
.stagger > *:nth-child(8) { animation-delay: var(--stagger-8); }

/* ── Card Interactions ────────────────────────────────────── */

/* Card Hover — ported from Amicro cardHover */
.amicro-card {
  transition: transform var(--duration-base) var(--spring-smooth),
              box-shadow var(--duration-base) var(--spring-smooth),
              border-color var(--duration-base) var(--spring-smooth);
  will-change: transform;
}

.amicro-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: var(--shadow-lift);
}

/* Card Tilt — ported from Amicro tiltCard (simplified CSS) */
.amicro-tilt {
  transition: transform var(--duration-slow) var(--spring-smooth);
  transform-style: preserve-3d;
  perspective: 1000px;
}
.amicro-tilt:hover {
  transform: perspective(800px) rotateX(2deg) rotateY(-2deg) translateY(-6px);
}

/* Card Glow — subtle border glow on hover */
.amicro-glow {
  position: relative;
  transition: border-color var(--duration-base) var(--spring-smooth);
}
.amicro-glow::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  opacity: 0;
  transition: opacity var(--duration-base) var(--spring-smooth);
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent 60%);
}
.amicro-glow:hover::after { opacity: 1; }

/* ── Button Interactions ──────────────────────────────────── */

/* Magnetic Button — ported from Amicro magneticButton */
.amicro-btn {
  transition: transform var(--duration-fast) var(--spring-bouncy),
              background-color var(--duration-fast) var(--spring-gentle),
              box-shadow var(--duration-base) var(--spring-smooth);
  position: relative;
}
.amicro-btn:hover {
  transform: scale(1.03);
}
.amicro-btn:active {
  transform: scale(0.97);
  transition-duration: 80ms;
}

/* Glow Button — ported from Amicro glowButton */
.amicro-btn-glow {
  position: relative;
  overflow: hidden;
}
.amicro-btn-glow::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: radial-gradient(circle, rgba(255,255,255,0.3), transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s var(--spring-smooth), height 0.6s var(--spring-smooth);
}
.amicro-btn-glow:hover::before {
  width: 300px;
  height: 300px;
}

/* Pill Button */
.amicro-pill {
  border-radius: 9999px;
  transition: all var(--duration-fast) var(--spring-bouncy);
}
.amicro-pill:hover { transform: translateY(-1px); }
.amicro-pill:active { transform: scale(0.96); }

/* ── Text Animations ──────────────────────────────────────── */

/* Text Reveal — ported from Amicro textReveal */
@keyframes amicro-textReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.amicro-text-reveal {
  animation: amicro-textReveal var(--duration-dramatic) var(--spring-smooth) both;
}

/* Blur Text — ported from Amicro blurText */
@keyframes amicro-blurText {
  from { filter: blur(8px); opacity: 0; }
  to   { filter: blur(0); opacity: 1; }
}
.amicro-blur-text {
  animation: amicro-blurText var(--duration-reveal) var(--spring-smooth) both;
}

/* Character Stagger — requires JS to wrap chars in spans */
.amicro-char-stagger > span {
  display: inline-block;
  animation: amicro-fadeUp var(--duration-reveal) var(--spring-smooth) both;
}
.amicro-char-stagger > span:nth-child(1) { animation-delay: 0ms; }
.amicro-char-stagger > span:nth-child(2) { animation-delay: 30ms; }
.amicro-char-stagger > span:nth-child(3) { animation-delay: 60ms; }
.amicro-char-stagger > span:nth-child(4) { animation-delay: 90ms; }
.amicro-char-stagger > span:nth-child(5) { animation-delay: 120ms; }
.amicro-char-stagger > span:nth-child(6) { animation-delay: 150ms; }
.amicro-char-stagger > span:nth-child(7) { animation-delay: 180ms; }
.amicro-char-stagger > span:nth-child(8) { animation-delay: 210ms; }
.amicro-char-stagger > span:nth-child(9) { animation-delay: 240ms; }
.amicro-char-stagger > span:nth-child(10) { animation-delay: 270ms; }

/* ── Loading Animations ───────────────────────────────────── */

/* Breathing Glow — ported from Amicro breathingGlow */
@keyframes amicro-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(253,191,1,0.2); }
  50%      { box-shadow: 0 0 20px 5px rgba(253,191,1,0.05); }
}
.amicro-breathe { animation: amicro-breathe 2.5s ease-in-out infinite; }

/* Pulse Dot */
@keyframes amicro-pulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.5; }
}
.amicro-pulse-dot { animation: amicro-pulseDot 1.2s ease-in-out infinite; }

/* Spinner — ported from Amicro classicSpinner */
@keyframes amicro-spin {
  to { transform: rotate(360deg); }
}
.amicro-spin { animation: amicro-spin 0.8s linear infinite; }

/* Bounce Dots — ported from Amicro bounceDots */
@keyframes amicro-bounceDot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }
  40%           { transform: scale(1); opacity: 1; }
}
.amicro-bounce-dots span {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: amicro-bounceDot 1.2s ease-in-out infinite;
}
.amicro-bounce-dots span:nth-child(2) { animation-delay: 0.15s; }
.amicro-bounce-dots span:nth-child(3) { animation-delay: 0.3s; }

/* ── Hover Effects ────────────────────────────────────────── */

/* Image Zoom on card hover */
.amicro-img-zoom img {
  transition: transform var(--duration-slow) var(--spring-smooth),
              opacity var(--duration-base) var(--spring-gentle);
}
.amicro-img-zoom:hover img {
  transform: scale(1.06);
}

/* Underline Slide */
.amicro-underline {
  position: relative;
  text-decoration: none;
}
.amicro-underline::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width var(--duration-base) var(--spring-smooth);
}
.amicro-underline:hover::after { width: 100%; }

/* ── Modal / Overlay ──────────────────────────────────────── */

/* Fade + Scale entrance for modals */
@keyframes amicro-modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes amicro-overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.amicro-modal-content {
  animation: amicro-modalIn var(--duration-base) var(--spring-smooth) both;
}
.amicro-modal-overlay {
  animation: amicro-overlayIn var(--duration-fast) ease both;
}

/* ── Scroll-triggered Reveals (Intersection Observer) ─────── */
.amicro-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-reveal) var(--spring-smooth),
              transform var(--duration-reveal) var(--spring-smooth);
}
.amicro-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered scroll children */
.amicro-scroll-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-reveal) var(--spring-smooth),
              transform var(--duration-reveal) var(--spring-smooth);
}
.amicro-scroll-stagger.is-visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0ms; }
.amicro-scroll-stagger.is-visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 60ms; }
.amicro-scroll-stagger.is-visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 120ms; }
.amicro-scroll-stagger.is-visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 180ms; }
.amicro-scroll-stagger.is-visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 240ms; }
.amicro-scroll-stagger.is-visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 300ms; }
.amicro-scroll-stagger.is-visible > *:nth-child(7) { opacity: 1; transform: none; transition-delay: 360ms; }
.amicro-scroll-stagger.is-visible > *:nth-child(8) { opacity: 1; transform: none; transition-delay: 420ms; }

/* ── Noise Texture Overlay (optional) ─────────────────────── */
.amicro-noise::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.03;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px;
}

/* ── Skeleton Loading ─────────────────────────────────────── */
@keyframes amicro-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.amicro-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size: 200% 100%;
  animation: amicro-shimmer 1.8s ease-in-out infinite;
}

/* ── Apple Liquid Glass & HIG Card Extensions ─────────────── */
.apple-card {
  background: #0A0A0A;
  border: 1px solid transparent;
  outline: none;
  border-radius: 20px;
  box-shadow: none;
  transition: transform var(--duration-base) var(--spring-smooth),
              border-color var(--duration-base) var(--spring-smooth),
              outline var(--duration-base) var(--spring-smooth),
              box-shadow var(--duration-base) var(--spring-smooth);
}
.apple-card:hover {
  transform: translateY(-3px);
  border-color: transparent;
  outline: none;
  box-shadow: none;
}
.apple-card:active,
.apple-card:focus,
.apple-card:focus-visible {
  border-color: rgba(253, 191, 1, 0.8);
  outline: 1.5px solid rgba(253, 191, 1, 0.8);
  box-shadow: 0 0 16px rgba(253, 191, 1, 0.25);
}

.apple-pill-tab {
  min-height: 38px;
  padding: 6px 14px;
  border-radius: 9999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  color: var(--wero-text-sec);
  font-size: 12px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--duration-fast) var(--spring-smooth);
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 640px) {
  .apple-pill-tab {
    min-height: 42px;
    padding: 8px 18px;
    font-size: 13px;
  }
}
.apple-pill-tab:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
}
.apple-pill-tab.active {
  background: var(--wero-gold);
  color: #070A15;
  border-color: var(--wero-gold);
  font-weight: 600;
  box-shadow: 0 0 16px var(--wero-gold-glow);
}