/* ==========================================================================
   fx.css: neon night-city color and ambient motion for everything below the hero.
   Load after css/main.css. Pairs with js/fx.js, which injects the decorative DOM
   (always aria-hidden, pointer-events: none) and toggles .fx-off on hosts that
   are offscreen.

   Motion contract: every looping animation reads its play state from --fx-play.
   It resolves to "paused" under html.motion-paused, prefers-reduced-motion,
   an offscreen host (.fx-off), and a hovered ticker. One-shot flashes (sheen,
   shimmer, neon flicker) are removed entirely when motion is paused or reduced.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --neon-violet: #b794ff;
  --neon-violet-rgb: 183, 148, 255;
  --neon-pink: #ff4fd8;
  --neon-pink-rgb: 255, 79, 216;
  --neon-cyan: #36e2ff;
  --neon-cyan-rgb: 54, 226, 255;
  --neon-amber: #ffb547;
  --neon-amber-rgb: 255, 181, 71;
  --fx-font-jp: "DotGothic16", "Yu Gothic", "YuGothic", "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
  --fx-font-sign: "Dela Gothic One", "Yu Gothic", "YuGothic", "Hiragino Sans", "Noto Sans JP", "Meiryo", sans-serif;
}
html.motion-paused, .fx-off { --fx-play: paused; }
@media (prefers-reduced-motion: reduce) { html { --fx-play: paused; } }
@property --fx-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes fxSpin { to { --fx-angle: 360deg; } }

/* Each section is its own neon "district": two accent colors drive tags, titles, and glow orbs. */
#about      { --fx-a: var(--neon-violet); --fx-a-rgb: var(--neon-violet-rgb); --fx-b: var(--neon-pink);   --fx-b-rgb: var(--neon-pink-rgb); }
#projects   { --fx-a: var(--neon-cyan);   --fx-a-rgb: var(--neon-cyan-rgb);   --fx-b: var(--neon-violet); --fx-b-rgb: var(--neon-violet-rgb); }
#skills     { --fx-a: var(--neon-pink);   --fx-a-rgb: var(--neon-pink-rgb);   --fx-b: var(--neon-amber);  --fx-b-rgb: var(--neon-amber-rgb); }
#experience { --fx-a: var(--neon-cyan);   --fx-a-rgb: var(--neon-cyan-rgb);   --fx-b: var(--neon-pink);   --fx-b-rgb: var(--neon-pink-rgb); }
#contact    { --fx-a: var(--neon-pink);   --fx-a-rgb: var(--neon-pink-rgb);   --fx-b: var(--neon-violet); --fx-b-rgb: var(--neon-violet-rgb); }

/* ---------- Section hosts: ambient glow orbs ---------- */
.fx-host { isolation: isolate; }
.fx-host::before {
  content: ""; position: absolute; top: 0; left: 50%; width: min(44rem, 76%); height: 1px; translate: -50% 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(var(--fx-a-rgb, 183, 148, 255), 0.75) 30%, rgba(var(--fx-b-rgb, 183, 148, 255), 0.75) 70%, transparent);
  box-shadow: 0 0 14px rgba(var(--fx-a-rgb, 183, 148, 255), 0.45);
}
.fx-amb {
  position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.fx-off .fx-orb, .fx-off .fx-rain { display: none; }
.fx-orb {
  position: absolute; width: var(--s, 32rem); height: var(--s, 32rem); max-width: 115vw; max-height: 115vw; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--o-rgb), 0.16), rgba(var(--o-rgb), 0.065) 48%, rgba(var(--o-rgb), 0) 100%);
  animation: fxDrift1 44s ease-in-out infinite alternate;
  animation-play-state: var(--fx-play, running);
}
.fx-orb--a { --o-rgb: var(--fx-a-rgb, 183, 148, 255); }
.fx-orb--b { --o-rgb: var(--fx-b-rgb, 183, 148, 255); }
.fx-orb:nth-child(2) { animation-name: fxDrift2; animation-duration: 56s; }
.fx-orb:nth-child(3) { animation-duration: 66s; animation-direction: alternate-reverse; }
@keyframes fxDrift1 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(9%, 7%, 0) scale(1.12); }
  100% { transform: translate3d(-6%, 12%, 0) scale(0.94); }
}
@keyframes fxDrift2 {
  0% { transform: translate3d(0, 0, 0) scale(1.05); }
  50% { transform: translate3d(-10%, -6%, 0) scale(0.92); }
  100% { transform: translate3d(5%, 9%, 0) scale(1.1); }
}

