/* ============================================================
   iTRINITY — Interactive Laser Show section
   ------------------------------------------------------------
   Full-bleed band on the Home page. The canvas is drawn by
   js/lasers.js; everything here is layout and legibility.
   TO CHANGE HEIGHT:  --laser-h  below
   ============================================================ */

.laser-stage{
  --laser-h: 92vh;
  position:relative;
  min-height:var(--laser-h);
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#04060d;
  cursor:crosshair;
  touch-action:pan-y;          /* let the page still scroll on touch */
  isolation:isolate;
}

.laser-canvas{
  position:absolute;inset:0;z-index:0;
  display:block;width:100%;height:100%;
}

/* keeps the copy readable no matter where the beams sweep */
.laser-stage::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(4,6,13,.94) 0%, rgba(4,6,13,.86) 26%,
    rgba(4,6,13,.45) 52%, rgba(4,6,13,.05) 100%);
}
/* top and bottom feather, so the band melts into the page */
.laser-stage::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,
    var(--bg) 0%, rgba(5,7,15,0) 14%,
    rgba(5,7,15,0) 93%, rgba(5,7,15,.65) 100%);
}

.laser-content{
  position:relative;z-index:2;
  width:min(1180px,92%);margin:0 auto;
  max-width:100%;
}
.laser-inner{max-width:600px}
.laser-inner h2{font-size:clamp(2rem,4.6vw,3.2rem);margin-bottom:1rem}
.laser-inner p{color:var(--muted);margin-bottom:2rem}

/* live-rig readout, bottom right */
.laser-readout{
  position:absolute;z-index:2;right:28px;bottom:34px;
  display:flex;align-items:center;gap:.6rem;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(232,236,244,.55);pointer-events:none;
}
.laser-readout b{
  width:8px;height:8px;border-radius:50%;background:#ff3d9a;
  box-shadow:0 0 10px #ff3d9a;animation:laser-blink 1.4s infinite;
}
@keyframes laser-blink{0%,100%{opacity:1}50%{opacity:.2}}

/* prompt — flows under the button so it can never overlap */
.laser-hint{
  display:inline-flex;align-items:center;gap:.6rem;
  margin-top:1.6rem;
  font-size:.73rem;letter-spacing:.17em;text-transform:uppercase;
  color:rgba(232,236,244,.7);pointer-events:none;
  padding:.55em 1.2em;border-radius:999px;
  background:rgba(4,6,13,.55);border:1px solid rgba(255,255,255,.14);
  transition:opacity .6s;
}
.laser-hint i{color:var(--cyan)}
.laser-stage.touched .laser-hint{opacity:0}

@media(max-width:991px){
  .laser-stage{--laser-h:78vh;align-items:flex-end;padding-bottom:12vh}
  .laser-stage::before{
    background:linear-gradient(180deg,
      rgba(4,6,13,.10) 0%, rgba(4,6,13,.35) 34%,
      rgba(4,6,13,.85) 62%, rgba(4,6,13,.96) 100%);
  }
  .laser-readout{display:none}
  .laser-inner{max-width:100%}
}
@media(max-width:767px){
  .laser-stage{--laser-h:74vh}
  .laser-hint{font-size:.67rem;letter-spacing:.13em;margin-top:1.2rem}
}

@media(prefers-reduced-motion:reduce){
  .laser-readout b{animation:none}
}