.projects-effects {
  background-color: #02050b;
  background-image:
    linear-gradient(rgba(88, 190, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(88, 190, 255, .045) 1px, transparent 1px),
    url("../assets/images/projects/project-fx-poster-1280.webp");
  background-size: 64px 64px, 64px 64px, cover;
  background-position: 0 0, 0 0, center top;
  background-repeat: repeat, repeat, no-repeat;
  background-attachment: fixed;
}

.projects-effects::after {
  inset: 0;
  z-index: 0;
  height: auto;
  background: rgba(2, 5, 12, .68);
  filter: none;
  transform: none;
}

.projects-effects .project-page-fx {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}

.projects-effects.projects-fx-ready .project-page-fx {
  opacity: 1;
}

.projects-effects.projects-fx-disabled .project-page-fx {
  display: none;
}

.projects-effects .topbar,
.projects-effects .projects-hero,
.projects-effects main,
.projects-effects .footer {
  position: relative;
  z-index: 1;
}

.projects-effects .projects-hero {
  min-height: clamp(520px, 76vh, 780px);
  background: transparent;
}

.projects-effects .projects-hero::before {
  z-index: 1;
  background: linear-gradient(90deg, rgba(2, 5, 12, .96) 0%, rgba(2, 7, 18, .82) 38%, rgba(3, 10, 24, .28) 72%, rgba(2, 5, 12, .14) 100%);
}

.projects-effects .projects-hero::after {
  z-index: 2;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(114, 229, 255, .025) 1px, transparent 1px);
  background-size: 4px 4px, 72px 72px;
  animation: none;
  transform: none;
  opacity: .72;
}

.projects-effects .projects-hero .hero-inner {
  z-index: 3;
  min-height: clamp(520px, 76vh, 780px);
}

.projects-effects .projects-hero h1,
.projects-effects .projects-hero .hero-copy,
.projects-effects .projects-hero .meta-list {
  text-shadow: 0 2px 22px rgba(0, 0, 0, .92), 0 0 42px rgba(0, 0, 0, .72);
}

.projects-effects .projects-hero h1 {
  color: #f7fbff;
  background: none;
  -webkit-text-fill-color: #f7fbff;
}

.projects-effects main {
  padding-block: 0;
  color: #e8f0ff;
  background: transparent;
}

.projects-effects main .section {
  min-height: min(760px, 78vh);
  display: grid;
  align-content: center;
  padding-block: clamp(72px, 10vh, 116px);
  scroll-margin-top: 80px;
}

.projects-effects main .section + .section {
  position: relative;
  border-top: 0;
}

.projects-effects main .section + .section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 72px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(142, 233, 255, .42), transparent);
  transform: translateX(-50%);
}

.projects-effects .section h2,
.projects-effects .card h3,
.projects-effects .note-panel h3,
.projects-effects .list-item strong {
  color: #f5f8ff;
}

.projects-effects .section-desc,
.projects-effects .card p,
.projects-effects .note-panel p,
.projects-effects .list-item p {
  color: rgba(238, 245, 255, .86);
}

.projects-effects .section-head {
  text-shadow: 0 2px 18px rgba(0, 0, 0, .96);
}

.projects-effects .section .eyebrow {
  color: #8ee9ff;
  border-color: rgba(104, 224, 255, .2);
  background: rgba(5, 18, 36, .52);
  backdrop-filter: blur(14px);
}

.projects-effects .card,
.projects-effects .list-item,
.projects-effects .note-panel {
  border-color: rgba(164, 216, 255, .18);
  background: linear-gradient(145deg, rgba(6, 15, 31, .82), rgba(10, 25, 48, .62));
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
  backdrop-filter: blur(22px) saturate(1.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.18);
}

.projects-effects .card-link,
.projects-effects .card-kicker {
  color: #8ee9ff;
}

.projects-effects .tag {
  color: #082b4b;
  border-color: rgba(142, 233, 255, .72);
  background: #e8f8ff;
}

.projects-effects :where(a, button):focus-visible {
  outline: 3px solid #8ee9ff;
  outline-offset: 4px;
  box-shadow: 0 0 0 6px rgba(2, 5, 12, .88);
}

.projects-effects main .button.secondary {
  color: #eef8ff;
  border-color: rgba(164, 216, 255, .22);
  background: rgba(8, 22, 42, .72);
  box-shadow: none;
}

.projects-effects .footer {
  color: rgba(226, 237, 255, .72);
  border-top-color: rgba(164, 216, 255, .14);
  background: rgba(2, 5, 12, .9);
  backdrop-filter: blur(20px);
}

.projects-effects .footer-inner,
.projects-effects .footer-links a {
  color: inherit;
}

@media (max-width: 760px) {
  .projects-effects {
    background-image:
      linear-gradient(rgba(88, 190, 255, .045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(88, 190, 255, .045) 1px, transparent 1px),
      url("../assets/images/projects/project-fx-poster-640.webp");
    background-attachment: scroll;
  }

  .projects-effects .projects-hero,
  .projects-effects .projects-hero .hero-inner {
    min-height: min(760px, calc(100svh - 64px));
  }

  .projects-effects .projects-hero::before {
    background: linear-gradient(180deg, rgba(2, 5, 12, .28) 0%, rgba(2, 6, 15, .64) 42%, rgba(2, 5, 12, .96) 78%, #02050b 100%);
  }

  .projects-effects .projects-hero .hero-inner {
    padding-top: 42px;
  }

  .projects-effects main .section {
    min-height: auto;
    padding-block: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .projects-effects .project-page-fx {
    opacity: .82;
  }
}

@media (forced-colors: active) {
  .projects-effects .project-page-fx {
    display: none;
  }

  .projects-effects main,
  .projects-effects .projects-hero,
  .projects-effects .card,
  .projects-effects .list-item,
  .projects-effects .note-panel,
  .projects-effects .footer {
    color: CanvasText;
    background: Canvas;
  }
}