/* ==========================================
   STACKED CARDS SCROLL EFFECT
   Cards nest on top of each other as you scroll
   ========================================== */

/* Container setup for stacked scroll */
.how-i-work-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 3rem auto;
  max-width: 820px;
  padding-top: 2rem;
}

.work-principle {
  position: sticky;
  padding: 2rem 2.5rem;
  background: var(--surface-1);
  border: none;
  border-top: 2px solid transparent;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(60, 40, 20, 0.04);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s ease;
  min-height: 280px;
  margin-bottom: 2rem;
  will-change: transform;
  position: relative;
  overflow: hidden;
}

/* Top gradient border using pseudo-element */
.work-principle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.03));
  border-radius: 20px 20px 0 0;
  z-index: 1;
}

/* Stacking positions - each card sticks progressively lower */
.work-principle:nth-child(1) {
  top: 2rem;
  z-index: 4;
}

.work-principle:nth-child(2) {
  top: 2.5rem;
  z-index: 3;
}

.work-principle:nth-child(3) {
  top: 3rem;
  z-index: 2;
}

.work-principle:nth-child(4) {
  top: 3.5rem;
  z-index: 1;
}

/* Scale effect - cards slightly scale down as they stack */
.work-principle.is-stacking:nth-child(1) {
  transform: scale(1);
}

.work-principle.is-stacking:nth-child(2) {
  transform: scale(0.97);
}

.work-principle.is-stacking:nth-child(3) {
  transform: scale(0.94);
}

.work-principle.is-stacking:nth-child(4) {
  transform: scale(0.91);
}

/* Hover state */
@media (hover: hover) {
  .work-principle:hover {
    transform: translateY(-3px) scale(1.01) !important;
    box-shadow: 0 12px 32px rgba(60, 40, 20, 0.08);
    z-index: 10 !important;
  }
}

/* Dark mode */
[data-theme="dark"] .work-principle {
  background: rgba(28, 28, 32, 0.95);
  border: none;
  border-top: 2px solid transparent;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .work-principle::before {
  background: linear-gradient(90deg, rgba(140, 182, 255, 0.08), rgba(140, 182, 255, 0.35) 50%, rgba(140, 182, 255, 0.08));
}

@media (hover: hover) {
  [data-theme="dark"] .work-principle:hover {
    box-shadow: 0 12px 32px rgba(168, 197, 255, 0.1),
                0 4px 12px rgba(0, 0, 0, 0.3);
  }
}

/* Subtle shadow depth as cards stack */
.work-principle:nth-child(1) {
  box-shadow: 0 4px 12px rgba(60, 40, 20, 0.06);
}

.work-principle:nth-child(2) {
  box-shadow: 0 3px 10px rgba(60, 40, 20, 0.05);
}

.work-principle:nth-child(3) {
  box-shadow: 0 2px 8px rgba(60, 40, 20, 0.04);
}

.work-principle:nth-child(4) {
  box-shadow: 0 1px 6px rgba(60, 40, 20, 0.03);
}

[data-theme="dark"] .work-principle:nth-child(1) {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .work-principle:nth-child(2) {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .work-principle:nth-child(3) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .work-principle:nth-child(4) {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .how-i-work-grid {
    padding-top: 1rem;
  }

  .work-principle {
    padding: 1.5rem;
    min-height: 240px;
    margin-bottom: 1.5rem;
  }

  .work-principle:nth-child(1) {
    top: 1rem;
  }

  .work-principle:nth-child(2) {
    top: 1.25rem;
  }

  .work-principle:nth-child(3) {
    top: 1.5rem;
  }

  .work-principle:nth-child(4) {
    top: 1.75rem;
  }

  .work-principle.is-stacking:nth-child(2) {
    transform: scale(0.98);
  }

  .work-principle.is-stacking:nth-child(3) {
    transform: scale(0.96);
  }

  .work-principle.is-stacking:nth-child(4) {
    transform: scale(0.94);
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .work-principle {
    transition: none;
    position: relative !important;
    top: auto !important;
    transform: none !important;
    margin-bottom: 1.5rem;
  }

  .work-principle.is-stacking {
    transform: none !important;
  }
}
/* =========================================
   PREMIUM EFFECTS - CLEAN VERSION
   Uses Theme System Variables for all colors
   ========================================= */

/* ===========================================
   1. GLASSMORPHIC / NEOMORPHIC BUTTONS
   =========================================== */

/* Unified Neomorphic Button Style with gradient border */
.btn.neomorphic,
.btn-neomorphic,
.btn.primary,
.btn.secondary {
    position: relative;
    padding: 1.25rem 3rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--btn-neomorphic-text);
    border: 2px solid transparent;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.3)) padding-box,
        linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.02)) border-box;
    background-clip: padding-box, border-box;
    border-radius: 20px;
    box-shadow: var(--btn-neomorphic-shadow);
    transition: all var(--duration-fast) var(--ease-smooth);
    cursor: pointer;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    letter-spacing: 0.01em;
}

