/* Section color accents and cinematic background layers */
body {
  position: relative;
}

.site-bg-effects {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

section .inner,
#hero .hero-content,
#hero .scroll-line-wrap,
nav,
footer,
.side-text {
  position: relative;
  z-index: 3;
}

#starfield {
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.62;
}

.aurora {
  position: absolute;
  width: 42vw;
  height: 42vw;
  max-width: 720px;
  max-height: 720px;
  border-radius: 50%;
  filter: blur(58px);
  opacity: 0.3;
  mix-blend-mode: screen;
  animation: aurora-float 10.5s ease-in-out infinite alternate;
}

.aurora-a {
  top: -14vh;
  left: -8vw;
  background: radial-gradient(circle at 35% 35%, rgba(76, 190, 255, 0.9), rgba(76, 190, 255, 0) 65%);
}

.aurora-b {
  bottom: -18vh;
  right: -8vw;
  background: radial-gradient(circle at 60% 40%, rgba(248, 131, 184, 0.92), rgba(248, 131, 184, 0) 68%);
  animation-delay: 2.8s;
}

.aurora-c {
  top: 34vh;
  right: 24vw;
  width: 28vw;
  height: 28vw;
  background: radial-gradient(circle at 50% 50%, rgba(137, 109, 255, 0.92), rgba(137, 109, 255, 0) 70%);
  animation-delay: 5.6s;
}

@keyframes aurora-float {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  100% {
    transform: translate3d(3vw, -2vh, 0) scale(1.12);
  }
}

section {
  --section-accent: var(--accent);
  --section-accent-soft: rgba(155, 127, 212, 0.24);
  position: relative;
  isolation: isolate;
}

section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(circle at 12% 22%, color-mix(in srgb, var(--section-accent) 18%, transparent), transparent 48%),
    radial-gradient(circle at 86% 76%, color-mix(in srgb, var(--section-accent) 14%, transparent), transparent 50%);
}

#about {
  --section-accent: #79b7ff;
  --section-accent-soft: rgba(121, 183, 255, 0.45);
}

#photos {
  --section-accent: #f1a2c3;
  --section-accent-soft: rgba(241, 162, 195, 0.45);
}

#skills {
  --section-accent: #e3bd74;
  --section-accent-soft: rgba(227, 189, 116, 0.45);
}

#relationship {
  --section-accent: #f189b2;
  --section-accent-soft: rgba(241, 137, 178, 0.48);
}

#quotes {
  --section-accent: #b197ff;
  --section-accent-soft: rgba(177, 151, 255, 0.46);
}

#episodes {
  --section-accent: #7bb8ff;
  --section-accent-soft: rgba(123, 184, 255, 0.46);
}

#voice {
  --section-accent: #f0bf6a;
  --section-accent-soft: rgba(240, 191, 106, 0.46);
}

#story {
  --section-accent: #73d4c2;
  --section-accent-soft: rgba(115, 212, 194, 0.44);
}

#contact {
  --section-accent: #f6a2bf;
  --section-accent-soft: rgba(246, 162, 191, 0.46);
}

section:not(#hero) .section-label,
section:not(#hero) .section-title em {
  text-shadow: 0 0 16px color-mix(in srgb, var(--section-accent) 38%, transparent);
}

section:not(#hero) .section-label {
  color: var(--section-accent);
}

section:not(#hero) .section-label::before {
  background: var(--section-accent);
}

section:not(#hero) .section-title em {
  color: var(--section-accent);
}

#about .badge,
#about .ru-name,
#about .quote-block .ru-t,
#about .stat-value .a,
#about .music-info .artist,
#about .bar,
#about .vinyl-c {
  color: var(--section-accent);
}

#about .badge {
  border-color: var(--section-accent-soft);
  background: color-mix(in srgb, var(--section-accent) 12%, transparent);
}

#about .about-card::before,
#about .quote-block,
#about .scroll-ln {
  border-color: var(--section-accent);
}

#photos .photo-note {
  border-color: var(--section-accent-soft);
  background: color-mix(in srgb, var(--section-accent) 12%, transparent);
}

#photos .photo-note span,
#photos .ph-ru {
  color: var(--section-accent);
}

#photos .photo-item:hover {
  border-color: var(--section-accent-soft);
}

#skills .skill-cat h4,
#skills .skill-lvl,
#skills .trait-icon i {
  color: var(--section-accent);
}

#skills .skill-fill {
  background: linear-gradient(to right, var(--section-accent), #f2d7a2);
}

#skills .skill-fill::after {
  background: #f2d7a2;
  box-shadow: 0 0 8px #f2d7a2;
}

#skills .trait-card::before {
  background: linear-gradient(to right, var(--section-accent), transparent);
}

#skills .p-circle:hover {
  border-color: var(--section-accent);
}

#relationship .heart-meter h4,
#relationship .milestone-item .mi-ru,
#relationship .quote-block .ru-t,
#relationship .icon-heart-title,
#relationship .heart-val {
  color: var(--section-accent);
}

#relationship .rel-card::before,
#relationship .quote-block,
#relationship .heart-fill {
  border-color: var(--section-accent);
}

#relationship .heart-fill {
  background: linear-gradient(to right, color-mix(in srgb, var(--section-accent) 75%, #ff96c2), var(--section-accent));
}

#relationship .milestone-item:hover,
#relationship .rel-card:hover {
  border-color: var(--section-accent-soft);
}

#quotes .ru-q,
#quotes .ctx,
#quotes .alphabet {
  color: var(--section-accent);
}

#quotes .q-card:hover {
  border-color: var(--section-accent-soft);
}

#quotes .q-card .hearts i {
  color: color-mix(in srgb, var(--section-accent) 70%, #ff9cc3);
}

#episodes .ep-btn::after,
#episodes .ep-ru-moment,
#episodes .ep-ru-moment .ru,
#episodes .ep-card::before {
  border-color: var(--section-accent);
  color: var(--section-accent);
}

#episodes .ep-btn.active,
#episodes .ep-btn:hover {
  color: color-mix(in srgb, var(--section-accent) 60%, #f3f7ff);
}

#episodes .ep-card:hover {
  border-color: var(--section-accent-soft);
}

#episodes .ep-hearts i {
  color: color-mix(in srgb, var(--section-accent) 55%, #ff9ec6);
}

#voice .va-card::before,
#voice .va-name-jp,
#voice .va-avatar-emoji,
#voice .russia-fact h5,
#voice .role-show em,
#voice .va-name-ru {
  color: var(--section-accent);
}

#voice .russia-fact {
  border-color: var(--section-accent-soft);
}

#voice .role-item:hover,
#voice .va-stat:hover {
  border-color: var(--section-accent-soft);
}

#story .timeline::before,
#story .tl-item::before,
#story .tl-date {
  background: var(--section-accent);
  color: var(--section-accent);
}

#story .timeline::before {
  background: linear-gradient(to bottom, var(--section-accent), color-mix(in srgb, var(--section-accent) 20%, transparent), transparent);
}

#story .tl-item::before {
  box-shadow: 0 0 12px color-mix(in srgb, var(--section-accent) 75%, transparent);
}

#contact .contact-greeting,
#contact .contact-title em,
#contact .quote-block .ru-t {
  color: var(--section-accent);
}

#contact .quote-block {
  border-left-color: var(--section-accent);
}

#contact .c-link:hover {
  border-color: var(--section-accent);
  color: var(--section-accent);
}

@media (max-width: 1000px) {
  .aurora {
    opacity: 0.24;
    filter: blur(46px);
  }
}