/* =========================================================
   PORTFOLIO — "PROJECT VAULT"
   Holographic 3D project space. Scoped entirely to .vault —
   does not touch Hero or Services.
   ========================================================= */

.vault{
  position:relative;
  overflow:hidden;
  padding:200px 6vw 160px;
  background:
    radial-gradient(circle at 18% 12%, rgba(98,246,173,.06), transparent 45%),
    radial-gradient(circle at 84% 82%, rgba(125,159,255,.05), transparent 50%),
    #030403;
}

.vault-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }

.vault-glow{ position:absolute; border-radius:50%; filter:blur(130px); opacity:.55; }
.vault-glow-a{
  top:6%; left:-6%; width:40vw; height:40vw;
  background:radial-gradient(circle, rgba(98,246,173,.2), transparent 70%);
  animation:vaultGlowDrift 24s ease-in-out infinite;
}
.vault-glow-b{
  bottom:0%; right:-8%; width:34vw; height:34vw;
  background:radial-gradient(circle, rgba(140,120,255,.16), transparent 70%);
  animation:vaultGlowDrift 30s ease-in-out infinite reverse;
}
@keyframes vaultGlowDrift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(3%,-4%) scale(1.1); }
}

/* ---------- Header ---------- */

.vault-head{ position:relative; z-index:2; max-width:900px; }
.vault-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(32px,4.3vw,64px);
  line-height:1.06;
  letter-spacing:-.015em;
  color:var(--fg);
  margin-top:22px;
}
.vault-title em{ font-style:normal; color:var(--accent); }
.vault-note{
  font-family:var(--font-body);
  color:var(--fg-dim);
  font-size:clamp(14px,1.1vw,16px);
  line-height:1.7;
  max-width:480px;
  margin-top:22px;
}

.vault-hint{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:10px;
  margin-top:56px;
  font-family:var(--font-body);
  font-size:12px; letter-spacing:.02em;
  color:rgba(255,255,255,.32);
}
.vault-hint i{
  display:block; width:26px; height:1px;
  background:rgba(125,255,179,.5);
}

/* ---------- Stage ---------- */

.vault-stage{
  position:relative;
  z-index:2;
  height:clamp(640px,66vw,960px);
  margin-top:80px;
  perspective:1900px;
}

.vault-scene{
  position:absolute;
  inset:0;
  transform-style:preserve-3d;
  transform:rotateY(calc(var(--mx,0) * 9deg)) rotateX(calc(var(--my,0) * -7deg));
  will-change:transform;
}

/* ---------- Central core ---------- */

.vault-core{
  position:absolute;
  top:50%; left:50%;
  width:190px; height:190px;
  transform:translate(-50%,-50%);
  transform-style:preserve-3d;
  opacity:0;
  transition:opacity 1.1s ease;
}
.vault-core.vault-in{ opacity:1; }

.vault-core-glow{
  position:absolute; inset:-70px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(98,246,173,.22), transparent 68%);
  filter:blur(10px);
  animation:vaultCorePulse 5s ease-in-out infinite;
}
@keyframes vaultCorePulse{
  0%,100%{ opacity:.65; transform:scale(1); }
  50%{ opacity:1; transform:scale(1.08); }
}

.vault-core-ring{
  position:absolute; inset:0;
  border:1px solid rgba(125,255,179,.28);
  border-radius:50%;
}
.ring-1{ transform:rotateX(72deg); animation:vaultRingSpin 16s linear infinite; }
.ring-2{ inset:-34px; transform:rotateX(72deg) rotateZ(58deg); border-color:rgba(125,159,255,.22); animation:vaultRingSpin 22s linear infinite reverse; }
.ring-3{ inset:-62px; transform:rotateY(74deg); border-color:rgba(125,255,179,.16); animation:vaultRingSpin 30s linear infinite; }
@keyframes vaultRingSpin{ to{ transform:rotateX(72deg) rotateZ(360deg); } }
.ring-2{ animation-name:vaultRingSpin2; }
@keyframes vaultRingSpin2{ to{ transform:rotateX(72deg) rotateZ(-300deg); } }
.ring-3{ animation-name:vaultRingSpin3; }
@keyframes vaultRingSpin3{ to{ transform:rotateY(74deg) rotateZ(360deg); } }

