/*
 * signal.css  —  "Signal From The Void"
 * Progressive cinematic layer. Loaded after cinematic.css.
 * Extends — never overwrites — existing functionality.
 */

/* ── INTRO OVERLAY ────────────────────────────────────────────────────────── */

#signal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99990;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  pointer-events: all;
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

#signal-overlay.fading {
  opacity: 0;
  pointer-events: none;
}

.signal-line {
  font-family: 'Fira Code', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.40em;
  text-transform: uppercase;
  color: rgba(242, 242, 247, 0.30);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.52s ease, transform 0.52s cubic-bezier(0.16, 1, 0.3, 1);
}

.signal-line.visible {
  opacity: 1;
  transform: translateY(0);
}

.signal-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: rgba(242, 242, 247, 0.88);
  opacity: 0;
  transform: translateY(8px);
  margin-top: 1.6rem;
  transition: opacity 0.72s ease, transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
}

.signal-name.visible {
  opacity: 1;
  transform: translateY(0);
}

.signal-skip {
  position: absolute;
  bottom: 2.4rem;
  right: 2.4rem;
  font-family: 'Fira Code', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(242, 242, 247, 0.20);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem 0;
  transition: color 0.2s ease;
}

.signal-skip:hover {
  color: rgba(242, 242, 247, 0.50);
}

/* ── GLOBAL SOFT VIGNETTE ─────────────────────────────────────────────────── */

#signal-vignette {
  position: fixed;
  inset: 0;
  z-index: 7;   /* above floor grid (z-1), below grain (z-8) */
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 50%,
    transparent 38%,
    rgba(0, 0, 0, 0.44) 100%
  );
}

/* ── IDLE DIM ─────────────────────────────────────────────────────────────── */

#signal-idle-dim {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(0, 0, 0, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.8s ease;
}

#signal-idle-dim.active {
  opacity: 1;
}

.signal-idle-text {
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fira Code', monospace;
  font-size: 0.60rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(242, 242, 247, 0.22);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 1.4s ease 0.7s;
}

#signal-idle-dim.active .signal-idle-text {
  opacity: 1;
}

/* ── CURSOR GLOW ──────────────────────────────────────────────────────────── */

#signal-cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.020) 0%, transparent 70%);
  pointer-events: none;
  z-index: 96;
  /* JS drives transform: translate(cx-100, cy-100) — GPU composited, no layout */
  will-change: transform;
  transition: background 0.35s ease;
  transform: translate(-9999px, -9999px); /* hidden until first mousemove */
}

/* ── SCAN LINE — single sweep after intro ─────────────────────────────────── */

@keyframes sfv-scan-sweep {
  0%   { transform: translateY(0);     opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 0.55; }
  100% { transform: translateY(100vh); opacity: 0; }
}

#signal-scan-line {
  position: fixed;
  left: 0;
  right: 0;
  height: 1px;
  top: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.06) 25%,
    rgba(255, 255, 255, 0.13) 50%,
    rgba(255, 255, 255, 0.06) 75%,
    transparent
  );
  pointer-events: none;
  z-index: 95;
  opacity: 0;
}

#signal-scan-line.active {
  animation: sfv-scan-sweep 3.4s linear forwards;
}

/* ── PROJECT CARDS — RECOVERED FRAGMENTS ──────────────────────────────────── */

/* Positioning context + smooth stabilization transition */
.pc-card {
  position: relative !important;
  overflow: hidden !important;
  transition:
    border-color 0.25s ease,
    box-shadow   0.25s ease,
    filter       0.45s ease !important;
}

/* Scanline texture — emerges on hover, very subtle */
.pc-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.05) 3px,
    rgba(0, 0, 0, 0.05) 4px
  );
  opacity: 0;
  transition: opacity 0.55s ease;
}

.pc-card:hover::after {
  opacity: 1;
}

/* Signal stabilization on hover — card gains slight clarity */
.pc-card:hover {
  filter: brightness(1.05) contrast(1.02);
  /* Extend existing box-shadow with left-edge inset signal glow */
  box-shadow:
    0 4px 28px rgba(0, 0, 0, 0.42),
    inset 2px 0 0 rgba(255, 255, 255, 0.09) !important;
}

/* Fragment flicker-in on first intersection */
@keyframes sfv-fragment-in {
  0%   { opacity: 0; }
  16%  { opacity: 0.62; }
  22%  { opacity: 0.08; }
  36%  { opacity: 0.74; }
  44%  { opacity: 0.16; }
  60%  { opacity: 0.88; }
  80%  { opacity: 0.68; }
  100% { opacity: 1; }
}

.signal-fragment-reveal {
  animation: sfv-fragment-in 0.65s ease forwards;
}

/* ── CONTACT — FINAL FRAME PRELUDE ────────────────────────────────────────── */

.signal-contact-prelude {
  margin-bottom: 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
}

.signal-contact-line {
  font-family: 'Fira Code', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.40em;
  text-transform: uppercase;
  color: rgba(242, 242, 247, 0.24);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.signal-contact-line.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.signal-contact-line:nth-child(2) {
  transition-delay: 0.22s;
}

/* ── ABOUT — CINEMATIC TEXT BLOCK ─────────────────────────────────────────── */

.signal-about-block {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  margin-top: 1.6rem;
  max-width: none;  /* override the global p { max-width: 72ch } */
}

.signal-about-line {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.4rem, 1.85vw, 1.72rem);
  font-weight: 400;
  color: rgba(242, 242, 247, 0.50);
  line-height: 1.55;
  letter-spacing: 0.005em;
  max-width: none;
}

.signal-about-line.accent {
  color: rgba(242, 242, 247, 0.82);
  font-weight: 500;
}

/* ── STAT CARDS — GLOW ON DATA ARRIVAL ────────────────────────────────────── */

.signal-metric-complete .card-value {
  text-shadow: 0 0 22px rgba(242, 242, 247, 0.15);
  transition: text-shadow 1.1s ease;
}

/* ── REDUCED MOTION — disable all signal-specific effects ─────────────────── */

@media (prefers-reduced-motion: reduce) {
  #signal-overlay         { display: none !important; }
  #signal-idle-dim        { display: none !important; }
  #signal-scan-line       { display: none !important; }
  #signal-cursor-glow     { display: none !important; }
  .signal-fragment-reveal { animation: none !important; opacity: 1 !important; }
  .pc-card:hover          { filter: none; }
  .signal-contact-line {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}