/* ---------- Section tags: gradient index, glowing rule, decode effect ---------- */
.section .section-tag > span:first-child {
  background: linear-gradient(90deg, var(--fx-a, var(--c-accent)), var(--fx-b, var(--c-accent)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 6px rgba(var(--fx-a-rgb, 183, 148, 255), 0.55));
}
.section .section-tag::after, .contact__panel .section-tag::before {
  background: linear-gradient(90deg, var(--fx-a, var(--c-accent)), var(--fx-b, var(--c-accent)) 55%, transparent);
  box-shadow: 0 0 8px rgba(var(--fx-a-rgb, 183, 148, 255), 0.5);
}
.contact__panel .section-tag::before { background: linear-gradient(-90deg, var(--fx-a, var(--c-accent)), var(--fx-b, var(--c-accent)) 55%, transparent); }

.section-tag .fx-decode, .section-tag .fx-decode span { color: inherit; }
.fx-decode { position: relative; }
.fx-decode.is-decoding .fx-decode__real { color: transparent; }
.fx-decode__fx {
  position: absolute; inset: 0; overflow: hidden; white-space: nowrap; pointer-events: none; user-select: none;
  color: var(--c-text-2);
}
.section-tag .fx-decode__fx .fx-g { color: var(--fx-a, var(--c-accent)); text-shadow: 0 0 8px rgba(var(--fx-a-rgb, 183, 148, 255), 0.7); }

/* ---------- Section titles: neon ink with a soft glow ---------- */
.fx-ink {
  background: linear-gradient(96deg, #f7f2ff 0%, #f1eaff 42%, var(--fx-a, var(--c-accent)) 80%, var(--fx-b, var(--c-accent)) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.section .fx-title { filter: drop-shadow(0 0 22px rgba(var(--fx-a-rgb, 183, 148, 255), 0.22)); }

/* ---------- Buttons below the hero ---------- */
.section .btn--primary { --btn-bg: linear-gradient(100deg, #b794ff 0%, #c99bff 45%, #ec8cff 100%); }
.section .btn--primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.6) 48%, rgba(255, 255, 255, 0.15) 56%, transparent 70%);
  transform: translateX(-110%);
  animation: fxSheen 5.5s var(--ease-io) 1.2s infinite;
  animation-play-state: var(--fx-play, running);
}
@keyframes fxSheen { 0% { transform: translateX(-110%); } 28%, 100% { transform: translateX(110%); } }
@media (hover: hover) {
  .section .btn--ghost:hover { background: linear-gradient(100deg, var(--neon-violet), var(--neon-pink) 50%, var(--neon-cyan)); }
}

/* ---------- About ---------- */
#about .frame__corner--tl { border-color: var(--neon-violet); filter: drop-shadow(0 0 6px rgba(var(--neon-violet-rgb), 0.7)); }
#about .frame__corner--br { border-color: var(--neon-pink); filter: drop-shadow(0 0 6px rgba(var(--neon-pink-rgb), 0.7)); }
#about .about__caption svg { color: var(--neon-pink); }
#about .lifecycle::before { border-color: var(--neon-pink); filter: drop-shadow(0 0 6px rgba(var(--neon-pink-rgb), 0.6)); }
#about .lifecycle__track::before { background: linear-gradient(90deg, var(--neon-violet), var(--neon-pink) 35%, var(--neon-cyan) 70%, var(--neon-amber)); opacity: 0.7; }
#about .lifecycle__track li { --fx-c: var(--neon-violet); --fx-c-rgb: var(--neon-violet-rgb); }
#about .lifecycle__track li:nth-child(6n + 2) { --fx-c: var(--neon-pink); --fx-c-rgb: var(--neon-pink-rgb); }
#about .lifecycle__track li:nth-child(6n + 3) { --fx-c: var(--neon-cyan); --fx-c-rgb: var(--neon-cyan-rgb); }
#about .lifecycle__track li:nth-child(6n + 4) { --fx-c: var(--neon-violet); --fx-c-rgb: var(--neon-violet-rgb); }
#about .lifecycle__track li:nth-child(6n + 5) { --fx-c: var(--neon-pink); --fx-c-rgb: var(--neon-pink-rgb); }
#about .lifecycle__track li:nth-child(6n + 6) { --fx-c: var(--neon-amber); --fx-c-rgb: var(--neon-amber-rgb); }
#about .lifecycle__track li .lifecycle__node { border-color: var(--fx-c); box-shadow: 0 0 10px rgba(var(--fx-c-rgb), 0.45); }
#about .lifecycle__track li .lifecycle__node::after { background: var(--fx-c); }

/* ---------- Projects ---------- */
.filters .chip-btn { transition: color 0.2s, background-color 0.2s, border-color 0.2s, box-shadow 0.3s; }
@media (hover: hover) {
  .filters .chip-btn:hover { border-color: var(--neon-cyan); box-shadow: 0 0 16px -5px rgba(var(--neon-cyan-rgb), 0.8); }
}
.filters .chip-btn[aria-pressed="true"] { box-shadow: 0 0 20px -6px rgba(var(--neon-violet-rgb), 0.9); }

.project-card { --fx-rgb: var(--neon-violet-rgb); isolation: isolate; }
.project-card[data-theme="vision"] { --card-accent: var(--neon-cyan); --fx-rgb: var(--neon-cyan-rgb); }
.project-card[data-theme="neural"] { --card-accent: var(--neon-pink); --fx-rgb: var(--neon-pink-rgb); }
.project-card[data-theme="robotics"], .project-card[data-theme="data"] { --card-accent: var(--neon-amber); --fx-rgb: var(--neon-amber-rgb); }
.project-card::before {
  background: conic-gradient(from var(--angle, 0deg), transparent 0 52%, rgba(var(--fx-rgb), 0.9) 66%, var(--neon-pink) 76%, var(--neon-cyan) 86%, transparent 96%);
}
/* Pointer-follow spotlight (position set by fx.js), painted under the card content */
.project-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(24rem circle at var(--fx-x, 50%) var(--fx-y, 0%), rgba(var(--fx-rgb), 0.17), transparent 62%);
  opacity: 0; transition: opacity 0.4s;
}
@media (hover: hover) and (pointer: fine) {
  .project-card:hover::after { opacity: 1; }
  .project-card:hover { box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.8), 0 0 40px -18px rgba(var(--fx-rgb), 0.55); }
}
.project-card .hud-scan {
  background: linear-gradient(180deg, transparent, rgba(var(--fx-rgb), 0.16) 85%, rgba(var(--fx-rgb), 0.9) 100%);
  border-bottom-color: rgb(var(--fx-rgb));
}
.project-card .tags li { transition: color 0.25s, border-color 0.25s, background-color 0.25s, box-shadow 0.25s; }
@media (hover: hover) {
  .project-card .tags li:hover {
    color: var(--c-text); border-color: rgba(var(--fx-rgb), 0.7); background: rgba(var(--fx-rgb), 0.12);
    box-shadow: 0 0 14px -3px rgba(var(--fx-rgb), 0.6);
  }
}

