/**
 * themes-premium.css
 * تأثيرات متقدمة، حركات، ومايكرو-إنتراكشنز لكل ثيمات المتجر
 * يُحمَّل بعد themes-expressive.css
 */

/* ═══════════════════════════════════════
   GLOBAL MICRO-ANIMATIONS — كل الثيمات
   ═══════════════════════════════════════ */

/* Smooth transitions on interactive elements */
html[data-theme] .btn-primary,
html[data-theme] .btn-secondary,
html[data-theme] .btn-add-cart,
html[data-theme] .pill,
html[data-theme] .cat-pill,
html[data-theme] .shop-nav-link,
html[data-theme] .card-product {
  transition:
    background 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.25s ease,
    transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.2s ease;
}

/* Card lift animation */
html[data-theme] .card-product:hover {
  transform: translateY(var(--shop-card-hover-y, -5px));
}

/* Button press feedback */
html[data-theme] .btn-primary:active,
html[data-theme] .btn-add-cart:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

/* Pill hover lift */
html[data-theme] .cat-pill:hover {
  transform: translateY(-2px);
}

/* ═══════════════════════════════════════
   KEYFRAMES — حركات أساسية
   ═══════════════════════════════════════ */

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes aurora-drift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

@keyframes float-gentle {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}

@keyframes scanline-move {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(200vh); }
}

@keyframes gold-shimmer {
  0%   { background-position: -300% center; }
  100% { background-position: 300% center; }
}

@keyframes neon-flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55%                            { opacity: 0.6; }
}

@keyframes sakura-float {
  0%   { transform: translateY(0) rotate(0deg) translateX(0); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.5; }
  100% { transform: translateY(100vh) rotate(360deg) translateX(60px); opacity: 0; }
}

@keyframes carbon-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(59, 130, 246, 0.12); }
  50%       { box-shadow: 0 0 28px rgba(59, 130, 246, 0.25), 0 0 0 1px rgba(59, 130, 246, 0.15); }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════
   VELVET NOIR — شيمر ذهبي، توهج مخملي
   ═══════════════════════════════════════════════════ */

/* Gold shimmer on accent title */
html[data-theme="velvet-noir"] .shop-title {
  background-size: 300% auto;
  animation: gold-shimmer 4s linear infinite;
}

/* Subtle gold shimmer on card borders on hover */
html[data-theme="velvet-noir"] .card-product::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, transparent 0%, rgba(201, 169, 110, 0.06) 50%, transparent 100%);
  background-size: 200% 200%;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}
html[data-theme="velvet-noir"] .card-product {
  position: relative;
  overflow: hidden;
}
html[data-theme="velvet-noir"] .card-product:hover::before {
  opacity: 1;
  animation: shimmer 2s linear infinite;
}

/* Gold glow on buttons */
html[data-theme="velvet-noir"] .btn-primary:hover {
  box-shadow: 0 0 18px rgba(201, 169, 110, 0.2), 0 8px 28px rgba(0, 0, 0, 0.4);
}

/* Section title shimmer */
html[data-theme="velvet-noir"] .section-title {
  background: linear-gradient(90deg, #c9a96e, #f4e4b8, #c9a96e, #a07040, #c9a96e);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gold-shimmer 5s linear infinite;
}

/* Trust strip gold accent line */
html[data-theme="velvet-noir"] .trust-strip {
  position: relative;
  overflow: hidden;
}
html[data-theme="velvet-noir"] .trust-strip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 110, 0.5), transparent);
  animation: shimmer 3s linear infinite;
  background-size: 200% auto;
}

/* ═══════════════════════════════════════════════════
   AURORA BOREALIS — تدرج متحرك، زجاج حي
   ═══════════════════════════════════════════════════ */

/* Animated aurora mesh background */
html[data-theme="aurora-borealis"] .shop-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 20% 20%, rgba(99, 102, 241, 0.12), transparent 50%),
    radial-gradient(ellipse 50% 35% at 80% 60%, rgba(6, 182, 212, 0.1), transparent 50%),
    radial-gradient(ellipse 40% 55% at 50% 85%, rgba(52, 211, 153, 0.08), transparent 55%);
  background-size: 200% 200%;
  animation: aurora-drift 12s ease infinite;
}

