/* ==========================================================================
   DISAME GRAPHIC - Visual-Engineering Enhancement Layer
   Premium UI/UX refinements for $50k+ agency quality
   ========================================================================== */

/* ==========================================================================
   1. SOPHISTICATED SPACING SYSTEM (Golden Ratio Based)
   ========================================================================== */

:root {
  /* Golden Ratio Spacing Scale (1.618) */
  --space-xs: clamp(4px, 0.5vw, 6px);
  --space-sm: clamp(8px, 1vw, 12px);
  --space-md: clamp(16px, 1.618vw, 24px);
  --space-lg: clamp(24px, 2.618vw, 40px);
  --space-xl: clamp(40px, 4.236vw, 64px);
  --space-2xl: clamp(64px, 6.854vw, 104px);
  --space-3xl: clamp(104px, 11.09vw, 168px);
  --space-4xl: clamp(168px, 17.94vw, 272px);

  /* Premium Typography Scale (Major Third - 1.25) */
  --text-micro: clamp(10px, 0.8vw, 12px);
  --text-xs: clamp(11px, 0.9vw, 13px);
  --text-sm: clamp(13px, 1vw, 14px);
  --text-base: clamp(15px, 1.1vw, 17px);
  --text-lg: clamp(18px, 1.25vw, 20px);
  --text-xl: clamp(22px, 1.5vw, 25px);
  --text-2xl: clamp(28px, 2vw, 32px);
  --text-3xl: clamp(35px, 2.5vw, 40px);
  --text-4xl: clamp(44px, 3.5vw, 52px);
  --text-5xl: clamp(55px, 5vw, 65px);
  --text-6xl: clamp(70px, 7vw, 82px);
  --text-7xl: clamp(88px, 10vw, 103px);

  /* Premium Color System */
  --color-surface: #0c0c0d;
  --color-surface-elevated: #151516;
  --color-surface-higher: #1c1c1e;
  --color-surface-highest: #232325;
  
  --color-ink-white: rgba(255, 255, 255, 0.96);
  --color-ink-primary: rgba(255, 255, 255, 0.80);
  --color-ink-secondary: rgba(255, 255, 255, 0.55);
  --color-ink-tertiary: rgba(255, 255, 255, 0.35);
  --color-ink-quaternary: rgba(255, 255, 255, 0.18);
  
  /* Premium Border Colors */
  --border-subtle: rgba(255, 255, 255, 0.04);
  --border-default: rgba(255, 255, 255, 0.08);
  --border-prominent: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.18);
  
  /* Premium Easing Functions */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* Premium Shadows (Layered for depth) */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3), 0 10px 20px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.4), 0 30px 60px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.5), 0 50px 100px rgba(0, 0, 0, 0.4);
  --shadow-glow: 0 0 40px rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   2. REFINED VISUAL HIERARCHY
   ========================================================================== */

/* Hero Typography - Dramatic Scale */
.hero-title {
  font-size: var(--text-7xl);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--color-ink-white);
}

.hero-title .text-outline {
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.55);
  color: transparent;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.08);
}

.section-title {
  font-size: var(--text-4xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--color-ink-white);
}

/* Premium Card Styling */
.card-premium {
  background: linear-gradient(145deg, 
    rgba(255, 255, 255, 0.03) 0%, 
    rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  transition: all 0.5s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}

.card-premium::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
    rgba(255, 255, 255, 0.06), 
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.5s var(--ease-out-expo);
  pointer-events: none;
}

.card-premium:hover::before {
  opacity: 1;
}

.card-premium:hover {
  transform: translateY(-4px);
  border-color: var(--border-prominent);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

/* ==========================================================================
   3. PREMIUM BUTTON SYSTEM
   ========================================================================== */

.btn-premium {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  overflow: hidden;
  transition: all 0.4s var(--ease-out-expo);
  border: none;
}

.btn-premium-primary {
  background: var(--color-ink-white);
  color: var(--color-surface);
}

.btn-premium-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease-out-expo);
}

.btn-premium-primary:hover::before {
  transform: translateX(100%);
}

.btn-premium-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadow-md);
}

.btn-premium-secondary {
  background: transparent;
  color: var(--color-ink-white);
  border: 1px solid var(--border-prominent);
}

.btn-premium-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

/* Button Magnetic Effect Container */
.btn-magnetic {
  transition: transform 0.3s var(--ease-out-expo);
}

/* ==========================================================================
   4. SOPHISTICATED HOVER STATES
   ========================================================================== */

/* Link Underline Animation */
.link-underline {
  position: relative;
  text-decoration: none;
  color: var(--color-ink-primary);
}

.link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease-out-expo);
}

.link-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Image Reveal Effect */
.image-reveal {
  position: relative;
  overflow: hidden;
}

.image-reveal img {
  transition: transform 1s var(--ease-out-expo), filter 0.6s ease;
  filter: grayscale(30%);
}

