/**
 * Modern Design Patterns - 2025 Enhancement Layer
 * Adds grain overlay, elevation system, specular effects, fluid typography,
 * scroll progress, and image standardization.
 */

/* ============================================
   1. GRAIN/NOISE OVERLAY SYSTEM
   ============================================ */

:root {
  /* Grain opacity tokens per theme - REFINED FOR READABILITY */
  --grain-opacity: 0.015;
  --grain-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] {
  --grain-opacity: 0.02;
}

/* Global grain overlay on body (kept separate from beach gradient in premium-effects) */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  /* Moved behind content for sharp text */
  opacity: var(--grain-opacity);
  background-image: var(--grain-url);
  background-size: 180px 180px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
}

@media (prefers-reduced-motion: reduce) {
  body::after {
    display: none;
  }
}

/* Grain on hero shader for smoother gradients */
.hero-bg-shader::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: calc(var(--grain-opacity) * 1.5);
  background-image: var(--grain-url);
  background-size: 200px 200px;
  mix-blend-mode: overlay;
}

/* Grain on large cards */
.work-card-overlay::after,
.hero-card::after,
.case-feature::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: calc(var(--grain-opacity) * 0.8);
  background-image: var(--grain-url);
  background-size: 150px 150px;
  mix-blend-mode: overlay;
  border-radius: inherit;
}


/* ============================================
   2. 3-TIER ELEVATION SYSTEM
   ============================================ */

:root {
  /* Surface elevation ladder */
  --surface-0: var(--color-white);
  /* Page background */
  --surface-1: #fffaf2;
  /* Cards/panels */
  --surface-2: #f3e5d6;
  /* Lifted elements */
  --surface-3: #ffe9cc;
  /* Floating/modal */

  /* Shadow elevation ladder */
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-2: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.10), 0 6px 10px rgba(0, 0, 0, 0.06);
  --shadow-4: 0 20px 40px rgba(0, 0, 0, 0.12), 0 10px 20px rgba(0, 0, 0, 0.08);
}

:root:not([data-theme="dark"]) {
  /* Light Day elevation */
  --surface-0: #ffffff;
  --surface-1: #fffaf2;
  --surface-2: #f3e5d6;
  --surface-3: #ffe9cc;

  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-2: 0 4px 6px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.08);
  --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.12), 0 6px 10px rgba(0, 0, 0, 0.10);
  --shadow-4: 0 20px 40px rgba(0, 0, 0, 0.15), 0 10px 20px rgba(0, 0, 0, 0.12);
}

:root[data-theme="dark"] {
  /* Silver Night elevation - IMPROVED CONTRAST */
  --surface-0: #0f1218;
  --surface-1: #181b24;
  --surface-2: #1f2330;
  --surface-3: #272b3a;

  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 4px 6px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.35);
  --shadow-3: 0 10px 20px rgba(0, 0, 0, 0.55), 0 6px 10px rgba(0, 0, 0, 0.4);
  --shadow-4: 0 20px 40px rgba(0, 0, 0, 0.65), 0 10px 20px rgba(0, 0, 0, 0.5);
}

/* Apply elevation system to components */
.case-card,
.work-card,
.testimonial-card,
.insight-card,
.timeline-card,
.side-project-card {
  background: var(--surface-1);
  box-shadow: var(--shadow-2);
}

.case-card:hover,
.work-card:hover,
.side-project-card:hover {
  box-shadow: var(--shadow-3);
  transform: translateY(-4px);
}

.nav-dropdown,
.company-chip-item,
.hero-card {
  background: var(--surface-2);
  box-shadow: var(--shadow-3);
}

/* Remove hardcoded white backgrounds */
.previous-work-card {
  background: var(--surface-1) !important;
}


/* ============================================
   3. SPECULAR/GLINT HOVER EFFECTS
   ============================================ */

:root {
  --glint-color: rgba(255, 255, 255, 0.6);
  --glint-gradient: linear-gradient(calc(var(--glint-angle) - 45deg),
      transparent 0%,
      var(--glint-color) 50%,
      transparent 100%);
}

:root[data-theme="dark"] {
  --glint-color: rgba(213, 226, 255, 0.25);
}

/* Specular highlight on CTAs */
.btn-cta-primary,
.btn.primary,
.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-cta-primary::before,
.btn.primary::before,
.btn-primary::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: var(--glint-gradient);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-smooth);
  pointer-events: none;
}

.btn-cta-primary:hover::before,
.btn-cta-primary:focus-visible::before,
.btn.primary:hover::before,
.btn.primary:focus-visible::before,
.btn-primary:hover::before,
.btn-primary:focus-visible::before {
  opacity: 1;
  animation: glint-sweep 0.8s var(--ease-gentle);
}