.vault-core-cube{
  position:absolute;
  top:50%; left:50%;
  width:76px; height:76px;
  margin:-38px 0 0 -38px;
  transform-style:preserve-3d;
  animation:vaultCubeSpin 26s linear infinite;
}
@keyframes vaultCubeSpin{ to{ transform:rotateX(360deg) rotateY(360deg); } }
.vault-core-cube i{
  position:absolute; inset:0;
  border:1px solid rgba(125,255,179,.4);
  background:linear-gradient(155deg, rgba(125,255,179,.1), rgba(125,255,179,.02));
  backdrop-filter:blur(3px);
}
.vault-core-cube .f-front{ transform:translateZ(38px); }
.vault-core-cube .f-back{ transform:rotateY(180deg) translateZ(38px); }
.vault-core-cube .f-left{ transform:rotateY(-90deg) translateZ(38px); }
.vault-core-cube .f-right{ transform:rotateY(90deg) translateZ(38px); }
.vault-core-cube .f-top{ transform:rotateX(90deg) translateZ(38px); }
.vault-core-cube .f-bottom{ transform:rotateX(-90deg) translateZ(38px); }

.vault-core-caption{
  position:absolute; top:100%; left:50%;
  transform:translate(-50%,26px);
  white-space:nowrap;
  font-family:var(--font-body);
  font-size:9px;
  letter-spacing:.06em;
  color:rgba(255,255,255,.3);
}

/* ---------- Nodes ---------- */

.vault-node{
  position:absolute;
  top:var(--ny); left:var(--nx);
  transform:
    translate(-50%,-50%)
    translate3d(calc(var(--mx,0) * var(--nd,1) * 30px), calc(var(--my,0) * var(--nd,1) * 30px), var(--nz,0px));
  transform-style:preserve-3d;
  text-decoration:none;
  outline:none;
}

.vault-node-lift{
  display:block;
  transform-style:preserve-3d;
  transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.vault-node:hover .vault-node-lift,
.vault-node:focus-within .vault-node-lift,
.vault-node.is-active .vault-node-lift{
  transform:translateZ(150px) scale(1.14);
}

.vault-node-float{
  display:block;
  animation:vaultFloat var(--fdur,7s) ease-in-out var(--fdelay,0s) infinite;
}
@keyframes vaultFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-14px); }
}

.vault-node[data-hue="152"]{ --hue:152; }
.vault-node[data-hue="262"]{ --hue:262; }
.vault-node[data-hue="195"]{ --hue:195; }
.vault-node[data-hue="350"]{ --hue:350; }
.vault-node[data-hue="35"]{ --hue:35; }
.vault-node[data-hue="215"]{ --hue:215; }
.vault-node[data-hue="165"]{ --hue:165; }
.vault-node[data-hue="300"]{ --hue:300; }

.vault-orb{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:88px; height:88px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 32% 28%, hsl(var(--hue,152) 85% 62% / .22), transparent 62%),
    rgba(255,255,255,.03);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 20px 45px rgba(0,0,0,.35);
  opacity:0;
  transform:scale(.55);
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1),
    transform .7s cubic-bezier(.16,1,.3,1),
    border-color .5s ease, box-shadow .5s ease;
}
.vault-node.vault-in .vault-orb{ opacity:1; transform:scale(1); }

.vault-node:nth-of-type(1) .vault-orb{ transition-delay:0s; }
.vault-node:nth-of-type(2) .vault-orb{ transition-delay:.08s; }
.vault-node:nth-of-type(3) .vault-orb{ transition-delay:.16s; }
.vault-node:nth-of-type(4) .vault-orb{ transition-delay:.24s; }
.vault-node:nth-of-type(5) .vault-orb{ transition-delay:.32s; }
.vault-node:nth-of-type(6) .vault-orb{ transition-delay:.4s; }
.vault-node:nth-of-type(7) .vault-orb{ transition-delay:.48s; }
.vault-node:nth-of-type(8) .vault-orb{ transition-delay:.56s; }
.vault-node--s .vault-orb{ width:66px; height:66px; }
.vault-node--m .vault-orb{ width:88px; height:88px; }
.vault-node--l .vault-orb{ width:114px; height:114px; }

.vault-node:hover .vault-orb,
.vault-node:focus-within .vault-orb,
.vault-node.is-active .vault-orb{
  border-color:hsl(var(--hue,152) 85% 65% / .55);
  box-shadow:0 25px 60px rgba(0,0,0,.4), 0 0 40px hsl(var(--hue,152) 85% 60% / .28);
}

.vault-orb-ring{
  position:absolute; inset:-9px;
  border-radius:50%;
  border:1px solid hsl(var(--hue,152) 85% 65% / .3);
  animation:vaultOrbPulse 3.4s ease-in-out infinite;
}
@keyframes vaultOrbPulse{
  0%,100%{ transform:scale(1); opacity:.5; }
  50%{ transform:scale(1.14); opacity:0; }
}

.vault-orb-core{
  width:9px; height:9px;
  border-radius:50%;
  background:hsl(var(--hue,152) 90% 68%);
  box-shadow:0 0 14px hsl(var(--hue,152) 90% 62% / .8);
}

.vault-orb-index{
  position:absolute; top:9px; left:12px;
  font:8px/1 var(--font-code);
  color:rgba(255,255,255,.4);
  letter-spacing:.05em;
}

