@charset "UTF-8";
/* ============================================================
   05 · EFFECTS — canvases, spotlight, grain, ripple, motion guards
   ============================================================ */

.fx--net,
.fx--star,
.fx--spot {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* if JS never boots, the overlay must not trap the page */
@keyframes bootGiveUp {
  to { opacity: 0; visibility: hidden; }
}
.boot { animation: bootGiveUp 300ms linear 6s forwards; }

/* ============================================================
   MAGNETIC BUTTONS + TILT CARDS
   ============================================================ */

[data-magnetic] {
  transform: translate3d(var(--mag-x, 0px), var(--mag-y, 0px), 0);
  transition: transform 260ms var(--e-out);
}
[data-magnetic]:hover { transition: transform 90ms linear; }

[data-tilt] {
  transform:
    rotateX(var(--rx, 0deg))
    rotateY(var(--ry, 0deg))
    translate3d(0, var(--ty, 0px), 0);
}
[data-tilt].is-tilting { transition: transform 90ms linear, border-color var(--t-mid), box-shadow var(--t-slow); }

/* ============================================================
   REVEAL SAFETY — content stays visible if JS never runs
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .boot { display: none; }
  .cursor { display: none; }
  .fx--net,
  .fx--star,
  .fx--spot,
  .fx--grain { display: none; }
  .bar__fill { width: var(--bar-target, 0%) !important; }
  .totop { transform: none; }
}

/* low-power / small screens: keep it light */
@media (hover: none), (pointer: coarse) {
  .cursor { display: none; }
}

@media (max-width: 768px) {
  .fx--grain { opacity: 0.35; }
  .fx--spot { display: none; }
}

/* ============================================================
   PRINT — a portfolio should survive Ctrl+P
   ============================================================ */

@media print {
  .boot, .cursor, .fx, .totop, .progress, .hdr, .scroll-cue, .console { display: none !important; }
  body { background: #fff; color: #111; }
  .card, .panel, .chan, .rlc { border-color: #ccc; background: #fff; box-shadow: none; }
  .hero__title-l2 { -webkit-text-stroke: 1px #333; }
  a::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #555; }
}