/* Custom styles for Mulberry Silk shop */

/* Import Playfair Display as backup */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

/* Lazy loading images - prevent layout shift */
.lazy-load {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.lazy-load.loaded {
  opacity: 1;
}

/* x-cloak for Alpine.js */
[x-cloak] {
  display: none !important;
}

/* Line clamp utilities - prevent text overflow */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Smooth scroll for anchor links */
html {
  scroll-behavior: smooth;
}

/* Focus visible for accessibility */
*:focus-visible {
  outline: 2px solid #9333ea;
  outline-offset: 2px;
}

/* Remove default focus outline and use our custom one */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Optimize font rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Aspect ratio utility for images (fallback for older browsers) */
.aspect-square {
  aspect-ratio: 1 / 1;
}

@supports not (aspect-ratio: 1 / 1) {
  .aspect-square {
    position: relative;
    padding-bottom: 100%;
  }

  .aspect-square > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* Performance: Use GPU acceleration for animations */
.hover\:scale-105:hover,
.hover\:shadow-2xl:hover {
  will-change: transform;
}

/* Preload hint for critical resources */
@media (prefers-reduced-motion: no-preference) {
  /* Only apply animations if user hasn't set reduced motion preference */
  .transition-all,
  .transition-transform,
  .transition-colors,
  .transition-shadow {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Disable animations for users who prefer reduced motion */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Print styles - hide unnecessary elements */
@media print {
  header,
  footer,
  nav,
  .no-print {
    display: none !important;
  }
}