/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.view {
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  /* background-color: rgb(255, 161, 161); */
}



/* app/assets/stylesheets/grid.css */
.grid-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #05050500;
  background-image: 
    linear-gradient(to right, #5353533d 1px, transparent 1px),
    linear-gradient(to bottom, #5353533d 1px, transparent 1px);
  background-size: 280px 280px;
  z-index: 1;
  overflow-x: hidden;
}

.particle {
  position: absolute;
  width: 32px; /* Slightly smaller to fit the line width */
  height: 32px;
  background: #00f2ff;
  border-radius: 2px;
  box-shadow: 0 0 8px #00f2ff;
  z-index: 5;
  pointer-events: none;
  /* Ensure the particle is centered on the line intersection */
  margin-left: -2px; 
  margin-top: -2px;
}

.particle-trail {
  position: absolute;
  background: linear-gradient(to right, rgba(0, 242, 255, 0), rgba(0, 242, 255, 1));
  box-shadow: 0 0 15px #00f2ff;
  pointer-events: none;
  z-index: 5;
  /* Adjusts the gradient direction based on movement */
}

/* For vertical tails, override the gradient */
.particle-trail:nth-child(even) {
  background: linear-gradient(to bottom, rgba(0, 242, 255, 0), rgba(0, 242, 255, 1));
}


.gradient-text {
  background-size: 200% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  display: block;
}


/* HUD */

:root {
  --ink-dim: #7b93b3;
  --volt:    #38d6ff;   /* electric cyan-blue */
  --hot:     #aef0ff;   /* hot white-blue (current) */
}

/* power-system HUD */
.hud {
  position: fixed;
  right: clamp(18px, 3vw, 46px);
  bottom: clamp(18px, 3vw, 36px);
  z-index: 1;
  pointer-events: none;
  text-align: right;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--ink-dim);
  line-height: 1.85;
}

.hud .v {
  color: var(--hot);
}

.hud .pill {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border-radius: 3px;
  border: 1px solid rgba(56, 214, 255, .35);
  color: var(--volt);
  font-size: 10px;
}

@media (max-width: 680px) { 
  .hud { 
    display: none; 
  } 
}


.eyebrow{
    font-family:"IBM Plex Mono",monospace; font-size:11.5px; letter-spacing:.28em;
    text-transform:uppercase; color:var(--volt);
    display:flex; align-items:center; gap:13px; margin-bottom:28px;
  }
  .eyebrow::before{ content:""; width:38px; height:1px;
    background:linear-gradient(90deg,var(--volt),transparent); }