/* ---------- Neon tech ticker (injected between Projects and Skills) ---------- */
.fx-ticker {
  position: relative; overflow: hidden; padding-block: 1.15rem;
  background: linear-gradient(180deg, rgba(13, 10, 20, 0.35), rgba(26, 16, 44, 0.6) 50%, rgba(13, 10, 20, 0.35));
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-user-select: none; user-select: none;
}
.fx-ticker::before, .fx-ticker::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--neon-pink) 18%, var(--neon-violet) 50%, var(--neon-cyan) 82%, transparent);
  opacity: 0.55;
}
.fx-ticker::before { top: 0; }
.fx-ticker::after { bottom: 0; }
.fx-ticker:hover, .fx-ticker:focus-within { --fx-play: paused; }
.fx-ticker__row { overflow: hidden; }
.fx-ticker__row + .fx-ticker__row { margin-top: 0.7rem; }
.fx-ticker__track {
  display: flex; width: max-content;
  animation: fxMarquee var(--fx-dur, 60s) linear infinite;
  animation-play-state: var(--fx-play, running);
}
.fx-ticker__row--rev .fx-ticker__track { animation-direction: reverse; }
@keyframes fxMarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.fx-pill {
  flex: none; display: inline-flex; align-items: center; margin-right: 0.7rem; padding: 0.38rem 0.95rem;
  font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: 0.04em; line-height: 1.4; white-space: nowrap;
  color: #ece6f8; background: rgba(var(--p-rgb), 0.07); border: 1px solid rgba(var(--p-rgb), 0.42); border-radius: 2px;
}
.fx-pill::before {
  content: ""; width: 0.38rem; height: 0.38rem; margin-right: 0.6rem; flex: none;
  background: rgb(var(--p-rgb)); box-shadow: 0 0 8px rgb(var(--p-rgb)); transform: rotate(45deg);
}
.fx-pill--jp {
  padding-inline: 0.6rem; font-family: var(--fx-font-jp); font-size: var(--step-0); letter-spacing: 0.08em;
  color: #fff0fb; background: none; border-color: transparent;
  text-shadow: 0 0 4px rgba(var(--p-rgb), 0.95), 0 0 14px rgba(var(--p-rgb), 0.6);
}
.fx-pill--jp::before { display: none; }
.fx-p1 { --p-rgb: var(--neon-violet-rgb); }
.fx-p2 { --p-rgb: var(--neon-cyan-rgb); }
.fx-p3 { --p-rgb: var(--neon-pink-rgb); }
.fx-p4 { --p-rgb: var(--neon-amber-rgb); }

