/* Table of contents
- Grid
- Base Styles
- Typography
- Links
- Code
- Spacing
- Utilities
- Misc
- Credit footer
- Parallax background
*/

/* Grid */
.container{
  position:relative;
  width:100%;
  max-width:600px;
  text-align:center;
  margin:0 auto;
  box-sizing:border-box;
}
.column{
  width:100%;
  box-sizing:border-box;
}

/* For devices larger than 400px */
@media (min-width:400px){
  .container{ width:85%; padding:0; }
}

/* For devices larger than 550px */
@media (min-width:550px){
  .container{ width:80%; }
  .column, .columns{ margin-left:0; }
  .column:first-child, .columns:first-child{ margin-left:0; }
}

/* Base Styles */
html{
  font-size:100%;
  overflow-x:hidden;
}

body{
  font-size:18px;
  line-height:24px;
  font-weight:400;
  background-color: var(--bg);
  font-family: var(--font-body);
  color: var(--text);
}

/* hide scrollbar */
::-webkit-scrollbar{ display:none; }

/* Typography */
h1{
  margin-top:0;
  margin-bottom:16px;
  font-weight:900;
  font-size:26px;
  line-height:64px;
  letter-spacing:0;
}
@media (min-width:550px){
  h1{ font-size:56px; line-height:96px; }
}

p{
  margin-top:0;
}

/* Links */
a{
  color: var(--link);
  text-decoration:none;
}
a:hover{
  color: var(--link);
}

.spacing{ padding:0 10px; }

/* Code */
code{
  padding:.2rem .5rem;
  margin:0 .2rem;
  font-size:90%;
  white-space:nowrap;
  background:#F1F1F1;
  border:1px solid #E1E1E1;
  border-radius:4px;
}
pre > code{
  display:block;
  padding:1rem 1.5rem;
  white-space:pre;
}

/* Spacing */
button,
.button{ margin-bottom:1rem; }
input,
textarea,
select,
fieldset{ margin-bottom:1.5rem; }
pre,
blockquote,
dl,
figure,
p,
ol{ margin-bottom:2.5rem; }

/* Utilities */
.u-full-width{ width:100%; box-sizing:border-box; }
.u-max-full-width{ max-width:100%; box-sizing:border-box; }
.u-pull-right{ float:right; }
.u-pull-left{ float:left; }

/* Misc */
hr{
  margin-top:3rem;
  margin-bottom:3.5rem;
  border-width:0;
  border-top:1px solid #E1E1E1;
}

/* Firefox scrollbar (if enabled) */
*{
  scrollbar-width:thin;
  scrollbar-color:#171a1d #31363b;
}

/* Credit footer */
.credit-txt{
  font-weight:700;
  font-size:15px;
  text-decoration:none;
}
.credit-icon{ transform:translateX(15px); }
.credit-txt-clr{ color:#FFF !important; }

/* Parallax background
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.parallax-background{
  position: fixed;
  inset: 0;
  perspective: 340px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ensure content sits above background */
.container, .column, .columns {
  position: relative;
  z-index: 1;
}

/* Each layer fills the screen and moves forward */
.starfield{
  position: absolute;
  inset: 0;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* Seamless motion: two identical layers crossfade while resetting */
.starfield--a{
  animation: starFly 18s linear infinite, starFadeA 18s linear infinite;
}
.starfield--b{
  animation: starFly 18s linear infinite, starFadeB 18s linear infinite;
}

/* The “star map” itself: static (no animation here) */
.object1{
  position:absolute;
  top:50%;
  left:50%;

  /* base star size (micro) */
  width:2px;
  height:2px;
  border-radius:50%;
  background: transparent;

  transform-style: preserve-3d;

  box-shadow:
    /* ── micro stars (most of the field) ── */
          120px  80px 0 0 #ffffff,
          -200px 140px 0 0 #f2f2f2,
          340px -220px 0 0 #ffffff,
          -480px -300px 0 0 #eaeaea,
          600px  200px 0 0 #ffffff,
          -720px  90px 0 0 #f8f8f8,
          900px -120px 0 0 #ffffff,
          -1050px 260px 0 0 #ededed,

            /* ── medium stars (stand out slightly) ── */
          300px  180px 0 1px rgba(255,255,255,0.9),
          -560px -160px 0 1px rgba(255,255,255,0.85),
          820px  -40px  0 1px rgba(255,255,255,0.9),
          -940px 420px  0 1px rgba(255,255,255,0.85),
          140px   320px 0 1px rgba(255,255,255,0.9),
          -260px -420px 0 1px rgba(255,255,255,0.85),
          520px  -300px 0 1px rgba(255,255,255,0.9),
          -680px  220px 0 1px rgba(255,255,255,0.85),
          960px   160px 0 1px rgba(255,255,255,0.9),
          -1120px -120px 0 1px rgba(255,255,255,0.85),

            /* ── large stars (rare, visual pop) ── */
          150px -260px 0 2px rgba(255,255,255,0.95),
          -780px  40px  0 2px rgba(255,255,255,0.9),
          1020px 300px  0 2px rgba(255,255,255,0.95);

  /* glow — THIS is what makes them read */
  filter:
          drop-shadow(0 0 2px rgba(255,255,255,0.35))
          drop-shadow(0 0 6px rgba(255,255,255,0.15));
}
.starfield{
  filter: blur(0.15px);
}

.object1--trail{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 12px;
  border-radius: 50px;
  transform-style: preserve-3d;

  box-shadow: inherit;

  opacity: 0;
  filter:
          blur(0.5px)
          drop-shadow(0 0 6px rgba(255,255,255,0.4));

  animation: trailFlicker 22s linear infinite;
}

@keyframes trailFlicker{
  0%, 88% { opacity: 0; }
  90%     { opacity: 0.15; }
  92%     { opacity: 0.35; }
  94%     { opacity: 0.15; }
  96%,100%{ opacity: 0; }
}
.starfield--a { filter: brightness(1.05); }
.starfield--b { filter: brightness(0.95); }

/* Move the whole layer forward in Z to simulate travel */
@keyframes starFly{
  0%   { transform: translateZ(-640px); }
  100% { transform: translateZ(0px); }
}

/* Crossfade handoff so there’s no “blink” when a layer resets */
@keyframes starFadeA{
  0%, 45%   { opacity: 1; }
  55%, 100% { opacity: 0; }
}
@keyframes starFadeB{
  0%, 45%   { opacity: 0; }
  55%, 100% { opacity: 1; }
}

/* Respect OS reduced motion */
@media (prefers-reduced-motion: reduce) {
  .starfield--a,
  .starfield--b {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
.starfield--a{
  animation: starFly 14s linear infinite, starFadeA 14s linear infinite;
}
.starfield--b{
  animation: starFly 14s linear infinite, starFadeB 14s linear infinite;
}
.object1{
  filter:
          drop-shadow(0 0 3px rgba(255,255,255,0.4))
          drop-shadow(0 0 8px rgba(255,255,255,0.18));
}