:root {
  --bg: #030605;
  --ink: #f5f7f5;
  --muted: rgba(239, 247, 242, .62);
  --acid: #9dff00;
  --acid-soft: rgba(157, 255, 0, .18);
  --line: rgba(157, 255, 0, .25);
  --panel: rgba(8, 11, 10, .82);
  --panel-2: rgba(5, 7, 7, .95);
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
button, a { font: inherit; }

.app {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 52%, rgba(63, 122, 24, .14), transparent 33%),
    linear-gradient(180deg, #020403 0%, #050806 62%, #020403 100%);
}

.space, .stars, .glow { position: absolute; inset: 0; pointer-events: none; }
.space { z-index: 0; overflow: hidden; }
.stars-a {
  opacity: .55;
  background-image:
    radial-gradient(circle, rgba(157,255,0,.95) 0 1px, transparent 1.3px),
    radial-gradient(circle, rgba(255,255,255,.65) 0 1px, transparent 1.3px);
  background-size: 153px 147px, 201px 191px;
  background-position: 12px 30px, 89px 11px;
}
.stars-b {
  opacity: .23;
  background-image: radial-gradient(circle, rgba(157,255,0,.8) 0 1px, transparent 1.2px);
  background-size: 82px 82px;
  transform: rotate(13deg) scale(1.2);
}
.glow { filter: blur(32px); opacity: .5; }
.glow-a {
  inset: auto auto -15vmax -13vmax;
  width: 44vmax;
  height: 44vmax;
  border-radius: 50%;
  background: radial-gradient(circle at 60% 45%, rgba(131,255,0,.33), transparent 62%);
}
.glow-b {
  inset: -18vmax -12vmax auto auto;
  width: 42vmax;
  height: 42vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(64,160,46,.2), transparent 62%);
}

.scene-shell {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 2;
  perspective: 1400px;
  perspective-origin: 50% 50%;
}
.scene {
  position: relative;
  width: min(1500px, 96vw);
  height: min(920px, 91vh);
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(.2,.7,.1,1);
  will-change: transform;
}
.scene::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: min(72vw, 950px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%) translateZ(-110px);
  border-radius: 50%;
  background:
    radial-gradient(circle at center, transparent 0 35%, rgba(157,255,0,.035) 36% 37%, transparent 38%),
    repeating-radial-gradient(circle at center, rgba(157,255,0,.09) 0 1px, transparent 1px 42px);
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}
.app.is-open .scene::before { opacity: .72; }

.orbit {
  position: absolute;
  left: 50%; top: 50%;
  border: 1px solid rgba(157,255,0,.14);
  border-radius: 50%;
  transform: translate(-50%,-50%) translateZ(-60px);
  opacity: 0;
  transition: opacity .9s ease, transform 1.1s ease;
  pointer-events: none;
}
.orbit-1 { width: 430px; height: 430px; }
.orbit-2 { width: 610px; height: 610px; }
.orbit-3 { width: 820px; height: 820px; }
.app.is-open .orbit { opacity: 1; }
.app.is-open .orbit-1 { transform: translate(-50%,-50%) rotateX(68deg) rotateZ(12deg) translateZ(-55px); }
.app.is-open .orbit-2 { transform: translate(-50%,-50%) rotateX(73deg) rotateZ(-8deg) translateZ(-90px); }
.app.is-open .orbit-3 { transform: translate(-50%,-50%) rotateX(78deg) rotateZ(5deg) translateZ(-120px); }

.connections {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .9s ease .18s;
}
.app.is-open .connections { opacity: 1; }
.connection-path {
  fill: none;
  stroke: var(--color, var(--acid));
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 5 7;
  opacity: .72;
  filter: drop-shadow(0 0 6px var(--color, var(--acid)));
  animation: dash 14s linear infinite;
}
.connection-dot { fill: var(--color, var(--acid)); filter: drop-shadow(0 0 6px var(--color, var(--acid))); }
@keyframes dash { to { stroke-dashoffset: -240; } }