/* ---------- Skills ---------- */
.skill-grid .skill-card { --fx-c: var(--neon-violet); --fx-c-rgb: var(--neon-violet-rgb); }
.skill-grid .skill-card:nth-child(8n + 2), .skill-grid .skill-card:nth-child(8n + 5) { --fx-c: var(--neon-pink); --fx-c-rgb: var(--neon-pink-rgb); }
.skill-grid .skill-card:nth-child(8n + 3), .skill-grid .skill-card:nth-child(8n + 8) { --fx-c: var(--neon-cyan); --fx-c-rgb: var(--neon-cyan-rgb); }
.skill-grid .skill-card:nth-child(8n + 4), .skill-grid .skill-card:nth-child(8n + 7) { --fx-c: var(--neon-amber); --fx-c-rgb: var(--neon-amber-rgb); }
.skill-grid .skill-card {
  background: radial-gradient(90% 55% at 0% 0%, rgba(var(--fx-c-rgb), 0.075), transparent 70%), var(--c-bg-2);
}
.skill-grid .skill-card::after { background: linear-gradient(90deg, var(--fx-c), transparent); box-shadow: 0 0 10px rgba(var(--fx-c-rgb), 0.6); }
.skill-grid .skill-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; padding: 1px;
  background: conic-gradient(from var(--fx-angle), transparent 0 58%, rgba(var(--fx-c-rgb), 0.95) 74%, #fff 79%, rgba(var(--fx-c-rgb), 0.95) 84%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.4s;
}
.skill-grid .skill-card .skill-card__icon {
  color: var(--fx-c); filter: drop-shadow(0 0 6px rgba(var(--fx-c-rgb), 0.45));
  transition: transform 0.5s var(--ease-out), filter 0.4s;
}
.skill-grid .skill-card .tags li { transition: color 0.25s, border-color 0.25s, background-color 0.25s, box-shadow 0.25s; }
/* Spotlight shared with project cards */
.skill-grid .skill-card { isolation: isolate; }
.skill-grid .skill-card > .fx-spot {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(18rem circle at var(--fx-x, 50%) var(--fx-y, 0%), rgba(var(--fx-c-rgb), 0.11), transparent 65%);
}
@media (hover: hover) {
  .skill-grid .skill-card:hover {
    background: radial-gradient(90% 55% at 0% 0%, rgba(var(--fx-c-rgb), 0.12), transparent 70%), var(--c-surface);
  }
  .skill-grid .skill-card:hover::before { opacity: 1; animation: fxSpin 4.5s linear infinite; animation-play-state: var(--fx-play, running); }
  .skill-grid .skill-card:hover > .fx-spot { opacity: 1; }
  .skill-grid .skill-card:hover .skill-card__icon {
    transform: translateY(-3px) scale(1.07);
    filter: drop-shadow(0 0 10px rgba(var(--fx-c-rgb), 0.85));
  }
  .skill-grid .skill-card:hover .fx-draw { animation: fxDraw 1.1s var(--ease-out) both; }
  .skill-grid .skill-card .tags li:hover {
    color: #fff; border-color: rgba(var(--fx-c-rgb), 0.75); background: rgba(var(--fx-c-rgb), 0.13);
    box-shadow: 0 0 14px -3px rgba(var(--fx-c-rgb), 0.65);
  }
}
.skill-card__icon .fx-draw { stroke-dasharray: 100; stroke-dashoffset: 0; }
@keyframes fxDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* Tags pop in, staggered, when their card reveals */
.reveal-on .skill-grid .skill-card .tags li { opacity: 0; }
.reveal-on .skill-grid .skill-card.is-in .tags li {
  animation: fxPop 0.55s var(--ease-out) both;
  animation-delay: calc(var(--fx-i, 0) * 38ms + var(--reveal-delay, 0s) + 0.25s);
}
@keyframes fxPop { from { opacity: 0; transform: translateY(8px) scale(0.9); } to { opacity: 1; transform: none; } }

