/* Dracula colour palette (CSS variables) */
:root {
  --bg          : #282a36;   /* page background */
  --panel       : #44475a;   /* very light panel (optional) */
  --fg          : #f8f8f2;   /* primary text */
  --muted       : #6272a4;   /* secondary / muted text */
  --cyan        : #8be9fd;
  --green       : #50fa7b;
  --orange      : #ffb86c;
  --pink        : #ff79c6;
  --purple      : #bd93f9;
  --red         : #ff5555;
  --yellow      : #f1fa8c;

  /* Fonts */
  --font-sans   : sans-serif;
}

/* --------------------------------------------------------------
   Global reset & base styles
   -------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  line-height: 1.6;
}

/* Links – keep them visible but subtle */
a {
  color: var(--cyan);
  text-decoration: none;
}
a:hover,
a:focus {
  color: var(--pink);
  text-decoration: underline;
}

/* --------------------------------------------------------------
   Layout containers – no borders, just spacing
   -------------------------------------------------------------- */
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header – simple centered text */
header {
  padding: 2rem 1rem;
  text-align: center;
}

/* Main – central column with modest side padding */
main {
  flex: 1;
  max-width: 800px;
  width: 90%;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* Footer – same style as header */
footer {
  padding: 1rem;
  text-align: center;
  color: var(--muted);
}

/* --------------------------------------------------------------
   Section styling – only vertical spacing
   -------------------------------------------------------------- */
section {
  margin-bottom: 2rem;
}

/* Section headings – a pop of colour for hierarchy */
section h2 {
  margin-top: 0;
  color: var(--pink);
  font-weight: normal;
}

#info-flash {
  text-align: center;          /* centers everything inside the section */
}

/* Paragraphs – keep default margins */
section p {
  margin: 0.8rem 0;
}

/* Emphasis – colour‑coded but still text‑only */
section b,
section strong { color: var(--yellow); }
section i        { color: var(--cyan); }

/* --------------------------------------------------------------
   Specific element tweaks
   -------------------------------------------------------------- */

/* Tagline – slightly smaller, muted colour */
#tagline {
  font-size: 1.1rem;
  color: var(--muted);
}

/* Social links – inline, spaced */
.social a {
  margin: 0 0.5rem;
  color: var(--green);
}
.social a:hover {
  color: var(--orange);
}

/* --------------------------------------------------------------
   Utility helpers (optional)
   -------------------------------------------------------------- */
.text-muted   { color: var(--muted); }
.text-primary { color: var(--pink); }
.text-success { color: var(--green); }
.text-warning { color: var(--orange); }
.text-danger  { color: var(--red); }

/* --------------------------------------------------------------
   Responsive tweaks (optional)
   -------------------------------------------------------------- */
@media (max-width: 600px) {
  header, footer { padding: 1.5rem 0.5rem; }
  main { padding: 0 0.5rem; }
}

/* --------------------------------------------------------------
   Flashing title for the Info‑Flash section
   -------------------------------------------------------------- */

/* Keyframes – a short bright flash */
@keyframes flashTitle {
  0%, 70%, 100% { opacity: 0.4; }   /* mostly dim */
  71%, 73%       { opacity: 1; }   /* quick bright flash */
}

/*  Apply animation only to the heading */
.info-flash .flash-title {
  display: inline-block;               /* allows transform/opacity */
  color: var(--green);                  /* keep the pink hue you already use */
  animation: flashTitle 1s ease-in-out infinite;
}

/* --------------------------------------------------------------
   running‑light border for #info-flash
   -------------------------------------------------------------- */

/* Container – position relative so the pseudo‑elements can
   be placed absolutely around it */
.info-flash {
  position: relative;               /* needed for ::before/::after */
  padding: 1.2rem;                  /* give the content some breathing room */
  overflow: hidden;                 /* hide the animated line when it wraps */
}

/* --------------------------------------------------------------
   Animated neon line 
   -------------------------------------------------------------- */

/* Common style for all four sides */
.info-flash::before,
.info-flash::after,
.info-flash span::before,
.info-flash span::after {
  content: "";
  position: absolute;
  background: linear-gradient(
    90deg,
    transparent,
    var(--green) 50%,
    transparent
  );
  /* The line itself is 2 px thick */
  height: 2px;
  width: 100%;
}

