/* ============================================================
   CONCEPT 03 — SIGNAL // spatial   (shared by / and /apps/)
   Career and skills as a living network. Deep-space void,
   glass surfaces, teal signal + amber node. Cursor-reactive.
   ============================================================ */
:root {
  --void:     #06090f;
  --void-2:   #0a0e17;
  --glass:    rgba(214,226,240,.045);
  --glass-2:  rgba(214,226,240,.08);
  --edge:     rgba(214,226,240,.14);
  --edge-soft:rgba(214,226,240,.07);
  --fg:       #e6ecf4;
  --fg-dim:   #8f9bae;
  --fg-mute:  #4d5768;
  --teal:     #5fd3c4;
  --teal-glow:rgba(95,211,196,.22);
  --amber:    #f0a138;
  --amber-glow:rgba(240,161,56,.22);
  --serif: "Fraunces", Georgia, serif;
  --sans:  "Spline Sans", "Helvetica Neue", sans-serif;
  --mono:  "Spline Sans Mono", ui-monospace, "SF Mono", monospace;
  --mx: 0; --my: 0;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--void); }
body { background:var(--void); color:var(--fg); font-family:var(--sans); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; font-weight:300; }
::selection { background:var(--teal); color:var(--void); }
a:focus-visible, button:focus-visible { outline:2px solid var(--teal); outline-offset:4px; border-radius:2px; }

/* ---- depth field ---- */
.field { position:fixed; inset:-10%; z-index:-1; pointer-events:none; }
.field .nebula { position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 40% at 70% 20%, var(--teal-glow), transparent 65%),
             radial-gradient(ellipse 40% 35% at 20% 70%, var(--amber-glow), transparent 70%);
  opacity:.5; transform:translate(calc(var(--mx) * -18px), calc(var(--my) * -18px)); transition:transform .6s cubic-bezier(.22,1,.36,1); }
.field .stars { position:absolute; inset:0; opacity:.55;
  background-image:radial-gradient(1px 1px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 68% 8%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 84% 44%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 38% 62%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 52% 88%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 8% 84%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 92% 78%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 38%, #fff 50%, transparent 51%);
  background-size:900px 700px; transform:translate(calc(var(--mx) * -8px), calc(var(--my) * -8px)); transition:transform .6s cubic-bezier(.22,1,.36,1); }
.field .grid { position:absolute; inset:0; opacity:.35;
  background:linear-gradient(var(--edge-soft) 1px, transparent 1px), linear-gradient(90deg, var(--edge-soft) 1px, transparent 1px); background-size:72px 72px;
  mask-image:radial-gradient(ellipse 60% 60% at 50% 40%, black 10%, transparent 75%); -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 40%, black 10%, transparent 75%);
  transform:translate(calc(var(--mx) * -30px), calc(var(--my) * -30px)); transition:transform .6s cubic-bezier(.22,1,.36,1); }

/* ---- scroll progress = signal strength ---- */
.strength { position:fixed; top:0; left:0; height:2px; width:0%; z-index:70; background:linear-gradient(90deg, var(--teal), var(--amber)); box-shadow:0 0 12px var(--teal); }

/* ---- header (floating glass pill) ---- */
header.top { position:fixed; top:18px; left:50%; transform:translateX(-50%); z-index:60; width:min(1080px, calc(100% - 32px)); }
.pill { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 10px 10px 20px; border-radius:999px; border:1px solid var(--edge); background:rgba(10,14,23,.6); backdrop-filter:blur(18px) saturate(160%); -webkit-backdrop-filter:blur(18px) saturate(160%); box-shadow:0 10px 40px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06); }
.mark { font-family:var(--serif); font-weight:500; font-size:17px; text-decoration:none; color:var(--fg); display:flex; align-items:baseline; gap:8px; white-space:nowrap; }
.mark .sig { font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--teal); }
.links { display:flex; gap:4px; align-items:center; }
.links a { font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:var(--fg-dim); padding:8px 14px; border-radius:999px; transition:color .18s, background .18s; white-space:nowrap; }
.links a:hover { color:var(--fg); background:var(--glass-2); }
.links a.active { color:var(--void); background:var(--teal); }
.links a.back { color:var(--fg-mute); }
.links .sep { width:1px; height:14px; background:var(--edge); margin:0 4px; }
@media (max-width:860px) { .links a:not(.back):not(.keep), .links .sep { display:none; } .links a.back .txt { display:none; } .pill { padding:8px 8px 8px 16px; } .mark { font-size:16px; } .mark .sig { display:none; } .links a { padding:8px 10px; } }
.net .lbl .coarse { display:none; }
@media (pointer: coarse) { .net .lbl .fine { display:none; } .net .lbl .coarse { display:inline; } }

