/* ==========================================================================
   DEEP SPACE PORTFOLIO — DESIGN SYSTEM
   Palette: near-black void, violet/magenta nebula accents, cyan comet trail.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

:root{
  --void:        #05060B;
  --void-2:      #0C0F1C;
  --panel:       #10142499;
  --panel-solid: #10142A;
  --line:        rgba(145,153,181,0.18);

  --nebula-violet:  #7B5CFF;
  --nebula-magenta: #FF5CA8;
  --comet-cyan:     #4CE0D2;
  --gold-flare:     #FFC857;
  --ion-blue:       #5DA9FF;
  --plasma-green:   #7DFFB2;

  --star-white:  #F5F6FA;
  --dust:        #9199B5;
  --dust-dim:    #656C87;

  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-body: "Inter", -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", monospace;

  --radius: 10px;
  --max-w: 1180px;
  --glow-violet: 0 0 40px -8px rgba(123,92,255,0.55);
  --glow-cyan: 0 0 40px -10px rgba(76,224,210,0.5);
  --glow-text: 0 0 18px rgba(76,224,210,0.32), 0 0 42px rgba(123,92,255,0.28);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:
    radial-gradient(circle at 18% 8%, rgba(123,92,255,0.24), transparent 28vw),
    radial-gradient(circle at 78% 16%, rgba(76,224,210,0.13), transparent 26vw),
    linear-gradient(180deg, #03040A 0%, var(--void) 46%, #070817 100%);
  color: var(--star-white);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x: hidden;
}

body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
}
body::before{
  opacity:.32;
  background-image:
    linear-gradient(rgba(245,246,250,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,246,250,0.035) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 68%);
  animation: cosmicGridDrift 28s linear infinite;
}
body::after{
  background:
    radial-gradient(circle at 12% 24%, rgba(255,200,87,0.18) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 34%, rgba(76,224,210,0.18) 0 1px, transparent 2px),
    radial-gradient(circle at 62% 82%, rgba(245,246,250,0.14) 0 1px, transparent 2px);
  background-size: 520px 520px, 620px 620px, 380px 380px;
  animation: starDustDrift 34s linear infinite;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight:600;
  margin: 0 0 .4em;
  line-height:1.1;
  letter-spacing:0;
}

.eyebrow{
  font-family: var(--font-mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color: var(--comet-cyan);
}

.container{
  max-width: var(--max-w);
  margin:0 auto;
  padding: 0 24px;
  position:relative;
  z-index: 2;
}

/* ---------------- Depth layers (parallax backdrop) ---------------- */
#depth-field{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(ellipse at 20% -10%, #171b32 0%, transparent 48%),
    radial-gradient(ellipse at 86% 22%, rgba(76,224,210,0.12) 0%, transparent 38%),
    radial-gradient(ellipse at 48% 115%, rgba(255,92,168,0.12) 0%, transparent 42%),
    var(--void);
}
.depth-layer{ position:absolute; inset:0; will-change: transform; }
#stars-far canvas, #stars-near canvas{ width:100%; height:100%; display:block; }
.nebula-blob{
  position:absolute; border-radius:50%;
  filter: blur(70px) saturate(1.18);
  opacity:.35;
  animation: nebulaPulse 12s ease-in-out infinite alternate;
}
.nebula-blob.violet{ width:520px; height:520px; background: var(--nebula-violet); top:-120px; left:-100px; }
.nebula-blob.magenta{ width:460px; height:460px; background: var(--nebula-magenta); top:40vh; right:-140px; animation-delay:-5s; }
.nebula-blob.cyan{ width:380px; height:380px; background: var(--comet-cyan); top:120vh; left:10vw; opacity:.22; }
.depth-layer::before,
.depth-layer::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}
.depth-layer::before{
  width:520px; height:520px; right:8vw; top:18vh;
  border:1px solid rgba(76,224,210,0.16);
  box-shadow: inset 0 0 36px rgba(76,224,210,0.08), 0 0 44px rgba(123,92,255,0.08);
  transform: rotate(-18deg) scaleY(.28);
}
.depth-layer::after{
  width:180px; height:2px; left:-220px; top:26vh;
  border-radius:999px;
  background: linear-gradient(90deg, transparent, rgba(245,246,250,0.22), var(--comet-cyan), transparent);
  box-shadow: 0 0 20px rgba(76,224,210,0.55);
  animation: cometSweep 9s ease-in-out infinite;
}

