/*
 * On Care — non-critical utilities & decorative animations.
 * Loaded post-LCP via <link rel="preload" as="style" onload> in index.html.
 *
 * These rules are not needed for first paint above the fold:
 *   - Decorative shimmers, sparkles, marquees
 *   - Hero corner gradients (only used by EnhancedSlider, mounted post-LCP)
 *   - Ken Burns, CTA shimmer, badge shimmer
 *   - Logo-breathe glow (after LCP)
 *
 * Using @layer utilities so Tailwind's specificity rules still apply.
 */

@layer utilities {
  /* Shimmer loading effect */
  .shimmer {
    background: linear-gradient(
      90deg,
      hsl(var(--muted)) 0%,
      hsl(var(--muted-foreground) / 0.1) 50%,
      hsl(var(--muted)) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 2s infinite linear;
  }

  /* Card shimmer sweep */
  @keyframes card-shimmer {
    0% { transform: translateX(-100%) skewX(-15deg); }
    100% { transform: translateX(200%) skewX(-15deg); }
  }

  .card-shimmer-sweep::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      transparent 40%,
      rgba(217, 177, 125, 0.12) 45%,
      rgba(217, 177, 125, 0.25) 50%,
      rgba(217, 177, 125, 0.12) 55%,
      transparent 60%
    );
    transform: translateX(-100%) skewX(-15deg);
    pointer-events: none;
    z-index: 10;
  }

  .group:hover .card-shimmer-sweep::after {
    animation: card-shimmer 0.8s ease-out forwards;
  }

  /* Sidebar gold shimmer sweep */
  @keyframes shimmer-sweep-x {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
  }

  .sidebar-gold-shimmer {
    position: relative;
    overflow: hidden;
    background: hsl(39 52% 67% / 0.15);
  }

  .sidebar-gold-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      transparent 0%,
      hsl(var(--nuvia-300) / 0.5) 25%,
      hsl(var(--nuvia-300) / 0.8) 50%,
      hsl(var(--nuvia-300) / 0.5) 75%,
      transparent 100%
    );
    transform: translateX(-100%);
    animation: shimmer-sweep-x 3s ease-in-out infinite;
    will-change: transform;
    pointer-events: none;
  }

  /* Badge shimmer */
  @keyframes badge-shimmer {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }

  .badge-shimmer {
    animation: badge-shimmer 2s ease-in-out infinite;
  }

  /* Sidebar sparkle particles */
  @keyframes sparkle-float {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.6; }
    50% { transform: translateY(-18px) scale(1.3); opacity: 1; }
  }

  @keyframes sparkle-drift {
    0%, 100% { transform: translateX(0) translateY(0); opacity: 0.4; }
    33% { transform: translateX(8px) translateY(-12px); opacity: 0.9; }
    66% { transform: translateX(-6px) translateY(-20px); opacity: 0.5; }
  }

  .sidebar-sparkle::before,
  .sidebar-sparkle::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
  }

  .sidebar-sparkle::before {
    background-image:
      radial-gradient(1px 1px at 15% 25%, hsl(39 52% 67% / 0.5) 50%, transparent 100%),
      radial-gradient(1.5px 1.5px at 75% 15%, hsl(39 52% 67% / 0.4) 50%, transparent 100%),
      radial-gradient(1px 1px at 45% 60%, hsl(39 52% 67% / 0.35) 50%, transparent 100%),
      radial-gradient(1.5px 1.5px at 85% 45%, hsl(39 52% 67% / 0.45) 50%, transparent 100%),
      radial-gradient(1px 1px at 25% 80%, hsl(39 52% 67% / 0.3) 50%, transparent 100%),
      radial-gradient(2px 2px at 60% 90%, hsl(39 52% 67% / 0.25) 50%, transparent 100%),
      radial-gradient(1px 1px at 90% 70%, hsl(39 52% 67% / 0.4) 50%, transparent 100%);
    animation: sparkle-float 6s ease-in-out infinite;
  }

  .sidebar-sparkle::after {
    background-image:
      radial-gradient(1px 1px at 30% 40%, hsl(39 52% 67% / 0.3) 50%, transparent 100%),
      radial-gradient(1.5px 1.5px at 55% 20%, hsl(39 52% 67% / 0.35) 50%, transparent 100%),
      radial-gradient(1px 1px at 80% 55%, hsl(39 52% 67% / 0.25) 50%, transparent 100%),
      radial-gradient(1.5px 1.5px at 10% 65%, hsl(39 52% 67% / 0.4) 50%, transparent 100%),
      radial-gradient(1px 1px at 65% 75%, hsl(39 52% 67% / 0.3) 50%, transparent 100%),
      radial-gradient(2px 2px at 40% 35%, hsl(39 52% 67% / 0.2) 50%, transparent 100%);
    animation: sparkle-drift 8s ease-in-out infinite 1s;
  }

  /* Diagonal luxury texture overlay */
  .sidebar-texture {
    background-image: repeating-linear-gradient(
      135deg,
      transparent,
      transparent 20px,
      hsl(39 52% 67% / 0.02) 20px,
      hsl(39 52% 67% / 0.02) 21px
    );
  }

  /* Logo breathing glow */
  @keyframes logo-glow {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
  }

  .logo-breathe {
    position: relative;
  }

  .logo-breathe::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    box-shadow: 0 0 12px 2px rgba(217, 177, 125, 0.35);
    opacity: 0;
    animation: logo-glow 4s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
    will-change: opacity;
  }

  /* Slow marquee for brand banner */
  @keyframes marquee-rtl-slow {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  .animate-marquee-rtl-slow {
    animation: marquee-rtl-slow 45s linear infinite;
  }

  /* Hero corner gradient lines (used by EnhancedSlider — post-LCP) */
  .hero-corner-gradient {
    background: linear-gradient(90deg, rgba(217,177,125,0.6), transparent);
  }
  .hero-corner-gradient-v {
    background: linear-gradient(180deg, rgba(217,177,125,0.6), transparent);
  }

  /* Mobile hero text fade */
  @keyframes heroTextFadeIn {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  .hero-text-fade-in {
    animation: heroTextFadeIn 500ms ease-out both;
  }

  /* Rotating ring for jewel-style category circles */
  @keyframes ring-rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  .ring-rotate-slow {
    animation: ring-rotate 12s linear infinite;
  }

  /* Luxury section divider */
  .luxury-section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 1.5rem 0;
  }

  .luxury-section-divider::before,
  .luxury-section-divider::after {
    content: '';
    flex: 1;
    max-width: 120px;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      hsl(39 52% 67% / 0.4),
      transparent
    );
  }

  /* CTA shimmer sweep idle animation */
  @keyframes cta-shimmer {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
  }

  .cta-shimmer-idle {
    position: relative;
    overflow: hidden;
  }

  .cta-shimmer-idle::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      105deg,
      transparent 40%,
      rgba(255,255,255,0.25) 45%,
      rgba(255,255,255,0.4) 50%,
      rgba(255,255,255,0.25) 55%,
      transparent 60%
    );
    background-size: 200% 100%;
    animation: cta-shimmer 3s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
  }

  /* Ken Burns zoom effect */
  @keyframes ken-burns {
    0% { transform: scale(1); }
    100% { transform: scale(1.08); }
  }

  .ken-burns-zoom {
    animation: ken-burns 5s ease-out forwards;
  }

  /* Icon pulse for trust strip */
  @keyframes icon-pulse-gold {
    0%, 90%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(217,177,125,0); }
    95% { transform: scale(1.08); box-shadow: 0 0 16px 4px rgba(217,177,125,0.25); }
  }

  .icon-pulse-gold {
    animation: icon-pulse-gold 5s ease-in-out infinite;
  }

  /* Hero headline glow (used by EnhancedSlider — post-LCP path) */
  .hero-headline-glow {
    text-shadow: 0 0 30px rgba(217,177,125,0.15), 0 2px 12px rgba(0,0,0,0.3);
  }

  /* Respect prefers-reduced-motion */
  @media (prefers-reduced-motion: reduce) {
    .sidebar-gold-shimmer::after,
    .logo-breathe::after,
    .sidebar-sparkle::before,
    .sidebar-sparkle::after,
    .icon-pulse-gold,
    .ken-burns-zoom,
    .animate-marquee-rtl-slow,
    .cta-shimmer-idle::after,
    .badge-shimmer { animation: none !important; }
  }
}