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

  html, body {
    width: 100vw; height: 100vh;
    overflow: hidden;
    background: #0d1520;
  }

  /* ── Persistent background image ── */
  .bg {
    position: fixed; inset: 0; z-index: 0;
  }
  .bg-img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 30%;
    filter: brightness(0.42) saturate(0.7);
    transform: scale(1.04);
    animation: subtle-drift 20s ease-in-out infinite alternate;
  }
  @keyframes subtle-drift {
    from { transform: scale(1.04) translateY(0); }
    to   { transform: scale(1.07) translateY(-8px); }
  }
  .bg::after {
    content: '';
    position: absolute; inset: 0;
    background:
      linear-gradient(to bottom,
        rgba(13,21,32,0.3)  0%,
        rgba(13,21,32,0.1) 30%,
        rgba(13,21,32,0.2) 60%,
        rgba(13,21,32,0.75) 100%
      ),
      linear-gradient(to right,
        rgba(13,21,32,0.45)  0%,
        transparent 40%,
        transparent 60%,
        rgba(13,21,32,0.35) 100%
      );
  }

  /* ── Ambient orbs ── */
  .orb {
    position: fixed; border-radius: 50%; pointer-events: none;
    filter: blur(60px);
    animation: orb-float 8s ease-in-out infinite alternate;
  }
  .orb-1 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, #4a8fc4, transparent);
    top: -100px; left: -100px; z-index: 1;
    opacity: 0.12;
  }
  .orb-2 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, #c8dff7, transparent);
    bottom: -80px; right: -80px; z-index: 1;
    opacity: 0.08; animation-delay: -3s;
  }
  @keyframes orb-float {
    from { transform: translate(0, 0); }
    to   { transform: translate(20px, 20px); }
  }

  /* ── Rain canvases ── */
  #rain-bg, #rain-mid, #rain-fg {
    position: fixed; inset: 0;
    pointer-events: none;
    width: 100%; height: 100%;
  }
  #rain-bg  { z-index: 2; }
  #rain-mid { z-index: 3; }

  /* ── iframe — sandwiched between rain layers ── */
  #content-frame {
    position: fixed; inset: 0;
    width: 100vw; height: 100vh;
    border: none; z-index: 4;
    background: transparent;
  }

  #rain-fg { z-index: 5; }

  /* ── All inner pages: rain behind iframe content, lower opacity ── */
  body:not([data-page="index"]) #rain-bg,
  body:not([data-page="index"]) #rain-mid,
  body:not([data-page="index"]) #rain-fg {
    opacity: 0.5;
  }
  body:not([data-page="index"]) #rain-fg {
    z-index: 2;  /* move fg behind iframe so page content renders above all rain */
  }