/*
 * fx.css — Cinematic micro-effects layer.
 * Adds subtle ambient motion: scan line, card light sweeps, hero glow,
 * section accent lines, and hover shimmer. All GPU-composited (transform/opacity).
 * Respects prefers-reduced-motion. Loaded before polish.css.
 */

/* ── 1. HORIZONTAL SCAN LINE ─────────────────────────────────────────────
   A single thin luminous line that slowly drifts down the viewport,
   like a CRT/film scanner. Fixed, covers entire page. */
.fx-scanline {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99994;
  overflow: hidden;
}
.fx-scanline::before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.04) 15%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 85%,
    transparent 100%
  );
  box-shadow: 0 0 12px 2px rgba(255,255,255,0.03);
  animation: fx-scan 8s linear infinite;
  will-change: transform;
}
@keyframes fx-scan {
  0%   { transform: translateY(-10vh); }
  100% { transform: translateY(110vh); }
}

/* ── 2. CARD LIGHT SWEEP ─────────────────────────────────────────────────
   On hover, a diagonal light beam sweeps across cards for a premium feel. */
.analyzer-card,
.project-card,
.dc-card,
.dc-panel,
.recent-project-item,
.contact-hub-card {
  overflow: hidden;
}
.analyzer-card::before,
.project-card::before,
.dc-card::before,
.dc-panel::before {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,0.03) 40%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0.03) 60%,
    transparent 100%
  );
  transform: skewX(-20deg);
  opacity: 0;
  transition: none;
  pointer-events: none;
  z-index: 1;
}
.analyzer-card:hover::before,
.project-card:hover::before,
.dc-card:hover::before,
.dc-panel:hover::before {
  animation: fx-sweep 0.6s ease-out forwards;
}
@keyframes fx-sweep {
  0%   { left: -75%; opacity: 1; }
  100% { left: 125%; opacity: 0; }
}

/* ── 3. HERO TITLE GLOW BREATHE ──────────────────────────────────────────
   Subtle pulsing text-shadow on the main title — a heartbeat of light. */
.cine-title {
  animation: fx-title-breathe 4s ease-in-out infinite;
}
@keyframes fx-title-breathe {
  0%, 100% { text-shadow: 0 0 0px transparent; filter: brightness(1); }
  50%      { text-shadow: 0 0 40px rgba(255,255,255,0.06); filter: brightness(1.04); }
}

/* ── 4. SECTION DIVIDER GLOW ─────────────────────────────────────────────
   The section hairline subtly pulses with a traveling glow. */
.section-line {
  position: relative;
  overflow: visible;
}
.section-line::after {
  content: '';
  position: absolute;
  top: -1px; bottom: -1px;
  width: 80px;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.25), transparent 70%);
  animation: fx-line-glow 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fx-line-glow {
  0%, 100% { left: -80px; opacity: 0; }
  10%      { opacity: 1; }
  90%      { opacity: 1; }
  100%     { left: calc(100% + 80px); opacity: 0; }
}

/* ── 5. CARD BORDER GLOW ON HOVER ────────────────────────────────────────
   Subtle warm edge glow when hovering interactive cards. */
.analyzer-card:hover,
.project-card:hover,
.dc-panel:hover,
.recent-project-item:hover {
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08),
    0 4px 24px rgba(0,0,0,0.3),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* ── 6. AMBIENT CORNER ACCENTS ───────────────────────────────────────────
   Tiny L-shaped corner brackets that appear on section containers
   for a HUD / film viewfinder feel. Applied to section headers. */
.section-header {
  position: relative;
}
.section-header::before,
.section-header::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: rgba(255,255,255,0.12);
  border-style: solid;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.section-header::before {
  top: 0; left: -8px;
  border-width: 1px 0 0 1px;
}
.section-header::after {
  bottom: 0; right: -8px;
  border-width: 0 1px 1px 0;
}
/* Reveal when section is visible */
.is-visible .section-header::before,
.is-visible .section-header::after,
.page-active .section-header::before,
.page-active .section-header::after,
.section-header::before,
.section-header::after {
  opacity: 1;
}

/* ── 7. STATUS DOT PULSE ─────────────────────────────────────────────────
   The availability status dot gets a gentle pulse ring. */
.status-dot {
  position: relative;
}
.status-dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0;
  animation: fx-dot-ping 2.5s ease-out infinite;
}
@keyframes fx-dot-ping {
  0%   { transform: scale(0.8); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ── 8. CONTRIBUTION GRAPH AMBIENT ───────────────────────────────────────
   Soft vignette glow around the contribution graph. */
.contrib-graph-wrap {
  position: relative;
}
.contrib-graph-wrap::before {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.contrib-graph-wrap:hover::before {
  opacity: 1;
}

/* ── 9. FLOATING PARTICLES ───────────────────────────────────────────────
   Tiny ascending dots in the hero section — like dust in a projector beam. */
.fx-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.fx-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  animation: fx-float linear infinite;
  will-change: transform, opacity;
}
@keyframes fx-float {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(20px); opacity: 0; }
}

/* ── 10. NAV LINK UNDERLINE DRAW ─────────────────────────────────────────
   Active nav link underline draws in from left instead of appearing. */
.hud-nav-link.active::after {
  animation: fx-draw-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
  transform-origin: left center;
}
@keyframes fx-draw-in {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── 11. HOVER MICRO-LIFT ────────────────────────────────────────────────
   Subtle upward float on interactive cards. */
.analyzer-card,
.project-card,
.dc-card,
.dc-panel,
.social-link {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s ease,
              border-color 0.3s ease !important;
}
.analyzer-card:hover,
.project-card:hover {
  transform: translateY(-3px) !important;
}

/* ── 12. RECENT PROJECT ITEM ENTRANCE ────────────────────────────────────
   Slide-in from left with a stagger delay. */
.recent-project-item {
  animation: fx-slide-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes fx-slide-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION — kill everything above
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .fx-scanline,
  .fx-particles,
  .fx-particle { display: none !important; }

  .cine-title { animation: none !important; }
  .section-line::after { animation: none !important; display: none !important; }
  .status-dot::after { animation: none !important; display: none !important; }
  .hud-nav-link.active::after { animation: none !important; }

  .analyzer-card::before,
  .project-card::before,
  .dc-card::before,
  .dc-panel::before { display: none !important; }

  .analyzer-card:hover,
  .project-card:hover {
    transform: none !important;
  }

  .recent-project-item {
    animation: none !important;
    opacity: 1 !important;
  }
}