/* ═══════════════════════════════════════════════════
   FRANK AIELLO — PORTFOLIO
   Space Theme · Gold Gloss · Glass Panels · Floating Platforms
   ═══════════════════════════════════════════════════ */
:root {
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --space-black: #03050a;
  --space-deep: #0a0d1a;
  --accent: #A383E6;
  --accent-glow: #C4A8FF;
  --accent-deep: #3A2A56;
  --cyan: #00D4FF;
  --cyan-glow: #66E8FF;
  --magenta: #FF2D95;
  --gold-1: #FFFDE7;
  --gold-2: #FFD500;
  --gold-3: #f5a14c;
  --gold-4: #FFC107;
  --gold-stroke: #FFB040;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
}

/* ── Reset ────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--space-black)}
body{
  font-family:var(--font-body);
  background:var(--space-black);
  color:#e5e5e5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  overflow-x:hidden;
  position:relative;
}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading)}

/* ── Space Canvas BG ───────────────────────────────── */
#space-canvas{
  position:fixed;inset:0;z-index:0;pointer-events:none;
}

/* ── Stars Layer ───────────────────────────────────── */
.stars-layer{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(2px 2px at 10% 8%, rgba(255,255,255,.95), transparent),
    radial-gradient(1.5px 1.5px at 20% 25%, rgba(255,255,255,.8), transparent),
    radial-gradient(2px 2px at 35% 12%, rgba(255,255,255,.9), transparent),
    radial-gradient(1px 1px at 50% 30%, rgba(200,200,255,.7), transparent),
    radial-gradient(2.5px 2.5px at 65% 18%, rgba(255,255,255,.85), transparent),
    radial-gradient(3px 3px at 80% 22%, rgba(180,220,255,.9), transparent),
    radial-gradient(1.5px 1.5px at 90% 35%, rgba(255,255,255,.8), transparent),
    radial-gradient(2px 2px at 8% 55%, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 25% 48%, rgba(200,200,255,.8), transparent),
    radial-gradient(2.5px 2.5px at 42% 60%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.5px 1.5px at 58% 52%, rgba(255,220,255,.75), transparent),
    radial-gradient(2px 2px at 72% 68%, rgba(255,255,255,.8), transparent),
    radial-gradient(3px 3px at 88% 45%, rgba(200,230,255,.85), transparent),
    radial-gradient(1px 1px at 15% 78%, rgba(255,255,255,.7), transparent),
    radial-gradient(2px 2px at 33% 85%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.5px 1.5px at 55% 75%, rgba(200,200,255,.75), transparent),
    radial-gradient(2px 2px at 68% 88%, rgba(255,255,255,.85), transparent),
    radial-gradient(2.5px 2.5px at 82% 80%, rgba(220,200,255,.8), transparent),
    radial-gradient(1.5px 1.5px at 95% 70%, rgba(255,255,255,.7), transparent),
    radial-gradient(2px 2px at 45% 92%, rgba(255,255,255,.75), transparent);
}

/* ── Nebula Blobs ──────────────────────────────────── */
.nebula{
  position:fixed;border-radius:50%;filter:blur(140px);
  z-index:0;pointer-events:none;opacity:.55;
}
.nebula-1{
  width:800px;height:800px;
  background:radial-gradient(circle,rgba(163,131,230,.35) 0%,transparent 70%);
  top:-250px;left:-150px;
  animation:nebula-drift-1 25s ease-in-out infinite;
}
.nebula-2{
  width:700px;height:700px;
  background:radial-gradient(circle,rgba(0,212,255,.25) 0%,transparent 70%);
  bottom:-150px;right:-100px;
  animation:nebula-drift-2 20s ease-in-out infinite;
}
.nebula-3{
  width:600px;height:600px;
  background:radial-gradient(circle,rgba(255,45,149,.18) 0%,transparent 70%);
  top:30%;left:50%;
  animation:nebula-drift-3 30s ease-in-out infinite;
}
@keyframes nebula-drift-1{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(60px,-40px) scale(1.1)}
  66%{transform:translate(-30px,50px) scale(.9)}
}
@keyframes nebula-drift-2{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(-50px,-30px) scale(1.15)}
  66%{transform:translate(40px,20px) scale(.85)}
}
@keyframes nebula-drift-3{
  0%,100%{transform:translate(0,0) scale(1);opacity:.35}
  50%{transform:translate(-40px,60px) scale(1.2);opacity:.5}
}