/* Top side – moves left → right */
.info-flash::before {
  top: 0;
  left: -100%;                      /* start off‑screen */
  animation: scan-horizontal 3s linear infinite;
}

/* Bottom side – moves right → left (mirrored) */
.info-flash::after {
  bottom: 0;
  left: 100%;                       /* start off‑screen opposite direction */
  animation: scan-horizontal-reverse 3s linear infinite;
}

/* --------------------------------------------------------------
   Keyframes – horizontal & vertical scans
   -------------------------------------------------------------- */
@keyframes scan-horizontal {
  0%   { left: -100%; }
  100% { left: 100%; }
}
@keyframes scan-horizontal-reverse {
  0%   { left: 100%; }
  100% { left: -100%; }
}

/* --------------------------------------------------------------
   Optional: reduce animation intensity on very small screens
   -------------------------------------------------------------- */
@media (max-width: 400px) {
  .info-flash::before,
  .info-flash::after,
  .info-flash span::before,
  .info-flash span::after {
    animation-duration: 5s;   /* slower, less distracting */
  }
}
/* --------------------------------------------------------------
   LINK SECTION
   -------------------------------------------------------------- */

.links {
  /* keep the same background as the rest of the page (no extra box) */
  padding: 1rem 0;
}

/* Center the heading and give it a pop of colour */
.links h2 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--pink);
  text-align: center;
}

/* -----------------------------------------------------------------
   .link-list – vertical stack, centered
   ----------------------------------------------------------------- */
.link-list {
  list-style: none;            /* remove bullets */
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Individual list items – space between rows */
.link-list li {
  margin: 0.6rem 0;
}

/* Links – baseline style + subtle neon hover */
.link-list a {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  color: var(--cyan);
  font-size: 1.05rem;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover/focus */
.link-list a:hover,
.link-list a:focus {
  background-color: rgba(255, 121, 198, 0.08); /* pink translucent */
  color: var(--pink);
  box-shadow: 0 0 6px var(--pink);
}

/* Active (tap on mobile) – a slightly darker background */
.link-list a:active {
  background-color: rgba(255, 121, 198, 0.15);
}

/* --------------------------------------------------------------
   RESPONSIVE TWEAKS – keep tap targets comfortable on mobile
   -------------------------------------------------------------- */
@media (max-width: 500px) {
  .link-list a {
    font-size: 1.1rem;
    padding: 0.6rem 1rem;
  }
}
/* --------------------------------------------------------------
   Red “Orbit” glow – used for the <Order of Orbit> text
   -------------------------------------------------------------- */
.orbit-glow {
  color: #ff5555;                     /* Dracula red */
  font-weight: bold;
  /* Subtle pulsating glow */
  text-shadow:
    0 0 4px rgba(255,85,85,0.7),
    0 0 8px rgba(255,85,85,0.5);
  animation: orbitPulse 2.5s ease-in-out infinite;
}

/* Pulsing animation – fades in/out smoothly */
@keyframes orbitPulse {
  0%, 100% { opacity: 0.1; }
  50%      { opacity: 1;   }
}
/* --------------------------------------------------------------
   static cyber‑grid background for #links
   -------------------------------------------------------------- */
#links {
  position: relative;
  padding: 1.2rem;
  overflow: hidden;                /* clip the pseudo‑element */
}

/* Grid overlay */
#links::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      to right,
      transparent,
      transparent 20px,
      rgba(98,114,164,0.07) 20px,   /* Dracula comment colour, very faint */
      rgba(98,114,164,0.07) 21px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent,
      transparent 20px,
      rgba(98,114,164,0.07) 20px,
      rgba(98,114,164,0.07) 21px
    );
  /* No animation – purely decorative */
}
/* --------------------------------------------------------------
   ASCII‑ART NAME BANNER – animated gradient (CSS‑only)
   -------------------------------------------------------------- */
