/* ========== GLOBALS ========== */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  font-family: Verdana, sans-serif;
  color: yellow;
  cursor: url("images/cursor.png") 5 5, auto;
}

body {
  background-color: black;
  background-image: url("gifs/space_gif.gif");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* Internal page links */
a.internal-link {
  color: cyan;
}

a.internal-link:hover {
  color: red;
}

/* Mobile fallback for fixed backgrounds */
@media (max-width: 800px) {
  body {
    background-attachment: scroll;
  }
}

/* Custom pointer */
a, button, img.clickable, input[type="submit"], input[type="button"] {
  cursor: url("images/cursor_pointer.png") 10 1, pointer;
}

/* Links */
a {
  color: cyan;
  text-decoration: none;
}

a:hover {
  color: red;
}

/* Lists */
ul {
  padding-left: 20px;
}

/* ========== SCROLLING TEXT ========== */
.scrolling-text-top {
  width: 100%;
  overflow: hidden;
  background: black;
  padding: 6px 0;
  white-space: nowrap;
}

.scrolling-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee 12s linear infinite;
}

.scrolling-track .scrolling-text {
  display: inline-block;
  white-space: nowrap;
  padding-right: 20px;
  color: yellow;
}

@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ========== LAYOUT ========== */
.wrapper {
  max-width: 1000px;
  width: min(95%, 1000px);
  margin: 20px auto;
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 20px;
}

.left, .right {
  width: auto;
}

/* ========== MOBILE LAYOUT + REORDER ========== */
@media (max-width: 800px) {

  .wrapper {
    grid-template-columns: 1fr;
    margin: 12px auto;
    gap: 14px;
  }

  .left,
  .right {
    display: contents;
  }

  .left .box:nth-of-type(1) { order: 1; }
  .left .box:nth-of-type(2) { order: 2; }
  .right .box:nth-of-type(1) { order: 3; }
  .left .box:nth-of-type(3) { order: 4; }
  .right .box:nth-of-type(2) { order: 5; }
  .left .box:nth-of-type(4) { order: 6; }
}

/* ========== BOXES ========== */
.box {
  border: 2px solid blue;
  padding: 15px;
  margin-bottom: 20px;
  background: #000;
}

@media (max-width: 800px) {
  .box {
    padding: 12px;
    margin-bottom: 14px;
  }
}

.box h2 {
  margin-top: 0;
  color: red;
  border-bottom: 2px dashed yellow;
  padding-bottom: 5px;
}

.box hr {
  border: none;
  border-top: 2px dashed yellow;
  margin: 10px 0;
}

/* ========== SOCIAL BUTTONS ========== */
.social-buttons ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.social-buttons li {
  margin-bottom: 6px;
}

.social-buttons a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.social-buttons img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  border: none;
}

/* ========== NAME TITLE ========== */
.name-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: red;
}

.wave-emoji {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

/* ========== SPOTIFY EMBEDS ========== */
iframe {
  width: 100%;
  height: 60px;
  margin-bottom: 10px;
  border: 1px solid yellow;
  border-radius: 8px;
}

/* ========== HYPERFIXATIONS ========== */
.hyperfixation-content {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}

.hyperfixation-image {
  width: 180px;
  text-align: center;
}

.hyperfixation-image img {
  width: 100%;
  border: 2px solid yellow;
  box-shadow: 0 0 10px blue;
}

.image-caption {
  font-size: 12px;
  color: cyan;
  margin-top: 5px;
}

.hyperfixation-text {
  flex: 1;
}

@media (max-width: 800px) {
  .hyperfixation-content {
    flex-direction: column;
    gap: 10px;
  }

  .hyperfixation-image {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
}

/* ========== IMAGE GLOW ANIMATION ========== */

@keyframes blink-glow {
  0%, 100% {
    border-color: yellow;
    box-shadow: 0 0 10px yellow, 0 0 20px yellow;
  }

  50% {
    border-color: red;
    box-shadow: 0 0 10px red, 0 0 20px red;
  }
}

.hyperfixation-image img.blinking {
  animation: blink-glow 1s infinite;
  border-width: 2px;
  border-style: solid;
}

/* ========== TEXT GLOW (NO BORDER) ========== */

@keyframes self-pulse {
  0%, 100% {
    color: yellow;
    text-shadow:
      0 0 5px yellow,
      0 0 10px yellow;
  }

  50% {
    color: red;
    text-shadow:
      0 0 5px red,
      0 0 10px red;
  }
}

.self-glow {
  animation: self-pulse 1s infinite;
  font-weight: bold;
}

/* ========== ART SHOWCASE ========== */
.art-showcase .art-display {
  text-align: center;
  margin-top: 10px;
}

.art-showcase .art-display img {
  width: 100%;
  border: 2px solid yellow;
  box-shadow: 0 0 10px blue;
}

.art-showcase .art-credit {
  font-size: 12px;
  color: yellow;
  margin-top: 5px;
}

.art-showcase .art-credit a {
  color: cyan;
}

.art-showcase .art-credit a:hover {
  color: red;
}

/* ========== MODAL ========== */
#art-modal[hidden] {
  display: none;
}

#art-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#art-modal:not([hidden]) {
  opacity: 1;
}

#art-modal-img {
  display: block;
  margin: 50px auto;
  max-width: 90%;
  max-height: 90%;
  border: 2px solid yellow;
  box-shadow: 0 0 20px blue;
}

#art-modal-close {
  position: fixed;
  top: 20px;
  right: 30px;
  color: yellow;
  font-size: 40px;
  font-weight: bold;
  background: transparent;
  border: none;
  line-height: 1;
  z-index: 2100;
  cursor: pointer;
}

#art-modal-close:hover {
  color: red;
}

/* ========== REDUCED MOTION ========== */
@media (prefers-reduced-motion: reduce) {
  .scrolling-track,
  .hyperfixation-image img.blinking,
  .self-glow {
    animation: none !important;
  }
  #art-modal {
    transition: none !important;
  }
}

/* ================================================= */
/* ========== DICE ROLL BUTTON ========== */
/* ================================================= */

#music-box {
  position: relative;
}

#music-box h2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#music-reroll {
  display: flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

#music-reroll img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  transition: transform 0.3s ease, filter 0.3s ease;
}

#music-reroll .shuffle-text {
  color: yellow;
  font-size: 12px;
}

@keyframes dice-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#music-reroll.spin img {
  animation: dice-spin 0.6s ease;
}

#music-reroll:hover img {
  filter: drop-shadow(0 0 6px yellow)
          drop-shadow(0 0 12px red);
  transform: scale(1.1);
}

/* make self title red */
.self-title {
  color: red;
}