/* ============================================================
   IT PULSE — motion.css
   Live System: 3D tilt, spotlight halo, scanline sweep,
   neighbor depth-of-field, custom crosshair cursor,
   hero monitor cursor-reactivity, phase scroll-line,
   section pulse dividers.
   Loaded after styles.css so it can override safely.
   ============================================================ */

:root {
  --motion-intensity: 0.65;
}

/* ============================================================
   1) DOMAIN GRID — 3D scene
   ============================================================ */
.domain-grid {
  perspective: 1400px;
  perspective-origin: center 30%;
}

/* Cards become 3D-rendered surfaces */
.domain-card {
  --mx: 50%;
  --my: 50%;
  --tx: 0deg;
  --ty: 0deg;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Hover transform when tilt is engaged (replaces the base translateY-only hover) */
.domain-grid.tilt-on .domain-card:hover {
  transform:
    translateY(-4px)
    translateZ(18px)
    rotateX(var(--tx))
    rotateY(var(--ty));
  border-color: var(--mint);
  box-shadow:
    0 0 0 1px rgba(94, 234, 212, 0.25),
    0 24px 80px -20px rgba(94, 234, 212, 0.35),
    0 18px 60px -20px rgba(139, 92, 246, 0.55);
}

/* Neighbor depth-of-field — dim + blur unhovered cards */
.domain-grid.is-focusing .domain-card:not(.is-focused) {
  opacity: 0.5;
  filter: blur(2.5px) saturate(0.8);
  transform: scale(0.985);
}
.domain-grid.is-focusing .domain-card.is-focused {
  z-index: 2;
}

/* ---- Spotlight halo follows cursor ---- */
.domain-card .tile-glow {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(280px circle at var(--mx) var(--my),
      rgba(94, 234, 212, 0.22),
      rgba(167, 139, 250, 0.12) 35%,
      transparent 65%);
  opacity: 0;
  transition: opacity 240ms ease;
  mix-blend-mode: screen;
  z-index: 1;
}
.domain-card:hover .tile-glow { opacity: 1; }

/* ---- Scanline sweep on first hover ---- */
.domain-card .tile-scan {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 50%;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(94, 234, 212, 0.10) 40%,
    rgba(94, 234, 212, 0.55) 50%,
    rgba(94, 234, 212, 0.10) 60%,
    transparent 100%);
  filter: blur(1.5px);
  opacity: 0;
  transform: translateY(-100%);
  z-index: 1;
  mix-blend-mode: screen;
}
.domain-card.scanning .tile-scan {
  animation: tile-scan-sweep 950ms cubic-bezier(.25,.7,.3,1) forwards;
}
@keyframes tile-scan-sweep {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateY(260%); opacity: 0; }
}