[data-theme="dark"] .btn.neomorphic,
[data-theme="dark"] .btn-neomorphic,
[data-theme="dark"] .btn.primary,
[data-theme="dark"] .btn.secondary {
    background:
        linear-gradient(145deg, rgba(26, 32, 53, 0.8), rgba(18, 22, 37, 0.85)) padding-box,
        linear-gradient(180deg, rgba(140, 182, 255, 0.22), rgba(140, 182, 255, 0.06)) border-box;
    background-clip: padding-box, border-box;
}

/* Hover State */
@media (hover: hover) {
  .btn.neomorphic:hover,
  .btn-neomorphic:hover,
  .btn.primary:hover,
  .btn.secondary:hover {
      transform: translateY(-2px);
      background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.45)) padding-box,
          linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.04)) border-box;
      background-clip: padding-box, border-box;
      box-shadow: var(--btn-neomorphic-shadow-hover);
      color: var(--btn-neomorphic-text);
  }
}

@media (hover: hover) {
  [data-theme="dark"] .btn.neomorphic:hover,
  [data-theme="dark"] .btn-neomorphic:hover,
  [data-theme="dark"] .btn.primary:hover,
  [data-theme="dark"] .btn.secondary:hover {
      background:
          linear-gradient(145deg, rgba(30, 38, 60, 0.9), rgba(22, 28, 45, 0.92)) padding-box,
          linear-gradient(180deg, rgba(140, 182, 255, 0.32), rgba(140, 182, 255, 0.1)) border-box;
      background-clip: padding-box, border-box;
  }
}

/* Active State */
.btn.neomorphic:active,
.btn-neomorphic:active,
.btn.primary:active,
.btn.secondary:active,
.btn.neomorphic.active,
.btn-neomorphic.active,
.btn.active {
    transform: translateY(1px);
    box-shadow: inset 4px 4px 12px rgba(0, 0, 0, 0.2), inset -2px -2px 8px rgba(255, 255, 255, 0.1);
}

/* Small Compact Button */
.btn.btn-small,
.btn-neomorphic.btn-small {
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
    border-radius: 16px;
    min-width: 50px;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ===========================================
   2. 3D CASE STUDY CARDS
   =========================================== */

.case-study-layout,
.case-grid,
#case-grid {
    perspective: 1200px;
    perspective-origin: center center;
}

.case-card,
.case-study-horizontal-card,
.bento-item {
    position: relative;
    transform-style: preserve-3d;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

/* 3D Hover Effect - Unified via Variables */
@media (hover: hover) {
  .case-card:hover,
  .case-study-horizontal-card:hover,
  .bento-item:hover {
      transform: translateZ(40px) rotateY(2deg) rotateX(-2deg);
      /* Shadow is handled by base styles in theme-system.css now, but let's boost it here */
      box-shadow: var(--shadow-strong, 0 20px 60px rgba(0, 0, 0, 0.2));
  }
}

/* Subtle Shimmer Overlay */
.case-card::before,
.case-study-horizontal-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(0, 0, 0, 0.05) 100%);
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.6s var(--ease-smooth);
    pointer-events: none;
    z-index: 1;
}

