/** Shopify CDN: Minification failed

Line 653:23 Expected identifier but found whitespace
Line 653:24 Unexpected "0"
Line 667:0 Unexpected "}"

**/
/* 
  Elegant Micro-Animations - Luxury Beauty Commerce (2025)
  Sophisticated interactive animations for premium beauty brand elements
*/

/* =========================
   LUXURY MICRO-ANIMATION VARIABLES
   ========================= */

:root {
  /* Elegant timing functions for luxury interactions */
  --timing-luxury-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --timing-luxury-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --timing-luxury-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --timing-luxury-anticipate: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  
  /* Sophisticated animation durations */
  --duration-micro: 200ms;
  --duration-elegant: 300ms;
  --duration-sophisticated: 400ms;
  --duration-luxurious: 600ms;
  
  /* Premium transform values */
  --transform-hover-elegant: translate3d(0, -4px, 0) scale3d(1.02, 1.02, 1);
  --transform-hover-premium: translate3d(0, -6px, 0) scale3d(1.05, 1.05, 1);
  --transform-active-luxury: translate3d(0, 1px, 0) scale3d(0.98, 0.98, 1);
  
  /* Elegant glow effects */
  --glow-luxury-soft: 0 0 20px hsla(45, 65%, 70%, 0.3);
  --glow-luxury-medium: 0 0 30px hsla(45, 65%, 70%, 0.4);
  --glow-luxury-strong: 0 0 40px hsla(45, 65%, 70%, 0.5);
}

/* =========================
   PREMIUM BUTTON MICRO-ANIMATIONS
   ========================= */

.luxury-button,
.card-product__add-to-cart,
.header__icon,
.luxury-bestseller-btn {
  position: relative;
  overflow: hidden;
  will-change: transform, box-shadow;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  
  transition: 
    transform var(--duration-elegant) var(--timing-luxury-smooth),
    box-shadow var(--duration-elegant) var(--timing-luxury-smooth),
    background-color var(--duration-micro) var(--timing-luxury-smooth);
  
  contain: layout style paint;
}

/* Elegant ripple effect */
.luxury-button::before,
.card-product__add-to-cart::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, 
    hsla(45, 65%, 70%, 0.3) 0%, 
    hsla(45, 65%, 70%, 0.1) 50%, 
    transparent 100%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width var(--duration-sophisticated) var(--timing-luxury-elastic),
              height var(--duration-sophisticated) var(--timing-luxury-elastic),
              opacity var(--duration-micro) ease-out;
  opacity: 0;
  z-index: 1;
}

.luxury-button:hover::before,
.card-product__add-to-cart:hover::before {
  width: 300px;
  height: 300px;
  opacity: 1;
}

.luxury-button:active::before,
.card-product__add-to-cart:active::before {
  width: 400px;
  height: 400px;
  opacity: 0.7;
  transition-duration: var(--duration-micro);
}

/* Premium hover states */
.luxury-button:hover,
.card-product__add-to-cart:hover {
  transform: var(--transform-hover-elegant);
  box-shadow: var(--shadow-luxury), var(--glow-luxury-soft);
}

.luxury-button:active,
.card-product__add-to-cart:active {
  transform: var(--transform-active-luxury);
  transition-duration: var(--duration-micro);
}

/* =========================
   SOPHISTICATED CARD ANIMATIONS
   ========================= */

.luxury-product-card,
.card-product-premium {
  position: relative;
  will-change: transform, box-shadow;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  
  transition: 
    transform var(--duration-sophisticated) var(--timing-luxury-smooth),
    box-shadow var(--duration-sophisticated) var(--timing-luxury-smooth);
  
  contain: layout style paint;
}

/* Elegant card shimmer effect */
.luxury-product-card::after,
.card-product-premium.shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    hsla(45, 65%, 70%, 0.1) 20%,
    hsla(45, 65%, 70%, 0.3) 50%,
    hsla(45, 65%, 70%, 0.1) 80%,
    transparent 100%);
  animation: elegantShimmer 3s ease-in-out infinite;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
}

@keyframes elegantShimmer {
  0% { 
    left: -100%; 
    opacity: 0;
  }
  10% { 
    opacity: 1;
  }
  90% { 
    opacity: 1;
  }
  100% { 
    left: 100%; 
    opacity: 0;
  }
}

/* Premium card hover effects */
.luxury-product-card:hover,
.card-product-premium:hover {
  transform: var(--transform-hover-premium);
  box-shadow: var(--shadow-premium), var(--glow-luxury-medium);
}