/* ---- Stat badge that slides in on hover ---- */
.domain-card .tile-stat {
  position: absolute;
  top: 18px;
  right: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 11px 6px 9px;
  background: linear-gradient(135deg, rgba(94,234,212,0.18), rgba(167,139,250,0.10));
  border: 1px solid rgba(94, 234, 212, 0.35);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: var(--mint);
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-8px) scale(0.95);
  transition: opacity 280ms ease, transform 280ms cubic-bezier(.2,.7,.2,1);
  white-space: nowrap;
  pointer-events: none;
  z-index: 3;
  backdrop-filter: blur(6px);
}
.domain-card .tile-stat::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 8px var(--mint);
  animation: stat-dot-pulse 1.6s ease-in-out infinite;
  flex: 0 0 6px;
}
@keyframes stat-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.3); }
}
.domain-card:hover .tile-stat {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---- Lift inner content forward in 3D when tilted ---- */
.domain-grid.tilt-on .domain-card .num,
.domain-grid.tilt-on .domain-card h3,
.domain-grid.tilt-on .domain-card .tag,
.domain-grid.tilt-on .domain-card p,
.domain-grid.tilt-on .domain-card .link {
  transition: transform 320ms cubic-bezier(.2,.7,.2,1), color var(--t-fast), gap var(--t-fast);
}
.domain-grid.tilt-on .domain-card:hover .num   { transform: translateZ(18px); }
.domain-grid.tilt-on .domain-card:hover h3     { transform: translateZ(38px); }
.domain-grid.tilt-on .domain-card:hover .tag   { transform: translateZ(24px); }
.domain-grid.tilt-on .domain-card:hover p      { transform: translateZ(14px); }
.domain-grid.tilt-on .domain-card:hover .link  { transform: translateZ(30px); }
.domain-grid.tilt-on .domain-card:hover .tile-stat { transform: translateY(0) translateZ(44px) scale(1); }

/* ---- Waveform amplification + run ---- */
.domain-card .pulse-line { height: 56px; transition: height 360ms ease; }
.domain-card .pulse-line svg {
  transform-origin: 50% 100%;
  transition: transform 360ms cubic-bezier(.2,.7,.2,1);
}
.domain-card:hover .pulse-line svg { transform: scaleY(1.9); }
.domain-card .pulse-line path { stroke-dasharray: 1200; stroke-dashoffset: 0; }
.domain-card:hover .pulse-line path {
  animation: pulse-march 2.2s linear infinite;
  filter: drop-shadow(0 0 6px rgba(94, 234, 212, 0.6));
  stroke-width: 1.6;
}
@keyframes pulse-march {
  from { stroke-dashoffset: 1200; }
  to   { stroke-dashoffset: 0; }
}

/* ============================================================
   2) TILE STYLE VARIANTS — holographic / terminal
   ============================================================ */

/* ---- Holographic — adds a chromatic glare sweep ---- */
.domain-grid.style-holographic .domain-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(167,139,250,0.20) 48%,
    rgba(94,234,212,0.25) 50%,
    rgba(167,139,250,0.20) 52%,
    transparent 70%);
  opacity: 0;
  transform: translateX(-40%);
  z-index: 2;
  mix-blend-mode: screen;
}
.domain-grid.style-holographic .domain-card:hover::after {
  animation: holo-glare 1200ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes holo-glare {
  0%   { opacity: 0; transform: translateX(-40%); }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(40%); }
}

/* ---- Terminal — drops tilt + adds a typed shell line ---- */
.domain-card .tile-terminal {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 64px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--mint);
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
  letter-spacing: 0.04em;
  z-index: 2;
}
.domain-grid.style-terminal .domain-card { perspective: none; transform-style: flat; }
.domain-grid.style-terminal .domain-card:hover {
  transform: translateY(-4px) !important;
}
.domain-grid.style-terminal .domain-card:hover .tile-terminal { opacity: 1; }
.domain-grid.style-terminal .domain-card:hover .tile-stat { opacity: 0; }
/* Disable child z-translation in terminal style */
.domain-grid.style-terminal .domain-card:hover .num,
.domain-grid.style-terminal .domain-card:hover h3,
.domain-grid.style-terminal .domain-card:hover .tag,
.domain-grid.style-terminal .domain-card:hover p,
.domain-grid.style-terminal .domain-card:hover .link { transform: none; }

/* ============================================================
   3) CUSTOM CROSSHAIR CURSOR INSIDE THE GRID
   ============================================================ */
.grid-cursor {
  position: fixed;
  left: 0; top: 0;
  width: 56px; height: 56px;
  pointer-events: none;
  z-index: 5000;
  opacity: 0;
  transition: opacity 200ms ease;
  transform: translate3d(-100px, -100px, 0);
}
.grid-cursor.on { opacity: 1; }
.grid-cursor .ring {
  position: absolute;
  inset: 0;
  transform: translate(-50%, -50%);
}
.grid-cursor svg { width: 56px; height: 56px; }
.grid-cursor .label {
  position: absolute;
  left: 36px;
  top: 0;
  transform: translateY(-50%);
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #050416;
  white-space: nowrap;
  text-transform: uppercase;
  background: var(--mint);
  padding: 5px 9px;
  border-radius: 4px;
  font-weight: 600;
  opacity: 0;
  transform: translate(8px, -50%) scale(0.92);
  transition: opacity 180ms ease, transform 180ms ease;
}
.grid-cursor.over-tile .label {
  opacity: 1;
  transform: translate(0, -50%) scale(1);
}

.domain-grid.cursor-on,
.domain-grid.cursor-on * { cursor: none !important; }

/* ============================================================
   4) HERO MONITOR — cursor-reactive vital rows
   ============================================================ */