.core {
  position: absolute;
  left: 50%; top: 50%;
  width: 280px; height: 280px;
  transform: translate(-50%,-50%) translateZ(70px);
  border: 0;
  border-radius: 50%;
  color: white;
  background: transparent;
  cursor: pointer;
  z-index: 20;
  transform-style: preserve-3d;
  transition: width .9s cubic-bezier(.2,.75,.1,1), height .9s cubic-bezier(.2,.75,.1,1), filter .4s ease;
}
.core:hover { filter: brightness(1.14); }
.core-face {
  position: absolute;
  inset: 18px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  border: 1px solid rgba(157,255,0,.75);
  border-radius: 50%;
  background:
    radial-gradient(circle at 48% 42%, rgba(30,55,24,.96), rgba(5,11,7,.98) 58%, #020302 74%);
  box-shadow:
    0 0 26px rgba(157,255,0,.62),
    inset 0 0 50px rgba(157,255,0,.13),
    0 30px 90px rgba(0,0,0,.6);
  transform: translateZ(24px);
}
.core-face::before {
  content:"";
  position:absolute; inset:-13%;
  border-radius:50%;
  background: conic-gradient(from 0deg, transparent 0 9%, rgba(157,255,0,.25) 12%, transparent 16% 31%, rgba(157,255,0,.18) 34%, transparent 38% 100%);
  animation: spin 18s linear infinite;
  mask: radial-gradient(circle, transparent 0 61%, #000 62% 64%, transparent 65%);
}
.core-logo {
  position: relative;
  z-index: 1;
  font-weight: 800;
  font-size: clamp(52px, 6.5vw, 92px);
  letter-spacing: -0.08em;
  line-height: .8;
  text-shadow: 0 8px 28px rgba(0,0,0,.55);
}
.core-logo span { color: var(--acid); }
.core-sub {
  position: relative;
  z-index: 1;
  font: 500 12px/1 var(--mono);
  letter-spacing: .55em;
  text-transform: uppercase;
  color: rgba(255,255,255,.82);
  margin-left: .55em;
}
.core-ring {
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(157,255,0,.42);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(157,255,0,.25);
}
.core-ring-a { animation: pulse 2.7s ease-in-out infinite; }
.core-ring-b { inset: -28px; opacity: .27; animation: pulse 2.7s ease-in-out infinite .35s; }
@keyframes pulse { 50% { transform: scale(1.045); opacity: .58; } }
@keyframes spin { to { transform: rotate(360deg); } }
.app.is-open .core { width: 246px; height: 246px; }

.projects { position: absolute; inset: 0; z-index: 10; transform-style: preserve-3d; pointer-events: none; }
.project {
  --x: 50%; --y: 50%; --z: 0px; --color: var(--acid);
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-50%,-50%) translateZ(var(--z)) scale(.7);
  opacity: 0;
  pointer-events: none;
  transform-style: preserve-3d;
  transition:
    opacity .58s ease var(--delay, 0ms),
    transform .72s cubic-bezier(.18,.84,.22,1) var(--delay, 0ms);
}
.app.is-open .project { opacity: 1; pointer-events: auto; transform: translate(-50%,-50%) translateZ(var(--z)) scale(1); }

.node {
  position: relative;
  min-width: 168px;
  max-width: 220px;
  padding: 11px 14px 10px;
  border: 1px solid color-mix(in srgb, var(--color) 70%, transparent);
  border-radius: 13px;
  color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color) 8%, rgba(5,8,7,.92)), rgba(5,7,7,.92));
  box-shadow: 0 0 18px color-mix(in srgb, var(--color) 22%, transparent), inset 0 0 20px rgba(255,255,255,.015);
  cursor: pointer;
  backdrop-filter: blur(10px);
  user-select: none;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease, opacity .3s ease;
}
.node:hover,
.project.is-preview .node,
.project.is-pinned .node {
  transform: translateZ(20px) scale(1.04);
  box-shadow: 0 0 28px color-mix(in srgb, var(--color) 38%, transparent), inset 0 0 30px rgba(255,255,255,.025);
}
.node-line { display:flex; align-items:center; gap:8px; min-width:0; }
.node-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius:50%; background:var(--color); box-shadow: 0 0 11px var(--color); }
.node-code { font: 500 10px/1 var(--mono); color:var(--color); }
.node-name { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font: 500 13px/1.15 var(--mono); }
.node-url { display:block; margin-top:8px; color:rgba(255,255,255,.66); font:400 10px/1 var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.preview {
  position: absolute;
  width: min(390px, 31vw);
  min-width: 310px;
  padding: 14px;
  border: 1px solid var(--color);
  border-radius: 15px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color) 8%, rgba(6,8,8,.97)), rgba(4,5,5,.97));
  box-shadow: 0 0 34px color-mix(in srgb, var(--color) 26%, transparent), 0 30px 80px rgba(0,0,0,.62);
  transform-origin: var(--origin-x, 50%) var(--origin-y, 50%);
  transform: translate3d(var(--px, 24px), var(--py, -45%), 70px) rotateY(var(--ry, -7deg)) scale(.84);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, transform .34s cubic-bezier(.2,.8,.2,1), visibility .28s;
  backdrop-filter: blur(16px);
}
.project.is-preview .preview,
.project.is-pinned .preview {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(var(--px, 24px), var(--py, -45%), 92px) rotateY(0deg) scale(1);
}
.project.preview-left .preview { --px: calc(-100% - 28px); --ry: 7deg; }
.project.preview-below .preview { --py: 30px; }
.project.preview-above .preview { --py: calc(-100% - 30px); }