/* Elegant card image animations */
.luxury-product-card .card-product__media img,
.card-product-premium .card-product__media img {
  transition: 
    transform var(--duration-sophisticated) var(--timing-luxury-smooth),
    filter var(--duration-elegant) var(--timing-luxury-smooth);
  will-change: transform, filter;
}

.luxury-product-card:hover .card-product__media img,
.card-product-premium:hover .card-product__media img {
  transform: scale3d(1.08, 1.08, 1);
  filter: brightness(1.05) saturate(1.1);
}

/* =========================
   ELEGANT ICON ANIMATIONS
   ========================= */

.header__icon,
.card-product__quick-btn,
.luxury-icon {
  position: relative;
  will-change: transform, background-color;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  
  transition: 
    transform var(--duration-elegant) var(--timing-luxury-bounce),
    background-color var(--duration-micro) var(--timing-luxury-smooth),
    box-shadow var(--duration-elegant) var(--timing-luxury-smooth);
  
  contain: layout style paint;
}

/* Sophisticated icon pulse effect */
.header__icon::before,
.card-product__quick-btn::before,
.luxury-icon::before {
  content: '';
  position: absolute;
  inset: -4px;
  background: var(--gradient-luxury-accent);
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.8);
  transition: 
    opacity var(--duration-elegant) var(--timing-luxury-smooth),
    transform var(--duration-elegant) var(--timing-luxury-elastic);
  z-index: -1;
}

.header__icon:hover::before,
.card-product__quick-btn:hover::before,
.luxury-icon:hover::before {
  opacity: 0.15;
  transform: scale(1);
}

/* Premium icon hover states */
.header__icon:hover,
.card-product__quick-btn:hover,
.luxury-icon:hover {
  transform: var(--transform-hover-elegant);
  box-shadow: var(--shadow-medium), var(--glow-luxury-soft);
}

.header__icon:active,
.card-product__quick-btn:active,
.luxury-icon:active {
  transform: var(--transform-active-luxury);
  transition-duration: var(--duration-micro);
}

/* =========================
   SOPHISTICATED NAVIGATION ANIMATIONS
   ========================= */

.header__menu-item,
.menu-drawer__menu-item {
  position: relative;
  will-change: transform, color;
  transform: translate3d(0, 0, 0);
  
  transition: 
    transform var(--duration-elegant) var(--timing-luxury-smooth),
    color var(--duration-micro) var(--timing-luxury-smooth);
  
  contain: layout style paint;
}

/* Elegant underline animation */
.header__menu-item::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--gradient-luxury-accent);
  border-radius: var(--radius-full);
  transform: translateX(-50%);
  transition: width var(--duration-sophisticated) var(--timing-luxury-elastic);
}

.header__menu-item:hover::after,
.header__menu-item.active::after {
  width: 100%;
}

/* Premium navigation hover effects */
.header__menu-item:hover,
.menu-drawer__menu-item:hover {
  transform: var(--transform-hover-elegant);
  color: hsl(15, 45%, 75%);
}

/* =========================
   LUXURY FORM ANIMATIONS
   ========================= */

.luxury-input,
.luxury-select,
.luxury-textarea {
  position: relative;
  will-change: border-color, box-shadow;
  
  transition: 
    border-color var(--duration-elegant) var(--timing-luxury-smooth),
    box-shadow var(--duration-elegant) var(--timing-luxury-smooth),
    background-color var(--duration-micro) var(--timing-luxury-smooth);
  
  contain: layout style paint;
}

/* Elegant focus animations */
.luxury-input:focus,
.luxury-select:focus,
.luxury-textarea:focus {
  border-color: hsl(45, 65%, 70%);
  box-shadow: 
    0 0 0 3px hsla(45, 65%, 70%, 0.2),
    var(--shadow-medium);
  background-color: hsla(35, 20%, 98%, 0.8);
}

/* Sophisticated label animations */
.luxury-form-group {
  position: relative;
}

.luxury-label {
  position: absolute;
  top: 50%;
  left: var(--space-3);
  transform: translateY(-50%);
  color: hsl(25, 8%, 45%);
  font-size: var(--font-size-base);
  pointer-events: none;
  transition: 
    transform var(--duration-elegant) var(--timing-luxury-smooth),
    font-size var(--duration-elegant) var(--timing-luxury-smooth),
    color var(--duration-micro) var(--timing-luxury-smooth);
}