/* ---- layout ---- */
.wrap { max-width:1120px; margin:0 auto; padding:0 24px; }
section.blk { padding-top:clamp(88px, 12vw, 150px); position:relative; }
.tag { font-family:var(--mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--teal); display:inline-flex; align-items:center; gap:10px; }
.tag::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 12px var(--teal); flex:none; }
.tag.amber { color:var(--amber); } .tag.amber::before { background:var(--amber); box-shadow:0 0 12px var(--amber); }
h1, h2, h3 { font-family:var(--serif); font-optical-sizing:auto; font-weight:500; letter-spacing:-.02em; line-height:1.02; }
h1 em, h2 em, h3 em { font-style:italic; font-weight:300; color:var(--amber); }
.h2 { font-size:clamp(36px, 5.5vw, 64px); margin:16px 0 14px; }
.lede { color:var(--fg-dim); font-size:18px; max-width:54ch; }
.blk-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px 40px; align-items:end; }
.blk-head .meta { font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-mute); text-align:right; line-height:2; }
.blk-head .meta b { color:var(--fg-dim); font-weight:500; }
@media (max-width:720px) { .blk-head { grid-template-columns:1fr; } .blk-head .meta { text-align:left; } }

/* ---- buttons ---- */
.btn { position:relative; display:inline-flex; align-items:center; gap:10px; padding:13px 24px; border-radius:999px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; border:1px solid var(--edge); color:var(--fg); background:var(--glass); backdrop-filter:blur(10px); transition:background .2s, border-color .2s, box-shadow .2s, transform .2s; }
.btn:hover { border-color:var(--teal); box-shadow:0 0 30px var(--teal-glow); transform:translateY(-1px); }
.btn.fill { background:var(--teal); color:var(--void); border-color:var(--teal); font-weight:500; }
.btn.fill:hover { box-shadow:0 0 40px var(--teal-glow), 0 0 0 4px rgba(95,211,196,.15); }

/* ---- hero ---- */
.hero { min-height:100svh; display:grid; grid-template-columns:minmax(0,.9fr) minmax(320px, 1.1fr); align-items:center; gap:24px; padding-top:100px; }
@media (max-width:900px) { .hero { grid-template-columns:1fr; padding-top:110px; gap:8px; min-height:auto; } }
.hero .name { font-size:clamp(58px, 9.5vw, 128px); margin:22px 0 14px; letter-spacing:-.035em; }
.hero .name .w { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.08em; margin-bottom:-.08em; }
.hero .name .w span { display:inline-block; transform:translateY(110%); opacity:0; animation:rise .9s cubic-bezier(.22,1,.36,1) forwards; animation-delay:calc(.25s + var(--i) * .045s); }
@keyframes rise { to { transform:none; opacity:1 } }
.hero .sub { font-family:var(--mono); font-size:clamp(12px, 1.5vw, 14px); letter-spacing:.18em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:22px; }
.hero .sub i { font-style:normal; color:var(--teal); margin:0 8px; }
.hero .lede { margin-bottom:34px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }

/* live readout under hero copy */
.readout { display:flex; flex-wrap:wrap; gap:6px 26px; margin-top:34px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-mute); }
.readout b { color:var(--fg-dim); font-weight:500; }
.readout .live { color:var(--teal); }
.readout .live::before { content:"● "; animation:blink 2.2s steps(1) infinite; }
@keyframes blink { 0%,80% { opacity:1 } 90% { opacity:.2 } }

