/* ============================================================
   BlueZTV — The Links
   Stack: Bulma 0.9.4 + custom neo-brutalist overrides
   Palette: #7E01FF (purple), #00EEFE (cyan), #FF0FFB (magenta), #FF00FE (hot pink)
   ============================================================ */

:root {
  /* Brand palette */
  --color-purple:  #7E01FF;
  --color-cyan:    #00EEFE;
  --color-magenta: #FF0FFB;
  --color-pink:    #FF00FE;
  --color-black:   #0A0010;
  --color-white:   #FFFFFF;

  /* Neo-brutalist tokens */
  --border:        #0A0010;
  --shadow-x:      6px;
  --shadow-y:      6px;
  --shadow-color:  #0A0010;

  /* Card surface — slight tint so the bg bleeds through */
  --card-bg:       rgba(255, 255, 255, 0.12);
  --card-border:   rgba(10, 0, 16, 0.45);

  /* Type */
  --font-display:  'Sora', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;
}

/* ---------- Reset / globals ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  color: var(--color-white);
  overflow-x: hidden;
  scrollbar-width: none;            /* Firefox */
  -ms-overflow-style: none;         /* IE / Edge */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;                    /* Chrome, Safari, Opera */
}

/* ---------- Background layers (pure CSS, no images) ---------- */
.bg-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Layer 1: deep base — a diagonal that mixes the three brand hues */
.bg-base {
  background:
    linear-gradient(135deg,
      #0A0010 0%,
      #2a0140 35%,
      #14032a 70%,
      #001a26 100%);
  z-index: -3;
}

/* Layer 2–4: animated radial "blobs" of the three colors */
.bg-blob {
  filter: blur(80px);
  opacity: 0.85;
  mix-blend-mode: screen;
  will-change: transform;
}

.bg-blob-pink {
  background: radial-gradient(circle at center, var(--color-pink) 0%, transparent 60%);
  width: 60vmax;
  height: 60vmax;
  top: -15vmax;
  left: -10vmax;
  animation: float-pink 18s ease-in-out infinite;
}

.bg-blob-purple {
  background: radial-gradient(circle at center, var(--color-purple) 0%, transparent 60%);
  width: 65vmax;
  height: 65vmax;
  bottom: -20vmax;
  right: -15vmax;
  animation: float-purple 22s ease-in-out infinite;
}

.bg-blob-cyan {
  background: radial-gradient(circle at center, var(--color-cyan) 0%, transparent 60%);
  width: 55vmax;
  height: 55vmax;
  top: 30vh;
  left: 40vw;
  animation: float-cyan 26s ease-in-out infinite;
}

/* Layer 5: subtle grid overlay for that retro/neon vibe */
.bg-grid {
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  z-index: -1;
  opacity: 0.4;
}

/* Layer 6: noise texture using SVG, blended for grain */
.bg-noise {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.35 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  z-index: -1;
  opacity: 0.18;
  mix-blend-mode: overlay;
}

/* Blob float keyframes */
@keyframes float-pink {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(20vw, 15vh) scale(1.1); }
  66%      { transform: translate(10vw, 35vh) scale(0.95); }
}
@keyframes float-purple {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-25vw, -20vh) scale(1.15); }
}
@keyframes float-cyan {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25%      { transform: translate(-20vw, 10vh) scale(1.1); }
  75%      { transform: translate(15vw, -15vh) scale(0.9); }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .bg-blob { animation: none !important; }
  .link-card,
  .custom-link-btn,
  .avatar-frame,
  .social-icon,
  .highlight-link {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Main wrapper ---------- */
.main-wrapper {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem;
}

/* ---------- Neo-brutalist card ---------- */
.link-card {
  /* Fallback */
  background-color: rgba(255, 255, 255, 0.14);
  border: 3px solid var(--card-border);
  box-shadow:
    10px 10px 0 0 var(--shadow-color),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
  max-width: 560px;
  width: 100%;
  padding: 3rem 2.25rem 2rem;
  text-align: center;
  border-radius: 0;
  position: relative;
  animation: popIn 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .link-card {
    background-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(6px) saturate(1.15);
    -webkit-backdrop-filter: blur(6px) saturate(1.15);
  }
}

@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.95) translateY(20px); }
  100% { opacity: 1; transform: scale(1)    translateY(0); }
}

