/* ============================================================
   Alex Rodriguez — A Personal Zine
   Shared styles: globals, hover states, keyframes.
   One-off layout lives inline in the HTML for fidelity.
   ============================================================ */

/* ---------- Reset / globals ---------- */
body { margin: 0; }
a { color: inherit; text-decoration: none; }

/* Page shell: warm cream + crosshatch texture */
.page {
  min-height: 100vh;
  background: #f4e8cf;
  background-image:
    repeating-linear-gradient(45deg, rgba(124, 85, 48, .035) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(-45deg, rgba(124, 85, 48, .035) 0 1px, transparent 1px 5px);
  font-family: 'Newsreader', Georgia, serif;
  color: #2a2521;
}

/* Centered content column */
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 28px 80px;
}

/* ---------- Hover states (lifted from style-hover attrs) ---------- */

/* Generic rust→ink link swap (footers, teaser links) */
.link-rust { color: #b14a1e; }
.link-rust:hover { color: #2a2521; }

/* "↗ follow on letterboxd" — rust→brown */
.link-rust-brown { color: #b14a1e; }
.link-rust-brown:hover { color: #7c5530; }

/* Top nav (page links) — ink→rust. Brand fades slightly. */
.nav-link { color: #2a2521; }
.nav-link:hover { color: #b14a1e; }
.brand:hover { opacity: .7; }

/* Recent Reviews rows — each links to the film's Letterboxd review. */
.review-row { display: flex; gap: 14px; color: inherit; transition: opacity .15s ease; }
.review-row:hover { opacity: .78; }

/* Projects list — leader-line rows that reveal a description inside a soft
   card on hover/focus (inspired by rog.ie).
   Query container so long names wrap on narrow screens (see @container below)
   instead of forcing horizontal page overflow. */
.projects-list { container-type: inline-size; }

.project-row {
  display: flex;
  align-items: center;
  padding: 13px 14px;
  border-radius: 12px;
  color: #2a2521;
  transition: background .25s ease, box-shadow .25s ease;
}
@media (hover: hover) {
  .project-row:hover {
    background: #fffaf0;
    box-shadow: 0 6px 20px -10px rgba(42, 37, 33, .5);
  }
}
.project-row:focus-visible {
  background: #fffaf0;
  box-shadow: 0 6px 20px -10px rgba(42, 37, 33, .5);
}
.project-row:focus-visible { outline: 2px solid #b14a1e; outline-offset: 2px; }

.project-icon { flex: none; display: flex; margin-right: 14px; color: #7c5530; }
.project-icon svg { width: 20px; height: 20px; display: block; }

.project-name {
  font-family: 'Gluten', cursive;
  font-weight: 600;
  font-size: clamp(19px, 2.6vw, 24px);
  line-height: 1.1;
  white-space: nowrap;
}

/* On narrow screens let the name wrap and drop the decorative leader line, so a
   long title like "Scaled Variable Management" can't push the row past the
   viewport. The year is pinned right in the leader's place. */
@container (max-width: 460px) {
  .project-name { white-space: normal; overflow-wrap: break-word; }
  .project-leader { display: none; }
  .project-year { margin-left: auto; padding-left: 12px; }
}

/* Description: collapsed by default, expands between name and leader on hover. */
.project-desc {
  font-family: 'Newsreader', serif;
  font-style: italic;
  font-size: 16px;
  color: #6e6459;
  white-space: nowrap;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  transition: max-width .35s ease, opacity .3s ease, margin-left .35s ease;
}
@media (hover: hover) {
  .project-row:hover .project-desc {
    max-width: 360px;
    opacity: 1;
    margin-left: 12px;
  }
}
.project-row:focus-visible .project-desc {
  max-width: 360px;
  opacity: 1;
  margin-left: 12px;
}

.project-leader { flex: 1 1 24px; min-width: 24px; height: 1px; background: #d8c39a; margin: 0 16px; }

.project-year {
  flex: none;
  font-family: 'Spline Sans Mono', monospace;
  font-size: 14px;
  color: #a89a7c;
}

@media (prefers-reduced-motion: reduce) {
  .project-row, .project-desc { transition-duration: .01ms; }
}

/* Cover top tape peel hover nudge */
.cover-tape:hover { transform: rotate(5deg) translateY(-2px); }

/* Book spines — straighten + lift (overrides inline rotate via class) */
.book-spine { transition: transform .2s ease; }
.book-spine:hover { transform: rotate(0deg) translateY(-7px) !important; }

/* ---------- Keyframes ---------- */
@keyframes draw { to { stroke-dashoffset: 0; } }

@keyframes popIn {
  from { opacity: 0; transform: translateY(14px) rotate(-3deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

@keyframes tapePeel {
  0%   { transform: rotate(2deg) translateY(-16px) rotateX(75deg); opacity: 0; }
  55%  { transform: rotate(0deg) translateY(2px) rotateX(-12deg); opacity: 1; }
  78%  { transform: rotate(4deg) translateY(-1px) rotateX(6deg); opacity: 1; }
  100% { transform: rotate(2deg) translateY(0) rotateX(0); opacity: 1; }
}

/* Cover tape: hidden until JS triggers the peel */
#coverTape { opacity: 0; }
#coverTape[data-peel="go"] { animation: tapePeel 1.1s cubic-bezier(.34, 1.3, .5, 1) both; }

/* Prevent FOUC on dynamic sections — JS adds .shelf-ready after populating */
#filmDiary, #currentlyReading, #bookShelf { opacity: 0; transition: opacity .25s ease; }
.shelf-ready { opacity: 1 !important; }

/* Hide extra book spines on narrow screens */
@media (max-width: 480px) {
  .book-spine--extra { display: none; }
}