/* ---------- Experience ---------- */
.timeline__progress {
  background: linear-gradient(180deg, var(--neon-violet), var(--neon-pink) 50%, var(--neon-cyan));
  box-shadow: 0 0 10px rgba(var(--neon-pink-rgb), 0.55);
}
.timeline .timeline__item { --fx-c: var(--neon-violet); --fx-c-rgb: var(--neon-violet-rgb); }
.timeline .timeline__item:nth-of-type(3n + 2) { --fx-c: var(--neon-pink); --fx-c-rgb: var(--neon-pink-rgb); }
.timeline .timeline__item:nth-of-type(3n + 3) { --fx-c: var(--neon-cyan); --fx-c-rgb: var(--neon-cyan-rgb); }
.timeline .timeline__item .timeline__node { border-color: var(--fx-c); }
.timeline .timeline__item.is-in .timeline__node { background: var(--fx-c); box-shadow: 0 0 12px rgb(var(--fx-c-rgb)), 0 0 26px rgba(var(--fx-c-rgb), 0.45); }
.timeline .role--current { box-shadow: 0 26px 60px -36px rgba(var(--neon-violet-rgb), 0.6); }

/* Comet that periodically runs down the rail */
.fx-comet { position: absolute; top: 0; bottom: 0; left: -7px; width: 15px; overflow: hidden; pointer-events: none; }
.fx-comet__body {
  position: absolute; inset: 0; transform: translate3d(0, -100%, 0); opacity: 0;
  background:
    radial-gradient(circle 7px at 50% calc(100% - 8px), #fff 0 1.6px, rgba(var(--neon-cyan-rgb), 0.95) 2.6px, rgba(var(--neon-cyan-rgb), 0) 100%),
    linear-gradient(180deg, rgba(var(--neon-pink-rgb), 0), rgba(var(--neon-pink-rgb), 0.55) 70%, rgba(var(--neon-cyan-rgb), 0.95)) 50% 100% / 2px 9rem no-repeat;
  animation: fxComet 7.5s cubic-bezier(0.45, 0, 0.75, 1) 1.5s infinite;
  animation-play-state: var(--fx-play, running);
}
@keyframes fxComet {
  0% { transform: translate3d(0, -100%, 0); opacity: 0; }
  3% { opacity: 1; }
  46% { transform: translate3d(0, 0, 0); opacity: 1; }
  52%, 100% { transform: translate3d(0, 0, 0); opacity: 0; }
}

/* Certifications: per-cert neon, shimmer sweep, gradient border on hover */
.certs .cert { position: relative; --fx-c-rgb: var(--neon-violet-rgb); }
.certs .cert:nth-child(4n + 2) { --fx-c-rgb: var(--neon-amber-rgb); }
.certs .cert:nth-child(4n + 3) { --fx-c-rgb: var(--neon-cyan-rgb); }
.certs .cert:nth-child(4n + 4) { --fx-c-rgb: var(--neon-pink-rgb); }
.certs .cert .cert__badge { position: relative; overflow: hidden; color: rgb(var(--fx-c-rgb)); background: rgba(var(--fx-c-rgb), 0.14); }
.certs .cert--highlight .cert__badge { background: linear-gradient(160deg, rgba(var(--neon-violet-rgb), 0.24), rgba(var(--neon-pink-rgb), 0.18)); }
.certs .cert .cert__badge::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.5) 50%, transparent 68%);
  transform: translateX(-120%);
  animation: fxShimmer 6.5s ease-in-out infinite;
  animation-play-state: var(--fx-play, running);
}
.certs .cert:nth-child(2) .cert__badge::after { animation-delay: 0.45s; }
.certs .cert:nth-child(3) .cert__badge::after { animation-delay: 0.9s; }
.certs .cert:nth-child(4) .cert__badge::after { animation-delay: 1.35s; }
@keyframes fxShimmer { 0%, 62% { transform: translateX(-120%); } 82%, 100% { transform: translateX(120%); } }
.certs .cert::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none; padding: 1px;
  background: conic-gradient(from var(--fx-angle), transparent 0 55%, rgba(var(--fx-c-rgb), 0.95) 72%, #fff 78%, rgba(var(--fx-c-rgb), 0.95) 84%, transparent 96%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.4s;
}
@media (hover: hover) {
  .certs .cert:hover { border-color: rgba(var(--fx-c-rgb), 0.45); }
  .certs .cert:hover::before { opacity: 1; animation: fxSpin 4.5s linear infinite; animation-play-state: var(--fx-play, running); }
}
.certs .cert:focus-within::before { opacity: 1; }