/* ── Floating Platform ─────────────────────────────── */
.platform-section{
  position:relative;z-index:10;
  padding:120px 40px;
  display:flex;align-items:center;justify-content:center;
  min-height:100vh;
}
.platform{
  position:relative;
  max-width:900px;width:100%;
  padding:2px;  /* border thickness */
  border-radius:32px;
  overflow:hidden;
  background:none;
  box-shadow:
    0 40px 120px rgba(0,0,0,.6),
    0 0 80px rgba(163,131,230,.08);
  transition:box-shadow .5s var(--ease);
}
/* Rotating ring — BeagleBlocks button pattern */
.platform::before{
  content:"";position:absolute;inset:-200%;z-index:0;
  background:conic-gradient(from 0deg,transparent 5%,var(--accent) 20%,var(--cyan) 45%,var(--accent) 70%,transparent 95%);
  animation:ring-rotate 8s linear infinite;
}
/* Glass surface — covers ring center */
.platform::after{
  content:"";position:absolute;inset:2px;border-radius:30px;z-index:1;
  background:
    radial-gradient(ellipse at 25% 0%,rgba(163,131,230,.13) 0%,transparent 52%),
    radial-gradient(ellipse at 80% 100%,rgba(0,212,255,.07) 0%,transparent 52%),
    linear-gradient(135deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.01) 38%,rgba(163,131,230,.05) 65%,rgba(0,212,255,.02) 100%),
    rgba(3,5,10,.93);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(255,255,255,.04),inset 1px 0 rgba(255,255,255,.06),inset -1px 0 rgba(255,255,255,.06);
}
/* Content above glass */
.platform-inner{
  position:relative;z-index:2;
  padding:58px 48px;  /* 60-2, 50-2 */
}
.platform>*:not(.platform-inner){position:relative;z-index:2}
.platform:hover{
  box-shadow:
    0 50px 140px rgba(0,0,0,.7),
    0 0 120px rgba(163,131,230,.14),
    0 0 40px rgba(0,212,255,.06);
}
.platform:hover::after{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -1px 0 rgba(255,255,255,.06),inset 1px 0 rgba(255,255,255,.08),inset -1px 0 rgba(255,255,255,.08);
}



/* ── Content Centering ─────────────────────────────── */
.platform-inner{text-align:center}
.platform .project-grid{text-align:left}
.platform .platform-subtitle{margin-left:auto;margin-right:auto}

@keyframes ring-rotate{to{transform:rotate(360deg)}}