/* ---- the network (canvas) ---- */
.net { position:relative; width:100%; aspect-ratio:1 / .92; max-height:min(78svh, 720px); }
@media (max-width:900px) { .net { aspect-ratio:1 / 1; max-height:none; margin:20px auto 0; max-width:520px; } }
.net canvas { position:absolute; inset:0; width:100%; height:100%; display:block; cursor:crosshair; }
.net canvas.hit { cursor:pointer; }
.net .tip { position:absolute; pointer-events:none; transform:translate(-50%, calc(-100% - 18px)); opacity:0; transition:opacity .15s; padding:10px 14px; border-radius:12px; border:1px solid var(--edge); background:rgba(10,14,23,.85); backdrop-filter:blur(12px); white-space:nowrap; z-index:2; }
.net .tip.on { opacity:1; }
.net .tip b { display:block; font-family:var(--serif); font-size:16px; font-weight:500; color:var(--fg); }
.net .tip span { font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); }
.net .tip small { display:block; font-family:var(--mono); font-size:10px; letter-spacing:.1em; color:var(--fg-mute); margin-top:4px; }
.net .legend { position:absolute; left:0; bottom:0; display:flex; gap:18px; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--fg-mute); }
.net .legend i { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:8px; vertical-align:middle; }
.net .legend .t i { background:var(--teal); box-shadow:0 0 8px var(--teal); }
.net .legend .a i { background:var(--amber); box-shadow:0 0 8px var(--amber); }
.net .legend .s i { background:transparent; border:1px solid var(--fg-dim); }
.net .lbl { position:absolute; right:0; top:0; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-mute); }
.net .lbl b { color:var(--teal); font-weight:500; }

/* orbit ring ticker */
.orbit { margin-top:48px; position:relative; overflow:hidden; padding:14px 0; border-top:1px solid var(--edge-soft); border-bottom:1px solid var(--edge-soft);
  mask-image:linear-gradient(90deg, transparent, black 12%, black 88%, transparent); -webkit-mask-image:linear-gradient(90deg, transparent, black 12%, black 88%, transparent); white-space:nowrap; }
.orbit .track { display:inline-block; animation:marq 44s linear infinite; }
.orbit span { font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-dim); margin-right:32px; }
.orbit span::before { content:"◦"; color:var(--teal); margin-right:12px; }
@keyframes marq { to { transform:translateX(-50%) } }

/* ---- glass panel ---- */
.glass { position:relative; border-radius:22px; border:1px solid var(--edge); background:linear-gradient(160deg, var(--glass-2), var(--glass)); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 30px 60px -30px rgba(0,0,0,.7); }
.glass::before { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:radial-gradient(420px circle at var(--px, 50%) var(--py, 50%), rgba(95,211,196,.13), transparent 45%); opacity:0; transition:opacity .3s; }
.glass:hover::before { opacity:1; }

/* ---- about ---- */
.about { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr); gap:24px; margin-top:52px; align-items:stretch; }
@media (max-width:900px) { .about { grid-template-columns:1fr; } }
.about .glass { padding:36px; }
.about h3 { font-size:clamp(24px, 3vw, 34px); margin-bottom:18px; }
.about p { color:var(--fg-dim); margin-bottom:14px; }
.stats { display:flex; gap:28px; flex-wrap:wrap; margin:28px 0 24px; }
.stat .v { font-family:var(--serif); font-size:32px; font-weight:500; color:var(--fg); line-height:1; }
.stat .v em { color:var(--teal); font-style:italic; font-weight:300; }
.stat .k { font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-mute); margin-top:8px; }
.portrait { position:relative; border-radius:22px; overflow:hidden; min-height:340px; }
.portrait img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.7) contrast(1.05); transform:scale(1.06) translate(calc(var(--mx) * 6px), calc(var(--my) * 6px)); transition:transform .6s cubic-bezier(.22,1,.36,1); }
.portrait::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(6,9,15,.88)); }
.portrait .scanline { position:absolute; left:0; right:0; height:1px; background:linear-gradient(90deg, transparent, var(--teal), transparent); opacity:.6; animation:scan 5s linear infinite; z-index:1; }
@keyframes scan { from { top:0 } to { top:100% } }
.portrait .cap { position:absolute; left:22px; bottom:20px; right:22px; z-index:1; font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-dim); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.portrait .cap b { color:var(--teal); font-weight:500; }

