/* Full Page Layout */
body, html {
  height: 100%;
  margin: 0;
  overflow: hidden; /* Prevent scrolling */
  background-color: black;
  position: relative; /* Required for z-index to take effect */
  z-index: -10;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  z-index: -10;
  pointer-events: none;
}


/* default marker unless its custom */
.marker-highlight {
  /* Background uses a horizontal linear gradient with uneven opacity
     to simulate a hand-drawn highlighter effect */
  background: linear-gradient(
    90deg,                       /* Direction: left to right */
    rgba(255, 0, 0, 0.4) 0%,     /* Strong red at the start */
    rgba(255, 0, 0, 0.2) 50%,    /* Fades to lighter red in the middle */
    rgba(255, 0, 0, 0.4) 100%    /* Back to stronger red at the end */
  );

  padding: 3px 6px;              /* Inner spacing: 3px top/bottom, 6px left/right */
  border-radius: 5px;            /* Slightly rounded corners for a smoother look */
  display: inline;               /* Keeps it inline with surrounding text */

  /* Subtle inner shadow for a soft "ink bleed" effect */
  box-shadow: inset 0 -2px 5px rgba(255, 0, 0, 0.6);

  /* Slight tilt to mimic an organic, hand-drawn stroke */
  transform: rotate(0deg);
}

/* title for terminal */
.title {
  font-size: 13px;                  /* Terminal-style text size */
  font-weight: bold;               /* Emphasized label */
  font-family: 'Courier New', Courier, monospace;
  text-transform: uppercase;       /* All caps for terminal feel */
  color: #00ffcc;                  /* Cyberpunk green */
  text-align: center;              /* Centered heading */
}


/*
  Tooltip Container
  -------------------------------
  Wraps the element that should display a tooltip on hover.
*/
.tooltip {
  position: relative;              /* Needed for positioning the tooltip */
  display: inline-block;           /* Allows wrapping around inline content */

  /* >_ shell-style cursor */
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Crect%20width='32'%20height='32'%20fill='black'/%3E%3Ctext%20x='6'%20y='21'%20font-size='16'%20fill='%2300ffff'%20font-family='Courier%20New'%3E%3E_%3C/text%3E%3C/svg%3E") 4 4, pointer;
}

/*
  Tooltip Text Box
  ----------------
  Hidden by default; becomes visible on hover.
*/
.tooltip .tooltip-text {
  visibility: hidden;              /* Hidden until hovered */
  opacity: 0;                      /* Fully transparent initially */

  background-color: rgba(0, 0, 0, 0.85); /* Dark translucent background */
  color: #fff;                    /* White text for contrast */
  text-align: center;            /* Center-align the text */
  padding: 8px 12px;             /* Inner spacing */
  border-radius: 5px;            /* Slightly rounded corners */

  position: absolute;            /* Position relative to container */
  bottom: 150%;                  /* Position tooltip above the element */
  left: 50%;                     /* Center horizontally */
  transform: translateX(-50%);   /* Perfect centering adjustment */

  width: 220px;                  /* Fixed width for readability */
  font-size: 14px;               /* Readable font size */
  z-index: 10;                   /* Ensure it's above other elements */
  transition: opacity 0.3s ease-in-out; /* Smooth fade effect */
}

/*
  Tooltip Hover Behavior
  ----------------------
  Reveal tooltip text smoothly on hover.
*/
.tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;                    /* Fade in */
}

/*
  Accessibility Helper Class: .visually-hidden

  Purpose:
  Visually hides content from sighted users but keeps it available for screen readers.
  Useful for labeling or describing interactive elements in an accessible way
  without cluttering the visual interface.
*/
.visually-hidden {
  position: absolute;       /* Removes the element from normal flow, allowing precise placement */
  width: 1px;               /* Makes the element very narrow */
  height: 1px;              /* Makes the element very short */
  padding: 0;               /* Removes any padding space */
  overflow: hidden;         /* Ensures content doesn't spill out visually */
  clip: rect(0, 0, 0, 0);   /* Hides the element by defining a zero-sized clipping rectangle */
  white-space: nowrap;      /* Prevents line breaks which could make it grow visually */
  border: 0;                /* Ensures there's no border taking up space or rendering */
}

/* Fullscreen Background Layer */
.bg-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;
  z-index: -1; /* Layer it behind all content */
}


/*
  Neon Yellow Link (Idle)
  -----------------------
  Bold yellow text with a subtle glow.
  Used for hyperlinks styled for cyber aesthetics.
*/
.neon-link-yellow {
  color: #ffcc00; /* Neon yellow */
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  text-shadow: 0 0 3px rgba(255, 204, 0, 0.6); /* Soft glow */
  animation: neonPulse 3s ease-in-out infinite;

}

