/* Homepage portfolio preview  - neutralize stray .portfolio-content transforms from
   older pages.css (seamless-grid overlay styles leaked globally). */
.portfolio-preview-section .portfolio-card .portfolio-content,
.portfolio-preview-section .portfolio-card:hover .portfolio-content {
  transform: none;
}

/* EchoLoRA portfolio thumb  - loaded via direct /css path so it applies even when
   components.css is served from an older CDN copy in production. */

.portfolio-image-container--echolora {
  background-color: #1f2228;
}

.portfolio-image-container--echolora .portfolio-image {
  background: #1f2228;
  border-color: rgba(255, 255, 255, 0.1);
}

/* Portfolio card hover  - mirrors components.css; overrides stale CDN components.css. */
.portfolio-card {
  --portfolio-hover-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --portfolio-hover-dur: 420ms;
  transition:
    transform var(--portfolio-hover-dur) var(--portfolio-hover-ease),
    box-shadow var(--portfolio-hover-dur) var(--portfolio-hover-ease),
    border-color var(--portfolio-hover-dur) var(--portfolio-hover-ease),
    background var(--portfolio-hover-dur) var(--portfolio-hover-ease);
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.portfolio-card .portfolio-image-container {
  transition: background-color var(--portfolio-hover-dur) var(--portfolio-hover-ease);
}

.portfolio-card:hover {
  transform: translate3d(0, -6px, 0);
  border-color: rgba(230, 190, 0, 0.38);
  background: rgba(255, 255, 255, 0.075);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.18),
    0 20px 40px -12px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(230, 190, 0, 0.14),
    0 0 40px -12px rgba(230, 190, 0, 0.22);
}

.portfolio-card:hover .portfolio-image {
  border-color: var(--primary);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.1),
    0 10px 28px rgba(230, 190, 0, 0.2);
  filter: brightness(1.04);
}

.portfolio-card:hover .portfolio-image-container--echolora .portfolio-image {
  filter: brightness(1.06);
}

.portfolio-card .portfolio-image {
  transition:
    border-color var(--portfolio-hover-dur) var(--portfolio-hover-ease),
    box-shadow var(--portfolio-hover-dur) var(--portfolio-hover-ease),
    filter var(--portfolio-hover-dur) var(--portfolio-hover-ease);
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-card,
  .portfolio-card:hover,
  .portfolio-card .portfolio-image,
  .portfolio-card:hover .portfolio-image,
  .portfolio-card .portfolio-image-container {
    transition-duration: 0.01ms;
  }

  .portfolio-card:hover {
    transform: translate3d(0, 0, 0);
  }

  .portfolio-card:hover .portfolio-image {
    filter: none;
  }
}