/* =========================
   blairbarely — FULL style.css
   y2k popups + draggable windows + pink cursor glitter
   ========================= */

:root{
  --ink: #1a0f2c;
  --paper: rgba(255,255,255,.70);
  --border: rgba(20,10,40,.35);
  --shadow: 0 22px 55px rgba(0,0,0,.33);

  --pink: #ff6bd6;
  --lav:  #c8b2ff;
  --aqua: #98fff2;
  --lemon:#fff2a8;
  --sky:  #9fd2ff;

  --radius: 18px;
}

*{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;
  color: var(--ink);
  font-family: "Comic Neue", system-ui, sans-serif;
  overflow-x: hidden;
}

/* ========== BACKGROUND LAYERS ========== */
.bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.iridescent{
  background:
    radial-gradient(circle at 18% 12%, rgba(255,107,214,.45), transparent 45%),
    radial-gradient(circle at 80% 26%, rgba(152,255,242,.40), transparent 42%),
    radial-gradient(circle at 52% 82%, rgba(200,178,255,.42), transparent 45%),
    conic-gradient(from 180deg at 50% 50%,
      rgba(255,255,255,.20),
      rgba(255,107,214,.25),
      rgba(152,255,242,.22),
      rgba(159,210,255,.22),
      rgba(255,255,168,.18),
      rgba(255,255,255,.20)
    );
  filter: saturate(1.15);
}

.gridpaper{
  background:
    linear-gradient(rgba(255,170,210,.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,170,210,.28) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .30;
  mix-blend-mode: screen;
}

.stars{
  background-image:
    radial-gradient(#ffffff 1px, transparent 2px),
    radial-gradient(#fff2a8 1px, transparent 2px),
    radial-gradient(#ffffff 1px, transparent 2px);
  background-size: 180px 180px, 240px 240px, 320px 320px;
  background-position: 0 0, 60px 90px, 120px 30px;
  opacity: .22;
  mix-blend-mode: screen;
}

/* ========== MARQUEE ========== */
.marquee{
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(255,255,255,.55);
  border-bottom: 2px solid rgba(0,0,0,.12);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.marquee__inner{
  white-space: nowrap;
  display: inline-block;
  padding: 10px 0;
  padding-left: 100%;
  animation: scroll 18s linear infinite;

  font-family: "Press Start 2P", monospace;
  font-size: 12px;
  color: #1a0f2c;
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}

@keyframes scroll{
  0%{ transform: translateX(0); }
  100%{ transform: translateX(-100%); }
}

/* ========== TITLE CARD ========== */
.title-card{
  max-width: 960px;
  margin: 12px auto 18px;
  padding: 18px 16px;
  border-radius: 28px;
  background: rgba(255,255,255,.62);
  border: 2px solid rgba(20,10,40,.18);
  box-shadow: var(--shadow);
  text-align: center;
}

/* ====== NEW Y2K LOGO TITLE ====== */
.title{
  margin: 0;
  font-family: "Chakra Petch", system-ui, sans-serif;
  font-weight: 700;
  font-style: italic;
  text-transform: lowercase;
  letter-spacing: 0.5px;

  font-size: clamp(54px, 7vw, 110px);
  line-height: 0.95;

  color: rgba(255,255,255,.92);

  /* thick neon outline */
  -webkit-text-stroke: 10px rgba(255, 44, 168, .95);

  /* subtle glow */
  text-shadow:
    0 0 10px rgba(255, 44, 168, .35),
    0 0 26px rgba(255, 44, 168, .25);

  position: relative;
  display: inline-block;
  transform: skewX(-8deg);
}

/* sticker-style shadow behind title */
.title::after{
  content: attr(data-title);
  position: absolute;
  left: 10px;
  top: 8px;
  z-index: -1;

  font: inherit;
  font-weight: 700;
  font-style: italic;
  letter-spacing: inherit;
  text-transform: inherit;

  color: rgba(0,0,0,.12);
  -webkit-text-stroke: 10px rgba(0,0,0,.08);
  filter: blur(.2px);
}

/* ========== PINK CURSOR GLITTER ========== */
.sparkle{
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  font-size: 14px;
  animation: pop 700ms ease-out forwards;
  color: #ff6bd6;
  text-shadow:
    0 0 6px rgba(255,107,214,.9),
    0 0 12px rgba(255,214,255,.7);
}

@keyframes pop{
  from{ transform: translate(-50%, -50%) scale(.8); opacity: 1; }
  to{ transform: translate(-50%, -80%) scale(1.6); opacity: 0; }
}