@media (hover: hover) {
  .case-card:hover::before,
  .case-study-horizontal-card:hover::before {
      opacity: 1;
  }
}

/* ===========================================
   3. FIXED BEACH BACKGROUND
   =========================================== */

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background: var(--beach-overlay);
}

/* ===========================================
   4. BEACH VIEW: SUN/MOON + WAVES
   =========================================== */

.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.sun-glow,
.moon-glow {
    position: absolute;
    top: -15%;
    left: 50%;
    transform: translateX(-50%);
    width: min(500px, 60vw);
    height: min(500px, 60vw);
    border-radius: 50%;
    filter: blur(65px);
    opacity: 0.5 !important;
    pointer-events: none;
    z-index: 2;
    transition: all 1.5s ease;
    background: var(--sun-glow-bg, none);
}

/* Moon Logic: If sun-glow-bg is none, show moon-glow-bg? 
   No, CSS variables switch. We just need separate elements if one needs to hide.
   Actually, let's keep it simple: Use .sun-glow for both, just change variable?
   No, HTML has both elements.
*/

/* Conditional Display based on Theme */
:root:not([data-theme="dark"]) .moon-glow {
    display: none;
}

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

/* Sun glow disabled in light mode */
:root:not([data-theme="dark"]) .sun-glow {
    display: none;
}

:root[data-theme="dark"] .moon-glow {
    background: var(--moon-glow-bg);
}


.hero-waves {
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 120%;
    height: 70%;
    filter: blur(65px);
    pointer-events: none;
    z-index: 1;
    transition: all 2s cubic-bezier(0.23, 1, 0.32, 1);
    background: var(--wave-gradient);
    opacity: 0.4 !important;
}

/* Hover Interaction */
@media (hover: hover) {
    .hero:hover .hero-waves {
        transform: translateY(-30%) scaleY(1.25);
        filter: blur(60px);
    }
}

/* Ripples */
.hero-waves::before,
.hero-waves::after {
    content: '';
    position: absolute;
    bottom: 10%;
    left: 0;
    width: 100%;
    height: 40%;
    opacity: 0.4;
    pointer-events: none;
}

.hero-waves::before {
    background: var(--wave-ripple-1);
    animation: wave-ripple 5s ease-in-out infinite;
}

.hero-waves::after {
    background: var(--wave-ripple-2);
    animation: wave-ripple 5s ease-in-out 2.5s infinite;
}

@keyframes wave-ripple {

    0%,
    100% {
        transform: translateY(0) scaleX(1);
        opacity: 0.4;
    }

    50% {
        transform: translateY(-15%) scaleX(1.05);
        opacity: 0.6;
    }
}

/* Reduce Motion */
@media (prefers-reduced-motion: reduce) {

    .case-card,
    .hero-waves,
    .sun-glow {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
}/* ============================================
   11. SHADER LINES (High-End Striped Glow)
   ============================================ */

.shader-lines-hover {
    position: relative;
    overflow: hidden;
    /* Ensure mask clipping works */
}

/* The Shader Layer */
.shader-lines-hover::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(90deg,
            transparent 0,
            transparent 2px,
            rgba(255, 255, 255, 0.6) 2px,
            rgba(255, 255, 255, 0.6) 4px);
    /* Mask to fade edges and center the effect */
    -webkit-mask-image: radial-gradient(circle at center,
            black 40%,
            transparent 75%);
    mask-image: radial-gradient(circle at center,
            black 40%,
            transparent 75%);
    opacity: 0;
    transform: scale(0.8);
    mix-blend-mode: overlay;
    /* Blends with card bg for that "internal light" look */
    transition: opacity 0.4s ease, transform 0.4s ease;
    z-index: 2;
}

