/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

@font-face {
  font-family: "Determination";
  src: url("../fonts/determination.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --button-size: clamp(170px, 24vmin, 260px);
  --button-gap: clamp(16px, 4vmin, 40px);
  --panel-bg: rgba(8, 12, 18, 0.6);
  --panel-border: rgba(255, 255, 255, 0.25);
  --panel-glow: rgba(80, 130, 255, 0.25);
}

body {
  margin: 0;
  min-height: 100vh;
  color: #f6f7ff;
  font-family: "Lucida Console", "Courier New", monospace;
  letter-spacing: 0.02em;
  background: #0a0f14 url("../img/wallpaper.png") center / cover no-repeat fixed;
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at top, rgba(120, 170, 255, 0.2), transparent 55%),
    linear-gradient(140deg, rgba(10, 10, 25, 0.7), rgba(5, 10, 15, 0.2) 60%, rgba(0, 0, 0, 0.7));
  pointer-events: none;
  z-index: 0;
}

body.heart-page {
  background: #000000;
}

body.heart-page::before {
  display: none;
}

main.page {
  height: 100vh;
  display: grid;
  place-items: center;
  gap: clamp(16px, 3vmin, 32px);
  padding: clamp(16px, 3vmin, 32px);
  position: relative;
  z-index: 1;
  text-align: center;
}

.welcome-hero {
  position: relative;
  width: min(26vw, 173px);
  display: grid;
  place-items: center;
  overflow: visible;
}

.welcome-hero img {
  width: 100%;
  height: auto;
  opacity: 0.05;
  display: block;
  transform: translateY(-12px);
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
}

.welcome-text {
  position: absolute;
  top: 62%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  width: max-content;
  font-family: "Determination", "Lucida Console", "Courier New", monospace;
  font-size: clamp(22px, 4vmin, 36px);
  letter-spacing: 0.06em;
  color: #f6f7ff;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
  margin: 0;
  padding: 18px;
}

.button-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  transform: translateY(-6vh);
}

.heart-cubes {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.heart-cubes .cube {
  --duration: 16s;
  --drift: 0px;
  position: absolute;
  left: 0;
  bottom: calc(-1 * var(--size));
  width: var(--size, 80px);
  height: var(--size, 80px);
  background: #7a2cff;
  box-shadow:
    inset -10px -10px 0 rgba(0, 0, 0, 0.2),
    0 0 25px rgba(122, 44, 255, 0.35);
  image-rendering: pixelated;
  animation: cube-float var(--duration, 16s) linear forwards;
  will-change: transform;
}

.image-button {
  width: var(--button-size);
  height: var(--button-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-bg);
  border: 3px solid var(--panel-border);
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.45),
    0 0 0 2px rgba(255, 255, 255, 0.08) inset;
  text-decoration: none;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.image-button:focus-visible,
.image-button:hover {
  transform: translateY(-4px) scale(1.03);
  border-color: rgba(255, 255, 255, 0.55);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.55),
    0 0 18px var(--panel-glow);
}

.image-button img {
  width: 85%;
  height: 85%;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.35));
}

.detail-card {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 3vmin, 28px);
  background: rgba(8, 12, 18, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
  position: relative;
  overflow: hidden;
  max-width: 420px;
}

.detail-card h1 {
  margin: 0;
  font-size: clamp(20px, 4vmin, 28px);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.detail-image {
  width: clamp(180px, 32vmin, 280px);
  height: clamp(180px, 32vmin, 280px);
  object-fit: contain;
  image-rendering: pixelated;
}

.evolve-stage {
  position: relative;
  width: clamp(180px, 32vmin, 280px);
  height: clamp(180px, 32vmin, 280px);
  display: grid;
  place-items: center;
  overflow: visible;
}

.evolve-stage .detail-image {
  width: 100%;
  height: 100%;
  z-index: 0;
}

.evolve-orb {
  position: absolute;
  left: 50%;
  top: 85%;
  width: 92.5%;
  height: 92.5%;
  border-radius: 50%;
  background: #ffffff;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.evolve-orb.orb-animate {
  animation: orb-pulse 2800ms ease-in-out forwards;
}

.noibat-particle-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.noibat-particle {
  position: absolute;
  width: var(--size, 4px);
  height: var(--size, 4px);
  background: #ffffff;
  image-rendering: pixelated;
  animation: noibat-particle 600ms ease-out forwards;
}

.back-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #f6f7ff;
  background: rgba(15, 20, 30, 0.7);
  transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

.back-button:focus-visible,
.back-button:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 14px rgba(120, 170, 255, 0.3);
}

.click-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}

.click-effect {
  position: absolute;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
}

.click-star {
  position: absolute;
  width: 34px;
  height: 34px;
  left: 0;
  top: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(120, 180, 255, 0.8) 60%, rgba(120, 180, 255, 0.2));
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
  animation: star-burst 650ms ease-out forwards;
  filter: drop-shadow(0 0 10px rgba(120, 180, 255, 0.7));
}

.click-sparkle {
  --dx: 0px;
  --dy: 0px;
  --size: 4px;
  --delay: 0ms;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--size, 4px);
  height: var(--size, 4px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%);
  animation: sparkle-fly 600ms ease-out forwards;
  animation-delay: var(--delay, 0ms);
  filter: drop-shadow(0 0 6px rgba(160, 210, 255, 0.8));
}

@keyframes star-burst {
  0% {
    transform: translate(-50%, -50%) scale(0.25) rotate(0deg);
    opacity: 0.9;
  }
  60% {
    transform: translate(-50%, -50%) scale(1.05) rotate(20deg);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.6) rotate(45deg);
    opacity: 0;
  }
}

@keyframes sparkle-fly {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0.6);
    opacity: 0;
  }
}

@keyframes noibat-particle {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.4);
    opacity: 0;
  }
}

@keyframes cube-float {
  0% {
    transform: translate(0, 120vh);
  }
  50% {
    transform: translate(var(--drift, 0px), 30vh);
  }
  100% {
    transform: translate(var(--drift, 0px), calc(-130vh - var(--size, 80px)));
  }
}

@keyframes orb-pulse {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
  15% {
    opacity: 1;
  }
  40% {
    transform: translate(-50%, -50%) scale(0.92);
  }
  70% {
    transform: translate(-50%, -50%) scale(1.05);
  }
  75% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.5);
  }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}