/* datalord.css */
*{margin:0;padding:0;box-sizing:border-box}
body{
  min-height:100vh;background:#000000;color:#ffffff;
  font-family:'Bodoni Moda',serif;display:flex;flex-direction:column;
  align-items:center;justify-content:center;overflow-x:hidden;
  position:relative;padding:1.5rem 1rem;
}


.container{display:flex;flex-direction:column;align-items:center;gap:0.4rem;z-index:1;width:100%;max-width:600px}
.globe{width:200px;height:200px;background:radial-gradient(circle,#000000 45%,transparent 70%);border-radius:50%;filter:drop-shadow(0 0 40px rgba(85,102,170,0.15));animation:float 6s ease-in-out infinite, atmosGlow 8s ease-in-out infinite}
@keyframes float{0%{transform:translateY(0) scale(1)}25%{transform:translateY(-4px) scale(1.03)}50%{transform:translateY(-8px) scale(1)}75%{transform:translateY(-4px) scale(0.97)}100%{transform:translateY(0) scale(1)}}
h1{font-style:italic;font-weight:400;font-size:1.3rem;letter-spacing:0.15em}
h1 .silver{background:linear-gradient(135deg,#a8a8b8 0%,#c0c0cc 50%,#b0b0c0 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
h1 .gold{background:linear-gradient(135deg,#c9a84c 0%,#d4b45a 50%,#b8973f 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.divider{width:160px;height:1px;background:linear-gradient(90deg,transparent,rgba(85,102,170,0.3),transparent)}
.projects{display:flex;flex-direction:column;width:100%;gap:0}
.row{display:flex;align-items:flex-start;padding:0.25rem 0;
  width:100%}
.name{font-style:normal;font-weight:500;font-size:0.9rem;letter-spacing:0.12em;width:50%;text-align:right;
  padding-right:1rem;flex-shrink:0;transition:letter-spacing 0.4s ease;line-height:1.2}
.row:hover .name{letter-spacing:0.22em}
.dot-line{display:none}
.domains{font-size:0.65rem;font-style:normal;letter-spacing:0.12em;color:#ffffff;
  width:50%;text-align:left;line-height:1.6;margin-top:0}


.domains .sep{display:block}
.row:nth-child(1) .name{color:#ff7070}
.row:nth-child(2) .name{color:#ffd070}
.row:nth-child(3) .name{color:#80ff80}
.row:nth-child(4) .name{color:#70a0ff}
.row:nth-child(5) .name{color:#c080ff}
.row:nth-child(6) .name{color:#ff80c0}
.row:nth-child(7) .name{color:#ffb870}
.row:nth-child(8) .name{color:#70e0e0}
.row:nth-child(9) .name{color:#ffa0a0}
.row:nth-child(10) .name{color:#a0d0ff}
.row:nth-child(11) .name{color:#b0ffb0}
.footer{position:fixed;bottom:1.5rem;font-size:0.7rem;letter-spacing:0.3em;opacity:0.2;font-style:italic;z-index:1}
#particles-js{position:fixed;inset:0;z-index:0}
.jpdc-globe{width:60px;height:60px;margin-top:0.5rem;opacity:1;
  filter:drop-shadow(0 0 20px rgba(85,102,170,0.1));transition:opacity 0.3s ease}
.jpdc-globe:hover{opacity:1}
@media (min-width:768px){
  .container{max-width:1000px}
  .globe{width:320px;height:320px}
  h1{font-size:2.2rem}
  .divider{width:280px}
  .name{font-size:1.5rem}
  .domains{font-size:1.1rem}
  .row{padding:0.5rem 0}
  .footer{font-size:1rem}
  .jpdc-globe{width:90px;height:90px}
}
.row:nth-child(12) .name{color:#e0a0ff}
.row:nth-child(13) .name{color:#80ffd0}
.row:nth-child(14) .name{color:#ffc8e0}
.row:nth-child(15) .name{color:#d4a574}
@keyframes rowDrift{
  0%{transform:translate(0,0) scale(1);opacity:var(--base-op)}
  25%{transform:translate(var(--dx1),var(--dy1)) scale(var(--s1));opacity:calc(var(--base-op) + 0.05)}
  50%{transform:translate(var(--dx2),var(--dy2)) scale(1);opacity:var(--base-op)}
  75%{transform:translate(var(--dx3),var(--dy3)) scale(var(--s2));opacity:calc(var(--base-op) - 0.03)}
  100%{transform:translate(0,0) scale(1);opacity:var(--base-op)}
}
.row{animation:rowDrift var(--drift-dur) ease-in-out var(--drift-delay) infinite;
  --base-op:1;--dx1:0px;--dy1:0px;--dx2:0px;--dy2:0px;--dx3:0px;--dy3:0px;--s1:1;--s2:1;--drift-dur:8s;--drift-delay:0s}
.row .name{transition:letter-spacing 0.4s ease,text-shadow 0.4s ease}
.row:hover .name{text-shadow:0 0 12px currentColor}
@keyframes globeGlow{
  0%{filter:drop-shadow(0 0 20px rgba(85,102,170,0.1))}30%{filter:drop-shadow(0 0 30px rgba(200,168,76,0.7)) drop-shadow(0 0 60px rgba(168,168,184,0.4))}100%{filter:drop-shadow(0 0 20px rgba(85,102,170,0.1))}
}
@keyframes globePulse{
  0%{transform:scale(1)}20%{transform:scale(1.3)}40%{transform:scale(0.9)}60%{transform:scale(1.15)}100%{transform:scale(1)}
}
@keyframes globeSpin{
  0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}
}
.subheading{font-size:0.9rem;letter-spacing:0.12em;color:#ffffff;opacity:0.85;margin:0.2rem 0}
@media (min-width:768px){.subheading{font-size:1.5rem}}
@keyframes globeShake{
  0%,100%{transform:translateX(0)}10%{transform:translateX(-8px)}20%{transform:translateX(8px)}30%{transform:translateX(-6px)}40%{transform:translateX(6px)}50%{transform:translateX(-4px)}60%{transform:translateX(4px)}70%{transform:translateX(-2px)}80%{transform:translateX(2px)}
}
@keyframes globeWobble{
  0%{transform:rotate(0deg)}15%{transform:rotate(12deg)}30%{transform:rotate(-10deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-5deg)}75%{transform:rotate(3deg)}100%{transform:rotate(0deg)}
}
@keyframes globeFlip{
  0%{transform:perspective(400px) rotateY(0)}40%{transform:perspective(400px) rotateY(180deg)}70%{transform:perspective(400px) rotateY(300deg)}100%{transform:perspective(400px) rotateY(360deg)}
}
@keyframes globeRubber{
  0%{transform:scale(1,1)}30%{transform:scale(1.25,0.75)}40%{transform:scale(0.75,1.25)}50%{transform:scale(1.15,0.85)}65%{transform:scale(0.95,1.05)}75%{transform:scale(1.05,0.95)}100%{transform:scale(1,1)}
}
@keyframes globeColourGlow{
  0%{filter:drop-shadow(0 0 0 transparent)}14%{filter:drop-shadow(0 0 25px var(--glow-c1))}28%{filter:drop-shadow(0 0 20px var(--glow-c2))}42%{filter:drop-shadow(0 0 25px var(--glow-c3))}57%{filter:drop-shadow(0 0 20px var(--glow-c4))}71%{filter:drop-shadow(0 0 25px var(--glow-c5))}85%{filter:drop-shadow(0 0 20px var(--glow-c6))}100%{filter:drop-shadow(0 0 0 transparent)}
}
.container{pointer-events:none}
.container a,.container img,.container h1,.container .name,.container .domains{pointer-events:auto}
.jpdc-globe{pointer-events:auto}
.footer{pointer-events:none}
.globe,.subheading,h1,.divider{opacity:0;transform:translateY(10px);transition:opacity 0.6s ease,transform 0.6s ease}
.globe.show,.subheading.show,h1.show,.divider.show{opacity:1;transform:translateY(0)}
.globe.show{transform:translateY(0) scale(1);animation:float 6s ease-in-out infinite, atmosGlow 8s ease-in-out infinite}

@keyframes revealSweep{
  0%{clip-path:inset(0 0 100% 0);opacity:0}
  10%{opacity:1}
  100%{clip-path:inset(0 0 0% 0);opacity:1}
}
.projects{opacity:0}
.projects.revealed{animation:revealSweep 10s ease forwards}
@keyframes atmosGlow{
  0%{filter:drop-shadow(0 0 8px rgba(85,102,170,0.15))}
  50%{filter:drop-shadow(0 0 20px rgba(85,102,170,0.35)) drop-shadow(0 0 40px rgba(85,102,170,0.12))}
  100%{filter:drop-shadow(0 0 8px rgba(85,102,170,0.15))}
}

.domains a{background:linear-gradient(135deg,#c9a84c 0%,#d4b45a 50%,#b8973f 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  text-decoration:none;transition:filter 0.3s ease}
.domains a:hover{filter:brightness(1.3);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(201,168,76,0.5)}
.coming-soon{background:linear-gradient(135deg,#a8a8b8 0%,#c0c0cc 50%,#b0b0c0 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  cursor:default}

.row:nth-child(16) .name{color:#70ffa0}
.row:nth-child(17) .name{color:#ffa070}