.vault-node-label{
  display:block;
  margin-top:14px;
  text-align:center;
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  color:rgba(255,255,255,.68);
  white-space:nowrap;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .5s ease, transform .5s ease;
}
.vault-node.vault-in .vault-node-label{ opacity:1; transform:translateY(0); }

/* ---------- Glass detail panel ---------- */

.vault-panel{
  position:absolute;
  width:320px;
  z-index:5;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(165deg, rgba(18,22,20,.82), rgba(8,10,9,.88));
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  box-shadow:0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(125,255,179,.05);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(14px) scale(.96);
  filter:blur(6px);
  transition:
    opacity .5s cubic-bezier(.16,1,.3,1),
    transform .5s cubic-bezier(.16,1,.3,1),
    filter .5s ease,
    visibility 0s linear .5s;
}

.vault-node:hover .vault-panel,
.vault-node:focus-within .vault-panel,
.vault-node.is-active .vault-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  filter:blur(0);
  transition:
    opacity .5s cubic-bezier(.16,1,.3,1),
    transform .5s cubic-bezier(.16,1,.3,1),
    filter .5s ease,
    visibility 0s linear 0s;
}

.vault-node[data-panel^="bottom"] .vault-panel{ top:100%; margin-top:22px; }
.vault-node[data-panel^="top"] .vault-panel{ bottom:100%; margin-bottom:22px; }
.vault-node[data-panel$="left"] .vault-panel{ left:0; }
.vault-node[data-panel$="right"] .vault-panel{ right:0; }
.vault-node[data-panel$="center"] .vault-panel{ left:50%; margin-left:-160px; }

.vault-panel-preview{
  position:relative;
  height:150px;
  margin:14px 14px 0;
  border-radius:13px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:#07090a;
}

.vault-panel-dots{
  position:absolute; top:9px; left:10px; z-index:2;
  display:flex; gap:4px;
}
.vault-panel-dots i{
  width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.2);
}

.vault-panel-live{
  position:absolute; top:8px; right:10px; z-index:2;
  font-family:var(--font-body);
  font-size:8px;
  letter-spacing:.03em;
  color:hsl(var(--hue,152) 85% 68%);
}

.vault-panel-body{ padding:18px 18px 20px; }
.vault-panel-meta{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.vault-panel-cat{
  font-family:var(--font-body);
  font-size:9px;
  letter-spacing:.02em;
  color:hsl(var(--hue,152) 85% 68%);
}
.vault-panel-year{
  font:8px/1 var(--font-code);
  color:rgba(255,255,255,.32);
}
.vault-panel-body h3{
  font-family:var(--font-body);
  font-size:17px;
  font-weight:600;
  color:var(--fg);
  margin-bottom:8px;
}
.vault-panel-body p{
  font-family:var(--font-body);
  font-size:12.5px;
  line-height:1.6;
  color:var(--fg-dim);
  margin-bottom:14px;
}
.vault-panel-tags{
  display:flex; flex-wrap:wrap; gap:6px;
}
.vault-panel-tags span{
  padding:4px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.1);
  font:9px/1 var(--font-code);
  letter-spacing:.02em;
  color:rgba(255,255,255,.55);
}

/* ---------- Mini live-preview mocks ---------- */

.vault-mock{ position:relative; width:100%; height:100%; }

.vault-mock--ecom{
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px) 0 0/100% 18px;
}
.vault-mock--ecom::before,
.vault-mock--ecom::after{
  content:''; position:absolute; top:20%; width:27%; height:52%;
  border-radius:6px; border:1px solid hsl(var(--hue) 80% 62% / .28);
  background:hsl(var(--hue) 80% 55% / .1);
}
.vault-mock--ecom::before{ left:9%; }
.vault-mock--ecom::after{ left:39%; }

.vault-mock--ai{
  display:flex; align-items:center; justify-content:center;
}
.vault-mock--ai::before{
  content:''; width:52px; height:52px; border-radius:50%;
  border:1px solid hsl(var(--hue) 80% 65% / .4);
  box-shadow:0 0 30px hsl(var(--hue) 80% 60% / .3), inset 0 0 20px hsl(var(--hue) 80% 60% / .2);
  animation:vaultOrbPulse 2.6s ease-in-out infinite;
}
.vault-mock--ai::after{
  content:''; position:absolute; top:50%; left:50%; width:10px; height:10px;
  margin:-5px 0 0 -5px; border-radius:50%;
  background:hsl(var(--hue) 90% 68%);
}

.vault-mock--saas{
  display:flex; align-items:flex-end; gap:8px;
  padding:0 22px 22px;
}
.vault-mock--saas::before,
.vault-mock--saas::after{
  content:''; flex:1; border-radius:4px 4px 0 0;
  background:linear-gradient(180deg, hsl(var(--hue) 80% 60% / .35), hsl(var(--hue) 80% 60% / .08));
}
.vault-mock--saas::before{ height:44%; }
.vault-mock--saas::after{ height:74%; }