/* ── Gold Gloss ────────────────────────────────────── */
.gold-gloss{
  background:linear-gradient(to bottom,
    var(--gold-1) 0%,var(--gold-2) 54%,
    var(--gold-3) 56%,var(--gold-4) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1.2px var(--gold-stroke);
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.7));
  padding-bottom:6px;
}
.gold-gloss-light{
  background:linear-gradient(to bottom,
    var(--gold-1) 0%,var(--gold-2) 45%,
    var(--gold-3) 55%,var(--gold-4) 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:.8px var(--gold-stroke);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
.cyan-gloss{
  background:linear-gradient(to bottom,
    #E0F7FA 0%,#4DD0E1 54%,
    #00838F 56%,#26C6DA 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:.8px #0097A7;
  filter:drop-shadow(0 2px 6px rgba(0,180,220,.4));
}

/* ── Platform Typography ───────────────────────────── */
.platform-badge{
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 16px 5px 8px;
  border-radius:99px;
  border:1px solid rgba(163,131,230,.2);
  background:rgba(163,131,230,.06);
  margin-bottom:20px;
}
.platform-badge .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 8px var(--cyan-glow);
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{opacity:1;box-shadow:0 0 8px var(--cyan-glow)}
  50%{opacity:.4;box-shadow:0 0 3px var(--cyan-glow)}
}
.platform-badge span{
  font-size:10px;font-weight:700;color:var(--cyan);
  font-family:var(--font-heading);
  letter-spacing:.15em;text-transform:uppercase;
}
.platform-title{
  font-family:var(--font-heading);
  font-size:clamp(2.2rem,4vw,3.5rem);
  font-weight:800;letter-spacing:-.03em;
  line-height:1.12;margin-bottom:16px;
}
.platform-subtitle{
  font-size:1.1rem;color:#9ca3af;line-height:1.65;
  max-width:600px;margin-bottom:32px;
}

/* ── Buttons ───────────────────────────────────────── */
.btn-primary{
  position:relative;display:inline-flex;overflow:hidden;
  height:52px;border-radius:99px;padding:1px;
  border:none;background:none;cursor:pointer;
  text-decoration:none;
  box-shadow:0 8px 30px rgba(163,131,230,.25);
  transition:box-shadow .3s,transform .3s;
}
.btn-primary:hover{
  box-shadow:0 12px 40px rgba(163,131,230,.45);
  transform:translateY(-2px);
}
.btn-primary::before{
  content:"";position:absolute;inset:-200%;
  background:conic-gradient(from 90deg,var(--accent),var(--cyan),var(--accent));
  animation:btn-spin 3s linear infinite;
}
@keyframes btn-spin{to{transform:rotate(360deg)}}
.btn-primary span{
  position:relative;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;
  width:100%;height:100%;border-radius:99px;
  background:var(--space-black);color:#fff;
  font-size:15px;font-weight:700;font-family:var(--font-heading);
  z-index:1;padding:0 32px;
}
.btn-outline{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;height:48px;padding:0 28px;border-radius:99px;
  border:1px solid rgba(255,255,255,.12);
  color:#ccc;font-size:14px;font-weight:600;
  font-family:var(--font-heading);text-decoration:none;
  transition:border-color .3s,color .3s,background .3s;
}
.btn-outline:hover{
  border-color:var(--accent);color:#fff;
  background:rgba(163,131,230,.06);
}

/* ── Project Cards ─────────────────────────────────── */
.project-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:20px;margin-top:24px;
}
.project-card{
  position:relative;overflow:hidden;
  border-radius:20px;padding:28px;
  /* Glass card */
  background:
    linear-gradient(135deg,rgba(255,255,255,.04) 0%,rgba(255,255,255,.01) 50%,rgba(163,131,230,.03) 100%),
    rgba(5,5,15,.5);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.06);
  transition:border-color .3s,transform .3s,box-shadow .3s;
  cursor:pointer;
}
.project-card:hover{
  border-color:rgba(163,131,230,.25);
  transform:translateY(-4px);
  box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 40px rgba(163,131,230,.08);
}
.project-card h4{
  font-family:var(--font-heading);font-size:1.15rem;
  font-weight:700;color:#fff;margin-bottom:8px;
}
.project-card .tech-tags{
  display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;
}
.project-card .tech-tag{
  font-size:10px;font-weight:600;padding:3px 10px;
  border-radius:99px;font-family:var(--font-heading);
  letter-spacing:.05em;
  background:rgba(163,131,230,.12);color:var(--accent-glow);
}
.project-card .tech-tag.cyan{
  background:rgba(0,212,255,.1);color:var(--cyan-glow);
}

/* ── Scroll Reveal ─────────────────────────────────── */
.reveal{
  opacity:0;transform:translateY(40px);
  transition:opacity .9s var(--ease-out),transform .9s var(--ease-out);
}
.reveal.visible{opacity:1;transform:translateY(0)}
.r1{transition-delay:.1s}.r2{transition-delay:.2s}
.r3{transition-delay:.35s}.r4{transition-delay:.5s}
.r5{transition-delay:.65s}

/* ── Nav ───────────────────────────────────────────── */
.site-nav{
  position:fixed;top:0;width:100%;z-index:100;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  background:rgba(3,5,10,.85);
  border-bottom:1px solid rgba(255,255,255,.05);
  padding:14px 40px;
  display:flex;align-items:center;justify-content:space-between;
}
.nav-brand{
  font-family:var(--font-heading);font-weight:800;font-size:16px;
  letter-spacing:-.02em;color:#fff;text-decoration:none;
  display:flex;align-items:center;gap:10px;
}
.nav-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 12px var(--accent-glow);
}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{
  font-size:12px;color:#7a8090;text-decoration:none;
  font-weight:500;transition:color .2s;font-family:var(--font-heading);
  letter-spacing:.04em;text-transform:uppercase;
}
.nav-links a:hover{color:#fff}

/* ── Responsive ────────────────────────────────────── */
@media (max-width:768px){
  .platform-section{padding:80px 16px}
  .platform{padding:36px 24px}
  .site-nav{padding:12px 20px}
  .nav-links{gap:14px}
  .nav-links a{font-size:10px}
}