/* Shared cinematic laser-writer layer.
   The visual language is intentionally restrained: military phosphor,
   cel-timed machinery, and a near-black navy field rather than neon clutter. */

body{
  background:
    radial-gradient(circle at 50% 18%, rgba(8,28,45,0.34), transparent 36rem),
    linear-gradient(145deg, #030508 0%, #060a12 48%, #020304 100%) !important;
  background-attachment:scroll !important;
}

.essay-section{
  position:relative;
  isolation:isolate;
}

/* The opening line is part of the essay, never a display lead. Keep its
   paragraph indent even if a page-level style tries to flatten first-of-type. */
.essay-body > p:first-of-type{
  text-indent:2em !important;
}

.laser-char{
  opacity:0;
  color:#66ffae;
  text-shadow:none;
}

/* Preserve the paragraph's space in the document while deferring thousands
   of per-character spans until that paragraph reaches the viewport. */
.essay-body p.laser-pending{
  opacity:0;
}

.laser-char.is-etched{
  opacity:1;
  color:#58fca6;
  text-shadow:0 0 4px rgba(0,255,136,0.26);
}

.laser-char.is-fresh{
  animation:laserPhosphorIgnition 1s steps(8,end);
}

/* Sound is the one control whose fill communicates persistent state. Safari
   on iPad can retain tap focus, so hover/focus must never make OFF look ON. */
#laserSound[aria-pressed="false"],
#laserSound[aria-pressed="false"]:hover,
#laserSound[aria-pressed="false"]:focus,
#laserSound[aria-pressed="false"]:focus-visible{
  background:rgba(0,0,0,0.68);
  color:var(--green);
  box-shadow:none;
}

#laserSound[aria-pressed="true"]{
  background:var(--green);
  color:var(--black);
  box-shadow:0 0 14px rgba(0,255,136,0.32);
}

@keyframes laserPhosphorIgnition{
  0%{
    opacity:0.35;
    color:#fff;
    text-shadow:
      0 0 2px #fff,
      0 0 7px #baffdc,
      0 0 14px #00ff88,
      0 0 28px rgba(0,255,136,0.9);
  }
  18%{
    opacity:1;
    color:#eafff4;
    text-shadow:
      0 0 2px #fff,
      0 0 8px #00ff88,
      0 0 18px rgba(0,255,136,0.9);
  }
  42%{
    color:#72ffb8;
    text-shadow:0 0 5px #00ff88, 0 0 11px rgba(0,255,136,0.58);
  }
  100%{
    opacity:1;
    color:#58fca6;
    text-shadow:0 0 4px rgba(0,255,136,0.26);
  }
}

@keyframes laserPhosphorIgnitionTablet{
  0%{
    opacity:0.55;
    color:#fff;
    text-shadow:0 0 3px #fff,0 0 9px rgba(0,255,136,0.82);
  }
  25%{
    opacity:1;
    color:#caffdf;
    text-shadow:0 0 4px #00ff88,0 0 8px rgba(0,255,136,0.55);
  }
  100%{
    opacity:1;
    color:#58fca6;
    text-shadow:0 0 3px rgba(0,255,136,0.22);
  }
}

.anime-laser-atmosphere{
  position:fixed;
  z-index:92;
  inset:0;
  opacity:0;
  pointer-events:none;
  overflow:hidden;
  transition:opacity 180ms steps(3,end);
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0 3px,
      rgba(82,255,171,0.025) 3px 4px
    ),
    radial-gradient(circle at 50% 22%, rgba(0,255,136,0.035), transparent 34%);
  /* A full-viewport blend layer can exhaust mobile compositors during long
     scrolls. The restrained scanline colors read the same without it. */
  mix-blend-mode:normal;
}

.anime-laser-atmosphere::after{
  content:'';
  position:absolute;
  inset:-8%;
  opacity:0;
  background:repeating-linear-gradient(
    90deg,
    transparent 0 9px,
    rgba(128,255,198,0.055) 9px 10px,
    transparent 10px 18px
  );
  transform:translate3d(0,0,0);
}