/* Hover State - Desktop Only */
@media (hover: hover) {
    .shader-lines-hover:hover::after {
        opacity: 0.7;
        /* Boosted visibility */
        transform: scale(1.1);
        animation: shaderScroll 20s linear infinite;
    }
}

/* Dark Mode Intensity Boost */
@media (hover: hover) {
  :root[data-theme="dark"] .shader-lines-hover:hover::after {
      opacity: 0.8;
      mix-blend-mode: screen;
      background-image: repeating-linear-gradient(90deg,
              transparent 0,
              transparent 2px,
              rgba(255, 255, 255, 0.8) 2px,
              rgba(255, 255, 255, 0.8) 4px);
  }
}

@keyframes shaderScroll {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 100px 0;
    }
}


/* ============================================
   12. MOODY BLUR & TRANSPARENCY POLISH
   ============================================ */

/* Dark Mode Card Polish: More Glass, Less Plastic */
:root[data-theme="dark"] .case-card,
:root[data-theme="dark"] .work-card,
:root[data-theme="dark"] .side-project-card {
    background: rgba(15, 22, 41, 0.4) !important;
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
    position: relative;
    overflow: visible;
}

/* Moonlight gradient border using pseudo-element */
:root[data-theme="dark"] .case-card::before,
:root[data-theme="dark"] .work-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(213, 226, 255, 0.18) 15%,
        rgba(255, 255, 255, 0.08) 30%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.03) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
    transition: background 0.4s ease;
}

/* Hover: Intensify moonlight on border */
@media (hover: hover) {
    :root[data-theme="dark"] .case-card:hover::before,
    :root[data-theme="dark"] .work-card:hover::before {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.6) 0%,
            rgba(213, 226, 255, 0.4) 10%,
            rgba(255, 255, 255, 0.25) 20%,
            rgba(213, 226, 255, 0.15) 35%,
            rgba(255, 255, 255, 0.08) 60%,
            rgba(255, 255, 255, 0.04) 100%);
    }

    :root[data-theme="dark"] .case-card:hover,
    :root[data-theme="dark"] .work-card:hover {
        box-shadow: 0 0 20px 2px rgba(213, 226, 255, 0.15);
    }
}

/* Side-project-card moonlight border */
:root[data-theme="dark"] .side-project-card::before {
    z-index: 0;
}

/* Apply moonlight border to additional card types */
:root[data-theme="dark"] .testimonial-card,
:root[data-theme="dark"] .testimonial-card-mini,
:root[data-theme="dark"] .insight-card,
:root[data-theme="dark"] .bento-card,
:root[data-theme="dark"] .card {
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: none;
    overflow: visible;
}

/* Moonlight border for additional card types */
:root[data-theme="dark"] .testimonial-card::before,
:root[data-theme="dark"] .testimonial-card-mini::before,
:root[data-theme="dark"] .insight-card::before,
:root[data-theme="dark"] .bento-card::before,
:root[data-theme="dark"] .card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.3) 0%,
        rgba(213, 226, 255, 0.18) 15%,
        rgba(255, 255, 255, 0.08) 30%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.03) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: -1;
    transition: background 0.4s ease;
}

/* Hover effect for additional card types */
@media (hover: hover) {
    :root[data-theme="dark"] .testimonial-card:hover::before,
    :root[data-theme="dark"] .testimonial-card-mini:hover::before,
    :root[data-theme="dark"] .insight-card:hover::before,
    :root[data-theme="dark"] .bento-card:hover::before,
    :root[data-theme="dark"] .card:hover::before {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.6) 0%,
            rgba(213, 226, 255, 0.4) 10%,
            rgba(255, 255, 255, 0.25) 20%,
            rgba(213, 226, 255, 0.15) 35%,
            rgba(255, 255, 255, 0.08) 60%,
            rgba(255, 255, 255, 0.04) 100%);
    }

    :root[data-theme="dark"] .testimonial-card:hover,
    :root[data-theme="dark"] .testimonial-card-mini:hover,
    :root[data-theme="dark"] .insight-card:hover,
    :root[data-theme="dark"] .bento-card:hover,
    :root[data-theme="dark"] .card:hover {
        box-shadow: 0 0 20px 2px rgba(213, 226, 255, 0.15);
    }
}