@keyframes glint-sweep {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(calc(var(--glint-angle) - 45deg));
  }

  100% {
    transform: translateX(100%) translateY(100%) rotate(calc(var(--glint-angle) - 45deg));
  }
}

@media (prefers-reduced-motion: reduce) {

  .btn-cta-primary::before,
  .btn.primary::before,
  .btn-primary::before {
    animation: none !important;
    opacity: 0.3;
  }
}

/* Glint on company chips */
.company-chip-item {
  position: relative;
  overflow: hidden;
}

.company-chip-item::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(115deg,
      transparent 40%,
      rgba(255, 255, 255, 0.3) 50%,
      transparent 60%);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-smooth);
  pointer-events: none;
}

.company-chip-item:hover::before,
.company-chip-item:focus-visible::before {
  opacity: 1;
}

/* Glint on work cards */
.work-card-overlay {
  position: relative;
  overflow: hidden;
}

.work-card-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, 0.1) 50%,
      transparent 100%);
  opacity: 0;
  transition: all 0.6s var(--ease-smooth);
  pointer-events: none;
}

.work-card:hover .work-card-overlay::before {
  left: 100%;
  opacity: 1;
}


/* ============================================
   4. FLUID TYPOGRAPHY & SPACING
   ============================================ */

:root {
  /* Fluid type scale using clamp */
  --font-xs: clamp(0.75rem, 0.9vw, 0.875rem);
  --font-sm: clamp(0.875rem, 1vw, 1rem);
  --font-base: clamp(1rem, 1.125vw, 1.125rem);
  --font-md: clamp(1.125rem, 1.25vw, 1.25rem);
  --font-lg: clamp(1.25rem, 1.5vw, 1.5rem);
  --font-xl: clamp(1.5rem, 2vw, 2rem);
  --font-2xl: clamp(1.875rem, 2.5vw, 2.5rem);
  --font-3xl: clamp(2.25rem, 3vw, 3rem);
  --font-4xl: clamp(2.75rem, 4vw, 4rem);
  --font-5xl: clamp(3.5rem, 5vw, 5.5rem);

  /* Rhythm-based spacing */
  --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --space-sm: clamp(0.5rem, 0.75vw, 0.75rem);
  --space-md: clamp(0.75rem, 1vw, 1rem);
  --space-lg: clamp(1rem, 1.5vw, 1.5rem);
  --space-xl: clamp(1.5rem, 2vw, 2rem);
  --space-2xl: clamp(2rem, 3vw, 3rem);
  --space-3xl: clamp(3rem, 4vw, 4rem);
  --space-4xl: clamp(4rem, 6vw, 6rem);
  --space-5xl: clamp(6rem, 8vw, 8rem);
}

/* Apply fluid typography to hero */
.hero-title,
#hero-name {
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

:root[data-theme="dark"] .hero-title,
:root[data-theme="dark"] #hero-name {
  letter-spacing: -0.025em;
  /* Tighter in dark mode for better readability */
}

.hero-subtitle,
#hero-tagline {
  font-size: var(--font-xl);
  line-height: 1.4;
}

.hero-bio,
#hero-bio {
  font-size: var(--font-base);
  line-height: 1.6;
}

/* Section headers */
.section-header h2,
.work-header h2,
.experience-header h2 {
  font-size: var(--font-3xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: var(--space-lg);
}

:root[data-theme="dark"] .section-header h2,
:root[data-theme="dark"] .work-header h2 {
  letter-spacing: -0.015em;
}

.section-header p {
  font-size: var(--font-md);
  line-height: 1.6;
  color: var(--color-muted);
}

/* Case study headings */
.case-card h3,
.work-card h3 {
  font-size: var(--font-lg);
  line-height: 1.3;
}


/* ============================================
   5. AMBIENT EDGE BORDERS
   ============================================ */

:root {
  --border-ambient: 1px solid var(--border-subtle);
  --border-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] {
  --border-ambient: 1px solid rgba(132, 158, 206, 0.35);
  --border-highlight: inset 0 1px 0 rgba(213, 226, 255, 0.12);
}

/* Apply to cards */
.case-card,
.work-card,
.company-chip-item,
.nav-dropdown,
.hero-card {
  border: var(--border-ambient);
  box-shadow: var(--border-highlight), var(--shadow-2);
}

:root[data-theme="dark"] .case-card,
:root[data-theme="dark"] .work-card,
:root[data-theme="dark"] .company-chip-item {
  border-color: rgba(132, 158, 206, 0.42);
  box-shadow: var(--border-highlight), var(--shadow-2), 0 0 0 1px rgba(132, 158, 206, 0.1);
}


/* ============================================
   6. SCROLL PROGRESS INDICATOR
   ============================================ */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: transparent;
  z-index: 10000;
  pointer-events: none;
}

