@font-face {
  font-family: 'ComicMono';
  src: url('../fonts/ComicMono.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'ComicMono';
  src: url('../fonts/ComicMono-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

:root {
  --bg-color: #F5A9B8;
  --text-color: rgba(255, 255, 255, 0.85);
  --icon-color: rgba(255, 255, 255, 0.7);
}

body {
  font-family: 'ComicMono', monospace;
  background: linear-gradient(135deg, #5D4E75 0%, #8B5A9B 25%, #C44569 50%, #FF6B9D 75%, #F5A9B8 100%);
  color: var(--text-color);
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  font-feature-settings: "liga" 1, "calt" 1;
  font-variant-ligatures: contextual;
}

body.posts-body {
  background-color: #08041a;
  position: relative;
}

/* Sky — top half */
body.posts-body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    /* Stars: tiny white dots scattered via repeating gradients */
    radial-gradient(5px 5px at 15% 12%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(5px 5px at 42% 8%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(5px 5px at 68% 20%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(5px 5px at 82% 6%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(5px 5px at 25% 30%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(5px 5px at 55% 15%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(5px 5px at 90% 28%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(5px 5px at 5% 40%, rgba(255,255,255,0.4) 0%, transparent 100%),
    /* Horizon sun glow */
    radial-gradient(ellipse 60% 18% at 50% 52%, rgba(255, 80, 200, 0.9) 0%, rgba(255, 0, 150, 0.4) 40%, transparent 70%),
    /* Sky gradient */
    linear-gradient(to bottom,
      #08041a 0%,
      #0f0630 35%,
      #1a0540 48%,
      #2d0550 52%,
      #08041a 55%,
      #08041a 100%
    );
  pointer-events: none;
}

/* Perspective grid floor — bottom half */
body.posts-body::after {
  content: '';
  position: fixed;
  left: -20%;
  right: -20%;
  bottom: -10%;
  height: 55%;
  z-index: -1;
  background:
    /* Vertical lines */
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent calc(9.09% - 1px),
      rgba(255, 0, 220, 0.7) calc(9.09% - 1px),
      rgba(255, 0, 220, 0.7) 9.09%
    ),
    /* Horizontal lines */
    repeating-linear-gradient(
      180deg,
      transparent,
      transparent calc(12.5% - 1px),
      rgba(0, 230, 255, 0.6) calc(12.5% - 1px),
      rgba(0, 230, 255, 0.6) 12.5%
    ),
    /* Floor base color */
    linear-gradient(to bottom, #0a0020 0%, #050010 100%);
  transform: perspective(400px) rotateX(55deg);
  transform-origin: 50% 0%;
  pointer-events: none;
}

/* Horizon fade — sits above the grid, dissolves the top ~40% of it into the sky */
 .vapor-fade {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 55%;
  z-index: 0;
  pointer-events: none;
  /* Tall gradient from the background color down to transparent, eating the top of the grid */
  background: linear-gradient(
    to bottom,
    #08041a 0%,
    rgba(8, 4, 26, 0.92) 12%,
    rgba(8, 4, 26, 0.75) 22%,
    rgba(8, 4, 26, 0.45) 35%,
    rgba(8, 4, 26, 0.15) 50%,
    transparent 65%
  );
  /* Blur increases toward the top to smear the grid lines near the horizon */
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, black 60%, transparent 100%);
  backdrop-filter: blur(4px);
} 

/* Vaporwave moon — segmented circle with horizontal stripe cutouts */
.vapor-moon {
  position: fixed;
  bottom: 55%;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  /* Hot pink → magenta gradient base */
  background: linear-gradient(to bottom,
    #ff9de2 0%,
    #ff71ce 25%,
    #ff3ab5 50%,
    #c800a1 75%,
    #7a007f 100%
  );
  /* Soft outer glow */
  box-shadow:
    0 0 40px 12px rgba(255, 113, 206, 0.5),
    0 0 80px 30px rgba(200, 0, 161, 0.25);
  /* Horizontal stripe cutouts using a repeating-linear-gradient mask.
     Each stripe pair: 7px opaque moon, 4px transparent gap */
  -webkit-mask-image: repeating-linear-gradient(
    to bottom,
    black 0px,
    black 7px,
    transparent 7px,
    transparent 11px
  );
  mask-image: repeating-linear-gradient(
    to bottom,
    black 0px,
    black 7px,
    transparent 7px,
    transparent 11px
  );
}

/* Subtle halo ring behind the moon */
.vapor-moon::before {
  content: none;
}

/* ── Vaporwave palm trees ── */

/*
  Each palm is an SVG inline via background-image.
  Left palm leans right, right palm leans left (mirrored with scaleX).
  Both sit with their base at the horizon (bottom: 50%).
*/
.vapor-palm {
  position: fixed;
  bottom: 48%;
  width: 140px;
  height: 280px;
  z-index: 1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom center;
  /* Dark trunk, pink fronds matching moon palette */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 450'%3E%3C!-- Trunk: leans right, base at x=120 bottom, top at x=100 --%3E%3Cpath d='M120 450 C118 400 112 350 106 300 C100 250 94 210 92 170 C88 130 86 100 90 68' stroke='%231a0030' stroke-width='12' stroke-linecap='round' fill='none'/%3E%3C!-- Frond: far right --%3E%3Cpath d='M90 68 C125 38 175 22 198 38' stroke='%23ffb3e6' stroke-width='5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M90 68 C128 40 173 28 198 38 C173 48 126 52 90 68Z' fill='%23ff9de2' opacity='0.9'/%3E%3C!-- Frond: mid right --%3E%3Cpath d='M90 68 C128 60 172 68 192 92' stroke='%23ffb3e6' stroke-width='5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M90 68 C130 64 170 75 192 92 C168 82 128 72 90 68Z' fill='%23ff71ce' opacity='0.85'/%3E%3C!-- Frond: right droop --%3E%3Cpath d='M90 68 C122 85 162 105 178 138' stroke='%23ffb3e6' stroke-width='5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M90 68 C124 90 160 112 178 138 C158 118 120 95 90 68Z' fill='%23ff71ce' opacity='0.8'/%3E%3C!-- Frond: far left --%3E%3Cpath d='M90 68 C62 38 18 24 4 40' stroke='%23ffb3e6' stroke-width='5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M90 68 C60 42 16 30 4 40 C18 50 62 55 90 68Z' fill='%23ff9de2' opacity='0.9'/%3E%3C!-- Frond: mid left --%3E%3Cpath d='M90 68 C62 60 20 70 6 95' stroke='%23ffb3e6' stroke-width='5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M90 68 C60 64 18 76 6 95 C20 82 62 72 90 68Z' fill='%23ff71ce' opacity='0.85'/%3E%3C!-- Frond: straight up --%3E%3Cpath d='M90 68 C86 48 88 28 94 12' stroke='%23ffb3e6' stroke-width='5' stroke-linecap='round' fill='none'/%3E%3Cpath d='M90 68 C83 46 85 26 94 12 C100 28 98 48 90 68Z' fill='%23ff9de2' opacity='0.9'/%3E%3C/svg%3E");
}

.vapor-palm-left {
  left: 5%;
}

.vapor-palm-right {
  right: 5%;
  /* Mirror the left palm */
  transform: scaleX(-1);
}

.pattern {
  background-image: var(--pattern-url);
  background-repeat: repeat;
  background-size: 300px 300px;
}

.profile-pic {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.profile-pic:hover {
  transform: scale(1.05);
  border-color: rgba(255, 255, 255, 0.4);
}

.link-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.link-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.icon {
  color: var(--icon-color);
  transition: all 0.3s ease;
}

.link-card:hover .icon {
  transform: scale(1.1);
  color: rgba(255, 255, 255, 0.9);
}

.bg-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(91,206,250,0.4);
  animation: float 15s infinite linear;
}

.oval {
  position: absolute;
  border-radius: 50%;
  background: rgba(91,206,250,0.4);
  animation: float 15s infinite linear;
}

.square {
  position: absolute;
  background: rgba(91,206,250,0.4);
  animation: float 15s infinite linear;
}

.rectangle {
  position: absolute;
  background: rgba(91,206,250,0.4);
  animation: float 15s infinite linear;
}

.triangle {
  position: absolute;
  background: none;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 86.6px solid rgba(91,206,250,0.4);
  animation: float 15s infinite linear;
}

@keyframes float {
  0% {
      transform: translateY(100vh) rotate(0deg);
      opacity: 1;
  }
  100% {
      transform: translateY(-200px) rotate(720deg);
      opacity: 0;
  }
}

.info-box {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(5px);
  border-left: 3px solid var(--icon-color);
}

.social-icons a {
  transition: all 0.3s ease;
}

.social-icons a:hover {
  transform: translateY(-3px) scale(1.1);
}

/* Generate random circles for background */
.generate-circles {
  position: absolute;
  width: 100%;
  height: 100%;
}

.pulsating-box {
  animation: glowWave 4s infinite;
}

@keyframes glowWave {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0 0 20px 20px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

.border-trace::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px; /* match your card radius */
  box-sizing: border-box;
  pointer-events: none;

  /* Gradient border using a mask trick */
  border: 3px solid transparent;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), rgba(209, 77, 77, 0.224), rgba(255, 255, 255, 0.8));
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 3px; /* same as border thickness */

  /* Animation */
  clip-path: inset(0 100% 0 0); /* start hidden */
  animation: drawBorder 10s linear infinite; /* slower: 10s */
}

@keyframes drawBorder {
  0% {
    clip-path: inset(0 100% 0 0); /* hidden */
  }
  25% {
    clip-path: inset(0 0 0 0); /* fully visible */
  }
  50% {
    clip-path: inset(100% 0 0 0); /* start hiding from top */
  }
  75% {
    clip-path: inset(0 0 0 100%); /* hide from right */
  }
  100% {
    clip-path: inset(0 100% 0 0); /* back to hidden */
  }
}