.vault-mock--medical{
  display:flex; align-items:center; justify-content:center;
}
.vault-mock--medical::before{
  content:''; width:34px; height:8px; border-radius:3px;
  background:hsl(var(--hue) 80% 65% / .55);
  box-shadow:0 0 0 100px transparent, -13px 0 0 -3px transparent;
}
.vault-mock--medical{
  background:
    linear-gradient(hsl(var(--hue) 80% 65% / .5), hsl(var(--hue) 80% 65% / .5)) center / 34px 8px no-repeat,
    linear-gradient(hsl(var(--hue) 80% 65% / .5), hsl(var(--hue) 80% 65% / .5)) center / 8px 34px no-repeat;
}

.vault-mock--marketplace{
  display:flex; align-items:center; justify-content:center; gap:-10px;
}
.vault-mock--marketplace::before,
.vault-mock--marketplace::after{
  content:''; width:38px; height:38px; border-radius:50%;
  border:1px solid hsl(var(--hue) 80% 65% / .4);
  background:hsl(var(--hue) 80% 55% / .14);
}
.vault-mock--marketplace::before{ margin-right:-14px; }

.vault-mock--corporate{
  padding:24px 22px;
  display:flex; flex-direction:column; gap:9px;
}
.vault-mock--corporate::before{
  content:''; width:26px; height:26px; border-radius:6px;
  background:hsl(var(--hue) 80% 60% / .3);
  margin-bottom:4px;
}
.vault-mock--corporate{
  background:
    linear-gradient(hsl(var(--hue) 80% 60% / .3), hsl(var(--hue) 80% 60% / .3)) 22px 24px/26px 26px no-repeat,
    linear-gradient(rgba(255,255,255,.14), rgba(255,255,255,.14)) 22px 60px/70% 6px no-repeat,
    linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.08)) 22px 76px/50% 6px no-repeat;
}

.vault-mock--booking{
  display:grid; grid-template-columns:repeat(6,1fr); gap:6px;
  padding:24px 26px;
}
.vault-mock--booking div{
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,.12);
}

.vault-mock--mobile{
  display:flex; align-items:center; justify-content:center;
}
.vault-mock--mobile::before{
  content:''; width:54px; height:112px; border-radius:14px;
  border:2px solid hsl(var(--hue) 80% 65% / .4);
  background:hsl(var(--hue) 80% 55% / .08);
}
.vault-mock--mobile::after{
  content:''; position:absolute; width:20px; height:3px; border-radius:2px;
  background:hsl(var(--hue) 80% 70% / .5);
  transform:translateY(46px);
}

/* ---------- Responsive ---------- */

@media (max-width:1240px){
  .vault-stage{ height:clamp(600px,80vw,860px); }
}

@media (max-width:860px){
  .vault{ padding:130px 6vw 100px; overflow:visible; }
  .vault-stage{
    height:auto;
    perspective:none;
    margin-top:60px;
  }
  .vault-scene{
    position:relative;
    inset:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:64px;
    transform:none !important;
  }
  .vault-core{ position:relative; top:auto; left:auto; transform:none; margin-bottom:10px; }
  .vault-core-caption{ position:static; transform:none; display:block; margin-top:26px; }

  .vault-node{
    position:relative;
    top:auto; left:auto;
    transform:none !important;
    align-self:stretch;
  }
  .vault-node:nth-child(odd){ margin-right:14%; }
  .vault-node:nth-child(even){ margin-left:14%; }
  .vault-node-lift{ display:flex; flex-direction:column; align-items:center; transform:none !important; }
  .vault-node-float{ animation:none; display:flex; flex-direction:column; align-items:center; }
  .vault-node-label{ opacity:1; transform:none; }

  .vault-panel{
    position:relative;
    top:auto !important; bottom:auto !important; left:auto !important; right:auto !important;
    margin:18px 0 0 !important;
    width:100%;
    max-width:340px;
    max-height:0;
    opacity:1; visibility:visible; pointer-events:auto;
    transform:none; filter:none;
    overflow:hidden;
    transition:max-height .5s ease, margin .5s ease;
  }
  .vault-node.is-active .vault-panel,
  .vault-node:focus-within .vault-panel{
    max-height:640px;
  }
}

@media (prefers-reduced-motion: reduce){
  .vault-glow,
  .vault-core-glow,
  .vault-core-ring,
  .vault-core-cube,
  .vault-orb-ring,
  .vault-node-float,
  .vault-mock--ai::before{
    animation:none !important;
  }
  .vault-scene{ transform:none !important; }
}