.ascii-name {
  /* Monospace font – keeps the art aligned */
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.95rem;               /* adjust to fit your layout */
  line-height: 1.2;
  text-align: center;
  white-space: pre;                 /* preserve spaces & line‑breaks */
  margin: 0 auto 1rem;              /* centre horizontally, add bottom margin */

  /* Gradient background */
  background: linear-gradient(
    135deg,                         /* diagonal direction – feel free to change */
    #ff79c6,                        /* Dracula pink */
    #8be9fd,                        /* Dracula cyan */
    #50fa7b                         /* Dracula green */
  );
  background-size: 300% 300%;       /* give the gradient room to move */

  /*  Clip the gradient to the text */
  -webkit-background-clip: text;    /* Chrome, Safari, Edge */
  background-clip: text;            /* Firefox (≥49) */
  color: transparent;               /* hide the original text colour */

  /*  Animate the gradient – a slow, endless drift */
  animation: gradientShift 12s linear infinite;
}

/* --------------------------------------------------------------
   KEYFRAMES – move the gradient left‑to‑right (you can change direction)
   -------------------------------------------------------------- */
@keyframes gradientShift {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 0%; }
  100% { background-position: 0% 0%; }
}

/* --------------------------------------------------------------
   FALLBACK for browsers that don’t support background‑clip:text
   -------------------------------------------------------------- */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .ascii-name {
    color: #ff79c6;   /* solid pink – first gradient stop */
    background: none;
  }
}

/* --------------------------------------------------------------
   RESPONSIVE tweak – shrink a bit on very small screens
   -------------------------------------------------------------- */
@media (max-width: 480px) {
  .ascii-name {
    font-size: 0.75rem;
  }
}
/* --------------------------------------------------------------
   STATIC DRACULA‑THEMED SCAN LINES
   -------------------------------------------------------------- */

/* Give the body a stacking context (needed once) */
body {
  position: relative;          /* creates a stacking context */
}

/* 2️⃣ Full‑screen pseudo‑element that sits behind content
      but **above** the page background */
body::before {
  content: "";
  position: fixed;             /* stays fixed while scrolling */
  inset: 0;                    /* cover the whole viewport */
  pointer-events: none;        /* never block clicks */
  z-index: 0;                  /* behind everything else */

  /* 3️⃣ Dark‑purple scan lines – very low opacity so they’re barely there */
  background-image:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 4px,               /* space between lines */
      rgba(98,114,164,0.07) 4px,     /* Dracula comment colour, faint */
      rgba(98,114,164,0.07) 5px      /* line thickness = 1 px */
    );

  /* No animation – the pattern stays static */
}
/* --------------------------------------------------------------
   CONTACT SECTION 
   -------------------------------------------------------------- */
.contact {
  position: relative;
  margin: 2rem auto 0;               /* space above, centre horizontally */
  max-width: 800px;
  padding: 1rem 1.2rem;
  text-align: center;
}

/* Optional very‑light overlay so the section is visually separated */
.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(40,42,54,0.07);   /* 7 % of the Dracula background colour */
  border-radius: 6px;
  z-index: -1;                       /* keep it behind the text */
}

/* Heading – smaller than the main <h2> headings */
.contact h3 {
  margin: 0 0 0.6rem;
  font-size: 1.2rem;                /* a step down from the <h2> size */
  color: var(--pink);               /* keep the pink accent for headings */
}

/* Email link – use the same green you already use for other links */
.email-link {
  color: var(--green);
  font-weight: 500;
  text-decoration: none;
}
.email-link:hover,
.email-link:focus {
  color: var(--cyan);
  text-decoration: underline;
}

/* Responsive tweak – a little smaller on very narrow screens */
@media (max-width: 480px) {
  .contact {
    padding: 0.8rem 0.6rem;
  }
  .contact h3 {
    font-size: 1.1rem;
  }
}
/* --------------------------------------------------------------
   INFO‑FLASH – embed the external text file
   -------------------------------------------------------------- */
.info-update {
  display: block;                /* takes the full width of the container */
  width: 100%;
  border: none;                  /* remove the default iframe border */
  background: transparent;
  overflow: hidden;              /* hide any scrollbars */
  font-family: inherit;          /* inherit the page’s font (monospace if you like) */
  font-size: 0.95rem;            /* match the surrounding paragraph size */
  line-height: 1.5;
  color: var(--fg);              /* use the Dracula foreground colour */
  margin: 0.8rem 0;              /* vertical spacing like a normal <p> */
  min-height: 2.5rem;            /* ensures the element is tall enough */
  filter: invert(1) hue-rotate(180deg);
}

/* Prevent the iframe from adding extra vertical space on some browsers */
.info-update::-webkit-scrollbar { display: none; }