/* ============================================
   GOOGLE FONTS IMPORT
   ============================================ */
/* Import Syne Mono - a monospace font with clean, modern appearance */
@import url("https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap");

/* ============================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================ */
:root {
  /* Background color - pure black */
  --bg: #000000;
  
  /* Aurora color palette - these control the 4 colored aurora blobs */
  --clr-1: #00c2ff;  /* Cyan/blue - used by aurora blob 1 */
  --clr-2: #33ff8c;  /* Green - used by aurora blob 3 */
  --clr-3: #ffc640;  /* Orange/yellow - used by aurora blob 2 */
  --clr-4: #e54cff;  /* Magenta/pink - used by aurora blob 4 */

  /* Aurora blur amount - higher = softer edges (currently 5rem for very smooth blending) */
  --blur: 5rem;
}

/* ============================================
   GLOBAL STYLES
   ============================================ */
body {
  min-height: 100vh;           /* Ensure body is at least full viewport height */
  display: grid;                /* Use grid for easy centering */
  place-items: center;          /* Center content both horizontally and vertically */
  background-color: var(--bg);  /* Apply black background */
  color: #fff;                  /* Default white text color */
  font-family: "Syne Mono", monospace;  /* Apply Syne Mono font globally */
}

/* Reset box-sizing and ensure font inheritance for all elements */
*,
*::before,
*::after {
  font-family: inherit;  /* Ensure all elements inherit the Syne Mono font */
  box-sizing: border-box; /* Include padding and border in element's total width/height */
}

/* ============================================
   CONTENT CONTAINER
   ============================================ */
.content {
  text-align: left;              /* Align text to the left */
  width: min(90vw, 600px);       /* Responsive width: 90% of viewport or max 600px */
  aspect-ratio: 6 / 9;           /* Maintain 6:9 aspect ratio (portrait orientation) */
  max-height: 90vh;              /* Don't exceed 90% of viewport height */
  display: flex;                 /* Use flexbox layout */
  align-items: flex-start;       /* Align content to top */
  justify-content: center;       /* Center horizontally */
}

/* ============================================
   TEXT TITLE AREA (SCROLLABLE CONTENT)
   ============================================ */
.title {
  font-size: 20px;                      /* Text size for readability */
  font-weight: 400;                     /* Use actual available weight for Syne Mono */
  letter-spacing: 1px;                  /* Add space between characters for readability */
  text-rendering: optimizeLegibility;   /* Improve font rendering and kerning universally */
  position: relative;                   /* Allows absolute positioning of child elements (aurora) */
  overflow: auto;                       /* Enable scrolling when content exceeds container */
  background: var(--bg);                /* Black background to prevent text from showing through */
  margin: 0;                            /* Remove default margin */
  width: 100%;                          /* Full width of parent container */
  height: 100%;                         /* Full height of parent container */
  white-space: pre-line;                /* Preserve line breaks from HTML source text */
  line-height: 1.5;                     /* Spacing between lines (1.5x font size) */
  scrollbar-width: none;                /* Hide scrollbar in Firefox */
  -ms-overflow-style: none;             /* Hide scrollbar in IE/Edge legacy */
  color: #33CC00;                       /* Bright green text color */
  -webkit-text-fill-color: #33CC00;     /* Force green color in WebKit browsers (Safari mobile fix) */
}

/* Hide scrollbar in Chrome/Safari while keeping scroll functionality */
.title::-webkit-scrollbar {
  display: none;
}

/* ============================================
   AURORA EFFECT CONTAINER
   ============================================ */
.aurora {
  position: fixed;                /* Fixed to viewport, doesn't move with scroll */
  top: 0;                         /* Align to top of viewport */
  left: 0;                        /* Align to left of viewport */
  width: 100%;                    /* Full viewport width */
  height: 100vh;                  /* Full viewport height */
  z-index: 2;                     /* Layer above text content */
  mix-blend-mode: color-dodge;    /* Blend mode: creates intense, vivid color mixing with underlying green text */
  pointer-events: none;           /* Allow clicking through aurora to interact with text */
}

/* ============================================
   INDIVIDUAL AURORA BLOBS
   ============================================ */
.aurora__item {
  overflow: hidden;                                 /* Hide any content that exceeds bounds */
  position: absolute;                               /* Position relative to .aurora container */
  width: 180vw;                                     /* 180% of viewport width (tripled from original 60vw) */
  height: 180vw;                                    /* Same as width to create circular shapes */
  background-color: var(--clr-1);                   /* Default to color 1 (cyan) */
  border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; /* Organic, irregular shape (not perfect circle) */
  filter: blur(var(--blur));                        /* Apply blur for smooth color transitions */
  mix-blend-mode: overlay;                          /* Blend mode for individual blobs */
  opacity: 0.7;                                     /* 70% opacity to reduce harsh contrasts */
}