.image-reveal:hover img {
  transform: scale(1.08);
  filter: grayscale(0%);
}

.image-reveal::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 50%);
  opacity: 0.7;
  transition: opacity 0.6s ease;
}

.image-reveal:hover::after {
  opacity: 0.9;
}

/* ==========================================================================
   5. PREMIUM SCROLL REVEALS
   ========================================================================== */

.reveal-up {
  opacity: 0;
  transform: translateY(60px);
  transition: opacity 1s var(--ease-out-expo), transform 1s var(--ease-out-expo);
}

.reveal-up.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}

.reveal-scale.active {
  opacity: 1;
  transform: scale(1);
}

.reveal-blur {
  opacity: 0;
  filter: blur(20px);
  transform: translateY(40px);
  transition: opacity 1s var(--ease-out-expo), 
              transform 1s var(--ease-out-expo), 
              filter 1s var(--ease-out-expo);
}

.reveal-blur.active {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* Stagger Delays */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* ==========================================================================
   6. PREMIUM NAVIGATION
   ========================================================================== */

.nav-premium {
  display: flex;
  gap: var(--space-xl);
}

.nav-premium a {
  position: relative;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink-secondary);
  text-decoration: none;
  letter-spacing: -0.01em;
  padding: var(--space-sm) 0;
  transition: color 0.3s ease;
}

.nav-premium a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 4px;
  height: 4px;
  background: var(--color-ink-white);
  border-radius: 50%;
  transform: translateX(-50%) scale(0);
  transition: transform 0.3s var(--ease-out-back);
}

.nav-premium a:hover,
.nav-premium a.active {
  color: var(--color-ink-white);
}

.nav-premium a:hover::before,
.nav-premium a.active::before {
  transform: translateX(-50%) scale(1);
}

/* ==========================================================================
   7. GLASSMORPHISM HEADER
   ========================================================================== */

.header-glass {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-md) 0;
  background: transparent;
  transition: all 0.5s var(--ease-out-expo);
}

.header-glass.scrolled {
  padding: var(--space-sm) 0;
  background: rgba(12, 12, 13, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border-default);
}

/* ==========================================================================
   8. PREMIUM TEXT GRADIENTS
   ========================================================================== */

.text-gradient {
  background: linear-gradient(135deg, 
    #ffffff 0%, 
    rgba(255, 255, 255, 0.7) 50%, 
    rgba(255, 255, 255, 0.5) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.text-gradient-animated {
  background: linear-gradient(90deg, 
    #ffffff 0%, 
    rgba(255, 255, 255, 0.6) 25%, 
    #ffffff 50%, 
    rgba(255, 255, 255, 0.6) 75%, 
    #ffffff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradient-flow 3s linear infinite;
}

@keyframes gradient-flow {
  to { background-position: 200% center; }
}

/* ==========================================================================
   9. MICRO-INTERACTIONS
   ========================================================================== */

/* Focus States */
*:focus-visible {
  outline: 2px solid var(--color-ink-primary);
  outline-offset: 4px;
}

/* Selection */
::selection {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Smooth Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-surface);
}

::-webkit-scrollbar-thumb {
  background: var(--color-ink-quaternary);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-ink-tertiary);
}

/* ==========================================================================
   10. PREMIUM UTILITY CLASSES
   ========================================================================== */

/* Container widths using golden ratio */
.container-tight { max-width: 680px; }
.container-narrow { max-width: 900px; }
.container-default { max-width: 1200px; }
.container-wide { max-width: 1400px; }
.container-full { max-width: 1600px; }

/* Text balance for headings */
.text-balance {
  text-wrap: balance;
}

/* GPU acceleration */
.gpu {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* Contain paint for performance */
.contain {
  contain: layout style paint;
}

/* Aspect ratio utilities */
.aspect-square { aspect-ratio: 1; }
.aspect-video { aspect-ratio: 16/9; }
.aspect-portrait { aspect-ratio: 3/4; }
.aspect-landscape { aspect-ratio: 4/3; }

/* ==========================================================================
   11. AMBIENT BACKGROUND EFFECTS
   ========================================================================== */

.ambient-spotlight {
  position: absolute;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, transparent 70%);
  pointer-events: none;
  filter: blur(60px);
}

/* Grain texture overlay */
.grain::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.02;
  pointer-events: none;
  z-index: 9999;
}

/* ==========================================================================
   12. RESPONSIVE REFINEMENTS
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --space-3xl: clamp(60px, 15vw, 104px);
    --space-4xl: clamp(100px, 20vw, 168px);
  }
  
  .hero-title {
    font-size: var(--text-5xl);
    line-height: 1;
  }
  
  .section-title {
    font-size: var(--text-3xl);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .reveal-up, .reveal-scale, .reveal-blur {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

/* Mobile/Touch Device Optimizations */
@media (pointer: coarse) {
  .cursor,
  .cursor-dot {
    display: none !important;
  }
}