/* spylord.css */
*{margin:0;padding:0;box-sizing:border-box}
body{
  min-height:100vh;background:#08080f;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;
}
body::before{
  content:'';position:fixed;inset:0;
  background:
    radial-gradient(ellipse 35% 25% at 15% 25%, rgba(80,40,120,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 25% 35% at 82% 18%, rgba(30,60,140,0.10) 0%, transparent 65%),
    radial-gradient(ellipse 40% 20% at 70% 75%, rgba(120,40,80,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 20% 30% at 40% 65%, rgba(40,80,120,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 55% 40%, rgba(60,30,100,0.05) 0%, transparent 75%),
    radial-gradient(ellipse 15% 15% at 25% 80%, rgba(100,60,140,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 18% 12% at 90% 55%, rgba(40,70,130,0.08) 0%, transparent 55%),
    radial-gradient(circle 8% at 12% 45%, rgba(140,80,60,0.06) 0%, transparent 100%),
    radial-gradient(circle 6% at 65% 15%, rgba(60,100,140,0.07) 0%, transparent 100%);
  pointer-events:none;animation:drift 30s ease-in-out infinite alternate;
}
@keyframes drift{0%{transform:scale(1) translate(0,0) rotate(0deg)}100%{transform:scale(1.1) translate(-3%,2%) rotate(1deg)}}
.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,#08080f 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 a{color:inherit;text-decoration:none;transition:color 0.3s ease}
.domains a:hover{color:#ffffff;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,0.5)}
.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))}
}