html.page-transition-enabled body.page-terms {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

body.page-terms.page-transition-ready {
  opacity: 1;
  transform: translateY(0);
}

.page-terms main {
  background: radial-gradient(circle at top left, rgba(124, 255, 196, 0.08), transparent 55%), radial-gradient(circle at bottom right, rgba(179, 136, 255, 0.1), transparent 55%), var(--color-bg);
}

.hero-terms::before {
  background-image: url("/src/media/terms-hero-event-atmosphere.webp");
}

.hero-terms .hero-panel {
  max-width: 680px;
}

.hero-terms-visual .hero-visual-panel {
  border-radius: var(--radius-xl);
}

.hero-terms-visual .hero-visual-media {
  padding-top: 70%;
}

.hero-terms-visual img {
  object-position: center;
}

.page-terms .btn,
.page-terms .nav-link,
.page-terms .footer-link {
  position: relative;
}

.page-terms .btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 0 0, rgba(255, 255, 255, 0.32), transparent 55%);
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity var(--transition-base), transform var(--transition-fast);
  pointer-events: none;
}

.page-terms .btn:hover::before {
  opacity: 1;
  transform: translate3d(0, -1px, 0);
}

.page-terms .nav-link::before,
.page-terms .footer-link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.1rem;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, #7cffc4, #5ef2ff, #b388ff);
  box-shadow: 0 0 10px rgba(124, 255, 196, 0.7);
  transition: width var(--transition-base);
}

.page-terms .nav-link:hover::before,
.page-terms .nav-link:focus-visible::before,
.page-terms .footer-link:hover::before,
.page-terms .footer-link:focus-visible::before {
  width: 100%;
}

.section-terms-intro,
.section-terms-usage,
.section-terms-privacy,
.section-terms-ip,
.section-terms-final {
  position: relative;
}

.section-terms-intro::before,
.section-terms-usage::before,
.section-terms-privacy::before,
.section-terms-ip::before,
.section-terms-final::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at top right, rgba(94, 242, 255, 0.08), transparent 55%);
  opacity: 0.7;
}

.section-terms-intro > .container,
.section-terms-usage > .container,
.section-terms-privacy > .container,
.section-terms-ip > .container,
.section-terms-final > .container {
  position: relative;
  z-index: 1;
}

.terms-card {
  max-width: 100%;
}

.terms-card-soft {
  background: radial-gradient(circle at top left, rgba(179, 136, 255, 0.16), transparent 55%), var(--color-surface-glass);
}

.terms-card-contact {
  background: radial-gradient(circle at top left, rgba(124, 255, 196, 0.18), transparent 55%), radial-gradient(circle at bottom right, rgba(179, 136, 255, 0.18), transparent 55%), var(--color-surface-glass-strong);
}

.terms-card-contact .btn-group {
  justify-content: flex-start;
}

.terms-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--grid-gap-lg);
}

.terms-grid-main,
.terms-grid-side,
.terms-final-grid > * {
  min-width: 0;
}

.terms-final-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: var(--grid-gap-lg);
}

.terms-list {
  margin: 0 0 var(--space-md);
  padding-left: 1.25rem;
}

.terms-list li {
  position: relative;
  margin-bottom: 0.35em;
  padding-left: 0.5rem;
}

.terms-list li::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: radial-gradient(circle, #7cffc4 0, #5ef2ff 50%, #b388ff 100%);
  box-shadow: 0 0 10px rgba(124, 255, 196, 0.8);
}

.badge-nonhazard {
  margin-top: var(--space-md);
  padding: 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px dashed rgba(124, 255, 196, 0.6);
  background: rgba(5, 3, 20, 0.9);
}

.section-terms-final .btn-group .btn {
  max-width: 100%;
}

@media (max-width: 1024px) {
  .terms-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .terms-final-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .hero-terms .hero-panel {
    max-width: 100%;
  }
  .terms-card-contact .btn-group {
    flex-direction: column;
  }
  .terms-card-contact .btn-group .btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .hero-terms-visual .hero-visual-media {
    padding-top: 80%;
  }
}