@media (max-width: 480px) {
  .link-card {
    padding: 2rem 1.25rem 1.5rem;
    box-shadow:
      7px 7px 0 0 var(--shadow-color),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
}

/* ---------- Avatar ---------- */
.avatar-wrapper {
  margin: 0 0 1.5rem 0;
  display: flex;
  justify-content: center;
}

.avatar-frame {
  width: 125px;
  height: 125px;
  border-radius: 50%;
  border: 3.5px solid var(--border);
  background-color: var(--color-white);
  padding: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 5px 5px 0 0 var(--shadow-color);
  transition: transform 0.25s ease;
}

.avatar-frame:hover {
  transform: scale(1.04) rotate(-2deg);
}

.avatar-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

/* ---------- Typography ---------- */
.profile-title {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 3.35rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--color-white);
  margin: 0 0 0.4rem 0;
  line-height: 1.05;
  text-shadow: 4px 4px 0 var(--color-pink);
}

.profile-subtitle {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  margin: 0 0 1.5rem 0;
  letter-spacing: 0.01em;
}

/* ---------- Bio block ---------- */
.bio-text {
  background-color: rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.2);
  padding: 0.7rem 1rem;
  margin: 0 0 1.75rem 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--color-white);
}

.bio-text p {
  margin: 0;
}

.bio-handle {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.92);
}

.highlight-link {
  color: var(--color-cyan);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  font-weight: 700;
  /* Always-present padding with a negative margin to keep the
     surrounding text in the exact same position. Hover only swaps
     colors, so the text never reflows. */
  padding: 0.05em 0.25rem;
  margin: 0 -0.25rem;
  background-color: transparent;
  border-radius: 2px;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.highlight-link:hover,
.highlight-link:focus-visible {
  color: var(--color-black);
  background-color: var(--color-cyan);
  outline: none;
}

/* ---------- Link buttons stack ---------- */
.links-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
}

.custom-link-btn {
  width: 100%;
  min-height: 3.6rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-black);
  border: 3.5px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: 5px 5px 0 0 var(--shadow-color);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.6rem 1.25rem;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background-color 0.12s ease,
    color 0.12s ease;
}

.custom-link-btn:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 0 var(--shadow-color);
}

.custom-link-btn:focus-visible {
  outline: 3px solid var(--color-white);
  outline-offset: 3px;
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 0 var(--shadow-color);
}

.custom-link-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--shadow-color);
}

.btn-icon {
  font-size: 1.4rem;
  margin-right: 1.1rem;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn-label {
  flex-grow: 1;
  text-align: left;
}

.arrow-icon {
  font-size: 0.95rem;
  opacity: 0.85;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.custom-link-btn:hover .arrow-icon {
  transform: translateX(4px);
  opacity: 1;
}

/* ---------- Per-button colour variants (using BlueZTV's original palette) ---------- */

/* YouTube — pink */
.btn-youtube {
  background-color: var(--color-pink) !important;
  color: var(--color-black) !important;
}
.btn-youtube:hover { background-color: #ff4dff !important; }

/* Nostr — purple */
.btn-nostr {
  background-color: var(--color-purple) !important;
  color: var(--color-white) !important;
}
.btn-nostr:hover { background-color: #9a3aff !important; }

/* Twitter / X — cyan */
.btn-twitter {
  background-color: var(--color-cyan) !important;
  color: var(--color-black) !important;
}
.btn-twitter:hover { background-color: #4ff5ff !important; }

/* 2D artist — magenta with a slight pop */
.btn-2d {
  background-color: var(--color-magenta) !important;
  color: var(--color-black) !important;
}
.btn-2d:hover { background-color: #ff4dfb !important; }

/* 3D artist — deep purple with a touch lighter */
.btn-3d {
  background-color: #4a00b3 !important;
  color: var(--color-white) !important;
}
.btn-3d:hover { background-color: #6a1ad3 !important; }

/* ---------- Divider ---------- */
.neo-divider {
  height: 3px;
  background-color: var(--color-white);
  border: none;
  margin: 2rem 0 1.25rem 0;
  opacity: 0.9;
}

/* ---------- Social icons row ---------- */
.socials-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.social-icon {
  --c: var(--color-white);
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--c);
  background-color: var(--color-black);
  border: 3px solid var(--color-white);
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.social-icon:hover {
  transform: translate(-2px, -2px) rotate(-3deg);
  box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.6);
  background-color: var(--c);
  color: var(--color-black);
}

.social-icon:focus-visible {
  outline: 3px solid var(--color-white);
  outline-offset: 3px;
}

/* ---------- Footer ---------- */
.page-footer {
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  letter-spacing: 0.02em;
}

.footer-handle {
  color: var(--color-cyan);
  font-weight: 800;
}

/* ---------- Bulma helpers used on the page ----------
   - `.mx-auto` on the .link-card: `margin-left: auto; margin-right: auto`
     so the card centers inside the flex `.main-wrapper`.
   No other Bulma overrides needed; everything else is bespoke.
   ------------------------------------------------------------- */