/* Project atmosphere effects and Beacon-specific styling.
   Modules load in this order; see the root README for the stylesheet map. */

/* Project atmospheres: lightweight canvas effects stay local, original, and responsive. */
.atmosphere-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .72;
  mix-blend-mode: screen;
}
body[data-project="championscode"],
body[data-project="nulltrace"] {
  position: relative;
  background: #07090d;
}
body[data-page="organization"]::before {
  background: radial-gradient(ellipse at 66% 18%, rgba(40, 63, 97, .16), transparent 38%), #06080c;
}
body[data-project="championscode"]::before {
  background: radial-gradient(ellipse at 76% 18%, rgba(202, 137, 45, .16), transparent 36%), #07090d;
  opacity: .96;
}
body[data-project="championscode"]::after {
  opacity: .12;
  background-image: linear-gradient(rgba(255, 255, 255, .026) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .026) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 88%);
}
body[data-project="championscode"] .atmosphere-canvas { opacity: 1; filter: saturate(1.35) contrast(1.12); }
body[data-project="championscode"] .site-glow-blue {
  background: radial-gradient(circle, rgba(219, 157, 65, .36), transparent 66%);
  opacity: .16;
}
body[data-project="championscode"] .profile-intro,
body[data-project="championscode"] .profile-sidebar,
body[data-project="championscode"] .detail-panel {
  border-color: rgba(240, 194, 111, .2);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 244, 211, .1), inset 1px 0 0 rgba(255, 235, 190, .035);
}
body[data-project="championscode"] .eyebrow { color: #e9b965; }
body[data-project="championscode"] .project-mark {
  background: linear-gradient(145deg, rgba(236, 192, 91, .3), rgba(123, 81, 211, .18));
  border-color: rgba(241, 207, 128, .32);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .28), 0 0 42px rgba(232, 174, 71, .1);
}
body[data-project="nulltrace"]::before {
  background: radial-gradient(ellipse at 84% 16%, rgba(62, 193, 221, .14), transparent 36%), #050b10;
  opacity: .96;
}
body[data-project="nulltrace"]::after {
  opacity: .1;
  background-image: linear-gradient(rgba(140, 228, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(140, 228, 255, .025) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 88%);
}
body[data-project="nulltrace"] .atmosphere-canvas { opacity: .98; }
body[data-project="nulltrace"] .profile-intro,
body[data-project="nulltrace"] .profile-sidebar,
body[data-project="nulltrace"] .detail-panel {
  border-color: rgba(102, 220, 237, .2);
}
body[data-project="nulltrace"] .site-glow-blue {
  background: radial-gradient(circle, rgba(52, 198, 224, .38), transparent 66%);
  opacity: .18;
}
body[data-project="championscode"] main,
body[data-project="championscode"] footer,
body[data-project="nulltrace"] main,
body[data-project="nulltrace"] footer {
  position: relative;
  z-index: 1;
}

.website-page .project-mark.website-mark {
  display: grid;
  color: #dffcff;
  background: linear-gradient(145deg, rgba(90, 155, 242, .3), rgba(117, 78, 214, .18));
  border-color: rgba(150, 211, 255, .28);
  font: 800 1.7rem var(--mono);
  letter-spacing: -.12em;
  text-indent: -.12em;
  box-shadow: 0 16px 38px rgba(0, 0, 0, .28), 0 0 42px rgba(90, 155, 242, .1);
}

.account-status { display: flex; width: 100%; margin: .05rem 0 1rem; padding: .7rem .8rem; gap: .65rem; align-items: center; color: #ffd9dd; background: linear-gradient(135deg, rgba(174, 67, 91, .2), rgba(97, 41, 65, .12)); border: 1px solid rgba(255, 137, 153, .28); border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255, 214, 220, .07); font-size: .68rem; line-height: 1.35; }
.account-status::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; background: #ff879a; border-radius: 50%; box-shadow: 0 0 12px rgba(255, 135, 154, .72); }
.account-status strong { color: #ffacb8; font-family: var(--mono); font-size: .62rem; letter-spacing: .03em; white-space: nowrap; }
.account-status span { color: #e9bfc5; }
.fact b.fact-danger { color: #ff9eae; }

/* Beacon project */
.project-icon.beacon {
  overflow: hidden;
  background: linear-gradient(145deg, rgba(115, 226, 255, .24), rgba(54, 122, 235, .14));
  border: 1px solid rgba(143, 230, 255, .24);
  box-shadow: 0 10px 30px rgba(72, 184, 255, .11);
}
.project-icon.beacon img { width: 59px; height: 59px; object-fit: contain; }
body[data-project="beacon"] { position: relative; background: #050c11; }
body[data-project="beacon"]::before {
  background: radial-gradient(ellipse at 78% 15%, rgba(66, 190, 244, .16), transparent 38%), #050c11;
  opacity: .98;
}
body[data-project="beacon"]::after {
  opacity: .11;
  background-image: linear-gradient(rgba(132, 226, 255, .026) 1px, transparent 1px), linear-gradient(90deg, rgba(132, 226, 255, .026) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 88%);
}
.beacon-video-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #050c11;
}
.beacon-video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: saturate(.82) contrast(1.05) brightness(.62);
}
.beacon-video-background::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3, 8, 13, .58) 0%, rgba(3, 9, 14, .38) 35%, rgba(3, 8, 13, .72) 100%),
    radial-gradient(circle at 50% 34%, transparent 0%, rgba(3, 9, 14, .18) 58%, rgba(3, 8, 13, .56) 100%);
}
body[data-project="beacon"] .glass-card {
  background: linear-gradient(145deg, rgba(20, 31, 40, .82), rgba(7, 14, 21, .72));
}
body[data-project="beacon"] .site-glow-blue {
  background: radial-gradient(circle, rgba(67, 199, 255, .42), transparent 66%);
  opacity: .18;
}
body[data-project="beacon"] .profile-intro,
body[data-project="beacon"] .profile-sidebar,
body[data-project="beacon"] .detail-panel { border-color: rgba(113, 220, 255, .2); }
body[data-project="beacon"] .eyebrow { color: #77dfff; }
body[data-project="beacon"] .project-mark {
  padding: .35rem;
  object-fit: contain;
  background: linear-gradient(145deg, rgba(127, 230, 255, .22), rgba(62, 119, 230, .14));
  border-color: rgba(151, 232, 255, .3);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .28), 0 0 42px rgba(75, 195, 255, .12);
}
body[data-project="beacon"] main,
body[data-project="beacon"] footer { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .beacon-video-background video { display: none; }
}
.detail-panel code { padding: .12rem .3rem; color: #c7eaf4; background: rgba(117, 214, 246, .08); border-radius: 5px; font: .9em var(--mono); }