/* FONT Montserrat - latin */
@font-face {
  font-family: 'Montserrat-Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Montserrat-normal-100-900.woff2') format('woff2');
}

/* FONT Cutive Mono - latin */
@font-face {
  font-family: 'Cutive-Mono-400';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/CutiveMono-normal-400.woff2') format('woff2');
}

/* FONT Sniglet - latin */
@font-face {
  font-family: 'Sniglet-400';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Sniglet-normal-400.woff2') format('woff2');
}

:root {
  --color-primary: #77bfe2; /* rgb(119, 191, 226) */
  --color-secondary: #ffb46f; /* rgb(255, 180, 111)  */
  --color-tertiary: #1a1a3e;
  --color-quaternary: #c8c8e8; /* Rabbit Hole Section titles */
  --color-accent-1: #fce786; /* Global Link color; rgb(252, 231, 134) */
  --color-accent-2: #f6ca00; /* Global Hover link color; rgb(246, 202, 0) */
  --color-accent-3: #ffeeda;
  --color-accent-4: #018281;
  --color-accent-5: #ff3300;
  --color-accent-6: #02a5ff;
  --color-accent-7: #66cc33;
  --color-accent-8: #ffcc00;
  --color-accent-9: #2a2a5e;
  --color-accent-10: #eaeaf8; /* Rabbit Hole Section taglines */
  --color-accent-11: #fdfdff; /* Rabbit Hole Section description */
  --color-neutral: #faf9f5;
  --color-white: #ffffff;
  --color-black-1: #4d4545; /* rgb(77, 69, 69) */
  --color-black-10: #383131; /* rgb(56, 49, 49) */
  --color-black-40: #252524; /* rgb(37, 37, 36) */
  --color-black-70: #1a1a19; /* rgb(26, 26, 25) */
  --color-black-100: #000000;

  --font-size-micro: 1.2rem; /* 12px; .secret-text */
  --font-size-tiny: 1.5rem; /* 15px; .minor-text */
  --font-size-small: 1.7rem; /* 17px; footer */
  --font-size-base: 1.8rem; /* 18px; body; p */
  --font-size-medium: 1.9rem; /* 19px; navigation */
  --font-size-large: 2rem; /* 20px; .major-text */
  --font-size-xl: 2.2rem; /* 22px; h6 */
  --font-size-2xl: 2.5rem; /* 25px; h5 */
  --font-size-3xl: 3rem; /* 30px; h4 */
  --font-size-4xl: 3.5rem; /* 35px; h3 */
  --font-size-5xl: 4rem; /* 40px; h2 */
  --font-size-6xl: 5rem; /* 50px; h1 */
  --font-size-7xl: 6rem; /* 60px; */
  --font-size-8xl: 8rem; /* 80px */

  /* Heading Font SNIGLET */
  --font-heading: 'Sniglet-400', system-ui;

  /* Tagline Font SNIGLET */
  --font-tagline: 'Sniglet-400', system-ui;

  /* Primary Font MONTSERRAT */
  --font-primary: 'Montserrat-Variable', sans-serif;

  /* Typewriter Font CUTIVE MONO */
  --font-typewriter: 'Cutive-Mono-400', monospace;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font: var(--font-primary);
}

strong,
b {
  font-weight: 700;
}

p a {
  font-family: var(--font-primary);
  font-weight: 500;
  font-size: var(--font-size-base);
  color: var(--color-accent-1);
  text-decoration: none;
  transition: all 0.5s ease;
  /* Position relative for ::after pseudo-element and z-index stacking */
  position: relative;
  /* Ensure links are clickable and above other elements */
  z-index: 3;
  /* Ensure the link itself is clickable */
  pointer-events: auto;
}

p a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-accent-2);
  transition: width 0.5s ease;
}

p a:hover {
  color: var(--color-accent-2);
}

p a:hover::after {
  width: 100%;
}

/* ========================================
   NEW Badge - Global Style
   ======================================== */

.new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: var(--font-size-micro);
  color: var(--color-white);
  background: linear-gradient(135deg, #ff3300 0%, #ff6633 100%);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid rgba(255, 51, 0, 0.8);
  box-shadow:
    0 2px 8px rgba(255, 51, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Subtle pulse animation for NEW badge */
.new-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: newBadgeShimmer 2s infinite;
}

@keyframes newBadgeShimmer {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}

/* Hover effect for interactive contexts */
.new-badge:hover {
  background: linear-gradient(135deg, #ff4411 0%, #ff7744 100%);
  box-shadow:
    0 4px 12px rgba(255, 51, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

/* Disable animation for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .new-badge::before {
    animation: none;
  }
  .new-badge:hover {
    transform: none;
  }
}