.scroll-progress-bar {
  height: 100%;
  background: linear-gradient(90deg,
      var(--accent) 0%,
      var(--accent-2) 100%);
  width: 0%;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px var(--glow);
}

/* Only show on case study pages */
body:not(.case-wrapper) .scroll-progress {
  display: none;
}


/* ============================================
   7. STANDARDIZED IMAGE CONTAINERS
   ============================================ */

.case-study-image-container,
.ux-bite-image-container,
.content-image-frame {
  background: var(--surface-2);
  border: var(--border-ambient);
  border-radius: var(--radius-lg);
  padding: clamp(1rem, 2vw, 1.5rem);
  margin: var(--space-2xl) 0;
  box-shadow: var(--shadow-1);
  transition: transform var(--duration-normal) var(--ease-smooth),
    box-shadow var(--duration-normal) var(--ease-smooth);
}

.case-study-image-container:hover,
.ux-bite-image-container:hover,
.content-image-frame:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}

.case-study-image-container img,
.ux-bite-image-container img,
.content-image-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.image-caption,
.case-study-caption {
  font-size: var(--font-sm);
  color: var(--color-muted);
  text-align: center;
  margin-top: var(--space-md);
  line-height: 1.5;
  font-style: italic;
}


/* ============================================
   8. BLURRY BEACH & TIDE ATMOSPHERE (Proprietary Layered System)
   ============================================ */

.hero-bg-shader {
  position: relative;
  overflow: hidden;
  /* Base Atmospheric Color (Sand / Abyss) */
  background-color: var(--surface-1);
  transition: background-color 1.2s ease;
}

/* Hide sharp/legacy elements to ensure pure blur aesthetic */
.sun-core,
.sun-rays,
.moon-core,
.moon-craters,
.hero-shader-lines,
.hero-bg-shader::before {
  display: none !important;
}

/*
   LAYER 1: THE SUN / MOON (Top Atmospheric Glow)
   Repurposing .sun-glow / .moon-glow
*/
/*
   LAYER 1: THE SUN / MOON (Top Atmospheric Glow) - REFINED & SUBTLE
*/
.sun-glow,
.moon-glow {
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 80%;
  filter: blur(60px);
  opacity: 0.35 !important;
  pointer-events: none;
  transition: opacity 1.2s ease;
  z-index: 2;
}

/* Light Mode Sun - BALANCED VISIBILITY */
:root:not([data-theme="dark"]) .sun-glow {
  background: radial-gradient(circle at 50% 50%,
      rgba(255, 180, 60, 0.35) 0%,
      /* Soft Orange Core */
      rgba(255, 210, 120, 0.22) 40%,
      /* Golden Spread */
      rgba(255, 230, 180, 0.1) 60%,
      transparent 80%);
  display: block;
  opacity: 0.4 !important;
}

:root:not([data-theme="dark"]) .moon-glow {
  display: none;
}

/* Dark Mode Moon - BALANCED VISIBILITY */
:root[data-theme="dark"] .moon-glow {
  left: -10%;
  top: -30%;
  background: radial-gradient(circle at 50% 50%,
      rgba(196, 215, 255, 0.2) 0%,
      rgba(150, 180, 230, 0.12) 40%,
      rgba(120, 150, 200, 0.05) 60%,
      transparent 80%);
  display: block;
  opacity: 0.5 !important;
}

:root[data-theme="dark"] .sun-glow {
  display: none;
}


/*
   LAYER 2: THE SEA (The Tide) - REFINED & SUBTLE
*/
.hero-waves {
  position: absolute;
  bottom: -35%;
  left: -20%;
  width: 140%;
  height: 100%;
  filter: blur(60px);
  pointer-events: none;
  transition: transform 1.8s cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
  display: block !important;
  z-index: 1;
}

/* Light Mode Sea - BALANCED VISIBILITY */
:root:not([data-theme="dark"]) .hero-waves {
  background: linear-gradient(0deg,
      rgba(60, 150, 200, 0.3) 0%,
      /* Soft Blue Base */
      rgba(120, 180, 220, 0.18) 40%,
      /* Gentle Blue */
      rgba(200, 220, 240, 0.08) 70%,
      transparent 100%);
  opacity: 0.5 !important;
}

/* Dark Mode Sea - BALANCED VISIBILITY */
:root[data-theme="dark"] .hero-waves {
  background: linear-gradient(0deg,
      rgba(20, 30, 60, 0.4) 0%,
      /* Subtle Navy Base */
      rgba(30, 45, 75, 0.3) 40%,
      /* Mid Navy */
      rgba(40, 55, 85, 0.15) 70%,
      transparent 100%);
  bottom: -30%;
  opacity: 0.6 !important;
}