/* ---------------- Nav ---------------- */
.site-nav{
  position: sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(5,6,11,0.88), rgba(5,6,11,0.62));
  backdrop-filter: blur(16px) saturate(1.25);
  border-bottom: 1px solid rgba(76,224,210,0.16);
  box-shadow: 0 16px 42px -34px rgba(76,224,210,0.8);
}
.site-nav .container{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 24px; gap:20px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
  font-family: var(--font-display);
  font-weight:700; font-size:1.1rem;
  color: var(--star-white);
  white-space:nowrap;
}
.brand .orb{
  width:30px; height:30px; border-radius:50%; flex:none;
  background: radial-gradient(circle at 32% 30%, #cbd0ff 0%, var(--nebula-violet) 45%, var(--void-2) 100%);
  box-shadow: var(--glow-violet), 0 0 0 1px rgba(245,246,250,0.16);
  position:relative;
}
.brand .orb::after{
  content:"";
  position:absolute; inset:-8px -11px;
  border:1px solid rgba(76,224,210,0.26);
  border-radius:50%;
  transform: rotate(-22deg) scaleY(.45);
}
.brand small{
  display:block; font-family: var(--font-mono); font-weight:400;
  font-size:.6rem; letter-spacing:.12em; color:var(--dust);
  text-transform:uppercase;
}
.nav-links{ display:flex; gap:2px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.nav-links a{
  text-decoration:none; font-size:.86rem; font-weight:500;
  padding:9px 14px; border-radius: 999px; color:var(--dust);
  transition: background .18s ease, color .18s ease;
}
.nav-links a:hover, .nav-links a.active{
  background: rgba(123,92,255,0.18); color: var(--star-white);
  box-shadow: inset 0 0 18px rgba(76,224,210,0.08), 0 0 16px rgba(123,92,255,0.18);
}
.nav-toggle{ display:none; }
@media (max-width: 820px){
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center;
    width:40px; height:40px; border-radius: var(--radius);
    border:1px solid var(--line); background:none; color: var(--star-white); cursor:pointer;
  }
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    background: var(--void-2); flex-direction:column;
    padding: 10px 24px 18px; border-bottom: 1px solid var(--line);
    display:none;
  }
  .nav-links.open{ display:flex; }
}

