/*
  Script Name - drakir404.css
  Author - Richard

  Purpose -
  Styles the custom DrakirDwarf 404 error page with a responsive purple motif,
  centered error card, animated mimic image, and gold-accented homepage button.

  Steps -
  1. Define the shared purple, text, button, and gold accent colors.
  2. Center the 404 card within the browser viewport.
  3. Style the mimic image, error text, and homepage button.
  4. Adjust image size and spacing for short laptop and mobile screens.
  5. Provide visible hover and keyboard-focus states for the homepage button.
  6. Respect the visitor's reduced-motion preference for button transitions.

  Accompanying files -
  HTML file - drakir404.html
  Image file - drakirimages/mimic_eating_webpages.gif

  Page Layout -
  The body centers one responsive card. Content inside the card is arranged
  vertically in this order: mimic image, 404 number, heading, message, and button.

  Responsive Behavior -
  The default layout uses a 300-pixel image. Short screens reduce the image to
  260 pixels, while mobile screens use a maximum width of 220 pixels.

  Accessibility -
  Button focus styles provide a clear keyboard indicator. Reduced-motion rules
  remove the button transition when the operating system requests less motion.
  The animated mimic remains active because it is the primary page artwork.

  Important Notes -
  Color variables are grouped at the top of this file so the page motif can be
  maintained without searching through individual style rules.
*/

/* ================== Color Variables ================== */
:root {
  --background-deep: #140b22;
  --background-purple: #251239;
  --panel-background: rgba(48, 25, 70, 0.88);
  --panel-border: rgba(151, 91, 198, 0.45);
  --heading: #f1eaf6;
  --text: #d7c9e2;
  --error-number: #cbb4dd;
  --button: #6f359d;
  --button-hover: #8245b2;
  --gold: #e5b743;
  --gold-hover: #f2ce69;
}

/* ================== Global Styles ================== */
* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

/* ================== Page Layout ================== */
body {
  margin: 0;
  padding: clamp(1rem, 3vh, 2rem);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text);
  text-align: center;
  background:
    radial-gradient(circle at center, rgba(106, 54, 145, 0.35) 0%, transparent 58%),
    linear-gradient(145deg, var(--background-purple), var(--background-deep) 72%);
  display: grid;
  place-items: center;
}

/* ================== Error Card ================== */
.error-card {
  width: min(100%, 560px);
  padding: clamp(1.25rem, 3vh, 2rem) clamp(1.25rem, 4vw, 2.5rem);
  background: var(--panel-background);
  border: 1px solid var(--panel-border);
  border-radius: 24px;
  box-shadow: 0 22px 55px rgba(8, 3, 15, 0.42);
  backdrop-filter: blur(5px);
}

/* ================== Mimic Image ================== */
.mimic-gif {
  display: block;
  width: min(300px, 100%);
  height: auto;
  margin: 0 auto clamp(0.75rem, 2vh, 1.15rem);
  border: 1px solid rgba(180, 123, 218, 0.35);
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(15, 5, 25, 0.38);
}

/* ================== Error Message ================== */
h1 {
  margin: 0;
  color: var(--error-number);
  font-size: clamp(4.25rem, 10vh, 6rem);
  line-height: 0.95;
  letter-spacing: 0.03em;
  text-shadow: 0 4px 18px rgba(135, 70, 183, 0.28);
}

h2 {
  margin: clamp(0.6rem, 1.5vh, 0.9rem) 0 0;
  color: var(--heading);
  font-size: clamp(1.5rem, 4vh, 2rem);
  line-height: 1.2;
}

p {
  margin: clamp(0.65rem, 1.5vh, 0.9rem) 0 clamp(1.25rem, 3vh, 1.8rem);
  font-size: clamp(1rem, 2.5vh, 1.2rem);
  line-height: 1.5;
}

/* ================== Homepage Button ================== */
.home-button {
  display: inline-block;
  min-width: 190px;
  padding: 0.8rem 1.5rem;
  color: #fff7df;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  background: var(--button);
  border: 2px solid var(--gold);
  border-radius: 10px;
  box-shadow: 0 7px 18px rgba(10, 3, 18, 0.3);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.home-button:hover,
.home-button:focus-visible {
  color: #ffffff;
  background: var(--button-hover);
  border-color: var(--gold-hover);
  box-shadow: 0 9px 22px rgba(10, 3, 18, 0.4);
  transform: translateY(-2px);
}

.home-button:focus-visible {
  outline: 3px solid rgba(242, 206, 105, 0.42);
  outline-offset: 4px;
}

/* ================== Short Laptop Screens ================== */
@media (max-height: 760px) and (min-width: 601px) {
  body {
    padding-block: 0.75rem;
  }

  .error-card {
    padding-block: 1rem;
  }

  .mimic-gif {
    width: min(260px, 100%);
    margin-bottom: 0.65rem;
  }

  h1 {
    font-size: 4.5rem;
  }

  h2 {
    margin-top: 0.45rem;
  }

  p {
    margin: 0.5rem 0 1rem;
  }
}

/* ================== Mobile Screens ================== */
@media (max-width: 600px) {
  body {
    padding: 0.8rem;
  }

  .error-card {
    padding: 1rem;
    border-radius: 18px;
  }

  .mimic-gif {
    width: min(220px, 72vw);
    margin-bottom: 0.75rem;
    border-radius: 14px;
  }

  h1 {
    font-size: 4.25rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  p {
    max-width: 310px;
    margin-inline: auto;
    margin-bottom: 1.25rem;
  }

  .home-button {
    width: min(100%, 240px);
  }
}

/* ================== Reduced Motion ================== */
@media (prefers-reduced-motion: reduce) {
  .home-button {
    transition: none;
  }
}