/* ---------- Contact ---------- */
.contact__links li:nth-child(1) .link-card > svg:first-child { color: var(--neon-cyan); }
.contact__links li:nth-child(2) .link-card > svg:first-child { color: var(--neon-violet); }
@media (hover: hover) {
  .contact__links .link-card:hover { border-color: rgba(var(--neon-pink-rgb), 0.5); box-shadow: 0 0 30px -14px rgba(var(--neon-pink-rgb), 0.8); }
  .contact__links .link-card:hover .link-card__arrow { color: var(--neon-pink); }
}
.contact__help li { border-left-color: var(--neon-violet); }
.contact__help li:nth-child(4n + 2) { border-left-color: var(--neon-pink); }
.contact__help li:nth-child(4n + 3) { border-left-color: var(--neon-cyan); }
.contact__help li:nth-child(4n + 4) { border-left-color: var(--neon-amber); }

/* Neon heading: a blurred copy of the text glows and flickers behind it */
.fx-neon-title { position: relative; isolation: isolate; }
.fx-neon-title::after {
  content: attr(data-fx-text) / "";
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  color: var(--neon-pink); filter: blur(14px); opacity: 0.5;
  animation: fxNeon 8s steps(1, end) 2s infinite;
  animation-play-state: var(--fx-play, running);
}
@keyframes fxNeon {
  0%, 100% { opacity: 0.5; }
  86% { opacity: 0.16; }
  87% { opacity: 0.55; }
  88.5% { opacity: 0.22; }
  89.5% { opacity: 0.6; }
  91% { opacity: 0.5; }
}