.preview-head { display:flex; align-items:center; gap:8px; margin-bottom:11px; }
.preview-head .title { flex:1; min-width:0; font:500 13px/1.1 var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.preview-lock { font:400 9px/1 var(--mono); color:var(--color); letter-spacing:.07em; text-transform:uppercase; opacity:0; transition:opacity .2s; }
.project.is-pinned .preview-lock { opacity:1; }
.preview-close { width:26px; height:26px; border:0; background:transparent; color:#fff; font-size:20px; line-height:1; cursor:pointer; opacity:.75; }
.preview-close:hover { opacity:1; }
.preview-media {
  position:relative;
  overflow:hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid color-mix(in srgb, var(--color) 30%, rgba(255,255,255,.06));
  border-radius:10px;
  background:#070908;
}
.preview-media::after {
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 70%, rgba(0,0,0,.22));
  pointer-events:none;
}
.preview-media img { width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.01); transition:transform .8s cubic-bezier(.2,.8,.2,1), filter .4s ease; }
.project.is-preview .preview-media img,
.project.is-pinned .preview-media img { transform:scale(1.045); }
.preview-foot { display:flex; align-items:center; gap:12px; padding-top:11px; }
.preview-domain { flex:1; min-width:0; font:400 10px/1 var(--mono); color:rgba(255,255,255,.72); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.preview-open {
  color:#fff;
  text-decoration:none;
  font:500 10px/1 var(--mono);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  padding:8px 10px;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.preview-open:hover { color:#071004; background:var(--color); border-color:var(--color); }

/* Cuando una tarjeta queda fija, el resto baja para ordenar la lectura. */
.app.has-pinned .project:not(.is-pinned) { opacity:.28; filter:saturate(.45); }
.app.has-pinned .connections { opacity:.34; }
.app.has-pinned .core { filter:brightness(.72); }

.intro-copy {
  position:absolute;
  z-index:25;
  left:50%; bottom:7vh;
  display:flex;
  gap:12px;
  transform:translateX(-50%);
  font:400 10px/1 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(255,255,255,.55);
  transition:opacity .45s ease, transform .45s ease;
}
.intro-copy span:first-child { color:var(--acid); }
.app.is-open .intro-copy { opacity:0; transform:translate(-50%, 10px); pointer-events:none; }
.controls-hint {
  position:absolute;
  z-index:25;
  left:50%; bottom:22px;
  transform:translateX(-50%) translateY(8px);
  opacity:0;
  font:400 9px/1.2 var(--mono);
  letter-spacing:.05em;
  color:rgba(255,255,255,.38);
  text-align:center;
  pointer-events:none;
  transition:opacity .45s ease .8s, transform .45s ease .8s;
}
.app.is-open .controls-hint { opacity:1; transform:translateX(-50%) translateY(0); }

@media (max-width: 1050px) {
  .scene { width: 100vw; height: 100svh; }
  .preview { width: min(360px, 45vw); min-width: 280px; }
  .node { min-width: 150px; }
  .core { width:230px; height:230px; }
  .app.is-open .core { width:210px; height:210px; }
}

@media (max-width: 760px) {
  body { overflow:auto; }
  .app { min-height:100svh; height:auto; overflow:hidden; }
  .scene-shell { position:relative; height:100svh; min-height:690px; }
  .scene { height:100%; perspective:1000px; }
  .core { width:190px; height:190px; }
  .app.is-open .core { width:160px; height:160px; }
  .core-logo { font-size:52px; }
  .core-sub { font-size:8px; }
  .orbit-1 { width:280px; height:280px; }
  .orbit-2 { width:420px; height:420px; }
  .orbit-3 { width:580px; height:580px; }
  .node { min-width:124px; max-width:150px; padding:9px 10px; border-radius:10px; }
  .node-name { font-size:10px; }
  .node-url { display:none; }
  .preview {
    position:fixed;
    left:50%; top:50%;
    width:min(92vw, 420px);
    min-width:0;
    --px:-50% !important;
    --py:-50% !important;
    transform:translate3d(-50%, -46%, 100px) scale(.9) !important;
    z-index:100;
  }
  .project.is-preview .preview,
  .project.is-pinned .preview { transform:translate3d(-50%, -50%, 120px) scale(1) !important; }
  .app.has-pinned::after {
    content:"";
    position:fixed; inset:0;
    z-index:70;
    background:rgba(0,0,0,.56);
    backdrop-filter:blur(3px);
  }
  .project.is-pinned { z-index:90; }
  .controls-hint { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}