.anime-laser-atmosphere.is-present{ opacity:1; }
.anime-laser-atmosphere.is-active::after{
  opacity:0.34;
  animation:laserScanDrift 520ms steps(5,end) infinite;
}

@keyframes laserScanDrift{
  50%{ transform:translate3d(3px,-1px,0);opacity:0.2; }
}

.anime-laser-head{
  position:fixed;
  z-index:96;
  left:0;top:0;
  width:94px;height:34px;
  opacity:0;
  pointer-events:none;
  transform:translate3d(-200px,-200px,0);
  transition:opacity 180ms steps(3,end);
  will-change:transform,opacity;
}

.anime-laser-head.is-present{ opacity:0.62; }
.anime-laser-head.is-active{ opacity:1; }

.anime-laser-chassis{
  position:absolute;
  inset:3px 10px 5px;
  clip-path:polygon(8% 0,92% 0,100% 34%,91% 100%,9% 100%,0 34%);
  border:1px solid rgba(86,255,176,0.76);
  background:
    linear-gradient(90deg, transparent 49%, rgba(153,255,207,0.18) 50%, transparent 51%),
    linear-gradient(180deg, #111b21 0%, #071016 52%, #020608 100%);
  box-shadow:
    inset 0 0 7px rgba(0,255,136,0.24),
    0 0 6px rgba(0,255,136,0.3),
    0 8px 18px rgba(0,0,0,0.68);
}

.anime-laser-chassis::before,
.anime-laser-chassis::after{
  content:'';
  position:absolute;
  top:7px;
  width:18px;height:8px;
  border-top:1px solid rgba(129,255,197,0.42);
  border-bottom:1px solid rgba(129,255,197,0.18);
}
.anime-laser-chassis::before{ left:8px; }
.anime-laser-chassis::after{ right:8px; }

.anime-laser-aperture{
  position:absolute;
  left:50%;bottom:-3px;
  width:18px;height:18px;
  margin-left:-9px;
  border:2px solid #63ffb4;
  border-radius:50%;
  background:#010504;
  box-shadow:
    inset 0 0 5px #00ff88,
    0 0 5px #fff,
    0 0 12px #00ff88,
    0 0 22px rgba(0,255,136,0.68);
}

.anime-laser-aperture::after{
  content:'';
  position:absolute;
  inset:5px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 5px #fff,0 0 10px #00ff88;
  animation:laserApertureFlicker 170ms steps(2,end) infinite;
}

@keyframes laserApertureFlicker{
  50%{ opacity:0.7;transform:scale(0.78); }
}

.anime-laser-beam{
  position:fixed;
  z-index:95;
  left:0;top:0;
  width:100px;height:2px;
  opacity:0;
  pointer-events:none;
  transform-origin:0 50%;
  background:#f1fff8;
  box-shadow:
    0 0 2px #fff,
    0 0 5px #00ff88,
    0 0 11px rgba(0,255,136,0.92),
    0 0 22px rgba(0,255,136,0.38);
  will-change:transform,opacity;
}

.anime-laser-beam.is-live{ opacity:0.96; }
.anime-laser-beam.is-carriage{ opacity:0.22; }

.anime-laser-beam::before{
  content:'';
  position:absolute;
  left:0;right:0;top:-5px;
  height:12px;
  opacity:0.46;
  background:linear-gradient(180deg,transparent,rgba(0,255,136,0.28),transparent);
  filter:blur(3px);
  animation:laserHeatShimmer 200ms steps(2,end) infinite;
}

.anime-laser-beam::after{
  content:'';
  position:absolute;
  left:0;right:0;top:-1px;
  height:4px;
  opacity:0.4;
  background:repeating-linear-gradient(90deg,#fff 0 7px,#61ffb2 7px 13px,transparent 13px 15px);
  animation:laserEnergyFlicker 130ms steps(2,end) infinite;
}

@keyframes laserHeatShimmer{
  50%{ transform:translate3d(0,2px,0) scaleY(1.5);opacity:0.26; }
}
@keyframes laserEnergyFlicker{
  50%{ opacity:0.72;transform:translate3d(2px,0,0); }
}

.anime-laser-contact{
  position:fixed;
  z-index:97;
  left:0;top:0;
  width:10px;height:10px;
  margin:-5px 0 0 -5px;
  opacity:0;
  pointer-events:none;
  border-radius:50%;
  background:#fff;
  box-shadow:
    0 0 3px #fff,
    0 0 8px #9affcb,
    0 0 16px #00ff88,
    0 0 34px rgba(0,255,136,0.92),
    0 0 58px rgba(0,255,136,0.34);
  will-change:transform,opacity;
}

.anime-laser-contact.is-live{ opacity:1; }
.anime-laser-contact.is-carriage{ opacity:0.32; }

.anime-laser-contact::before{
  content:'';
  position:absolute;
  inset:-5px;
  border:1px solid rgba(143,255,204,0.72);
  transform:rotate(45deg);
  animation:laserContactTorque 260ms steps(4,end) infinite;
}

.anime-laser-contact::after{
  content:'';
  position:absolute;
  inset:-11px;
  border:1px solid rgba(0,255,136,0.26);
  border-radius:50%;
  animation:laserContactBloom 380ms steps(3,end) infinite;
}

@keyframes laserContactTorque{
  50%{ transform:rotate(49deg) scale(0.88); }
}
@keyframes laserContactBloom{
  50%{ transform:scale(1.42);opacity:0; }
}

.anime-laser-particle{
  position:fixed;
  z-index:98;
  left:0;top:0;
  width:3px;height:3px;
  opacity:0;
  pointer-events:none;
  background:#eafff4;
  box-shadow:0 0 3px #fff,0 0 7px #00ff88;
  will-change:transform,opacity;
}

/* WebKit touch devices composite every fixed/3D-transformed layer at Retina
   resolution. Keep the cinematic design, but avoid the large blur and blend
   passes that can exhaust the iPad WebContent process during long scrolls. */
html.laser-webkit-touch nav{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  background:rgba(4,7,11,0.985) !important;
}

html.laser-webkit-touch .laser-char.is-fresh{
  animation-name:laserPhosphorIgnitionTablet;
  animation-duration:520ms;
}

html.laser-webkit-touch .laser-char.is-etched{
  text-shadow:none;
}

html.laser-webkit-touch .anime-laser-atmosphere{
  background:radial-gradient(circle at 50% 22%, rgba(0,255,136,0.025), transparent 32%);
}

html.laser-webkit-touch .anime-laser-atmosphere::after{
  display:none;
}

html.laser-webkit-touch .anime-laser-beam::before{
  filter:none;
  opacity:0.28;
  animation:none;
}

html.laser-webkit-touch .anime-laser-beam::after,
html.laser-webkit-touch .anime-laser-contact::after{
  display:none;
}

html.laser-webkit-touch .anime-laser-contact{
  box-shadow:0 0 3px #fff,0 0 7px #9affcb,0 0 15px rgba(0,255,136,0.78);
}

html.laser-webkit-touch .anime-laser-particle{
  will-change:auto;
}

@media(max-width:768px){
  .anime-laser-head{
    width:78px;height:30px;
  }
  .anime-laser-chassis{ inset:3px 7px 4px; }
  .anime-laser-aperture{
    width:16px;height:16px;margin-left:-8px;
  }
  .anime-laser-beam{
    box-shadow:0 0 2px #fff,0 0 5px #00ff88,0 0 13px rgba(0,255,136,0.72);
  }
}

@media(prefers-reduced-motion:reduce){
  .anime-laser-atmosphere,
  .anime-laser-head,
  .anime-laser-beam,
  .anime-laser-contact,
  .anime-laser-particle{ display:none !important; }
}