*,
*::before,
*::after {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

html,
body {
 width: 100%;
 height: 100%;
 overflow: hidden;
 background: var(--bg);
 color: var(--fg);
 font-family:
  system-ui,
  -apple-system,
  sans-serif;
}

/* Text-particle canvas: above section backgrounds, transparent when idle */
canvas#stage {
 position: fixed;
 inset: 0;
 z-index: 6;
 pointer-events: none;
}

/* Free-particle canvas: always above sections */
canvas#stage-free {
 position: fixed;
 inset: 0;
 z-index: 10;
 pointer-events: none;
}

/* Sections */
.section {
 position: fixed;
 inset: 0;
 z-index: 5;
 background: var(--section-bg);
 opacity: 0;
 pointer-events: none;
}

#section-entry {
 background: transparent;
}

/* Section layout — centered column */
.section-inner {
 position: absolute;
 inset: 0;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: clamp(2rem, 6vw, 5rem);
}

/* h1: particle target — starts invisible, JS fades it in */
.section h1 {
 opacity: 0;
 font-size: clamp(1.8rem, 4vw, 2.8rem);
 font-weight: 400;
 line-height: 1.2;
 text-align: center;
 color: var(--fg);
 max-width: 680px;
 width: 100%;
 margin-bottom: 2.5rem;
}

/* Body content: JS fades in after h1 */
.section-body {
 opacity: 0;
 max-width: 580px;
 width: 100%;
}

.section-body p {
 font-size: clamp(0.95rem, 2vw, 1.1rem);
 line-height: 1.7;
 color: var(--fg-dim);
 margin-bottom: 1.5rem;
 text-align: center;
}

.steps {
 display: flex;
 flex-direction: column;
 gap: 1.2rem;
}

.step {
 display: flex;
 gap: 1.4rem;
 align-items: flex-start;
}

.step-num {
 font-size: 0.7rem;
 font-weight: 600;
 letter-spacing: 0.08em;
 color: var(--fg);
 min-width: 1.5rem;
 padding-top: 0.2rem;
 flex-shrink: 0;
}

.step-text {
 font-size: clamp(0.9rem, 1.8vw, 1rem);
 line-height: 1.65;
 color: var(--fg-dim);
}

/* Contact email link */
#section-contact h1 {
 margin-bottom: 0;
}

.email-link {
 color: var(--fg);
 text-decoration: none;

 padding-bottom: 0.1em;
 transition: opacity 200ms ease-in-out;
}

.email-link:hover {
 opacity: 0.5;
}

/* Entry screen */
.entry-title {
 font-size: clamp(1.8rem, 4vw, 3rem);
 font-weight: 400;
 color: var(--fg);
 text-align: center;
 margin-bottom: 3rem;
 letter-spacing: -0.01em;
}

.entry-options {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0.75rem;
}

.option-link {
 font-size: clamp(1.1rem, 2.5vw, 1.8rem);
 color: var(--fg-dim);
 text-decoration: none;
 letter-spacing: 0.01em;
 transition: opacity 200ms ease-in-out;
}

/* Hover: active option brightens, siblings dim */
.entry-options:hover .option-link {
 opacity: 0.2;
}
.entry-options:hover .option-link:hover {
 opacity: 1;
}

/* Back button */
.back-btn {
 position: fixed;
 top: 2rem;
 left: 2rem;
 z-index: 20;
 font-family:
  system-ui,
  -apple-system,
  sans-serif;
 font-size: 0.75rem;
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--back-color);
 background: none;
 border: none;
 cursor: pointer;
 padding: 0.5rem 0;
 display: none;
 align-items: center;
 gap: 0.5rem;
}

.back-btn.visible {
 display: flex;
}
.back-btn:hover {
 color: var(--fg);
}

@media (max-width: 640px) {
 .back-btn {
  top: 1.25rem;
  left: 1.25rem;
 }
 .steps {
  gap: 1rem;
 }
}