/*------------------------------------*\
  Variables
\*------------------------------------*/
:root {
  --clr-white:         #ffffff;
  --clr-white-rgb:     255, 255, 255;
  --clr-blue-bright:   #0466C8;
  --clr-blue-medium:   #0353A4;
  --clr-blue-deep:     #023E7D;
  --clr-blue-dark:     #002855;
  --clr-blue-midnight: #001233;
  --clr-slate-dark:    #33415C;
  --clr-gray-medium:   #5C677D;
  --clr-gray-light:    #979DAC;
}

/*------------------------------------*\
  Utility Classes
\*------------------------------------*/
.bg-blue-bright   { background-color: var(--clr-blue-bright) !important; }
.bg-blue-medium   { background-color: var(--clr-blue-medium) !important; }
.bg-blue-deep     { background-color: var(--clr-blue-deep) !important; }
.bg-blue-dark     { background-color: var(--clr-blue-dark) !important; }
.bg-blue-midnight { background-color: var(--clr-blue-midnight) !important; }
.bg-slate-dark    { background-color: var(--clr-slate-dark) !important; }
.bg-gray-medium   { background-color: var(--clr-gray-medium) !important; }
.bg-gray-light    { background-color: var(--clr-gray-light) !important; }
.text-light       { color: var(--clr-white) !important; }
.no-shadow        { box-shadow: none !important; }

/*------------------------------------*\
  Base Styles
\*------------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  color: var(--clr-white);
  font-family: 'Consolas', 'Lucida Console', monospace;
}

/*------------------------------------*\
  Layout Components
\*------------------------------------*/
.container,
header,
main,
footer {
  background: transparent !important;
}

header {
  padding: 2rem 1rem;
}

footer {
  margin-top: auto;
  padding: 1rem 0;
}

/*------------------------------------*\
  Typography
\*------------------------------------*/
header .display-5 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

header .lead {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

#fact-section h2.pixel-text {
  font-size: 1rem;
  margin-bottom: 1rem;
}

pre.ascii-art {
  font-family: 'Consolas', 'Lucida Console', monospace;
  white-space: pre;
  overflow-x: auto;
}

pre.ascii-small {
  font-size: 2px;
  line-height: 2px;
}

pre.ascii-tiny {
  font-size: 1px;
  line-height: 1px;
}

.tiny {
  font-size: 10px;
}

/*------------------------------------*\
  Navigation & Links
\*------------------------------------*/
.navbar,
footer {
  border: none !important;
}

.navbar-brand,
.nav-link {
  color: var(--clr-white) !important;
  text-shadow: none;
}

.nav-link:hover {
  text-decoration: underline;
}

/*------------------------------------*\
  Fact Typing Effect
\*------------------------------------*/
#fact {
  display: inline-block;
  margin: 0 auto;
  padding: 1rem;
  max-width: 800px;
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
}

/* Only while JS is typing (added/removed by factTypewriting) */
.typing-cursor {
  border-right: 0.15em solid currentColor;
  animation: blink-cursor 0.75s step-end infinite;
}

/*------------------------------------*\
  Rain Canvas & Button
\*------------------------------------*/
#rain-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1000;
  background: transparent;
  display: none;
  transition: opacity 0.5s ease-out;
}

#rain-btn:focus,
#rain-btn:active,
#rain-btn.active,
#rain-btn:focus-visible {
  background-color: transparent !important;
  border-color: var(--clr-white) !important;
  color: var(--clr-white) !important;
  box-shadow: none !important;
  outline: none !important;
}

#rain-btn:hover {
  background-color: rgba(var(--clr-white-rgb), 0.1) !important;
  border-color: var(--clr-white) !important;
  color: var(--clr-white) !important;
}

/*------------------------------------*\
  ASCII Logo & Glitch Animation
\*------------------------------------*/
#ascii-logo {
  white-space: pre;
  user-select: none;
  line-height: 1;
  cursor: default;
}

.char-group {
  display: inline-block;
  transition: transform 0.5s ease;
}

.char-group:hover {
  animation: glitch-group 0.5s steps(4, end);
}

/*------------------------------------*\
  Keyframes
\*------------------------------------*/
@keyframes blink-cursor {
  0%, 100% { border-color: transparent; }
  50%      { border-color: currentColor; }
}

@keyframes glitch-group {
  0%   { transform: translate(0, 0) skew(0); }
  25%  { transform: translate(8px, -4px) skew(-1deg); }
  50%  { transform: translate(-8px, 4px) skew(1deg); }
  75%  { transform: translate(4px, 8px) skew(-1deg); }
  100% { transform: translate(0, 0) skew(0); }
}