/* ═══════════════════════════════════════════════════════════
   FLRNCΞ — Pride Month design override
   
   Usage: in index.html, replace:
     <link rel="stylesheet" href="index.css">
   with:
     <link rel="stylesheet" href="index-pride.css">
   
   This file imports the base styles and overrides
   what needs to change for Pride Month.
═══════════════════════════════════════════════════════════ */

/* Import base styles */
@import url('index.css');

/* ────────────────────────────────────────────────────────
   COLOUR PALETTE OVERRIDE
   Cyan → hot pink    |    Purple → orange-gold
──────────────────────────────────────────────────────── */
:root {
  --c:  #ff69b4; /* hot pink   (was cyan)    */
  --p:  #ff8c00; /* orange     (was purple)  */
  --bg: #04040f;
}

/* ────────────────────────────────────────────────────────
   RAINBOW TOP STRIPE
──────────────────────────────────────────────────────── */
body::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 999; pointer-events: none;
  background: linear-gradient(90deg,
    #ff0018 0%,   /* red     */
    #ff8800 17%,  /* orange  */
    #ffee00 33%,  /* yellow  */
    #00cc00 50%,  /* green   */
    #0088ff 67%,  /* blue    */
    #8800cc 83%,  /* violet  */
    #ff0018 100%  /* back to red for seamless repeat */
  );
}

/* ────────────────────────────────────────────────────────
   RAINBOW ANIMATED LOGO
──────────────────────────────────────────────────────── */
.logo-name {
  background: linear-gradient(90deg,
    #ff0018, #ff8800, #ffee00,
    #00cc00, #0088ff, #cc00ff, #ff0018);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  animation: glitch 9s infinite, pride-rainbow 4s linear infinite;
}
/* .xi — same position approach as base CSS, gradient applied explicitly */
.logo-name .xi {
  background: linear-gradient(90deg,
    #ff0018, #ff8800, #ffee00,
    #00cc00, #0088ff, #cc00ff, #ff0018);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pride-rainbow 4s linear infinite;
  display: inline;
  position: relative;
  top: 0.05em;
}
@keyframes pride-rainbow {
  from { background-position: 0% center; }
  to   { background-position: 200% center; }
}

/* ────────────────────────────────────────────────────────
   GLASS PANELS — pink-tinted
──────────────────────────────────────────────────────── */
.glass {
  border-color: rgba(255,105,180,.15);
  box-shadow: 0 0 60px rgba(255,105,180,.04),
              0 0 0 1px rgba(255,255,255,.04) inset;
}
.panel-label::after {
  background: linear-gradient(90deg,
    rgba(255,0,24,.25), rgba(255,136,0,.2),
    rgba(255,238,0,.15), rgba(0,200,0,.12),
    rgba(0,136,255,.12), transparent);
}

/* ────────────────────────────────────────────────────────
   STREAM DOTS
──────────────────────────────────────────────────────── */
.dot   { background:#ff69b4; box-shadow:0 0 8px #ff69b4; }
.dot.p { background:#ff8c00; box-shadow:0 0 8px #ff8c00; }

/* ────────────────────────────────────────────────────────
   BIO DASHES
──────────────────────────────────────────────────────── */
.bio p::before,
.bio p::after { color: #ff69b4; opacity: .5; }

/* ────────────────────────────────────────────────────────
   DIVIDER — trans flag colours (pink / blue)
──────────────────────────────────────────────────────── */
.divider::before,
.divider::after {
  background: linear-gradient(90deg, transparent,
    rgba(245,169,184,.35), rgba(91,206,250,.25), transparent);
}
.divider span { color: rgba(245,169,184,.65); }

/* ────────────────────────────────────────────────────────
   MNL BLOCK — trans flag palette
   (light blue #5bcefa · pink #f5a9b8 · white)
──────────────────────────────────────────────────────── */
.mnl-block {
  border-color: rgba(91,206,250,.22);
  box-shadow: 0 0 60px rgba(91,206,250,.04),
              inset 0 1px 0 rgba(255,255,255,.04);
}
.mnl-title {
  color: #f5a9b8;
  text-shadow: 0 0 14px rgba(245,169,184,.45);
}
.mnl-icon { opacity: .8; }
.mnl-subtitle { color: rgba(91,206,250,.68); }
.mnl-desc {
  color: rgba(255,245,250,.62);
  border-left-color: rgba(91,206,250,.2);
}
.mnl-link {
  color: rgba(245,169,184,.68);
  background: rgba(91,206,250,.03);
  border-color: rgba(91,206,250,.1);
}
.mnl-link:hover {
  color: #fff;
  border-color: rgba(91,206,250,.38);
  box-shadow: 0 0 16px rgba(91,206,250,.1);
}
.mnl-link svg { opacity: .75; }
.mnl-page-link { color: rgba(245,169,184,.5); }
.mnl-page-link:hover { color: #f5a9b8; }
.mnl-event-title-s { color: #f5a9b8; }
.mnl-event-item:first-child .mnl-event-title-s {
  color: #fff;
  text-shadow: 0 0 10px rgba(245,169,184,.35);
}
.mnl-event-item:first-child .mnl-event-dot {
  background: #5bcefa;
  box-shadow: 0 0 7px #5bcefa;
}
.mnl-event-dot { background: #f5a9b8; box-shadow: 0 0 7px #f5a9b8; }

/* ────────────────────────────────────────────────────────
   SOCIAL LINKS — one pride colour each
──────────────────────────────────────────────────────── */
.soc[data-p="yt"]:hover {
  --sb: rgba(255,0,24,.35); --sc: rgba(255,0,24,.07); --sh: rgba(255,0,24,.09);
}
.soc[data-p="tw"]:hover {
  --sb: rgba(255,136,0,.35); --sc: rgba(255,136,0,.07); --sh: rgba(255,136,0,.09);
}
.soc[data-p="bs"]:hover {
  --sb: rgba(0,200,80,.35); --sc: rgba(0,200,80,.07); --sh: rgba(0,200,80,.09);
}
.soc[data-p="sc"]:hover {
  --sb: rgba(0,136,255,.35); --sc: rgba(0,136,255,.07); --sh: rgba(0,136,255,.09);
}