/* 
 * Silk Curtain Glow Background for Projects 
 * Adapted from original_5_curtainglow.html
 */

/* Prepare the project card wrapper */
.project-card {
  background-color: transparent !important;
  border-radius: 0 !important; /* Zero border radius as per brand */
  border: 1px solid var(--border-light, #e0e0e0);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s ease, box-shadow 0.5s ease;
}

[data-theme="dark"] .project-card {
  border-color: var(--border-dark, #333);
}

/* Target the content section to host the background */
.project-card__content {
  position: relative;
  z-index: 1;
  background-color: transparent !important; /* Override any defaults */
  overflow: hidden; /* Contain the pseudo-elements to this section */
}

/* Make sure inner content stays above the pseudo-elements */
.project-card__content > * {
  position: relative;
  z-index: 2;
}

/* 
 * LIGHT MODE (Default)
 */
.project-card__content::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  /* Light curtain glow gradient */
  background: 
    radial-gradient(circle at 50% -20%, oklch(0.30 0.01 55 / 0.08) 0%, transparent 65%),
    linear-gradient(90deg, 
      oklch(0.95 0.003 55) 0%, 
      oklch(0.92 0.003 55) 15%, 
      oklch(0.99 0.002 55) 30%, 
      oklch(0.92 0.003 55) 45%, 
      oklch(0.95 0.003 55) 60%, 
      oklch(0.92 0.003 55) 75%, 
      oklch(0.99 0.002 55) 90%, 
      oklch(0.95 0.003 55) 100%
    );
  opacity: 1;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover State - Light Mode */
.project-card:hover .project-card__content::before {
  background: 
    radial-gradient(circle at 50% -10%, oklch(0.30 0.01 55 / 0.12) 0%, transparent 75%),
    linear-gradient(90deg, oklch(0.95 0.003 55) 0%, oklch(0.92 0.003 55) 15%, oklch(0.99 0.002 55) 30%, oklch(0.92 0.003 55) 45%, oklch(0.95 0.003 55) 60%, oklch(0.92 0.003 55) 75%, oklch(0.99 0.002 55) 90%, oklch(0.95 0.003 55) 100%);
}

/* 
 * DARK MODE 
 */
.project-card__content::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: -1;
  /* Dark curtain glow gradient */
  background: 
    radial-gradient(circle at 50% -20%, oklch(0.88 0.02 65 / 0.15) 0%, transparent 65%),
    linear-gradient(90deg, 
      oklch(0.14 0.005 55) 0%, 
      oklch(0.18 0.006 55) 15%, 
      oklch(0.12 0.004 55) 30%, 
      oklch(0.18 0.006 55) 45%, 
      oklch(0.14 0.005 55) 60%, 
      oklch(0.18 0.006 55) 75%, 
      oklch(0.12 0.004 55) 90%, 
      oklch(0.14 0.005 55) 100%
    );
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover State - Dark Mode */
.project-card:hover .project-card__content::after {
  background: 
    radial-gradient(circle at 50% -10%, oklch(0.88 0.02 65 / 0.22) 0%, transparent 75%),
    linear-gradient(90deg, oklch(0.14 0.005 55) 0%, oklch(0.18 0.006 55) 15%, oklch(0.12 0.004 55) 30%, oklch(0.18 0.006 55) 45%, oklch(0.14 0.005 55) 60%, oklch(0.18 0.006 55) 75%, oklch(0.12 0.004 55) 90%, oklch(0.14 0.005 55) 100%);
}

/* Cross-fade transition logic */
[data-theme="dark"] .project-card__content::before {
  opacity: 0;
}
[data-theme="dark"] .project-card__content::after {
  opacity: 1;
}

/* Card Hover Box Shadow */
.project-card:hover {
  border-color: oklch(0.88 0.02 65) !important;
}
[data-theme="dark"] .project-card:hover {
  box-shadow: 0 15px 35px oklch(0 0 0 / 0.3), 0 5px 15px oklch(0.88 0.02 65 / 0.05);
}
:root:not([data-theme="dark"]) .project-card:hover {
  box-shadow: 0 15px 35px oklch(0.10 0.004 55 / 0.05), 0 5px 15px oklch(0.30 0.01 55 / 0.03);
}