/* ---- skills: bands ---- */
.bands { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:52px; perspective:1400px; }
@media (max-width:720px) { .bands { grid-template-columns:1fr; } }
.band { padding:30px 32px 32px; transform-style:preserve-3d; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .35s cubic-bezier(.22,1,.36,1), border-color .25s; overflow:hidden; }
.band:hover { border-color:rgba(95,211,196,.4); }
.band .id { font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--teal); display:flex; align-items:center; justify-content:space-between; }
.band .id .hz { color:var(--fg-mute); }
.band .wave { position:absolute; right:-10px; top:-10px; width:200px; height:64px; opacity:.55; }
.band .wave path { fill:none; stroke:var(--teal); stroke-width:1.2; stroke-dasharray:600; stroke-dashoffset:600; animation:draw 3.2s ease-out forwards; }
.band.in .wave path { animation-play-state:running; }
.band:nth-child(2) .wave path, .band:nth-child(4) .wave path { stroke:var(--amber); }
@keyframes draw { to { stroke-dashoffset:0 } }
.band h3 { font-size:24px; margin:16px 0 10px; }
.band p { color:var(--fg-dim); font-size:15px; }
.band .out { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.band .out span { font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); padding:5px 11px; border-radius:999px; border:1px solid var(--edge-soft); background:var(--glass); }

/* ---- experience: trace ---- */
.trace { position:relative; margin-top:60px; padding-left:44px; }
.trace::before { content:""; position:absolute; left:11px; top:0; bottom:0; width:1px; background:linear-gradient(var(--amber), var(--teal) 30%, var(--edge-soft)); }
.trace .bead { position:absolute; left:6px; top:0; width:11px; height:11px; border-radius:50%; background:var(--teal); box-shadow:0 0 12px var(--teal); animation:bead 7s linear infinite reverse; }
@keyframes bead { from { top:0 } to { top:100% } }
.hop { position:relative; margin-bottom:22px; padding:28px 32px; display:grid; grid-template-columns:150px minmax(0,1fr); gap:24px; scroll-margin-top:110px; }
.hop::before { content:""; position:absolute; left:-38px; top:38px; width:9px; height:9px; border-radius:50%; background:var(--void); border:1.5px solid var(--teal); }
.hop.cur::before { background:var(--amber); border-color:var(--amber); box-shadow:0 0 14px var(--amber); }
.hop.flash { border-color:var(--teal); box-shadow:0 0 0 1px var(--teal), 0 0 40px var(--teal-glow); }
.hop .when { font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--fg-dim); text-transform:uppercase; line-height:1.9; }
.hop .when b { display:block; color:var(--teal); font-weight:500; }
.hop.cur .when b { color:var(--amber); }
.hop h3 { font-size:22px; }
.hop .org { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); margin:6px 0 10px; }
.hop p { color:var(--fg-dim); font-size:15px; max-width:58ch; }
.hop .built { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.hop .built span { font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-mute); padding:3px 9px; border-radius:999px; border:1px solid var(--edge-soft); }
@media (max-width:720px) { .trace { padding-left:30px; } .hop { grid-template-columns:1fr; gap:8px; padding:22px; } .hop::before { left:-24px; } }

/* ---- contact: uplink ---- */
.beacons { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:52px; }
@media (max-width:640px) { .beacons { grid-template-columns:1fr; } }
.beacon { display:block; text-decoration:none; color:var(--fg); padding:30px; transition:transform .25s, border-color .25s; }
.beacon:hover { transform:translateY(-4px); border-color:rgba(95,211,196,.45); }
.beacon .c { font-family:var(--mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--teal); display:flex; align-items:center; gap:8px; }
.beacon .c::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--teal); animation:ping 2.4s ease-out infinite; }
.beacon:nth-child(2) .c::before { animation-delay:.8s } .beacon:nth-child(3) .c::before { animation-delay:1.6s }
@keyframes ping { 0% { box-shadow:0 0 0 0 rgba(95,211,196,.5) } 100% { box-shadow:0 0 0 14px rgba(95,211,196,0) } }
.beacon h3 { font-size:26px; margin:16px 0 6px; }
.beacon .a { font-family:var(--mono); font-size:13px; color:var(--fg-dim); word-break:break-all; }
.beacon:hover .a { color:var(--fg); }