/*
  Neon Yellow Link (Hover)
  ------------------------
  Stronger glow effect on hover to simulate a neon flicker.
*/
.neon-link-yellow:hover {
  color: #ffd700; /* Lighter/brighter yellow */
  text-shadow:
    0 0 10px rgba(255, 204, 0, 1),
    0 0 15px rgba(255, 204, 0, 0.8); /* Expanded glow */
}
/*
  Neon Yellow Link (Active)
  -------------------------
  Even more intense glow when clicked or pressed.
*/
.neon-link-yellow:active {
  color: #e6b800; /* Slightly deeper yellow */
  text-shadow:
    0 0 18px rgba(255, 204, 0, 1),
    0 0 25px rgba(255, 204, 0, 0.9); /* Strongest glow */
}

/* Active/Clicked State */
.neon-link-yellow:active {
  color: #e6b800; /* Slightly darker yellow */
  text-shadow: 0 0 15px rgba(255, 204, 0, 1); /* Stronger glow */
}
/*
  Neon Glow Overlay Elements
  --------------------------
  This CSS is used to create glowing neon shapes (not text) that appear between
  the background image and the main content of the page. Useful for simulating
  neon-lit signage on walls or buildings. Apply this class to empty <div>s that
  represent structural parts like borders, accents, or sign outlines.
*/
.neon-glow {
  position: absolute;        /* Freely positionable element */
  z-index: 1;                /* Sits above the background, behind content */
  width: 50px;               /* Thickness of the neon glow bar */
  height: 520px;             /* Length of the vertical glow */
  background: rgba(0, 183, 255, 0.1); /* Soft blue interior glow */
  border-radius: 10px;       /* Rounded corners for smooth glow */
  box-shadow:
    0 0 8px rgba(0, 183, 255, 0.4),
    0 0 20px rgba(0, 183, 255, 0.6),
    0 0 30px rgba(180, 255, 255, 0.4),
    0 0 40px rgba(255, 255, 255, 0.1); /* Layered outer glow */
  animation: neonPulse 2.5s ease-in-out infinite;
}


/* Optional: animate the glow to flicker or pulse */
@keyframes neonPulse {
  0%, 100% {
    box-shadow:
      0 0 8px rgba(0, 183, 255, 0.3),
      0 0 20px rgba(0, 183, 255, 0.5),
      0 0 30px rgba(180, 255, 255, 0.3),
      0 0 40px rgba(255, 255, 255, 0.05);
  }
  50% {
    box-shadow:
      0 0 10px rgba(0, 183, 255, 0.7),
      0 0 30px rgba(0, 183, 255, 0.9),
      0 0 45px rgba(180, 255, 255, 0.5),
      0 0 60px rgba(255, 255, 255, 0.2);
  }
}
.custom-glow-soft {
  border-radius: 4px;
  background: transparent;
  box-shadow:
    0 0 30px rgba(0, 183, 255, 0.9),
    0 0 60px rgba(0, 183, 255, 1),
    0 0 80px rgba(255, 255, 255, 0.15);
}




/*
  Neon Light Blue Link (Default State)
  -------------------------------------
  Styled to appear as a glowing blue link, even when idle.
*/
.neon-link-blue {
  color: #00ccff; /* Light neon blue */
  text-decoration: none; /* Removes underline */
  font-weight: bold; /* Makes it stand out */
  transition: color 0.3s ease, text-shadow 0.3s ease; /* Smooth transitions */
  text-shadow:
    0 0 5px rgba(0, 204, 255, 0.6),
    0 0 8px rgba(0, 204, 255, 0.4); /* Subtle neon glow */
}

/*
  Hover State
  ------------
  Enhances the glow when the user hovers over the link.
*/
.neon-link-blue:hover {
  color: #33ddff; /* Brighter light blue */
  text-shadow:
    0 0 12px rgba(0, 204, 255, 1),
    0 0 18px rgba(0, 204, 255, 0.9); /* Stronger glow effect */
}
/*
  Active State
  -------------
  Activated when the user clicks or holds the link.
*/
.neon-link-blue:active {
  color: #00b3e6; /* Slightly deeper ocean blue */
  text-shadow:
    0 0 20px rgba(0, 204, 255, 1),
    0 0 30px rgba(0, 204, 255, 0.95); /* Intense glow */
}



/*
  Neon Darkest Blue Link (Default State)
  -------------------------------------
  Clean visibility with dark, readable text and soft ambient glow.
*/
.neon-link-blue-dark {
  color: #1874a0; /* Still dark, but much more visible */
  text-decoration: none;
  font-weight: bold;
  transition: color 0.25s ease, text-shadow 0.25s ease;
  text-shadow:
    0 0 2px rgba(0, 70, 130, 0.4),
    0 0 4px rgba(0, 70, 130, 0.2);
}

/*
  Hover State
  ------------
  Strong neon flash when hovered.
*/
.neon-link-blue-dark:hover {
  color: #33aaff;
  text-shadow:
    0 0 12px rgba(0, 150, 255, 0.9),
    0 0 22px rgba(0, 150, 255, 0.7),
    0 0 36px rgba(0, 150, 255, 0.5);
}

/*
  Active State
  -------------
  Intense flash when clicked or held.
*/
.neon-link-blue-dark:active {
  color: #0099e6;
  text-shadow:
    0 0 20px rgba(0, 180, 255, 1),
    0 0 34px rgba(0, 180, 255, 0.9),
    0 0 50px rgba(0, 180, 255, 0.7);
}