/* Aurora + graph-paper grid — warm terracotta/orange from left edge.
   Matches preview.html W1 reference (uploads/preview-html-w1.png):
   subtle, diffuse glow; grid visible only where the aurora illuminates it. */

.tt-aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  background: #14100E;
}

/* Warm glow blob — left-center, very large, very diffuse */
.tt-aurora::before {
  content: "";
  position: absolute;
  left: -20vw;
  top: 15%;
  width: 70vw;
  height: 90vh;
  max-width: 1200px;
  max-height: 900px;
  border-radius: 50%;
  filter: blur(140px);
  background: radial-gradient(circle at center,
    rgba(217, 119, 87, 0.42) 0%,
    rgba(166, 80, 50, 0.18) 40%,
    rgba(11, 13, 16, 0) 70%);
  opacity: 0.9;
}

/* Softer secondary blob bottom-right for depth */
.tt-aurora::after {
  content: "";
  position: absolute;
  right: -15vw;
  bottom: -10vw;
  width: 55vw;
  height: 55vw;
  max-width: 900px;
  max-height: 900px;
  border-radius: 50%;
  filter: blur(130px);
  background: radial-gradient(circle at center,
    rgba(141, 89, 233, 0.12) 0%,
    rgba(11, 13, 16, 0) 65%);
  opacity: 0.8;
}

/* Dense graph-paper grid — only visible where aurora illuminates it */
.tt-aurora--grid {
  --grid-color: rgba(217, 119, 87, 0.12);
}
.tt-aurora--grid > .tt-aurora__grid,
.tt-aurora--grid::before { } /* no-op */

.tt-aurora--grid {
  background-image:
    linear-gradient(to right, rgba(217,119,87,0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(217,119,87,0.10) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
  background-position: 0 0, 0 0;
  /* The grid only shows where the aurora light mask is bright */
  -webkit-mask-image:
    radial-gradient(ellipse at 15% 45%, black 0%, rgba(0,0,0,0.6) 25%, transparent 55%);
          mask-image:
    radial-gradient(ellipse at 15% 45%, black 0%, rgba(0,0,0,0.6) 25%, transparent 55%);
}