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

:root {
  --color-surface: #faf8f5;
  --color-surface-dim: #dfd9d4;
  --color-surface-lowest: #ffffff;
  --color-surface-low: #f5f2ec;
  --color-surface-container: #ede7df;
  --color-surface-high: #e5ded6;
  --color-surface-highest: #ded6cd;
  
  --color-on-surface: #141210;
  --color-on-surface-variant: #342e2b;
  --color-inverse-surface: #181614;
  --color-inverse-on-surface: #f9f6f2;
  
  --color-primary: #800e18;
  --color-primary-container: #9e1b25;
  --color-secondary: #5c4524;
  --color-gold: #b39264;
  --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;
  --font-urdu: 'Noto Nastaliq Urdu', 'Noto Sans Arabic', 'Plus Jakarta 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);
  background-image: 
    radial-gradient(ellipse 80% 50% at 75% -5%, rgba(255, 218, 216, 0.50) 0%, transparent 70%),
    radial-gradient(ellipse 60% 45% at 10% 40%, rgba(254, 222, 178, 0.35) 0%, transparent 65%),
    radial-gradient(ellipse 75% 55% at 85% 80%, rgba(255, 218, 216, 0.45) 0%, transparent 70%);
  background-attachment: fixed;
  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);
}

/* ==========================================================================
   HIGH CONTRAST & ACCESSIBILITY READABILITY UTILITIES
   ========================================================================== */
.text-on-surface-variant {
  color: #342e2b !important;
}

.text-contrast-dark {
  color: #141210 !important;
}

.text-contrast-muted {
  color: #4a443f !important;
}

/* Luxury Interactive Maison Cards */
.maison-card {
  position: relative;
  background-color: #ffffff;
  border: 1.5px solid #e2ddd5;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
}

.maison-card:hover {
  transform: translateY(-4px);
  border-color: #b39264;
  box-shadow: 0 24px 48px -12px rgba(24, 22, 20, 0.12), 0 4px 12px rgba(24, 22, 20, 0.04);
}

/* Modern Stretched-Link for Full Card Clickability */
.stretched-link::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  content: "";
  pointer-events: auto;
}

/* Keep secondary buttons on top of stretched links */
.card-action-isolated {
  position: relative;
  z-index: 20;
}

/* Language Toggle Switcher Pill */
.lang-switcher-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 5px;
  background-color: #ede7df;
  border: 1px solid #d9d2c7;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: all 0.2s ease;
}

.lang-switcher-pill a {
  padding: 4px 10px;
  border-radius: 9999px;
  text-decoration: none;
  color: #5c4524;
  transition: all 0.2s ease;
}

.lang-switcher-pill a.active {
  background-color: #9e1b25;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(158, 27, 37, 0.25);
}

.lang-switcher-pill a:hover:not(.active) {
  color: #141210;
  background-color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   URDU TYPOGRAPHY & RTL (RIGHT-TO-LEFT) SPECIALIZED ENHANCEMENTS
   ========================================================================== */
[dir="rtl"],
html[dir="rtl"] body,
body.lang-ur {
  font-family: 'Noto Sans Arabic', 'Noto Nastaliq Urdu', 'Plus Jakarta Sans', sans-serif;
  text-align: right;
}

[dir="rtl"] .font-headline-lg,
[dir="rtl"] .font-headline-sm,
[dir="rtl"] .font-masthead,
[dir="rtl"] .font-display-lg,
[dir="rtl"] .font-editorial-quote,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 {
  font-family: 'Noto Nastaliq Urdu', 'Noto Sans Arabic', serif;
  line-height: 1.85 !important;
  letter-spacing: normal !important;
}

[dir="rtl"] .font-label-caps-lg,
[dir="rtl"] .font-label-caps-sm,
[dir="rtl"] .letter-spacing-widest,
[dir="rtl"] .uppercase {
  letter-spacing: 0.03em !important;
  text-transform: none !important;
}

[dir="rtl"] p,
[dir="rtl"] .font-body-lg,
[dir="rtl"] .font-body-md,
[dir="rtl"] .font-body-sm {
  line-height: 1.85 !important;
}

[dir="rtl"] .rtl-flip {
  transform: scaleX(-1);
}