/* Motion and custom scrollbar for dns.nxix.jp. Everything here is
   decoration: with prefers-reduced-motion the page is fully static. */

/* ===== Custom scrollbar ===== */
html { scrollbar-width: thin; scrollbar-color: #3b5f9e #0b0c0e; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #0b0c0e; border-left: 1px solid #16191f; }
::-webkit-scrollbar-thumb { border-radius: 12px; border: 3px solid #0b0c0e;
  background: linear-gradient(180deg, #5b96f7, #2f5fb3); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #7fb0ff, #3b82f6); }
::-webkit-scrollbar-thumb:active { background: #8fbcff; }
::-webkit-scrollbar-corner { background: #0b0c0e; }
::selection { background: rgba(59,130,246,.45); color: #fff; }

/* ===== Scroll progress + header ===== */
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #3b82f6, #7dd3fc); box-shadow: 0 0 10px rgba(91,150,247,.8); }
.top { transition: background .3s, border-color .3s; }
.top.scrolled { background: rgba(9,10,12,.92); border-bottom-color: rgba(91,150,247,.18); }
.nav a { position: relative; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent-2);
  transform: scaleX(0); transition: transform .25s; transform-origin: 0 50%; }
.nav a:hover::after { transform: scaleX(1); }

/* ===== Hero motion ===== */
.hero-glow { position: absolute; width: 760px; height: 760px; right: -120px; top: -220px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(59,130,246,.30), rgba(59,130,246,0) 62%); animation: glow 14s ease-in-out infinite alternate; will-change: transform; }
@keyframes glow { 0% { transform: translate(0, 0) scale(1); opacity: .8; } 100% { transform: translate(-80px, 60px) scale(1.15); opacity: 1; } }
.hero-beams { position: absolute; inset: 0; overflow: hidden; pointer-events: none; contain: strict; }
.hero-beams i { position: absolute; height: 1px; width: 40%; left: 0; opacity: .6; will-change: transform; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(125,211,252,.9), transparent); animation: beam 9s linear infinite; }
.hero-beams i:nth-child(1) { top: 22%; animation-delay: .4s; }
.hero-beams i:nth-child(2) { top: 58%; animation-delay: 3.6s; animation-duration: 11s; }
.hero-beams i:nth-child(3) { display: none; }
@keyframes beam { to { transform: translateX(260%); } }
.zcard { animation: float 8s ease-in-out infinite; will-change: transform; }
@keyframes float {
  0%, 100% { transform: perspective(1400px) rotateY(-9deg) rotateX(4deg) translateY(0); }
  50% { transform: perspective(1400px) rotateY(-7deg) rotateX(3deg) translateY(-10px); }
}
.hl { background: linear-gradient(90deg, #5b96f7, #7dd3fc);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* intro on load */
.hero-copy[data-intro] > *, .hero-visual[data-intro] { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
.hero-copy > *:nth-child(1) { animation-delay: .05s; }
.hero-copy > *:nth-child(2) { animation-delay: .15s; }
.hero-copy > *:nth-child(3) { animation-delay: .28s; }
.hero-copy > *:nth-child(4) { animation-delay: .38s; }
.hero-copy > *:nth-child(5) { animation-delay: .48s; }
.hero-copy > *:nth-child(6) { animation-delay: .56s; }
.hero-visual[data-intro] { animation-delay: .35s; animation-duration: 1.2s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.pillars li { animation: pop .6s cubic-bezier(.2,.9,.3,1.3) both; }
.pillars li:nth-child(1) { animation-delay: .45s; }
.pillars li:nth-child(2) { animation-delay: .55s; }
.pillars li:nth-child(3) { animation-delay: .65s; }
@keyframes pop { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }

/* ===== Reveal on scroll (only when JS enabled motion) ===== */
.motion [data-reveal] { opacity: 0; transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.motion [data-reveal].in { opacity: 1; transform: none; }
.uses article { position: relative; }
.uses article::before { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 0; background: #7dd3fc;
  box-shadow: 0 0 10px #5b96f7; transition: width 1.1s .3s cubic-bezier(.2,.7,.2,1); }
.uses article.in::before { width: 100%; }

/* ===== Card spotlight + hover ===== */
.feats article, .plan, .dev { position: relative; overflow: hidden; --mx: 50%; --my: 0%; }
.feats article::after, .plan::after, .dev::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  transition: opacity .3s; background: radial-gradient(320px circle at var(--mx) var(--my), rgba(91,150,247,.16), transparent 60%); }
.feats article:hover::after, .plan:hover::after, .dev:hover::after { opacity: 1; }
.ic { transition: transform .3s, filter .3s; }
.feats article:hover .ic { transform: translateY(-2px) scale(1.08); filter: drop-shadow(0 0 8px rgba(91,150,247,.8)); }
.plan { transition: transform .25s, border-color .25s; }
.plan:hover { transform: translateY(-4px); border-color: #2c3a52; }
.specs dl { transition: background .2s; }
.specs dl:hover { background: rgba(59,130,246,.06); }

/* button shine */
.btn.primary { position: relative; overflow: hidden; }
.btn.primary::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); transition: left .6s; }
.btn.primary:hover::after { left: 130%; }

/* ===== Propagation diagram ===== */
.flowviz { margin-top: 40px; border: 1px solid var(--line); border-radius: 18px; padding: 18px 10px 6px;
  background: radial-gradient(600px 260px at 40% 50%, rgba(59,130,246,.10), transparent 70%), var(--surface); }
.flowviz svg { display: block; width: 100%; height: auto; }
.flowviz { position: relative; }
.fv-canvas { position: absolute; left: 10px; top: 18px; pointer-events: none; }
.fv-core { fill: #e1ecff; }
.fv-ring { fill: none; stroke: rgba(91,150,247,.55); stroke-width: 1.4; }
.fv-ring.sm { stroke: rgba(91,150,247,.4); }
.fv-res { fill: #9fbff5; }
.fv-user { fill: rgba(200,210,225,.55); }
.pk { fill: #cfe0ff; opacity: .85; }
.pk.hot { fill: #ffffff; opacity: 1; }
.fv-labels text { fill: #c3c8cf; font: 600 15px "JetBrains Mono", monospace; }
.fv-labels text.sm { fill: #8b93a0; font-size: 12.5px; font-weight: 400; }
.fv-labels text.hl { fill: #7dd3fc; font-weight: 600; }
/* Node pulse removed: SVG transforms are not composited (layout every frame). */
.pulse.d1 { animation-delay: .25s; }
.pulse.d2 { animation-delay: .3s; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.net picture img { margin-top: 20px; }

@media (max-width: 960px) {
  .zcard { animation-name: floatFlat; }
  @keyframes floatFlat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
}
@media (max-width: 640px) {
  .hero-glow { width: 460px; height: 460px; right: -200px; top: -120px; }
  .flowviz { padding: 10px 2px 2px; }
  .fv-canvas { left: 2px; top: 10px; }
  .fv-labels text { font-size: 22px; }
  .fv-labels text.sm { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-glow, .hero-beams i, .zcard, .pulse,
  .hero-copy[data-intro] > *, .hero-visual[data-intro], .pillars li { animation: none !important; }
  .hero-beams { display: none; }
}

/* Animations stop while their section is off screen (set by the script). */
.offscreen, .offscreen * { animation-play-state: paused !important; }