.luxury-input:focus + .luxury-label,
.luxury-input:not(:placeholder-shown) + .luxury-label {
  transform: translateY(-150%);
  font-size: var(--font-size-sm);
  color: hsl(15, 45%, 75%);
}

/* =========================
   PREMIUM LOADING ANIMATIONS
   ========================= */

.luxury-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid hsla(45, 65%, 70%, 0.2);
  border-top: 3px solid hsl(45, 65%, 70%);
  border-radius: 50%;
  animation: elegantSpin 1.2s var(--timing-luxury-smooth) infinite;
  will-change: transform;
}

@keyframes elegantSpin {
  0% { 
    transform: rotate(0deg) scale(1);
  }
  50% { 
    transform: rotate(180deg) scale(1.05);
  }
  100% { 
    transform: rotate(360deg) scale(1);
  }
}

/* Sophisticated pulse loading */
.luxury-pulse {
  animation: elegantPulse 2s var(--timing-luxury-smooth) infinite;
  will-change: opacity, transform;
}

@keyframes elegantPulse {
  0%, 100% { 
    opacity: 1;
    transform: scale(1);
  }
  50% { 
    opacity: 0.7;
    transform: scale(1.02);
  }
}

/* =========================
   ELEGANT SCROLL ANIMATIONS
   ========================= */

.animate-on-scroll-luxury {
  opacity: 0;
  transform: translate3d(0, 40px, 0) scale(0.95);
  transition: 
    opacity var(--duration-luxurious) var(--timing-luxury-smooth),
    transform var(--duration-luxurious) var(--timing-luxury-smooth);
  will-change: opacity, transform;
}

.animate-on-scroll-luxury.animate-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

/* Staggered luxury entrance animations */
.animate-on-scroll-luxury:nth-child(1) { transition-delay: 0ms; }
.animate-on-scroll-luxury:nth-child(2) { transition-delay: 150ms; }
.animate-on-scroll-luxury:nth-child(3) { transition-delay: 300ms; }
.animate-on-scroll-luxury:nth-child(4) { transition-delay: 450ms; }
.animate-on-scroll-luxury:nth-child(5) { transition-delay: 600ms; }
.animate-on-scroll-luxury:nth-child(6) { transition-delay: 750ms; }

/* =========================
   SOPHISTICATED HOVER EFFECTS
   ========================= */

.luxury-hover-glow {
  position: relative;
  transition: box-shadow var(--duration-elegant) var(--timing-luxury-smooth);
}

.luxury-hover-glow:hover {
  box-shadow: var(--glow-luxury-strong);
}

.luxury-hover-float {
  transition: transform var(--duration-sophisticated) var(--timing-luxury-bounce);
}

.luxury-hover-float:hover {
  transform: translate3d(0, -8px, 0);
}

.luxury-hover-scale {
  transition: transform var(--duration-elegant) var(--timing-luxury-elastic);
}

.luxury-hover-scale:hover {
  transform: scale3d(1.05, 1.05, 1);
}

/* =========================
   PREMIUM NOTIFICATION ANIMATIONS
   ========================= */

.luxury-notification {
  transform: translate3d(100%, 0, 0);
  opacity: 0;
  transition: 
    transform var(--duration-sophisticated) var(--timing-luxury-bounce),
    opacity var(--duration-elegant) var(--timing-luxury-smooth);
  will-change: transform, opacity;
}

.luxury-notification.show {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.luxury-notification.hide {
  transform: translate3d(100%, 0, 0);
  opacity: 0;
}

/* Elegant notification bounce */
.luxury-notification-bounce {
  animation: elegantBounce 0.6s var(--timing-luxury-bounce);
}

@keyframes elegantBounce {
  0% { 
    transform: translate3d(100%, 0, 0) scale(0.8);
    opacity: 0;
  }
  60% { 
    transform: translate3d(-10px, 0, 0) scale(1.05);
    opacity: 1;
  }
  100% { 
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
  }
}

/* =========================
   LUXURY MODAL ANIMATIONS
   ========================= */

.luxury-modal {
  opacity: 0;
  transform: scale(0.9) translate3d(0, -20px, 0);
  transition: 
    opacity var(--duration-sophisticated) var(--timing-luxury-smooth),
    transform var(--duration-sophisticated) var(--timing-luxury-elastic);
  will-change: opacity, transform;
}

.luxury-modal.show {
  opacity: 1;
  transform: scale(1) translate3d(0, 0, 0);
}

.luxury-modal-backdrop {
  opacity: 0;
  transition: opacity var(--duration-elegant) var(--timing-luxury-smooth);
  will-change: opacity;
}

.luxury-modal-backdrop.show {
  opacity: 1;
}

/* =========================
   SOPHISTICATED DROPDOWN ANIMATIONS
   ========================= */

.luxury-dropdown-content {
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, -10px, 0) scale(0.95);
  transition: 
    opacity var(--duration-elegant) var(--timing-luxury-smooth),
    visibility var(--duration-elegant) var(--timing-luxury-smooth),
    transform var(--duration-elegant) var(--timing-luxury-elastic);
  will-change: opacity, visibility, transform;
}

