/* ==========================================================================
   GEGGY LUXURY ITEMS — Haute Couture Editorial Stylesheet
   Umbrella Portal: geggy.biz
   ========================================================================== */

:root {
  --color-surface: #fff8f3;
  --color-surface-dim: #dfd9d4;
  --color-surface-lowest: #ffffff;
  --color-surface-low: #f9f2ed;
  --color-surface-container: #f3ede7;
  --color-surface-high: #ede7e2;
  --color-surface-highest: #e7e1dc;
  
  --color-on-surface: #1d1b18;
  --color-on-surface-variant: #594140;
  --color-inverse-surface: #1c1a17;
  --color-inverse-on-surface: #f6f0ea;
  
  --color-primary: #780013;
  --color-primary-container: #9b1b25;
  --color-secondary: #725b38;
  --color-gold: #c5a880;
  --color-gold-light: #fedeb2;
  
  --font-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Base Resets */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--color-surface);
  color: var(--color-on-surface);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ==========================================================================
   ULTRA-LIGHTWEIGHT GPU-ACCELERATED PAGE SWITCH TRANSITION
   (Uses 3D transforms & opacity only to prevent layout reflows)
   ========================================================================== */
#page-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #9b1b25, #c5a880, #fedeb2);
  transform: scaleX(0);
  transform-origin: left center;
  z-index: 9999;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease-out;
  pointer-events-none;
  will-change: transform, opacity;
}

.page-wrapper {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1), transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

body.page-loaded .page-wrapper {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

body.page-exiting .page-wrapper {
  opacity: 0;
  transform: translate3d(0, -6px, 0);
  transition: opacity 0.2s ease-in, transform 0.2s ease-in;
}

/* ==========================================================================
   GPU-ACCELERATED SCROLL REVEAL ANIMATIONS (Zero Layout Jank)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.reveal.reveal-left {
  transform: translate3d(-24px, 0, 0);
}

.reveal.reveal-right {
  transform: translate3d(24px, 0, 0);
}

.reveal.reveal-scale {
  transform: scale3d(0.96, 0.96, 1);
}

.reveal.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
}

/* Lightweight Staggered Delays */
.reveal-delay-100 { transition-delay: 0.08s; }
.reveal-delay-150 { transition-delay: 0.12s; }
.reveal-delay-200 { transition-delay: 0.16s; }
.reveal-delay-300 { transition-delay: 0.24s; }

/* Reduced Motion Support (Accessibility & battery saving) */
@media (prefers-reduced-motion: reduce) {
  .reveal, .page-wrapper {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Custom Luxury Scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--color-surface);
}
::-webkit-scrollbar-thumb {
  background: #D9D2C9;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-secondary);
}

/* Typography Enhancements */
.font-editorial-serif {
  font-family: var(--font-serif);
}

.font-editorial-sans {
  font-family: var(--font-sans);
}

.letter-spacing-widest {
  letter-spacing: 0.22em;
}

/* Luxury Editorial Image Frames */
.arch-frame-top {
  border-top-left-radius: 140px;
  border-top-right-radius: 140px;
}

.arch-frame-full {
  border-radius: 120px;
}

/* Gold Gradient Accents */
.gold-gradient-border {
  border-image: linear-gradient(to right, #c5a880, #fedeb2, #725b38) 1;
}

.gold-gradient-text {
  background: linear-gradient(135deg, #725b38 0%, #c5a880 50%, #896d43 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Subtle Shimmer Effect on Luxury Badges */
@keyframes pulse-subtle {
  0%, 100% { opacity: 1; transform: scale3d(1, 1, 1); }
  50% { opacity: 0.88; transform: scale3d(1.02, 1.02, 1); }
}

.animate-pulse-subtle {
  animation: pulse-subtle 3s ease-in-out infinite;
}

/* Mobile Drawer Transitions */
.mobile-drawer-overlay {
  transition: opacity 0.25s ease-in-out;
}
.mobile-drawer-panel {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Selection Color */
::selection {
  background-color: var(--color-primary-container);
  color: #ffffff;
}

/* Open-Parcel Inspection Tag */
.cod-badge {
  background: linear-gradient(135deg, #24221f 0%, #151412 100%);
  color: #fedeb2;
  border: 1px solid rgba(254, 222, 178, 0.25);
}