/* ==========================================================================
   Midnight Rooftop — Minimalist Sketch Animation Styles
   Author: @saklin_01 (GitHub: @saklincodes)
   Pure OLED Black (#000000) • Razor-Sharp White Lines (#ffffff)
   ========================================================================== */

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #000000;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  cursor: pointer;
}

/* Fullscreen Stage (No borders, frames, or boxes) */
.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG Line Art Layer */
.sketch-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  shape-rendering: geometricPrecision;
}

/* Crisp Linework (No blurry neon glow, no drop-shadow halos) */
.layer-phase1 path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.4px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
}

.layer-phase2 path {
  fill: none;
  stroke: #ffffff;
  stroke-width: 0.85px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}

/* Star Points */
.star-point {
  fill: #ffffff;
  opacity: 0.85;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Precision Pen Tip */
.pen-cursor {
  pointer-events: none;
  will-change: transform, opacity;
  transition: opacity 0.4s ease-out;
}

/* Micro-Sparkle Particle Overlay Canvas */
.particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Discreet Status Toast (Auto-fades, pristine OLED black aesthetic) */
.status-toast {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  padding: 6px 14px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(18, 18, 18, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10;
}

.status-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}