.monitor-body { position: relative; }
.vital-row {
  transition: background-color 200ms ease, padding 200ms ease;
  border-radius: 8px;
  padding: 6px 8px;
  margin: -2px -8px;
}
.vital-row.is-focused {
  background: linear-gradient(90deg,
    transparent,
    rgba(94, 234, 212, 0.10) 50%,
    transparent);
}
.vital-row.is-focused .trace path {
  stroke-dasharray: 800;
  animation: pulse-march 1.6s linear infinite;
  filter: drop-shadow(0 0 4px currentColor);
}
.vital-row.is-focused .value {
  animation: value-flicker 1.4s ease-in-out infinite;
  text-shadow: 0 0 10px currentColor;
}
@keyframes value-flicker {
  0%, 92%, 100% { opacity: 1; }
  93% { opacity: 0.3; }
  95% { opacity: 1; }
  97% { opacity: 0.5; }
}

/* ============================================================
   5) PHASE GRID — scroll-drawn line + sequential node light-up
   ============================================================ */
.phase-grid {
  --phase-fill: 0%;
}
.phase-grid.has-progress::before {
  background:
    linear-gradient(to right,
      var(--mint) 0%,
      var(--violet) calc(var(--phase-fill) - 4%),
      var(--violet) var(--phase-fill),
      var(--line-strong) calc(var(--phase-fill) + 0.1%),
      var(--line-strong) 92%,
      transparent 100%) !important;
  transition: background 900ms ease;
  box-shadow: 0 0 14px rgba(94, 234, 212, 0.0);
}
.phase-grid.has-progress.lit-any::before {
  box-shadow: 0 0 14px rgba(94, 234, 212, 0.25);
}
.phase .node {
  transition: border-color 500ms ease, box-shadow 500ms ease, transform 500ms ease;
}
.phase.lit .node {
  border-color: var(--mint);
  box-shadow: 0 0 22px rgba(94, 234, 212, 0.5);
  transform: scale(1.08);
}
.phase.lit .node::after {
  animation: node-inner-pulse 1.6s ease-in-out infinite;
}
@keyframes node-inner-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 12px var(--mint); }
  50%      { transform: scale(1.35); box-shadow: 0 0 22px var(--mint); }
}

/* ============================================================
   6) SECTION ENTER — pulse divider
   ============================================================ */
.section-pulse {
  position: relative;
  height: 1px;
  width: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 3;
}
.section-pulse .track {
  position: absolute;
  left: 0; top: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(to right,
    transparent,
    rgba(167, 139, 250, 0.5) 20%,
    rgba(94, 234, 212, 0.6) 50%,
    rgba(167, 139, 250, 0.5) 80%,
    transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1100ms cubic-bezier(.2,.7,.2,1);
}
.section-pulse.in .track { transform: scaleX(1); }
.section-pulse .dot {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 16px var(--mint);
  top: -3.5px;
  left: 0;
  opacity: 0;
}
.section-pulse.in .dot {
  animation: section-dot-sweep 1300ms cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes section-dot-sweep {
  0%   { left: 0%;   opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* ============================================================
   7) MOTION-OFF / REDUCED MOTION
   ============================================================ */
body.motion-off .domain-card,
body.motion-off .domain-card * {
  transition: opacity 200ms, color var(--t-fast), border-color var(--t-fast) !important;
  animation: none !important;
}
body.motion-off .domain-grid { perspective: none; }
body.motion-off .domain-grid.tilt-on .domain-card:hover {
  transform: translateY(-4px) !important;
}
body.motion-off .grid-cursor { display: none !important; }
body.motion-off .domain-grid.cursor-on,
body.motion-off .domain-grid.cursor-on * { cursor: auto !important; }
body.motion-off .section-pulse { display: none; }
body.motion-off .tile-scan,
body.motion-off .tile-glow,
body.motion-off .tile-stat { display: none !important; }

@media (max-width: 980px) {
  .grid-cursor { display: none !important; }
  .domain-grid { perspective: none; }
  .domain-grid.tilt-on .domain-card:hover { transform: translateY(-4px); }
  .domain-grid.cursor-on,
  .domain-grid.cursor-on * { cursor: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  .grid-cursor { display: none !important; }
  .tile-scan, .pulse-line path { animation: none !important; }
  .section-pulse { display: none; }
}