@layer layout {
  /* ===== BOOT SCREEN ===== */
  .boot-screen {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--void);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity var(--ease-reveal);
    cursor: default;

    &.hidden { opacity: 0; pointer-events: none; }
  }

  .boot-content {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--acid);
    max-width: 600px;
    width: 100%;
    padding: 24px;

    & .line { display: block; min-height: 1.6em; white-space: pre-wrap; }
    & .dim { opacity: 0.4; }
  }

  .boot-skip {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--acid-25);
    z-index: 10002;
  }

  /* ===== DEPTH RAIL ===== */
  .depth-rail { position: fixed; left: 20px; top: 10vh; bottom: 10vh; width: 2px; z-index: 100; }
  .depth-line-bg { position: absolute; top: 0; bottom: 0; width: 1px; left: 0; background: var(--acid-6); }
  .depth-line-fill { position: absolute; top: 0; width: 2px; left: -0.5px; height: 0%; background: linear-gradient(to bottom, var(--acid), var(--acid-30)); transition: height 0.1s linear; box-shadow: var(--glow-box-sm); }
  .depth-marker { position: absolute; left: 12px; top: 0; font-family: var(--font-mono); font-size: 11px; color: var(--acid); white-space: nowrap; transition: top 0.1s linear; text-shadow: var(--glow-md); }

  /* ===== TENTACLES ===== */
  .tentacle-left, .tentacle-right { position: fixed; top: 0; z-index: 3; pointer-events: none; font-family: var(--font-mono); font-size: 9px; line-height: 1.0; letter-spacing: 0; color: var(--acid); white-space: pre; opacity: 0; transition: opacity 0.5s; }
  .tentacle-left { left: 0; }
  .tentacle-right { right: 0; }

  /* ===== MAIN SITE ===== */
  .main-site {
    opacity: 0;
    transition: opacity var(--ease-reveal);

    &.visible { opacity: 1; }
  }

  section {
    min-height: 100vh;
    position: relative;
    padding: var(--sp-12) var(--sp-11);
    z-index: 10;
  }

  /* ===== SECTION FRAMES ===== */
  .section-frame {
    border: 1px solid var(--border);
    max-width: 1000px;
    margin: 0 auto;
  }

  .section-header {
    border-bottom: 1px solid var(--border);
    padding: var(--sp-3) var(--sp-6);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .section-id { font-family: var(--font-mono); font-size: 12px; color: var(--acid); opacity: 0.5; letter-spacing: 2px; }
  .section-depth { font-family: var(--font-mono); font-size: 10px; color: var(--acid-30); }
  .section-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-ghost); }

  .section-content { padding: var(--sp-9); }

  .section-headline {
    font-family: var(--font-display);
    font-size: clamp(40px, 7vw, 72px);
    line-height: 0.95;
    color: var(--text);
    letter-spacing: 2px;
    margin-bottom: var(--sp-6);
    text-wrap: balance;

    & .accent { color: var(--acid); text-shadow: var(--glow-lg); }
  }

  .section-body {
    font-family: var(--font-mono); font-size: 16px; color: var(--text-muted); max-width: 600px; line-height: 1.7;

    & p { margin-bottom: var(--sp-4); text-wrap: pretty; }
  }
}