/* Email button pulse ring (positioned over the button by fx.js) */
.contact__email { position: relative; }
.fx-pulse { position: absolute; z-index: 0; pointer-events: none; }
.fx-pulse__ring {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible;
  opacity: 0; transform-origin: 50% 50%;
  animation: fxPulse 3.4s var(--ease-out) infinite;
  animation-play-state: var(--fx-play, running);
}
.fx-pulse__ring + .fx-pulse__ring { animation-delay: 1.7s; }
.fx-pulse__ring path { fill: none; stroke: url(#fx-pulse-grad); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
@keyframes fxPulse {
  0% { opacity: 0.85; transform: scale(1, 1); }
  70%, 100% { opacity: 0; transform: scale(var(--fx-sx, 1.08), var(--fx-sy, 1.4)); }
}

/* Vertical Japanese neon signs beside the contact panel (wide screens only) */
.fx-signs { display: none; }
@media (min-width: 80em) {
  .fx-signs { display: block; position: absolute; inset: 0; pointer-events: none; }
}
.fx-sign {
  --s-rgb: var(--neon-pink-rgb);
  position: absolute; top: 0.5rem; right: calc(100% + 1.75rem);
  padding: 1rem 0.55rem 0.9rem;
  writing-mode: vertical-rl; text-orientation: upright;
  font-family: var(--fx-font-sign); font-size: 1.6rem; font-weight: 400; line-height: 1; letter-spacing: 0.16em;
  color: #fff0fb;
  background: rgba(14, 7, 22, 0.6);
  border: 2px solid rgba(var(--s-rgb), 0.9); border-radius: 7px;
  box-shadow: 0 0 6px rgba(var(--s-rgb), 0.9), 0 0 24px rgba(var(--s-rgb), 0.4), inset 0 0 14px rgba(var(--s-rgb), 0.35);
  text-shadow: 0 0 2px #fff, 0 0 7px rgb(var(--s-rgb)), 0 0 18px rgb(var(--s-rgb)), 0 0 36px rgba(var(--s-rgb), 0.7);
}
.fx-sign::before {
  content: ""; position: absolute; left: 24%; right: 24%; bottom: 100%; height: 2.2rem;
  border-left: 1px solid rgba(189, 180, 204, 0.3); border-right: 1px solid rgba(189, 180, 204, 0.3);
}
.fx-sign--cyan {
  --s-rgb: var(--neon-cyan-rgb);
  top: 7.5rem; right: auto; left: calc(100% + 1.75rem);
  font-size: 1.25rem; color: #ecfdff;
}
.fx-sign__flick { animation: fxFlicker 7s steps(1, end) 3s infinite; animation-play-state: var(--fx-play, running); }
.fx-sign--cyan .fx-sign__flick { animation-duration: 9.5s; animation-delay: 5s; }
@keyframes fxFlicker {
  0%, 100% { opacity: 1; }
  90% { opacity: 0.25; }
  91% { opacity: 1; }
  92.5% { opacity: 0.4; }
  93.5% { opacity: 1; }
}

/* Katakana data rain canvas behind the contact section: kept to the outer columns so it never sits under copy */
.fx-rain {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0.3;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.35) 12%, transparent 21%, transparent 79%, rgba(0, 0, 0, 0.35) 88%, #000 100%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.35) 12%, transparent 21%, transparent 79%, rgba(0, 0, 0, 0.35) 88%, #000 100%);
}
@media (max-width: 44em) {
  .fx-rain {
    opacity: 0.16;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 9%, transparent 91%, #000 100%);
    mask-image: linear-gradient(90deg, #000 0%, transparent 9%, transparent 91%, #000 100%);
  }
}

/* ---------- Footer: animated neon top border ---------- */
.site-footer { position: relative; isolation: isolate; }
.fx-footline { position: absolute; left: 0; right: 0; top: -1px; height: 2px; overflow: hidden; pointer-events: none; }
.fx-footline__beam {
  position: absolute; top: 0; bottom: 0; left: 0; width: 200%;
  background: linear-gradient(90deg, var(--neon-violet) 0%, var(--neon-pink) 12.5%, var(--neon-cyan) 25%, var(--neon-amber) 37.5%, var(--neon-violet) 50%, var(--neon-pink) 62.5%, var(--neon-cyan) 75%, var(--neon-amber) 87.5%, var(--neon-violet) 100%);
  animation: fxSlide 14s linear infinite;
  animation-play-state: var(--fx-play, running);
}
@keyframes fxSlide { to { transform: translate3d(-50%, 0, 0); } }
.fx-footglow {
  position: absolute; left: 0; right: 0; top: 0; z-index: -1; height: 4rem; pointer-events: none;
  background: radial-gradient(48% 100% at 50% 0%, rgba(var(--neon-violet-rgb), 0.14), rgba(var(--neon-pink-rgb), 0.05) 50%, transparent 100%);
}

/* ---------- Motion off: freeze drifts, drop flashes, show everything settled ---------- */
html.motion-paused :is(.section .btn--primary, .certs .cert .cert__badge, .fx-neon-title)::after,
html.motion-paused .fx-sign__flick, html.motion-paused .skill-grid .skill-card .fx-draw { animation: none; }
html.motion-paused .skill-grid .skill-card .tags li,
html.motion-paused.reveal-on .skill-grid .skill-card.is-in .tags li { animation: none; opacity: 1; }
html.motion-paused .fx-comet, html.motion-paused .fx-pulse { display: none; }

@media (prefers-reduced-motion: reduce) {
  .fx-orb, .fx-ticker__track, .fx-comet__body, .fx-pulse__ring, .fx-sign__flick, .fx-footline__beam,
  .section .btn--primary::after, .certs .cert .cert__badge::after, .fx-neon-title::after,
  .skill-grid .skill-card .tags li, .skill-grid .skill-card .fx-draw,
  .skill-grid .skill-card::before, .certs .cert::before { animation: none !important; }
  .fx-comet, .fx-pulse { display: none; }
  .skill-grid .skill-card .tags li { opacity: 1; }
}

@media (forced-colors: active) {
  .fx-ink { background: none; color: CanvasText; }
  .fx-decode__fx { display: none; }
  .fx-decode.is-decoding .fx-decode__real { color: inherit; }
  .fx-amb, .fx-ticker, .fx-signs, .fx-pulse, .fx-comet, .fx-footline, .fx-footglow, .fx-neon-title::after,
  .section .btn--primary::after, .certs .cert .cert__badge::after { display: none; }
  .section .section-tag > span:first-child { background: none; color: CanvasText; filter: none; }
}

@media print {
  .fx-amb, .fx-ticker, .fx-signs, .fx-pulse, .fx-comet, .fx-footline, .fx-footglow, .fx-decode__fx { display: none !important; }
  .fx-ink, .section .section-tag > span:first-child { background: none; color: inherit; filter: none; }
  .section .section-title { filter: none !important; }
  .fx-neon-title::after, .fx-host::before { display: none; }
  .fx-decode.is-decoding .fx-decode__real { color: inherit; }
}