/**
 * Forum floor: black–blue surface, Ive hairlines,
 * non-overlapping spilled ice + photoreal water drops.
 */

.forma-page {
  --floor-void: #02060c;
  --floor-blue: #061018;
  --floor-deep: #030810;
}

/* Black-blue floor (no global site wallpaper) */
.forma-page .moving-background {
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  opacity: 1 !important;
  background-color: var(--floor-void) !important;
  background-image:
    radial-gradient(ellipse 100% 70% at 50% 0%, rgba(30, 70, 110, 0.22), transparent 55%),
    radial-gradient(ellipse 80% 50% at 20% 80%, rgba(20, 50, 90, 0.18), transparent 50%),
    radial-gradient(ellipse 60% 40% at 85% 40%, rgba(40, 90, 140, 0.12), transparent 55%),
    linear-gradient(180deg, #040a12 0%, var(--floor-blue) 42%, var(--floor-deep) 100%) !important;
  background-size: auto !important;
  filter: none !important;
  transform: none !important;
}

.forma-page .moving-background::before,
.forma-page .moving-background::after {
  content: none !important;
  display: none !important;
  background: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

body.forma-page,
.forma-page::after,
body.forma-page::after {
  background: var(--floor-void) !important;
}

body.forma-page::after {
  display: none !important;
  animation: none !important;
}

.forma-page .page {
  position: relative;
  isolation: isolate;
}

/* Geometry lines */
.forma-page .forum-ive-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  min-height: 100%;
  opacity: 0.85;
}

.forma-page .forum-ive-lines svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
}

/* Water drops layer (under cubes slightly via z-index) */
.forma-page .forum-water-drops {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  min-height: 100%;
}

.forma-page .water-drop {
  position: absolute;
  display: block;
  width: 14px;
  height: 18px;
  border-radius: 50% 50% 50% 50% / 42% 42% 58% 58%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95) 0 12%, transparent 28%),
    radial-gradient(circle at 50% 55%, rgba(190, 220, 255, 0.35) 0%, rgba(40, 90, 140, 0.15) 55%, rgba(10, 30, 50, 0.35) 100%),
    linear-gradient(160deg, rgba(220, 240, 255, 0.55), rgba(80, 140, 200, 0.2) 50%, rgba(20, 50, 80, 0.45));
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.45),
    inset 0 -2px 4px rgba(0, 40, 80, 0.35),
    inset 0 1px 2px rgba(255, 255, 255, 0.55);
  filter: blur(0.15px);
}

.forma-page .water-drop--bead {
  width: 8px;
  height: 9px;
  border-radius: 50%;
}

.forma-page .water-drop--mid {
  width: 16px;
  height: 20px;
}

.forma-page .water-drop--streak {
  width: 10px;
  height: 28px;
  border-radius: 40% 40% 50% 50% / 20% 20% 70% 70%;
  background:
    radial-gradient(circle at 40% 18%, rgba(255, 255, 255, 0.9) 0 10%, transparent 22%),
    linear-gradient(180deg, rgba(210, 235, 255, 0.5), rgba(60, 120, 180, 0.22) 70%, rgba(15, 40, 70, 0.4));
}

.forma-page .water-drop--puddle {
  width: 36px;
  height: 18px;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 40% 35%, rgba(255, 255, 255, 0.55) 0 8%, transparent 35%),
    radial-gradient(ellipse at 50% 50%, rgba(140, 190, 240, 0.28), rgba(20, 50, 90, 0.35) 70%, rgba(5, 15, 30, 0.4));
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 0 8px rgba(100, 160, 220, 0.2);
  filter: blur(0.4px);
}

/* Ice cubes — side by side on the floor */
.forma-page .forum-ice-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  min-height: 100%;
  contain: layout style paint;
}

.forma-page .forum-ice-bg .ice-cube {
  position: absolute;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  /* hard contact shadow on the blue-black floor */
  filter:
    drop-shadow(0 10px 14px rgba(0, 0, 0, 0.75))
    drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35))
    saturate(1.12)
    contrast(1.05);
}

.forma-page .forum-ice-bg .ice-cube--hero {
  filter:
    drop-shadow(0 18px 28px rgba(0, 0, 0, 0.8))
    drop-shadow(0 4px 0 rgba(0, 0, 0, 0.4))
    saturate(1.15)
    contrast(1.06);
  /* no screen blend — looks like stacking/glow pile */
  mix-blend-mode: normal;
}

.forma-page .page > header,
.forma-page .page > main,
.forma-page .page > footer,
.forma-page .legal-social-note {
  position: relative;
  z-index: 1;
}

.forma-page .hero-panel,
.forma-page .board-cat,
.forma-page .forma-meta-card,
.forma-page .forma-panel,
.forma-page .feed-item,
.forma-page .forma-toolbar,
.forma-page .forma-board-footer {
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  background: linear-gradient(
    160deg,
    rgba(10, 16, 26, 0.9) 0%,
    rgba(6, 10, 18, 0.84) 100%
  ) !important;
  border-color: rgba(120, 160, 200, 0.12) !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.03) inset !important;
}

.forma-page .page-hero .hero-panel {
  background: linear-gradient(
    155deg,
    rgba(12, 18, 28, 0.92) 0%,
    rgba(6, 10, 18, 0.88) 100%
  ) !important;
}

.forma-page .hero-orbit {
  opacity: 0.7;
}

.forma-page .board-row:hover {
  background: rgba(120, 170, 230, 0.05) !important;
}

@media (max-width: 920px) {
  .forma-page .hero-orbit {
    display: none;
  }
}