/* 
==============================================================================
 21ST.DEV & MOTIONSITES INSPIRED DESIGN UTILITIES 
 For Elamora Tea - Premium Awwwards Editorial Design System
============================================================================== 
*/

/* --- 1. GLASSMORPHISM & BLUR EFFECTS (Apple Simplicity) --- */
.glass-panel {
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}
.glass-panel-dark {
  background: rgba(18, 41, 32, 0.6);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
  color: var(--cream);
}

/* --- 2. PREMIUM DARK SECTIONS --- */
.premium-dark-section {
  background-color: var(--forest-deep);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}
.premium-dark-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 60%);
  pointer-events: none;
}

/* --- 3. CINEMATIC GRADIENTS --- */
.text-gradient-gold {
  background: linear-gradient(135deg, var(--tea-gold) 0%, #D4AF37 50%, var(--tea-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bg-gradient-subtle {
  background: linear-gradient(180deg, var(--cream) 0%, var(--parchment-light) 100%);
}

/* --- 4. MICRO-INTERACTION CARDS (21st.dev Style) --- */
.hover-card-21st {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  background: var(--cream);
  border: 1px solid var(--soft-border-light);
}
.hover-card-21st:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(24, 32, 25, 0.12);
  border-color: var(--soft-border);
}
.hover-card-21st .hover-img-zoom {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-card-21st:hover .hover-img-zoom {
  transform: scale(1.05);
}

/* --- 5. EDITORIAL TYPOGRAPHY & WHITESPACE --- */
.editorial-massive-text {
  font-family: var(--font-serif);
  font-size: clamp(4rem, 10vw, 12rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-weight: 300;
  margin: 0;
}
.editorial-section-padding {
  padding: 120px 5%;
}
@media (max-width: 768px) {
  .editorial-section-padding {
    padding: 80px 5%;
  }
}

/* --- 6. SMOOTH PAGE TRANSITIONS --- */
.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--cream);
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
}

/* --- 7. BENTON GRID / MASONRY LAYOUT UTILITIES --- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.bento-item-large {
  grid-column: span 2;
  grid-row: span 2;
}
@media (max-width: 768px) {
  .bento-item-large {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* PDP (Product Detail Page) Global Overrides */
.pdp-gallery-card {
  background: rgba(255, 255, 255, 0.45) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.05) !important;
}
.pdp-purchase-card {
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 16px 40px rgba(31, 38, 135, 0.08) !important;
  border-radius: var(--radius-lg) !important;
}