/* ============================================================
   GLOBAL RESET
   ============================================================ */

/* Universal box-sizing so padding/borders don't blow out widths */
* {
  box-sizing: border-box;
}

/* ============================================================
   PAGE BASE
   ============================================================ */

/* Page background, font, and bottom padding so content doesn't
   hide behind the fixed music player. Body is a block, so all
   direct children stack top to bottom by default. */
body {
  margin: 0px;
  font-family: "JetBrains Mono", sans-serif;
  min-height: 100vh;
  background: #121212;
  padding-bottom: 70px;
}

/* ============================================================
   HEADER
   ============================================================ */

/* Header is a flex row: photo on the left, headline on the right.
   - align-items: center stops the default "stretch" behavior
     that was distorting the image height.
   - gap replaces per-element margins for consistent spacing
     between the image and headline.
   - padding gives the header breathing room from the page edges. */
.header {
  display: flex;
  align-items: center;
  gap: 4rem;
  padding: 10rem;
}

.header,
main,
.bottombar {
  opacity: 0;
  transform: translateY(30px);
  animation: pageEnter 0.8s ease forwards;
}

/* Delay each section so they cascade in. */
.header    { animation-delay: 0.1s; }
main       { animation-delay: 0.3s; }
.bottombar { animation-delay: 0.5s; }

@keyframes pageEnter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The big welcome headline.
   - No display:flex — h1 is a block by default; making it a flex
     container did nothing useful since it only holds text.
   - No flex-shrink:0 — the header's flex layout handles sizing.
   - margin: 0 removes the default h1 margin so gap controls spacing. */
#like_home {
  color: #f8f8f8;
  font-family: "JetBrains Mono", sans-serif;
  font-size: clamp(6rem, 2rem, 6rem);
  margin: 0;
}

/* Cursor: solid by default (no animation). */
#like_home::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 1em;
  background: currentColor;
  vertical-align: -0.1em;
}

/* When the headline has .idle, the cursor blinks. */
#like_home.idle::after {
  animation: blink 0.7s steps(1) infinite;
}

/* The blink cycle — jumps on/off rather than fading. */
@keyframes blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Profile photo.
   - width AND height both set to 300px prevents flex stretch
     from distorting the image; a fixed square is un-stretchable.
   - object-fit: cover crops the photo to fill the square
     instead of squishing it.
   - border-radius: 50% is the idiomatic circle (900px worked,
     but 50% is clearer and scales with the element size).
   - flex-shrink: 0 stops the image from shrinking if the header
     gets cramped on narrow screens. */
#jon {
  height: 325px;
  width: 325px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ============================================================
   INTRO SECTION
   ============================================================ */

/* Intro paragraphs container.
   - NO display:flex — as a flex row it would put the two <p>
     elements side by side; paragraphs should stack.
   - margin: 0 auto centers the block horizontally.
   - max-width caps the reading width on wide monitors.
     (max-width: 100% was a no-op since it equals the default.) */
.intro {
  margin: 0 auto;
  padding: 0;
  max-width: 900px;
}

/* ============================================================
   NAV BAR — responsive
   ============================================================ */

/* Flex row with wrapping. On wide screens the heading and links
   sit side by side; on narrow screens they wrap onto separate
   lines. justify-content: center keeps the group in the middle
   of the page at any width.
   clamp() makes the gap grow with the viewport but with a
   sensible minimum so it never collapses. */
.navbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  align-items: flex-start;
  text-align: left;
  gap: 10rem;               /* <-- space between nav and table */
}

/* ============================================================
   NAV LINKS
   ============================================================ */

/* Vertical column of links, centered horizontally.
   gap controls the space between links — this is the value
   you'll tune most often. */
.navbar ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Each link. Font size uses clamp() so it scales with the
   viewport: minimum 1.5rem on tiny screens, preferred 6vw in
   between, maximum 2.875rem (46px) on wide screens. No more
   "46px everywhere" that blows up on phones.
   Padding uses relative units for the same reason. */