/*
   INTERACTION: DRAMATIC TIDE COMING IN
*/
@media (hover: hover) {
  .hero:hover .hero-waves {
    transform: translateY(-25%) scaleY(1.2);
    /* Much more dramatic movement */
  }
}

/* Dark mode tide interaction - also more dramatic */
@media (hover: hover) {
  :root[data-theme="dark"] .hero:hover .hero-waves {
    transform: translateY(-20%) scaleY(1.15);
  }
}


/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .hero-waves {
    transition: none !important;
    transform: none !important;
  }

  .hero:hover .hero-waves {
    transform: none !important;
  }

  .sun-glow,
  .moon-glow,
  .hero-waves {
    filter: blur(40px);
    /* Sharper for performance/accessibility */
  }
}

/* ============================================
   9. REDUCED MOTION PREMIUM STATIC VARIANT
   ============================================ */

/* ============================================
   MOODY BLUR: SIDE PROJECTS SECTION
   ============================================ */
:root[data-theme="dark"] .side-projects {
  position: relative;
  /* Ensure z-index context for contained blur */
  z-index: 1;
}

:root[data-theme="dark"] .side-projects::before {
  content: '';
  position: absolute;
  top: 10%;
  right: -20%;
  width: 50%;
  height: 60%;
  background: radial-gradient(circle at center,
      rgba(60, 20, 100, 0.2) 0%,
      /* Deep Purple Haze */
      transparent 70%);
  filter: blur(90px);
  z-index: -1;
  pointer-events: none;
}


@media (prefers-reduced-motion: reduce) {

  /* Keep premium aesthetic with static alternatives */
  .btn-cta-primary,
  .btn.primary,
  .company-chip-item,
  .work-card-overlay {
    transition: opacity var(--duration-fast) ease,
      transform var(--duration-fast) ease,
      box-shadow var(--duration-fast) ease;
  }

  .btn-cta-primary:hover,
  .btn.primary:hover {
    opacity: 0.9;
  }

  .company-chip-item:hover {
    background: var(--surface-3);
  }

  /* Static sparkles/decorations remain visible */
  .hero-sparkle {
    opacity: 0.3;
    animation: none;
  }
}


/* ============================================
   10. CONTENT REVEAL WITH INTENT
   ============================================ */

@import url('shader-mood.css');

.timeline-card,
.testimonial-card-mini {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-gentle),
    transform 0.6s var(--ease-gentle);
}

/* Philosophy items visible by default (progressive enhancement) */
.philosophy-item {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s var(--ease-gentle),
    transform 0.6s var(--ease-gentle);
}

.timeline-card.is-visible,
.testimonial-card-mini.is-visible,
.philosophy-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for lists */
.timeline-card:nth-child(1) {
  transition-delay: 0.05s;
}

.timeline-card:nth-child(2) {
  transition-delay: 0.10s;
}

.timeline-card:nth-child(3) {
  transition-delay: 0.15s;
}

.timeline-card:nth-child(4) {
  transition-delay: 0.20s;
}

.timeline-card:nth-child(5) {
  transition-delay: 0.25s;
}

@media (prefers-reduced-motion: reduce) {

  .timeline-card,
  .testimonial-card-mini,
  .philosophy-item {
    opacity: 1;
    transform: translateY(0);
    transition: none;
  }
}


/* ============================================
   11. RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  :root {
    --grain-opacity: 0.01;
    /* Significantly reduce grain on mobile for performance & readability */
  }

  :root[data-theme="dark"] {
    --grain-opacity: 0.012;
  }

  /* Reduce blur on mobile for better performance */
  .sun-glow,
  .moon-glow {
    filter: blur(50px);
  }

  .hero-waves {
    filter: blur(55px);
  }

  .case-study-image-container,
  .ux-bite-image-container,
  .content-image-frame {
    padding: clamp(0.75rem, 2vw, 1rem);
    margin: var(--space-xl) 0;
  }
}


/* ============================================
   12. ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* High contrast focus states */
.btn-cta-primary:focus-visible,
.btn.primary:focus-visible,
.company-chip-item:focus-visible,
.work-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  box-shadow: var(--shadow-3), 0 0 0 3px var(--glow);
}

/* Ensure sufficient contrast in dark mode */
:root[data-theme="dark"] .case-card h3,
:root[data-theme="dark"] .work-card h3,
:root[data-theme="dark"] .section-header h2 {
  color: var(--color-charcoal);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}