/* ========================================
   RUNE JENSEN — runejenson.com
   ======================================== */

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

:root {
  --gold: #c9a84c;
  --gold-glow: rgba(201, 168, 76, 0.35);
  --cream: #f0e8dc;
  --warm-gray: #9a8e80;

  /* Shadow tone — matches the dark silhouette in the background image.
     Tweak these two values to adjust all shadow-toned elements together. */
  --shadow-filter: sepia(0.45) brightness(0.35);
  --shadow-opacity: 0.92;

  /* Social media icon colours — tweak these two to restyle all social icons at once. */
  --social-icon-filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5))
                        invert(20%) sepia(1) saturate(9.5) hue-rotate(336deg) brightness(1.35);
  --social-icon-filter-hover: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5))
                              invert(20%) sepia(1) saturate(9.5) hue-rotate(336deg) brightness(1.50);
}

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Background --- */
.bg {
  position: fixed;
  inset: 0;
  background-image: url('media/image/background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  filter: sepia(0.15);
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at center,
      transparent 55%,
      rgba(5, 3, 1, 0.18) 85%,
      rgba(5, 3, 1, 0.38) 100%);
  pointer-events: none;
}

/* --- Layout --- */
.site-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 100vh;
  width: 100%;
  padding: 3.5rem 2rem 2.5rem;
  text-align: center;
}

/* --- Header --- */
.site-header {}