/* Starfield Effect - Static for production polish */
/* Disabled twinkling animation to avoid competing for attention */
:root[data-theme="dark"] body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(200, 220, 255, 0.7), transparent),
        radial-gradient(1px 1px at 50% 50%, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1px 1px at 80% 10%, rgba(180, 200, 240, 0.7), transparent),
        radial-gradient(2px 2px at 90% 60%, rgba(220, 230, 255, 0.6), transparent),
        radial-gradient(1px 1px at 33% 80%, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(1px 1px at 15% 60%, rgba(190, 210, 245, 0.6), transparent),
        radial-gradient(2px 2px at 70% 25%, rgba(255, 255, 255, 0.7), transparent);
    background-size: 200% 200%, 180% 180%, 220% 220%, 190% 190%, 210% 210%, 240% 240%, 200% 200%, 230% 230%;
    background-position: 0% 0%, 100% 100%, 50% 50%, 80% 20%, 20% 80%, 60% 40%, 40% 60%, 10% 90%;
    /* animation: twinkle 8s ease-in-out infinite; */ /* Disabled for production */
    pointer-events: none;
    z-index: -1;  /* Behind content, not above */
    opacity: 0.3;  /* Subtle ambient texture, not focal point */
}

/* Additional smaller stars layer */
:root[data-theme="dark"] body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(1px 1px at 25% 20%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 75% 40%, rgba(200, 220, 255, 0.4), transparent),
        radial-gradient(1px 1px at 45% 65%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1px 1px at 85% 85%, rgba(180, 200, 240, 0.4), transparent),
        radial-gradient(1px 1px at 10% 45%, rgba(220, 230, 255, 0.5), transparent),
        radial-gradient(1px 1px at 55% 15%, rgba(255, 255, 255, 0.4), transparent);
    background-size: 250% 250%, 200% 200%, 220% 220%, 240% 240%, 230% 230%, 210% 210%;
    background-position: 50% 50%, 20% 80%, 70% 30%, 30% 70%, 90% 10%, 10% 90%;
    /* animation: twinkle 12s ease-in-out infinite reverse; */ /* Disabled for production */
    pointer-events: none;
    z-index: -1;  /* Behind content, not above */
    opacity: 0.2;  /* Subtle ambient texture, not focal point */
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.6;
        transform: scale(1);
    }
    50% {
        opacity: 0.3;
        transform: scale(1.05);
    }
}

/* Dark Mode Footer Glow */
:root[data-theme="dark"] .site-footer {
    position: relative;
    background: transparent;
    overflow: hidden;
}

/* The "Mood Floor" Glow */
:root[data-theme="dark"] .site-footer::before {
    content: '';
    position: absolute;
    bottom: -50%;
    left: 20%;
    width: 60%;
    height: 300px;
    background: radial-gradient(ellipse at center,
            var(--accent) 0%,
            transparent 70%);
    filter: blur(80px);
    /* Massive diffusion */
    opacity: 0.15;
    pointer-events: none;
    z-index: -1;
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    /* Disable shader scroll animation */
    .shader-lines-hover:hover::after {
        animation: none;
    }

    /* Disable starfield twinkle animations */
    :root[data-theme="dark"] body::before,
    :root[data-theme="dark"] body::after {
        animation: none;
        opacity: 0.4;
    }

    /* Remove transform transitions from cards */
    :root[data-theme="dark"] .case-card::before,
    :root[data-theme="dark"] .work-card::before,
    :root[data-theme="dark"] .testimonial-card::before,
    :root[data-theme="dark"] .testimonial-card-mini::before,
    :root[data-theme="dark"] .insight-card::before,
    :root[data-theme="dark"] .bento-card::before,
    :root[data-theme="dark"] .card::before {
        transition: none;
    }
}