/* --------------------------------------------------
   BlorpNet custom stylesheet
   -------------------------------------------------- */

/* 1. Global box‑sizing reset */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 2 · Progress-Pride banner — seamless scroll with smooth violet-to-black fade */
.pride-bar{
    position:fixed;
    top:0; left:0; right:0;
    height:8px;
    z-index:1000;
    overflow:hidden;               /* keep any overflow hidden */
}

/* two full-width gradient panels that glide together */
.pride-bar::before,
.pride-bar::after{
    content:"";
    position:absolute;
    top:0;
    width:100%;                    /* each panel = viewport width */
    height:100%;

    /* one complete gradient run, ending with a fade to black */
    background:linear-gradient(90deg,
        #000000 0%,    /* black          */
        #613915 9%,    /* brown          */
        #55CDFC 18%,   /* trans-blue     */
        #F7A8B8 27%,   /* trans-pink     */
        #FFFFFF 36%,   /* white          */
        #E40303 46%,   /* red            */
        #FF8C00 56%,   /* orange         */
        #FFED00 66%,   /* yellow         */
        #008026 76%,   /* green          */
        #004DFF 86%,   /* blue           */
        #750787 93%,   /* violet         */
        #000000 100%   /* smooth fade → black so copy-to-copy is seamless */
    );
    background-size:100% 100%;
    animation: prideSlide 20s linear infinite;
}

/* place the second copy immediately to the right of the first */
.pride-bar::after{ left:100%; }

/* slide both left by exactly one panel width */
@keyframes prideSlide{
    from{ transform:translateX(0);      }
    to  { transform:translateX(-100%);  }
}

/* honour users who prefer reduced motion */
@media (prefers-reduced-motion: reduce){
    .pride-bar::before,
    .pride-bar::after{ animation:none; }
}

/* 3. Starfield layers -------------------------------- */
.stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;                /* always behind content */
  will-change: transform, opacity;
}

.stars::before {
  content: "";
  position: absolute;
  inset: 0;
  /* 1‑px radial dots repeated = stars of varied colour */
  background-image:
    radial-gradient(#ffffff 1px, transparent 1px),      /* pure white  */
    radial-gradient(#bcd9ff 1px, transparent 1px),      /* blue‑white  */
    radial-gradient(#ffe9c7 1px, transparent 1px);      /* warm yellow */
  background-size: 2px 2px, 3px 3px, 1.5px 1.5px;       /* variety     */
  background-position: 0 0, 30% 50%, 60% 20%;
  animation: twinkle 6s steps(1, end) infinite;
}

/* Parallax layer speeds */
.depth-1 { animation: drift1  90s linear infinite; }
.depth-2 { animation: drift2 180s linear infinite; }
.depth-3 { animation: drift3 360s linear infinite; }

/* Twinkle animation */
@keyframes twinkle {
  0%, 100% { opacity: 0.8; }
  50%      { opacity: 1;   }
}

/* Vertical drift for parallax */
@keyframes drift1 { from { transform: translateY(0); } to { transform: translateY(-1000px); } }
@keyframes drift2 { from { transform: translateY(0); } to { transform: translateY(-2000px); } }
@keyframes drift3 { from { transform: translateY(0); } to { transform: translateY(-4000px); } }

/* 4. Document baseline -------------------------------- */
body {
  margin: 0;
  padding-top: 8px;           /* offset for pride bar */
  height: 100vh;
  background: #0b2a59;
  color: #f7f7f7;
  font-family: system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 5. Frosted‑glass content card ----------------------- */
/* --- Fade-in effect for the content card (no movement) --- */
@keyframes cardFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.content {
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%); /* Safari */
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  padding: 2rem 3rem;
  border-radius: 0.5rem;
  max-width: 680px;
  text-align: center;
  opacity: 0;                                 /* start invisible   */
    animation: cardFade 1200ms ease-out 300ms forwards;
    /*          ^speed  ^curve   ^delay   ^keep final state         */
}

/* Respect OS/browser reduced-motion setting */
@media (prefers-reduced-motion: reduce){
    .content{ animation:none; opacity:1; }
}

/* footer ─────────────────────────────────────────────── */
.site-footer{
    position:fixed;
    bottom:0; left:0; right:0;
    height:32px;                      /* tweak if you need it taller */
    display:flex;
    align-items:center;
    justify-content:center;

    /* glass-panel look to match .content */
    background:rgba(255,255,255,0.04);
    backdrop-filter:blur(12px) saturate(150%);
    -webkit-backdrop-filter:blur(12px) saturate(150%);

    border-top:1px solid rgba(255,255,255,0.25);
    box-shadow:0 -4px 12px rgba(0,0,0,0.4);

    font-size:0.8rem;
    color:#f7f7f7;
    text-align:center;
    z-index:900;                      /* sits above starfield, below pride bar */
}

/* keep main content from hiding behind the footer */
body{ padding-bottom:32px; }

/* soft divider between language blocks */
.soft-line{
    border:0;
    height:1px;
    margin:1.75rem 0;                       /* spacing above & below */
    /* faint fade-out toward the edges */
    background:linear-gradient(to right,
        transparent,
        rgba(255,255,255,0.25),
        transparent);
}
/* floating logo, lower-right */
.corner-logo{
    position:fixed;
    bottom:48px;          /* footer is 32 px tall → 32 + 16 px breathing room */
    right:24px;           /* tweak offsets to taste                  */
    width:240px;          /* scale down for phones if desired        */
    height:auto;
    opacity:.3;           /* 50 % transparency                       */
    pointer-events:none;  /* keeps it from snagging clicks           */
    z-index:850;          /* sits above starfield, below footer bar  */
}

/* optional: hide on very small screens */
@media (max-width: 480px){
    .corner-logo{ display:none; }
}

/* subtle footnote under each warning */
.blorp-note{
    font-size: 0.8rem;              /* smaller text */
    margin: 0.25rem 0 0;            /* tight spacing above, none below */
    color: rgba(255,255,255,0.75);  /* softer white for secondary info */
}