/* ---- instruments (apps page) ---- */
.instr { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; perspective:1400px; }
@media (max-width:980px) { .instr { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px) { .instr { grid-template-columns:1fr; } }
.inst { display:flex; flex-direction:column; text-decoration:none; color:var(--fg); padding:0; overflow:hidden; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .35s cubic-bezier(.22,1,.36,1), border-color .25s; }
.inst:hover { border-color:rgba(95,211,196,.45); }
.inst .viz { position:relative; height:150px; border-bottom:1px solid var(--edge-soft); background:linear-gradient(180deg, rgba(95,211,196,.06), transparent); overflow:hidden; }
.inst .viz svg { position:absolute; inset:0; width:100%; height:100%; }
.inst .viz .ln { fill:none; stroke:var(--teal); stroke-width:1.5; stroke-linejoin:round; stroke-dasharray:900; stroke-dashoffset:900; animation:draw 2.4s ease-out forwards; filter:drop-shadow(0 0 4px var(--teal-glow)); }
.inst .viz .ln.am { stroke:var(--amber); }
.inst .viz .ar { fill:url(#g-teal); opacity:.35; }
.inst .viz .gr { stroke:var(--edge-soft); stroke-width:1; }
.inst .viz .bar { fill:var(--teal); opacity:.75; transform-origin:bottom; animation:grow 1.2s cubic-bezier(.22,1,.36,1) both; }
.inst .viz .bar.am { fill:var(--amber); }
@keyframes grow { from { transform:scaleY(0) } }
.inst .viz .node { fill:var(--void-2); stroke:var(--teal); stroke-width:1.2; }
.inst .viz .node.c { fill:var(--amber); stroke:none; }
.inst .viz .lk { stroke:var(--edge); stroke-width:1; }
.inst .viz .status { position:absolute; top:14px; left:16px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); }
.inst .viz .status::before { content:"● "; animation:blink 2.2s steps(1) infinite; }
.inst .viz .idx { position:absolute; top:14px; right:16px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-mute); }
.inst .body { padding:22px 24px 24px; display:flex; flex-direction:column; flex:1; }
.inst .cat { font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-mute); }
.inst h3 { font-size:22px; margin:8px 0 8px; }
.inst p { color:var(--fg-dim); font-size:14.5px; flex:1; }
.inst .go { margin-top:18px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); display:flex; justify-content:space-between; }
.inst .go .path { color:var(--fg-mute); }
.inst:hover .go { text-decoration:underline; text-underline-offset:5px; }
.pipeline { margin-top:20px; padding:28px 32px; display:grid; grid-template-columns:auto 1fr auto; gap:24px; align-items:center; }
@media (max-width:720px) { .pipeline { grid-template-columns:1fr; } }
.pipeline h3 { font-size:22px; }
.pipeline p { color:var(--fg-dim); font-size:15px; max-width:52ch; }
.pipeline .dots { display:flex; gap:8px; }
.pipeline .dots i { width:8px; height:8px; border-radius:50%; border:1px solid var(--fg-mute); animation:dotfill 2.4s ease-in-out infinite; }
.pipeline .dots i:nth-child(2) { animation-delay:.4s } .pipeline .dots i:nth-child(3) { animation-delay:.8s }
@keyframes dotfill { 0%,100% { background:transparent } 50% { background:var(--teal); border-color:var(--teal); box-shadow:0 0 10px var(--teal) } }

/* ---- footer ---- */
footer { margin-top:120px; padding:34px 0 40px; border-top:1px solid var(--edge-soft); }
footer .wrap { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-mute); }
footer .wrap b { color:var(--teal); font-weight:500; }

/* ---- reveal ---- */
.rv { opacity:0; transform:translateY(22px); filter:blur(4px); transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1), filter .8s; }
.rv.in { opacity:1; transform:none; filter:none; }
.rv.d1 { transition-delay:.1s } .rv.d2 { transition-delay:.2s } .rv.d3 { transition-delay:.3s } .rv.d4 { transition-delay:.45s }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .rv { opacity:1; transform:none; filter:none; transition:none; }
  .hero .name .w span { animation:none; transform:none; opacity:1; }
  .orbit .track, .trace .bead, .beacon .c::before, .readout .live::before, .portrait .scanline, .pipeline .dots i, .inst .viz .status::before { animation:none; }
  .band .wave path, .inst .viz .ln { animation:none; stroke-dashoffset:0; }
  .inst .viz .bar { animation:none; }
  .field .nebula, .field .stars, .field .grid, .portrait img { transform:none !important; transition:none; }
  .band, .inst { transform:none !important; }
}