/* Animated gradient title */
html[data-theme="aurora-borealis"] .shop-title {
  background: linear-gradient(90deg, #818cf8, #a78bfa, #06b6d4, #34d399, #818cf8);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aurora-drift 6s linear infinite;
}

/* Card glassmorphism polish */
html[data-theme="aurora-borealis"] .card-product {
  backdrop-filter: blur(12px) saturate(1.3);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    backdrop-filter 0.3s ease;
}
html[data-theme="aurora-borealis"] .card-product:hover {
  backdrop-filter: blur(16px) saturate(1.6);
}

/* Animated gradient accent for section titles */
html[data-theme="aurora-borealis"] .section-title {
  background: linear-gradient(90deg, #818cf8, #06b6d4, #34d399, #818cf8);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aurora-drift 5s linear infinite;
}

/* Button shimmer effect */
html[data-theme="aurora-borealis"] .btn-primary {
  position: relative;
  overflow: hidden;
}
html[data-theme="aurora-borealis"] .btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  background-size: 200% auto;
  opacity: 0;
  transition: opacity 0.3s;
}
html[data-theme="aurora-borealis"] .btn-primary:hover::after {
  opacity: 1;
  animation: shimmer 1.5s linear infinite;
}

/* Header glow pulse */
html[data-theme="aurora-borealis"] .shop-header {
  animation: none;
}

/* ═══════════════════════════════════════════════════
   DESERT ROSE — وهج خوخي، ذهب صحراوي
   ═══════════════════════════════════════════════════ */

/* Warm shimmer on title */
html[data-theme="desert-rose"] .shop-title {
  background: linear-gradient(90deg, #f5c9a0, #e8927c, #c96c52, #e8927c, #f5c9a0);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite;
}

/* Card warm glow overlay */
html[data-theme="desert-rose"] .card-product {
  position: relative;
  overflow: hidden;
}
html[data-theme="desert-rose"] .card-product::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 80% at 50% 0%, rgba(232, 146, 124, 0.05), transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
html[data-theme="desert-rose"] .card-product:hover::after {
  opacity: 1;
}

/* Section title warm shimmer */
html[data-theme="desert-rose"] .section-title {
  background: linear-gradient(90deg, #f5c9a0, #e8927c, #c96c52, #e8927c, #f5c9a0);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 7s linear infinite;
}

/* Button hover shimmer */
html[data-theme="desert-rose"] .btn-primary:hover,
html[data-theme="desert-rose"] .btn-add-cart:hover {
  box-shadow: 0 0 20px rgba(232, 146, 124, 0.15), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* Hero subtle warm vignette */
html[data-theme="desert-rose"] .hero-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 20% 80%, rgba(201, 108, 82, 0.06), transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}

/* ═══════════════════════════════════════════════════
   MIDNIGHT CARBON — نبض كهربائي، بريق فولاذي
   ═══════════════════════════════════════════════════ */

/* Carbon fiber texture reinforcement */
html[data-theme="midnight-carbon"] .shop-body {
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.015) 0px,
      rgba(255, 255, 255, 0.015) 1px,
      transparent 1px,
      transparent 5px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.008) 0px,
      rgba(255, 255, 255, 0.008) 1px,
      transparent 1px,
      transparent 5px
    ),
    radial-gradient(ellipse 70% 50% at 30% 0%, rgba(59, 130, 246, 0.1), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 90%, rgba(96, 165, 250, 0.06), transparent 55%);
}

/* Electric blue title glow */
html[data-theme="midnight-carbon"] .shop-title {
  background: linear-gradient(105deg, #60a5fa, #818cf8, #a78bfa, #60a5fa);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aurora-drift 5s linear infinite;
}

/* Section title glow */
html[data-theme="midnight-carbon"] .section-title {
  background: linear-gradient(105deg, #3b82f6, #60a5fa, #818cf8, #3b82f6);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aurora-drift 6s linear infinite;
}

/* Card holographic hover effect */
html[data-theme="midnight-carbon"] .card-product {
  position: relative;
  overflow: hidden;
}
html[data-theme="midnight-carbon"] .card-product::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.06), transparent);
  transform: skewX(-15deg);
  transition: left 0.6s ease;
  pointer-events: none;
  z-index: 0;
}
html[data-theme="midnight-carbon"] .card-product:hover::before {
  left: 150%;
}