/* Aurora blob 1: Cyan/blue - moves from top-right through center */
.aurora__item:nth-of-type(1) {
  top: -50%;                                        /* Start above viewport */
  animation: aurora-border 24s linear infinite,     /* Animate shape morphing every 24s */
    aurora-1 48s linear infinite alternate;         /* Animate position every 48s, reversing */
}

/* Aurora blob 2: Orange/yellow - moves from top-right across */
.aurora__item:nth-of-type(2) {
  background-color: var(--clr-3);                   /* Override to use orange color */
  right: 0;                                         /* Start at right edge */
  top: 0;                                           /* Start at top */
  animation: aurora-border 24s linear infinite,     /* Animate shape morphing every 24s */
    aurora-2 48s linear infinite alternate;         /* Animate position every 48s, reversing */
}

/* Aurora blob 3: Green - moves from bottom-left upward */
.aurora__item:nth-of-type(3) {
  background-color: var(--clr-2);                   /* Override to use green color */
  left: 0;                                          /* Start at left edge */
  bottom: 0;                                        /* Start at bottom */
  animation: aurora-border 32s linear infinite alternate,  /* Animate shape morphing every 32s */
    aurora-3 32s linear infinite alternate;         /* Animate position every 32s, reversing */
}

/* Aurora blob 4: Magenta/pink - slowest moving, creates ambient background color */
.aurora__item:nth-of-type(4) {
  background-color: var(--clr-4);                   /* Override to use magenta color */
  right: 0;                                         /* Start at right edge */
  bottom: -50%;                                     /* Start below viewport */
  animation: aurora-border 24s linear infinite,     /* Animate shape morphing every 24s */
    aurora-4 96s linear infinite alternate;         /* Animate position every 96s (slowest), reversing */
}

/* ============================================
   AURORA MOVEMENT ANIMATIONS
   ============================================ */

/* Aurora 1 movement: Top to bottom, right to left, extended range (300%) to cover full scrollable content */
@keyframes aurora-1 {
  0% {
    top: -100%;    /* Start well above viewport */
    right: 0;      /* Start at right edge */
  }

  50% {
    top: 300%;     /* Move far below viewport to cover scroll area */
    right: 75%;    /* Move toward left */
  }

  75% {
    top: 300%;     /* Stay at bottom */
    right: 25%;    /* Move more to left */
  }

  100% {
    top: -100%;    /* Return to starting position */
    right: 0;
  }
}

/* Aurora 2 movement: Diagonal sweep from top-left to bottom-right */
@keyframes aurora-2 {
  0% {
    top: -100%;    /* Start above viewport */
    left: 0%;      /* Start at left edge */
  }

  60% {
    top: 300%;     /* Move far below viewport */
    left: 75%;     /* Move toward right */
  }

  85% {
    top: 300%;     /* Stay at bottom */
    left: 25%;     /* Move back toward left */
  }

  100% {
    top: -100%;    /* Return to starting position */
    left: 0%;
  }
}

/* Aurora 3 movement: Bottom to top, left to right */
@keyframes aurora-3 {
  0% {
    bottom: -100%; /* Start below viewport */
    left: 0;       /* Start at left edge */
  }

  40% {
    bottom: 300%;  /* Move far above viewport */
    left: 75%;     /* Move toward right */
  }

  65% {
    bottom: 200%;  /* Move back down partway */
    left: 50%;     /* Move toward center */
  }

  100% {
    bottom: -100%; /* Return to starting position */
    left: 0;
  }
}

/* Aurora 4 movement: Slow drift from bottom-right across viewport */
@keyframes aurora-4 {
  0% {
    bottom: -100%; /* Start below viewport */
    right: 0;      /* Start at right edge */
  }

  50% {
    bottom: 200%;  /* Move up past viewport */
    right: 40%;    /* Move toward left */
  }

  90% {
    bottom: 300%;  /* Move far above viewport */
    right: 25%;    /* Move more to left */
  }

  100% {
    bottom: -100%; /* Return to starting position */
    right: 0;
  }
}

/* ============================================
   AURORA SHAPE MORPHING ANIMATION
   ============================================ */
/* Animates border-radius to create organic, flowing shape changes */
@keyframes aurora-border {
  0% {
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;  /* Starting organic shape */
  }

  25% {
    border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;  /* Morph to different shape */
  }

  50% {
    border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;  /* Continue morphing */
  }

  75% {
    border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%; /* More dramatic shape change */
  }

  100% {
    border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;  /* Return to starting shape */
  }
}