/* ---------------- Buttons ---------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-body); font-weight:600; font-size:.85rem;
  padding: 13px 24px; border-radius: 999px;
  border: 1px solid transparent; cursor:pointer; text-decoration:none;
  position:relative; overflow:hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.btn::after{
  content:"";
  position:absolute; inset:-80% auto -80% -45%;
  width:40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.34), transparent);
  transform: rotate(18deg);
  transition: left .45s ease;
}
.btn:hover::after{ left:110%; }
.btn:hover{ transform: translateY(-2px); }
.btn.btn-primary{ background: linear-gradient(135deg, var(--nebula-violet), var(--nebula-magenta)); color:#fff; box-shadow: var(--glow-violet), 0 0 0 1px rgba(255,255,255,0.08); }
.btn.btn-cyan{ background: linear-gradient(135deg, var(--comet-cyan), var(--plasma-green)); color: var(--void); box-shadow: var(--glow-cyan); }
.btn.btn-outline{ background:rgba(5,6,11,0.28); border-color: rgba(245,246,250,0.22); color: var(--star-white); }
.btn.btn-gold{ background: var(--gold-flare); color: var(--void); }
.btn.small{ padding:8px 16px; font-size:.75rem; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none; }

/* ---------------- Hero ---------------- */
.hero{ padding: 96px 0 52px; position:relative; overflow:hidden; }
.hero::before{
  content:"";
  position:absolute;
  width:min(70vw, 760px);
  aspect-ratio:1;
  right:-18vw;
  top:-18vw;
  border-radius:50%;
  border:1px solid rgba(76,224,210,0.15);
  box-shadow:
    inset 0 0 60px rgba(123,92,255,0.12),
    0 0 80px rgba(76,224,210,0.08);
  transform: rotate(-16deg) scaleY(.52);
}
.hero .eyebrow{ margin-bottom:14px; display:inline-block; }
.hero h1{
  font-size: clamp(2.6rem, 6vw, 4.7rem);
  max-width: 12ch;
  color:#fff;
  text-shadow: var(--glow-text);
}
.hero h1 .accent{
  background: linear-gradient(105deg, #fff 0%, var(--comet-cyan) 24%, var(--ion-blue) 48%, var(--nebula-magenta) 72%, #fff 100%);
  background-size: 220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation: textShimmer 5s ease-in-out infinite;
}
.hero p.lede{ font-size:1.12rem; color: #C9D0E6; max-width: 54ch; text-shadow: 0 0 18px rgba(76,224,210,0.08); }
.hero .cta-row{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }

/* ---------------- Transit Carousel (signature scroll element) ---------------- */
.transit-section{ padding: 20px 0 60px; overflow:hidden; }
.transit-track-wrap{ overflow:visible; }
.transit-track{
  display:flex; gap: 26px; will-change: transform;
  padding: 10px 4px 30px;
}
.transit-card{
  flex: none; width: 280px;
  background: linear-gradient(180deg, rgba(16,20,42,0.86), rgba(5,6,11,0.72));
  border: 1px solid rgba(245,246,250,0.16);
  border-radius: var(--radius);
  overflow:hidden;
  backdrop-filter: blur(6px);
  box-shadow: 0 20px 50px -24px rgba(0,0,0,0.7), 0 0 24px -18px rgba(76,224,210,0.75);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.transit-card:hover{
  transform: translateY(-4px);
  border-color: rgba(76,224,210,0.42);
  box-shadow: 0 24px 60px -26px rgba(0,0,0,0.88), 0 0 34px -18px rgba(76,224,210,0.9);
}
.transit-card img{
  width:100%; height: 190px; object-fit:cover;
  filter: saturate(1.05);
}
.transit-card video{
  width:100%; height:190px; object-fit:cover; background:#05060B;
}
.file-preview{
  height:190px; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, rgba(76,224,210,0.16), rgba(255,200,87,0.14));
}
.file-preview span{
  font-family: var(--font-mono); font-size:1.15rem; letter-spacing:.12em;
  color: var(--star-white); border:1px solid var(--line); padding:12px 16px;
  border-radius: 8px; background: rgba(5,6,11,0.5);
}
.transit-card .cap{
  padding: 14px 16px;
  font-family: var(--font-mono); font-size:.72rem; color: var(--dust);
}
.transit-card .cap strong{ display:block; color: var(--star-white); font-family: var(--font-body); font-size:.92rem; margin-bottom:2px; }
.transit-card .cap a{ color: var(--comet-cyan); text-decoration:none; }
.transit-hint{
  text-align:center; font-family: var(--font-mono); font-size:.68rem;
  letter-spacing:.1em; text-transform:uppercase; color: var(--dust-dim);
  margin-top: 6px;
}

/* fallback static grid for galleries shown outside the transit strip */
.gallery-grid{
  display:grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
  gap: 18px; margin-top: 26px;
}
.gallery-grid figure{
  margin:0; background: var(--panel); border:1px solid var(--line);
  border-radius: var(--radius); overflow:hidden;
}
.gallery-grid img{ height:170px; width:100%; object-fit:cover; }
.gallery-grid figcaption{ font-family: var(--font-mono); font-size:.68rem; padding:10px 12px; color:var(--dust); }
.gallery-empty{
  font-family: var(--font-mono); font-size:.8rem; color: var(--dust);
  border: 1px dashed var(--line); border-radius: var(--radius);
  padding: 26px; text-align:center; margin-top:20px;
}

/* ---------------- Sections ---------------- */
section{ padding: 60px 0; position:relative; z-index:1; }
.section-head{ max-width: 62ch; margin-bottom: 34px; }
.section-head h2{ font-size: clamp(1.7rem, 3vw, 2.5rem); }
.section-head h2{
  text-shadow: 0 0 24px rgba(123,92,255,0.2);
}
.divider{
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(76,224,210,0.45), rgba(255,92,168,0.24), transparent);
  box-shadow: 0 0 18px rgba(76,224,210,0.18);
}

.reveal{ opacity:0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .transit-track{ transform:none !important; }
  .depth-layer{ transform:none !important; }
  body::before,
  body::after,
  .nebula-blob,
  .depth-layer::after,
  .hero h1 .accent,
  .btn::after{
    animation:none !important;
  }
}

/* ---------------- Cards ---------------- */
.card-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:22px; }
.card{
  background: linear-gradient(180deg, rgba(16,20,42,0.82), rgba(5,6,11,0.68)); border:1px solid rgba(245,246,250,0.15); border-radius: var(--radius);
  padding: 26px; backdrop-filter: blur(6px);
  border-top: 3px solid var(--nebula-violet);
  position:relative;
  overflow:hidden;
  box-shadow: 0 18px 50px -34px rgba(0,0,0,0.9);
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, rgba(255,255,255,0.08), transparent 36%, rgba(76,224,210,0.05));
  opacity:.5;
  pointer-events:none;
}
.card.cyan{ border-top-color: var(--comet-cyan); }
.card.gold{ border-top-color: var(--gold-flare); }
.card.magenta{ border-top-color: var(--nebula-magenta); }
.card h3{ font-size:1.15rem; color:#fff; text-shadow: 0 0 18px rgba(76,224,210,0.18); }
.card .meta{ font-family: var(--font-mono); font-size:.66rem; color: var(--dust); text-transform:uppercase; letter-spacing:.08em; display:block; margin-bottom:8px; }
.card p{ color: var(--dust); }

/* ---------------- Contact ---------------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; }
@media (max-width:840px){ .contact-grid{ grid-template-columns:1fr; } }
.info-list{ list-style:none; margin:0; padding:0; }
.info-list li{ display:flex; gap:14px; padding:14px 0; border-bottom:1px dashed var(--line); }
.info-list .k{ font-family: var(--font-mono); font-size:.68rem; color: var(--comet-cyan); text-transform:uppercase; letter-spacing:.06em; width:100px; flex:none; padding-top:2px; }

.social-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.social-card{
  display:flex; align-items:center; gap:14px; text-decoration:none;
  background: linear-gradient(180deg, rgba(16,20,42,0.86), rgba(5,6,11,0.7)); border:1px solid rgba(245,246,250,0.15); border-radius: var(--radius);
  padding:18px; transition: transform .15s ease, box-shadow .15s ease;
}
.social-card:hover{ transform: translateY(-3px); box-shadow: var(--glow-cyan); }
.social-card .icon{
  width:42px; height:42px; border-radius:50%; flex:none;
  background: linear-gradient(135deg, var(--nebula-violet), var(--comet-cyan));
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:700; color:#04050a;
}
.social-card .label{ font-weight:600; }
.social-card .handle{ font-family: var(--font-mono); font-size:.74rem; color: var(--dust); }

/* ---------------- Forms ---------------- */
.form-field{ margin-bottom:18px; }
.form-field label{ display:block; font-family: var(--font-mono); font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; color: var(--dust); }
.form-field input, .form-field textarea, .form-field select{
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius: 8px;
  background: var(--void-2); color: var(--star-white); font-family: var(--font-body); font-size:.95rem;
}
.form-field input:focus, .form-field textarea:focus{ outline: 2px solid var(--nebula-violet); outline-offset:1px; }
.form-field textarea{ min-height:130px; resize:vertical; }
.hint{ font-family: var(--font-mono); font-size:.72rem; color: var(--dust); }
.hint a{ color: var(--comet-cyan); }

/* ---------------- Admin ---------------- */
.lock-screen{ min-height:64vh; display:flex; align-items:center; justify-content:center; padding: 40px 24px; }
.lock-box{
  background: var(--panel-solid); border:1px solid var(--line); border-radius: var(--radius);
  padding: 42px; max-width: 400px; width:100%; text-align:center;
  border-top: 3px solid var(--nebula-violet); box-shadow: var(--glow-violet);
}
.lock-box .orb{ width:48px; height:48px; margin:0 auto 16px; border-radius:50%;
  background: radial-gradient(circle at 32% 30%, #cbd0ff 0%, var(--nebula-violet) 45%, var(--void-2) 100%); box-shadow: var(--glow-violet); }
.error-msg{ color: var(--nebula-magenta); font-family: var(--font-mono); font-size:.76rem; min-height:1.2em; margin-top:10px; }
.ok-msg{ color: var(--comet-cyan); font-family: var(--font-mono); font-size:.76rem; min-height:1.2em; margin-top:10px; }
.admin-panel{ display:none; }
body[data-page="admin"] .card,
body[data-page="admin"] .lock-box{
  background: rgba(16,20,42,0.96);
  border-color: rgba(245,246,250,0.22);
  box-shadow: 0 18px 48px -28px rgba(0,0,0,0.85);
}
body[data-page="admin"] .hint,
body[data-page="admin"] .card p{
  color: #C9D0E6;
}
body[data-page="admin"] .form-field label{
  color: #D9E0F7;
  font-size: .74rem;
}
body[data-page="admin"] .form-field input,
body[data-page="admin"] .form-field textarea,
body[data-page="admin"] .form-field select{
  background: #070B17;
  border-color: rgba(245,246,250,0.28);
  color: #FFFFFF;
  font-size: 1rem;
}
body[data-page="admin"] .btn{
  font-size: .92rem;
}
.admin-tabs{ display:flex; gap:8px; margin-bottom:30px; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:14px; }
.admin-tab-btn{
  font-family: var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.05em;
  padding:8px 14px; border-radius: 999px; border:1px solid var(--line);
  background: var(--void-2); color: var(--dust); cursor:pointer;
}
.admin-tab-btn.active{ background: var(--nebula-violet); color:#fff; border-color: var(--nebula-violet); }
body[data-page="admin"] .admin-tab-btn{
  color:#E5EAFF;
  border-color: rgba(245,246,250,0.25);
  padding:10px 16px;
}
.admin-section{ display:none; }
.admin-section.active{ display:block; }
.upload-drop{
  border: 2px dashed var(--comet-cyan); border-radius: var(--radius);
  padding: 34px; text-align:center; background: rgba(76,224,210,0.08); cursor:pointer;
  color:#F7FBFF;
}
.upload-drop p{ margin:0 0 6px; }
.upload-drop small{ color:#C9D0E6; }
.upload-drop.dragover{ background: rgba(76,224,210,0.14); }
.thumb-row{ display:grid; grid-template-columns: repeat(auto-fill,minmax(140px,1fr)); gap:14px; margin-top:20px; }
.thumb{ position:relative; border-radius: var(--radius); overflow:hidden; border:1px solid var(--line); background: var(--void-2); }
.thumb img{ height:110px; width:100%; object-fit:cover; }
.thumb video{ height:110px; width:100%; object-fit:cover; background:#05060B; }
.thumb .file-icon{
  height:110px; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono); letter-spacing:.08em; color: var(--star-white);
  background: linear-gradient(135deg, rgba(123,92,255,0.26), rgba(76,224,210,0.14));
}
.thumb input{
  width:100%; margin-top:0; border:none; border-top:1px solid var(--line);
  background: var(--void-2); color: var(--star-white); font-family: var(--font-mono); font-size:.68rem; padding:6px 8px;
}
.thumb .file-meta{
  font-family: var(--font-mono); font-size:.62rem; color:#C9D0E6;
  padding:6px 8px; border-top:1px solid var(--line);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.thumb .del{
  position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%;
  background: var(--nebula-magenta); color:#fff; border:none; cursor:pointer; font-size:.8rem; line-height:1;
}
.social-row, .card-row{
  display:grid; grid-template-columns: 1fr 1fr 1fr auto; gap:10px; align-items:end;
  margin-bottom:12px; padding:14px; background: var(--panel-solid); border:1px solid var(--line); border-radius: var(--radius);
}
.card-row{ grid-template-columns: 1fr 2fr auto; }
@media (max-width:820px){ .social-row, .card-row{ grid-template-columns: 1fr; } }
.toast{
  position:fixed; bottom:24px; right:24px; z-index:100;
  background: var(--panel-solid); border:1px solid var(--line); color: var(--star-white);
  padding:12px 20px; border-radius: var(--radius); font-family: var(--font-mono); font-size:.78rem;
  box-shadow: var(--glow-violet); opacity:0; transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease; pointer-events:none;
}
.toast.show{ opacity:1; transform:none; }

/* ---------------- Footer ---------------- */
footer{ border-top:1px solid var(--line); padding: 46px 0 30px; margin-top:40px; position:relative; z-index:1; }
footer .container{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:20px; }
footer a{ text-decoration:none; color: var(--dust); }
footer .foot-links{ display:flex; gap:16px; flex-wrap:wrap; font-size:.85rem; }
footer .fine{ font-family: var(--font-mono); font-size:.68rem; color: var(--dust-dim); margin-top:14px; }

@keyframes textShimmer{
  0%, 100%{ background-position: 0% 50%; filter: drop-shadow(0 0 8px rgba(76,224,210,0.22)); }
  50%{ background-position: 100% 50%; filter: drop-shadow(0 0 18px rgba(255,92,168,0.26)); }
}

@keyframes cometSweep{
  0%, 58%{ transform: translate3d(0, 0, 0) rotate(-10deg); opacity:0; }
  68%{ opacity:1; }
  88%, 100%{ transform: translate3d(130vw, 34vh, 0) rotate(-10deg); opacity:0; }
}

@keyframes nebulaPulse{
  from{ transform: scale(1); opacity:.24; }
  to{ transform: scale(1.12); opacity:.42; }
}

@keyframes cosmicGridDrift{
  from{ background-position: 0 0, 0 0; }
  to{ background-position: 76px 152px, 152px 76px; }
}

@keyframes starDustDrift{
  from{ background-position: 0 0, 0 0, 0 0; }
  to{ background-position: 520px 260px, -620px 310px, 190px -380px; }
}