.header-img {
  width: clamp(280px, 50vw, 560px);
  height: auto;
  /* Shift left so the text portion centres on the page rather than the full image */
  transform: translateX(-19.7%);
  opacity: var(--shadow-opacity);
  filter: var(--shadow-filter) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

/* --- Bio paragraph --- */
/* ↓ Tweak these to adjust the paragraph size and layout */
.bio {
  max-width: 410px;
  /* Anchors em units for all bio spacing to the letter height */
  font-size: clamp(11px, 1.6vw, 17px);
  opacity: var(--shadow-opacity);
  position: relative;
}

.bio::before {
  content: '';
  position: absolute;
  inset: -50% -60%;
  /* background: radial-gradient(ellipse 55% 60% at center,
      rgba(180, 148, 100, 0.7) 0%,
      transparent 70%); */
  background: radial-gradient(ellipse 55% 60% at center,
      rgba(229, 207, 173, 0.9) 0%,
      transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.bio p {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
  column-gap: 0;
}

/* Line spacing — between lines within the same paragraph */
.bio p+p {
  margin-top: 0.75em;
}

.bio-para {
  position: relative;
  z-index: 1;
}

/* Paragraph spacing — between paragraph groups */
.bio-para+.bio-para {
  margin-top: 2em;
}

/* "Yello!" styling */
.bio-para:first-child p {
  transform: rotate(-3deg);
}

.bio-para:first-child .bio-letter {
  height: 21px;
}

.bio-letter {
  height: clamp(11px, 1.6vh, 17px);
  /* height: 17px; */
  width: auto;
  /* letter spacing */
  margin-right: 0.02em;
  opacity: var(--shadow-opacity);
  filter: var(--shadow-filter);
}

.bio-space {
  display: inline-block;
  /* word spacing */
  width: 0.4em;
  margin-left: 0.1em;
}

/* Word wrapper — keeps letter images together so words never break mid-word */
.letter-word {
  display: inline-flex;
  align-items: flex-end;
  flex-shrink: 0;
}

/* ↑ End bio tweakables */

/* --- Players --- */
.players {}

.player-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

/* 70s sunburst — visible only during playback */
.player-wrap::before,
.player-wrap::after {
  content: '';
  position: absolute;
  left: 50%;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: -1;
}

/* Layer 1 — sunburst rays, clockwise */
.player-wrap::before {
  width: clamp(119px, 15.4vw, 161px);
  height: clamp(119px, 15.4vw, 161px);
  top: 0;
  transform: translateX(-50%);
  background: repeating-conic-gradient(#F07840 0deg 22.5deg,
      #E8A090 22.5deg 45deg,
      #8CC4BC 45deg 67.5deg,
      #F0D888 67.5deg 90deg);
  filter: blur(2px);
  animation: spin-ring-cw 8s linear infinite;
}

/* Layer 2 — same rays, slightly offset phase + slower counter-rotation
   creates the apparent wave/twist in the rays */
.player-wrap::after {
  width: clamp(119px, 15.4vw, 161px);
  height: clamp(119px, 15.4vw, 161px);
  top: 0;
  transform: translateX(-50%);
  background: repeating-conic-gradient(transparent 0deg 11.25deg,
      rgba(224, 68, 44, 0.45) 11.25deg 22.5deg,
      transparent 22.5deg 33.75deg,
      rgba(240, 216, 136, 0.35) 33.75deg 45deg,
      transparent 45deg 56.25deg,
      rgba(140, 196, 188, 0.40) 56.25deg 67.5deg,
      transparent 67.5deg 78.75deg,
      rgba(232, 160, 144, 0.35) 78.75deg 90deg);
  filter: blur(3px);
  animation: spin-ring-ccw 13s linear infinite;
}

.player-wrap:has(.has-playing)::before {
  opacity: 1;
}

.player-wrap:has(.has-playing)::after {
  opacity: 0.85;
}

/* Circle container — image fills it, two half-buttons sit on top */
.player-circle {
  position: relative;
  display: flex;
  width: clamp(119px, 15.4vw, 161px);
  height: clamp(119px, 15.4vw, 161px);
  border-radius: 50%;
  overflow: hidden;
  /* Border ring — colour matches the dark warm font tone */
  outline: 4px solid rgba(26, 16, 8, 0.72);
}

.player-circle.has-playing {
  animation: pulse-circle 2.2s ease-in-out infinite;
}

.circle-bg {
  position: absolute;
  inset: 0;
  background: url('media/image/play-alpha.png') center / cover no-repeat;
  z-index: 0;
}

/* Half-circle buttons — transparent overlays */
.play-btn {
  position: relative;
  z-index: 1;
  flex: 1;
  height: 100%;
  border: none;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.14);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease;
}

.play-btn:hover {
  background: rgba(0, 0, 0, 0.10);
}

.play-btn.is-playing {
  background: rgba(0, 0, 0, 0.12);
}

.play-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* Subtle divider between the two halves */
.play-btn--left {
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.icon-play,
.icon-pause {
  width: clamp(26px, 3.84vw, 38px);
  height: clamp(26px, 3.84vw, 38px);
  color: var(--cream);
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7));
  flex-shrink: 0;
}

/* nudge play triangle right for optical centering */
.icon-play {
  transform: translateX(12%);
}

/* Track title — overlays the lower portion of the circle, not clipped by it */
.track-title {
  position: absolute;
  top: calc(clamp(119px, 15.4vw, 161px) * 0.76);
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.track-title.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.title-letter {
  height: clamp(6px, 0.8vh, 8px);
  width: auto;
  margin-right: 1px;
  filter: brightness(0) invert(1);
}

.title-space {
  display: inline-block;
  width: 0.2em;
  margin-left: 3px;
}

/* --- Footer --- */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --- Social Links --- */
.social-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.social-icon {
  width: 55px;
  height: 55px;
  filter: var(--social-icon-filter);
  transition: filter 0.3s ease;
}

.social-link:hover .social-icon {
  filter: var(--social-icon-filter-hover);
}

/* --- Animations --- */
@keyframes spin-ring-cw {
  from {
    transform: translateX(-50%) rotate(0deg);
  }

  to {
    transform: translateX(-50%) rotate(360deg);
  }
}

@keyframes spin-ring-ccw {
  from {
    transform: translateX(-50%) rotate(0deg);
  }

  to {
    transform: translateX(-50%) rotate(-360deg);
  }
}

@keyframes pulse-circle {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(26, 16, 8, 0.2);
  }

  50% {
    box-shadow: 0 0 18px rgba(26, 16, 8, 0.35);
  }
}

/* --- Responsive --- */
@media (max-width: 520px) {
  .site-content {
    padding: 2.5rem 1.5rem 2rem;
  }
}