.luxury-dropdown:hover .luxury-dropdown-content,
.luxury-dropdown.open .luxury-dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
}

/* =========================
   ELEGANT CART ANIMATIONS
   ========================= */

.cart-count-bubble {
  animation: elegantCartBounce 0.4s var(--timing-luxury-bounce);
  will-change: transform;
}

@keyframes elegantCartBounce {
  0% { 
    transform: scale(0);
    opacity: 0;
  }
  50% { 
    transform: scale(1.3);
    opacity: 1;
  }
  100% { 
    transform: scale(1);
    opacity: 1;
  }
}

.cart-item-add {
  animation: elegantSlideIn 0.5s var(--timing-luxury-smooth);
}

@keyframes elegantSlideIn {
  0% { 
    transform: translate3d(-100%, 0, 0);
    opacity: 0;
  }
  100% { 
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

/* =========================
   RESPONSIVE MICRO-ANIMATIONS
   ========================= */

@media (max-width: 768px) {
  :root {
    --duration-micro: 150ms;
    --duration-elegant: 250ms;
    --duration-sophisticated: 300ms;
    --duration-luxurious: 400ms;
  }
  
  /* Simplified hover effects for touch devices */
  .luxury-button:hover,
  .card-product__add-to-cart:hover,
  .luxury-product-card:hover {
    transform: translate3d(0, -2px, 0) scale3d(1.01, 1.01, 1);
  }
}

@media (max-width: 480px) {
  /* Minimal animations for very small screens */
  .luxury-product-card::after,
  .card-product-premium.shimmer::after {
    animation-duration: 4s;
  }
  
  .animate-on-scroll-luxury:nth-child(n) {
    transition-delay: 0ms;
  }
}

/* =========================
   ACCESSIBILITY ENHANCEMENTS
   ========================= */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .animate-on-scroll-luxury {
    opacity: 1;
    transform: none;
  }
  
  .luxury-notification,
  .luxury-modal {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-contrast: high) {
  .luxury-button::before,
  .card-product__add-to-cart::before {
    background: radial-gradient(circle, 
      hsla(0, 0%, 100%, 0.5) 0%, 
      hsla(0, 0%, 100%, 0.2) 50%, 
      transparent 100%);
  }
  
  .header__icon::before,
  .card-product__quick-btn::before {
    background: hsl(0, 0%, 100%);
  }
}

/* =========================
   DARK MODE MICRO-ANIMATIONS
   ========================= */

/* Dark mode support removed - website always uses light mode */
    --glow-luxury-soft: 0 0 20px hsla(45, 65%, 70%, 0.4);
    --glow-luxury-medium: 0 0 30px hsla(45, 65%, 70%, 0.5);
    --glow-luxury-strong: 0 0 40px hsla(45, 65%, 70%, 0.6);
  }
  
  .luxury-product-card::after,
  .card-product-premium.shimmer::after {
    background: linear-gradient(90deg, 
      transparent 0%, 
      hsla(45, 65%, 70%, 0.15) 20%,
      hsla(45, 65%, 70%, 0.4) 50%,
      hsla(45, 65%, 70%, 0.15) 80%,
      transparent 100%);
  }
}

/* =========================
   PERFORMANCE OPTIMIZATIONS
   ========================= */

/* GPU layer creation for smooth animations */
.luxury-button,
.card-product-premium,
.header__icon,
.luxury-modal,
.luxury-notification {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Contain layout changes */
.luxury-product-card,
.card-product-premium,
.luxury-button,
.header__icon {
  contain: layout style paint;
}

/* Optimize will-change usage */
.luxury-button:hover,
.card-product-premium:hover,
.header__icon:hover {
  will-change: transform, box-shadow;
}

.luxury-button:not(:hover),
.card-product-premium:not(:hover),
.header__icon:not(:hover) {
  will-change: auto;
}