/* ==========================================================================
   MILANO MEDICAL HAUTE COUTURE DESIGN SYSTEM
   Prof. Francesco Bruno - Dermatologo & Venereologo Milano
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,400;1,600&display=swap');

:root {
  --navy-deep: #051329;
  --navy-mid: #0a2540;
  --navy-light: #163e68;
  --azure: #0284c7;
  --azure-glow: #38bdf8;
  --teal: #0d9488;
  --gold-foil: linear-gradient(135deg, #c5a059 0%, #f1dfa2 50%, #b38728 100%);
  --gold-text: #b4862b;
  --pearl: #fcfdfd;
  --slate-warm: #f8fafc;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1e293b;
  background-color: #ffffff;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.font-serif-luxury {
  font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
}

.font-editorial {
  font-family: 'Playfair Display', Georgia, serif;
}

/* Subtle luxury ambient mesh */
.bg-ambient-mesh {
  background-color: #ffffff;
  background-image: 
    radial-gradient(at 10% 20%, rgba(2, 132, 199, 0.05) 0px, transparent 50%),
    radial-gradient(at 90% 15%, rgba(13, 148, 136, 0.04) 0px, transparent 50%),
    radial-gradient(at 50% 90%, rgba(197, 160, 89, 0.03) 0px, transparent 60%);
}

.bg-dark-mesh {
  background-color: #051329;
  background-image: 
    radial-gradient(circle at 85% 15%, rgba(14, 165, 233, 0.12) 0%, transparent 60%),
    radial-gradient(circle at 15% 85%, rgba(13, 148, 136, 0.08) 0%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(10, 37, 64, 0.9) 0%, transparent 100%);
}

/* Luxury Glassmorphism */
.glass-header {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.7);
}

.glass-luxury-card {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 20px 40px -15px rgba(10, 37, 64, 0.06), 0 0 0 1px rgba(226, 232, 240, 0.6);
}

.glass-dark-card {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Luxury Text Gradients */
.text-gradient-gold {
  background: linear-gradient(135deg, #c5a059 0%, #ecd393 50%, #9e731b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-navy {
  background: linear-gradient(135deg, #051329 0%, #0a2540 40%, #0284c7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-cyan {
  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Shimmer Button Animation */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

.btn-shimmer {
  position: relative;
  overflow: hidden;
}

.btn-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  animation: shimmer 4s infinite ease-in-out;
}

/* Subtle Float Animation */
@keyframes float-subtle {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

.animate-float {
  animation: float-subtle 4s ease-in-out infinite;
}

/* 3D Realistic Book Mockup Effect */
.book-card {
  perspective: 1000px;
  transition: transform 0.4s ease;
}

.book-card:hover {
  transform: translateY(-8px) scale(1.02);
}

.book-shadow {
  box-shadow: 
    -10px 15px 30px rgba(10, 37, 64, 0.15),
    -2px 5px 10px rgba(10, 37, 64, 0.08),
    inset -2px 0 3px rgba(0, 0, 0, 0.1);
}

/* Custom dual-layer shadows */
.shadow-luxury {
  box-shadow: 
    0 4px 6px -1px rgba(10, 37, 64, 0.03),
    0 20px 40px -4px rgba(10, 37, 64, 0.07);
}

.shadow-luxury-lg {
  box-shadow: 
    0 10px 15px -3px rgba(10, 37, 64, 0.04),
    0 30px 60px -12px rgba(10, 37, 64, 0.12);
}

.shadow-luxury-hover {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.shadow-luxury-hover:hover {
  transform: translateY(-4px);
  box-shadow: 
    0 12px 24px -4px rgba(10, 37, 64, 0.06),
    0 35px 70px -10px rgba(10, 37, 64, 0.14);
}

/* Editorial Quotes styling */
.quote-mark {
  font-family: 'Cormorant Garamond', serif;
  font-size: 5rem;
  line-height: 0;
  opacity: 0.15;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f8fafc;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Modal Transitions */
.modal-overlay {
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-box {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.modal-closed {
  opacity: 0;
  pointer-events: none;
}
.modal-closed .modal-box {
  transform: scale(0.96) translateY(12px);
}