/* Electric pulse on card hover */
html[data-theme="midnight-carbon"] .card-product:hover {
  animation: carbon-pulse 1.5s ease infinite;
}

/* Topbar animated gradient */
html[data-theme="midnight-carbon"] .shop-topbar {
  background: linear-gradient(90deg, #1e40af, #3b82f6, #60a5fa, #3b82f6, #1e40af);
  background-size: 250% auto;
  animation: aurora-drift 6s linear infinite;
}

/* Button electric shimmer */
html[data-theme="midnight-carbon"] .btn-primary {
  position: relative;
  overflow: hidden;
}
html[data-theme="midnight-carbon"] .btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  background-size: 200% auto;
  opacity: 0;
  transition: opacity 0.3s;
}
html[data-theme="midnight-carbon"] .btn-primary:hover::after {
  opacity: 1;
  animation: shimmer 1.2s linear infinite;
}

/* ═══════════════════════════════════════════════════
   SAKURA ZEN — بتلات عائمة، نعومة يابانية
   ═══════════════════════════════════════════════════ */

/* Floating sakura petals decoration */
html[data-theme="sakura-zen"] .shop-body::after {
  content: "🌸";
  position: fixed;
  top: -50px;
  left: 15%;
  font-size: 1.2rem;
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  animation: sakura-float 12s linear 2s infinite;
}

/* Soft gradient on section titles */
html[data-theme="sakura-zen"] .section-title {
  background: linear-gradient(135deg, #c9607a, #d47891, #5c8a6e);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aurora-drift 8s linear infinite;
}

/* Card soft bloom effect */
html[data-theme="sakura-zen"] .card-product::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, rgba(201, 96, 122, 0.04), transparent 55%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
html[data-theme="sakura-zen"] .card-product {
  position: relative;
  overflow: hidden;
}
html[data-theme="sakura-zen"] .card-product:hover::after {
  opacity: 1;
}

/* Smooth button glow */
html[data-theme="sakura-zen"] .btn-primary:hover {
  box-shadow: 0 12px 32px rgba(201, 96, 122, 0.35);
  transform: translateY(-2px);
}
html[data-theme="sakura-zen"] .btn-add-cart:hover {
  box-shadow: 0 10px 28px rgba(201, 96, 122, 0.3);
  transform: translateY(-1px);
}

/* Topbar animated gradient */
html[data-theme="sakura-zen"] .shop-topbar {
  background: linear-gradient(90deg, #c9607a, #e891a6, #7dba92, #e891a6, #c9607a);
  background-size: 250% auto;
  animation: aurora-drift 7s linear infinite;
}

/* Title pink-green shimmer */
html[data-theme="sakura-zen"] .shop-title {
  background: linear-gradient(135deg, #c9607a, #e891a6, #5c8a6e, #c9607a);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 7s linear infinite;
}

/* ═══════════════════════════════════════════════════
   ENHANCED EXISTING THEMES
   ═══════════════════════════════════════════════════ */

/* ——— tech-lab: scanline + enhanced glow ——— */
html[data-theme="tech-lab"] .shop-body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.12) 3px,
    rgba(0, 0, 0, 0.12) 4px
  );
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}
html[data-theme="tech-lab"] .shop-title {
  background: linear-gradient(90deg, #22d3ee, #818cf8, #c084fc, #22d3ee);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aurora-drift 4s linear infinite;
}
html[data-theme="tech-lab"] .card-product:hover {
  box-shadow: 0 0 30px rgba(34, 211, 238, 0.18), 0 0 60px rgba(168, 85, 247, 0.08), 0 20px 50px rgba(0, 0, 0, 0.4);
}
html[data-theme="tech-lab"] .btn-primary {
  position: relative;
  overflow: hidden;
}
html[data-theme="tech-lab"] .btn-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.18), transparent);
  background-size: 200% auto;
  opacity: 0;
  transition: opacity 0.3s;
}
html[data-theme="tech-lab"] .btn-primary:hover::after {
  opacity: 1;
  animation: shimmer 1.5s linear infinite;
}