.nav a {
  position: relative;
  display: block;
  padding: 0.8rem 1em 0.8rem 2.35em;   /* left padding clears the bar */
  color: #f8f8f8;
  text-decoration: none;
  font-size: 5rem;
  font-family: "JetBrains Mono", sans-serif;
  transition: color 0.2s ease;
}

/* ---- Red bar before each link ---- */
/* Positioned with em-based left offset so it stays close to the
   text regardless of how big the link font is. Width is in em
   too, so the bar scales with the text. */
.nav a::before {
  content: "";
  position: absolute;
  left: 2em;
  top: 50%;
  transform: translateY(-50%);
  width: 0.15em;
  height: 75%;
  background: #C72424;
  transition: height 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav a:hover {
  color: #ffffff;
}

.nav a:hover::before {
  height: 95%;
}

/* ============================================================
   RESPONSIVE TWEAKS — phones
   ============================================================ */

/* On screens narrower than 600px, force the heading and links
   to stack (they'd probably wrap anyway, but this guarantees it)
   and reduce the vertical spacing so everything fits. */
@media (max-width: 600px) {
  .navbar {
    flex-direction: column;
    gap: 2rem;
    padding: 1.5rem 1rem;
  }

  /* Bigger gaps between links on mobile feel more tappable */
  .navbar ul {
    gap: 1rem;
  }
}

.table-caption {
  font-family: "JetBrains Mono", sans-serif;
  color: #f8f8f8;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0 0 0.5rem 0;      /* small gap between caption and table */
  text-align: center;        /* or left, matching the table */
}

/* ---- Date table ---- */

.date-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;      
  gap: 0;                    
}

.date-table {
  border-collapse: collapse;
  border-spacing: 0;
  font-family: "JetBrains Mono", sans-serif;
  margin-left: 25rem;
  margin-top: 5rem ;
  color: #f8f8f8;
}

/* Header cell — glowing text */
.date-table th {
  padding: 0.5rem 1.25rem;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  color: #f8f8f8;
  background-color: #3E0D0D;
}

/* Body cells */
.date-table td {
  background: #181717;
  padding: 0.6rem 1.25rem;
  font-size: 2rem;
  text-align: center;
  white-space: nowrap;
  border-left: 2px solid #121212;
  border-right: 2px solid #121212;
}


/* ============================================================
   MUSIC PLAYER (fixed footer)
   ============================================================ */

/* Fixed footer bar pinned to the bottom of the viewport, spans
   full width, matches the bottom of the page gradient.
   IMPORTANT: this element is excluded from the body > * rule
   above so its fixed positioning isn't overridden. */
.bottombar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #181717;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.5);
  padding: 0.5rem 1.2rem;
  z-index: 1000;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Flex row inside the footer: record on the left, controls right.
   gap spaces the two groups without per-element margins. */
.music-player {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Flex row for our custom controls.
   min-width: 0 is the flexbox quirk-fix that lets the progress
   bar shrink below its content width instead of overflowing. */
.custom-player {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* Round purple play/pause button.
   The two padding tweaks (left 4px, bottom 3px) nudge the ▶
   glyph to visual center since it doesn't sit centered by
   default in the button's text baseline. */
.play-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #c72424;
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  padding: 0;
  padding-left: 4px;
  padding-bottom: 3px;
}

.play-btn:hover {
  background: #F09F9F;
  transform: scale(1.05);
}

.play-btn:active {
  transform: scale(0.96);
}

/* Wrapper around the track, gives a bigger click area than the
   6px bar itself. flex: 1 lets it fill the row's leftover space. */
.progress-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 8px;
}

/* Grey background track — the visible bar. position: relative
   anchors the absolutely-positioned fill inside it. */
.progress-track {
  position: relative;
  width: 100%;
  height: 6px;
  background: #3E0D0D;
  border-radius: 3px;
  cursor: pointer;
}

/* Purple fill representing elapsed time.
   pointer-events: none lets clicks pass through to the track
   underneath so clicking on the filled portion still seeks. */
.progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: #c72424;
  border-radius: 3px;
  pointer-events: none;
}

/* Monospace purple time readout.
   Monospace keeps digits equal-width so the layout doesn't
   jitter as numbers change (1:59 → 2:00). */
.time-display {
  flex-shrink: 0;
  color: #c72424;
  font-family: monospace;
  font-size: 0.85rem;
  display: flex;
  gap: 4px;
  white-space: nowrap;
}

/* The "/" between current time and duration, dimmed slightly */
.time-sep {
  opacity: 0.5;
}

/* Native audio element — now hidden via the .music-player audio
   rule below. These accent-color and webkit rules are leftovers
   from when we used the browser's built-in controls; they have
   no visible effect now that controls are removed. */
.music-player audio {
  flex: 1;
  width: 100%;
  height: 44px;
  display: block;
  border-radius: 30px;
  background: #00030A;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  accent-color: #a97ee6;
}

.music-player audio::-webkit-media-controls-panel {
  background: #00030A;
  border-radius: 30px;
  padding: 0 8px;
}

.music-player audio::-webkit-media-controls-play-button {
  background-color: #a97ee6;
  border-radius: 50%;
}

.music-player audio::-webkit-media-controls-play-button:hover {
  background-color: #60a5fa;
  cursor: pointer;
}

.music-player audio::-webkit-media-controls-current-time-display,
.music-player audio::-webkit-media-controls-time-remaining-display {
  color: #a97ee6;
  font-family: monospace;
  font-size: 0.8rem;
}

/* ============================================================
   SPINNING VINYL RECORD
   ============================================================ */

/* Non-spinning wrapper that anchors the record and its hover
   bubble. The bubble is a sibling of .record (NOT a child)
   so the animation on .record doesn't rotate the bubble too. */
.record-wrap {
  position: relative;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
}

/* The vinyl itself: black disc with fake grooves.
   The repeating-radial-gradient fakes vinyl grooves without
   needing an image file. animation-play-state: paused freezes
   it by default; JS flips it to running when audio plays. */
.record {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: #000;
  background-image:
    repeating-radial-gradient(
      circle at center,
      #0a0a0a 0px,
      #0a0a0a 2px,
      #1c1c1c 2px,
      #1c1c1c 4px
    );
  box-shadow:
    0 0 0 2px #111,
    0 0 10px rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: spin 4s linear infinite;
  animation-play-state: paused;
}

/* Album cover centered inside the vinyl */
.record img {
  width: 60%;
  height: 60%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px #0a0a0a;
}

/* Toggled by JS when audio plays — flips the spin animation on.
   JS adds/removes this class via a 'play'/'pause' listener. */
.record.spinning {
  animation-play-state: running;
}

/* Continuous 360° rotation used by the vinyl */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ============================================================
   SONG-NAME HOVER BUBBLE (Instagram-note style)
   ============================================================ */

/* Purple pill bubble that floats above the record on hover.
   pointer-events: none means the bubble can't be clicked and
   doesn't block clicks on whatever's underneath it. */
.record-note {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: #C72424;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: bold;
  padding: 6px 12px;
  border-radius: 18px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 1001;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* Small downward-pointing triangle tail under the bubble.
   Made from a bordered box; only the top border is visible,
   creating a triangle that points up at the bubble. */
.record-note::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #C72424;
}

/* Reveals the bubble (fade + slide up) when the record is
   hovered. The translateY goes from 6px to 0 for the lift. */
.record-wrap:hover .record-note {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================
   RESPONSIVE — small screens (≤ 480px)
   ============================================================ */

/* Tighter padding and shorter audio bar on phones */
@media (max-width: 480px) {
  .bottombar {
    padding: 0.4rem 0.6rem;
  }

  .music-player audio {
    height: 40px;
  }

  /* Shrink the record wrapper (and thus the record) on phones */
  .record-wrap {
    width: 44px;
    height: 44px;
  }

  /* Less bottom padding so the page doesn't feel cramped */
  body {
    padding-bottom: 60px;
  }
}