/* ============================================================
   Decrypt Reveal — reusable stylesheet
   Pairs with decrypt-reveal.js. All markup is generated by the
   script; you only need a container element.

   Customise the look with CSS custom properties on the container:
     --dr-accent        HUD / reticle accent colour
     --dr-particle      particle colour
     --dr-soft          inner solid fraction of the lens mask (0–1)
     --dr-radius        lens radius in px (managed by JS; don't set)
   ============================================================ */

.decrypt-reveal {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;               /* override with your own height if you like */
  background: #020810;
  touch-action: pan-y;                /* let the page scroll vertically on touch; horizontal drags scan */
  user-select: none;
  -webkit-user-select: none;
  --dr-accent: #7EB8DA;
  --dr-particle: #DCEBF5;
  --dr-soft: 0.42;
}
.decrypt-reveal.dr-hide-cursor { cursor: none; }

/* every layer is absolutely stacked; explicit z-index is mandatory
   (an accelerated WebGL base can otherwise paint above masked siblings) */
.decrypt-reveal .dr-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.decrypt-reveal .dr-base       { z-index: 1; }
.decrypt-reveal .dr-gl         { z-index: 1; display: none; } /* shown by JS once textures load */
.decrypt-reveal .dr-ghost      { z-index: 2; opacity: 0; mix-blend-mode: screen; }
.decrypt-reveal .dr-ghost.dr-tint { filter: sepia(1) hue-rotate(180deg) saturate(5); }
.decrypt-reveal .dr-reveal-wrap{ z-index: 3; }
.decrypt-reveal .dr-reveal-wrap .dr-frame { opacity: 0; transition: none; }
.decrypt-reveal .dr-reveal-wrap .dr-frame.dr-show { opacity: 1; }
.decrypt-reveal .dr-scan {
  z-index: 4; pointer-events: none; mix-blend-mode: overlay;
  background: repeating-linear-gradient(to bottom,
    rgba(255,255,255,.05) 0 1px, transparent 1px 3px);
}
.decrypt-reveal .dr-tear {
  z-index: 5; opacity: 0; background-size: cover; filter: brightness(1.15);
}
.decrypt-reveal .dr-vignette {
  z-index: 6; pointer-events: none;
  background: radial-gradient(ellipse at 50% 50%,
    transparent 42%, rgba(0,12,20,.55) 100%);
}
.decrypt-reveal .dr-fx  { z-index: 7; }
.decrypt-reveal .dr-hud { z-index: 10; pointer-events: none; }

/* the shared cursor-following lens mask */
.decrypt-reveal .dr-ghost,
.decrypt-reveal .dr-reveal-wrap,
.decrypt-reveal .dr-scan {
  -webkit-mask-image: radial-gradient(circle at var(--mx,50%) var(--my,40%),
    #000 calc(var(--r,0px) * var(--dr-soft)), transparent var(--r,0px));
          mask-image: radial-gradient(circle at var(--mx,50%) var(--my,40%),
    #000 calc(var(--r,0px) * var(--dr-soft)), transparent var(--r,0px));
}

/* ── HUD chrome ─────────────────────────────────────────── */
.decrypt-reveal .dr-hud {
  position: absolute; inset: 0;
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.6875rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(232,236,240,.72);
}
.decrypt-reveal .dr-hud .dr-signal { position: absolute; top: 1rem; left: 1.1rem; }
.decrypt-reveal .dr-hud .dr-signal b { color: var(--dr-particle); font-weight: 600; }
.decrypt-reveal .dr-hud .dr-rec {
  position: absolute; top: 1rem; right: 1.1rem;
  display: inline-flex; align-items: center; gap: .5rem;
  color: rgba(232,236,240,.85);
}
.decrypt-reveal .dr-hud .dr-rec i {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: #6b6b6b; transition: background .2s;
}
.decrypt-reveal.dr-on .dr-hud .dr-rec i { background: #ff3b3b; animation: dr-blink 1s steps(2) infinite; }
@keyframes dr-blink { 50% { opacity: .25; } }
.decrypt-reveal .dr-hud .dr-decrypt {
  position: absolute; left: 1.1rem; bottom: 1.1rem;
  color: var(--dr-particle); opacity: 0; transition: opacity .15s;
}
.decrypt-reveal.dr-holding .dr-hud .dr-decrypt { opacity: 1; }
.decrypt-reveal .dr-hud .dr-hint {
  position: absolute; left: 50%; bottom: 1.2rem; transform: translateX(-50%);
  color: rgba(232,236,240,.5); font-size: .625rem; letter-spacing: .22em;
  transition: opacity .4s;
}
.decrypt-reveal.dr-on .dr-hud .dr-hint { opacity: 0; }

/* ── reduced motion: static broadcast crossfade only ────── */
@media (prefers-reduced-motion: reduce) {
  .decrypt-reveal .dr-fx,
  .decrypt-reveal .dr-tear,
  .decrypt-reveal .dr-ghost { display: none; }
}