/* ——— luxury-atelier: gold shimmer animation ——— */
html[data-theme="luxury-atelier"] .shop-title {
  background: linear-gradient(90deg, #f4e4a6, #d4af37, #f4e4a6, #b8860b, #d4af37, #f4e4a6);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gold-shimmer 5s linear infinite;
}
html[data-theme="luxury-atelier"] .section-title {
  background: linear-gradient(90deg, #d4af37, #f4e4a6, #d4af37);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer 6s linear infinite;
}
html[data-theme="luxury-atelier"] .card-product:hover {
  box-shadow: 0 0 28px rgba(212, 175, 55, 0.14), 0 20px 52px rgba(0, 0, 0, 0.45);
  border-color: rgba(212, 175, 55, 0.5);
}
html[data-theme="luxury-atelier"] .btn-primary:hover {
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.2);
}

/* ——— gaming-neon: enhanced glitch ——— */
html[data-theme="gaming-neon"] .shop-title {
  position: relative;
}
html[data-theme="gaming-neon"] .shop-title {
  animation: neon-flicker 8s ease-in-out infinite;
}
html[data-theme="gaming-neon"] .section-title {
  text-shadow: 0 0 14px rgba(0, 255, 135, 0.4), 0 0 28px rgba(0, 255, 135, 0.2);
}
html[data-theme="gaming-neon"] .card-product:hover {
  box-shadow:
    0 0 28px rgba(0, 255, 135, 0.25),
    0 0 56px rgba(255, 0, 229, 0.1),
    inset 0 0 28px rgba(0, 255, 135, 0.04);
}
html[data-theme="gaming-neon"] .btn-primary:hover {
  box-shadow: 0 0 24px rgba(0, 255, 135, 0.4), 0 0 48px rgba(0, 255, 135, 0.2), 4px 4px 0 #0c0a09;
}

/* ——— beauty-bloom: deeper glassmorphism ——— */
html[data-theme="beauty-bloom"] .card-product {
  backdrop-filter: blur(16px) saturate(1.5);
  transition:
    backdrop-filter 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.25s ease;
}
html[data-theme="beauty-bloom"] .card-product:hover {
  backdrop-filter: blur(20px) saturate(2);
  box-shadow: 0 0 30px rgba(219, 39, 119, 0.14), 0 20px 50px rgba(0, 0, 0, 0.08);
}
html[data-theme="beauty-bloom"] .shop-title {
  background: linear-gradient(90deg, #db2777, #a855f7, #f472b6, #a855f7, #db2777);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: aurora-drift 6s linear infinite;
}
html[data-theme="beauty-bloom"] .btn-primary:hover {
  box-shadow: 0 16px 40px rgba(219, 39, 119, 0.4);
  transform: translateY(-2px);
}

/* ——— fashion-runway: ink draw hover effect ——— */
html[data-theme="fashion-runway"] .shop-nav-link {
  position: relative;
}
html[data-theme="fashion-runway"] .shop-nav-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 1px;
  background: var(--shop-accent);
  transition: left 0.3s ease, right 0.3s ease;
}
html[data-theme="fashion-runway"] .shop-nav-link:hover::after {
  left: 0;
  right: 0;
}
html[data-theme="fashion-runway"] .card-product:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* ═══════════════════════════════════════════════════
   SHARED PREMIUM — عناصر مشتركة بين كل الثيمات
   ═══════════════════════════════════════════════════ */

/* Fade-in-up on page load for cards */
html[data-theme] .card-product {
  animation: fade-in-up 0.4s ease both;
}
html[data-theme] .card-product:nth-child(2) { animation-delay: 0.05s; }
html[data-theme] .card-product:nth-child(3) { animation-delay: 0.1s; }
html[data-theme] .card-product:nth-child(4) { animation-delay: 0.15s; }
html[data-theme] .card-product:nth-child(5) { animation-delay: 0.2s; }
html[data-theme] .card-product:nth-child(6) { animation-delay: 0.25s; }
html[data-theme] .card-product:nth-child(7) { animation-delay: 0.3s; }
html[data-theme] .card-product:nth-child(8) { animation-delay: 0.35s; }

/* Smooth hero animation */
html[data-theme] .hero-banner {
  animation: fade-in-up 0.6s ease 0.1s both;
}

/* Topbar scroll animation prevention */
@media (prefers-reduced-motion: reduce) {
  html[data-theme] *,
  html[data-theme] *::before,
  html[data-theme] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}