/* ============================================================
   Links page — full-screen grid of buttons that drift gently and
   react to the cursor (magnetic pull + tilt on hover).
   ============================================================ */

.links-section {
  background: var(--bg);
  min-height: 220vh;
  padding-top: 100vh;
  display: flex;
  flex-direction: column;
}

/* The black "box" that frames the links content. A fixed full-viewport
   layer (.links-box-bg) covers the full height of the screen, starting
   close to the full width of the screen, then expanding horizontally
   (its rounded corners flattening out) until it covers the entire page
   edge-to-edge as .links-box scrolls into view. It's fixed (not sticky)
   so it reliably covers the whole viewport for as long as any part of
   .links-box is on screen, with no gaps. Clip values and visibility are
   set directly via JS, computed from how far the box has entered the
   viewport. */
.links-box {
  position: relative;
  flex: 1;
}

.links-box-bg {
  position: fixed;
  inset: 0;
  background: #0a0a0a;
  clip-path: inset(5vh 1vw 0 1vw round 48px);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  will-change: clip-path, opacity;
  transition: clip-path 0.12s linear, opacity 0.12s linear;
}

.links-intro,
.links-grid {
  position: relative;
  z-index: 6;
}

@media (prefers-reduced-motion: reduce) {
  .links-box-bg {
    clip-path: inset(0 0 0 0 round 0);
  }
}

.links-intro {
  padding: 110px 40px 0;
  max-width: 1500px;
}

@media (max-width: 600px) {
  .links-intro {
    padding-top: 90px;
  }
}

.links-heading {
  font-size: clamp(32px, 4.6vw, 64px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.015em;
  word-spacing: normal;
  margin: 0;
  text-indent: 1.5em;
  color: #f4f4f2;
}

.links-heading em {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
}

/* Each word fades + slides up into place, staggered left to right
   as the section scrolls into view. */
.links-heading .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  filter: blur(4px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(var(--i, 0) * 0.035s);
}

.links-heading.is-visible .word {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.links-grid {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: auto;
  padding: 60px 40px 100px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(180px, 22vh);
  grid-auto-flow: row dense;
  gap: 18px;
  box-sizing: border-box;
  perspective: 700px;
}

.link-btn {
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--accent-bg, #fff);
  color: var(--fg);
  text-decoration: none;
  overflow: hidden;
  will-change: transform;
  transform-style: preserve-3d;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.45s ease;
}

/* Ghost text: an oversized, faint label sitting behind the icon —
   echoes the big background "ticker" text on noteworthy.studio. */
.link-btn::before {
  content: attr(data-ghost);
  position: absolute;
  left: -0.04em;
  bottom: -0.22em;
  z-index: 0;
  font-size: clamp(48px, 9vw, 110px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--accent-fg, var(--fg));
  opacity: 0.07;
  pointer-events: none;
  white-space: nowrap;
}

/* Arrow icon, top-right — slides in and rotates into place on hover,
   like the chevron used on noteworthy.studio's text links. */
.link-btn::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 30px;
  height: 30px;
  z-index: 3;
  background-color: var(--accent-fg, var(--fg));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M57.40 20.30L42.50 20.30L66.50 44.30L13 44.30L13 55.10L66.50 55.10L42.50 79.10L57.40 79.10L87 49.70Z'/%3E%3C/svg%3E") no-repeat center / contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M57.40 20.30L42.50 20.30L66.50 44.30L13 44.30L13 55.10L66.50 55.10L42.50 79.10L57.40 79.10L87 49.70Z'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0;
  transform: translate(-8px, 8px) rotate(-45deg);
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.link-btn:hover::after {
  opacity: 0.92;
  transform: translate(0, 0) rotate(0deg);
}

.link-btn--big {
  grid-column: span 2;
  grid-row: span 2;
}

/* Full-bleed background graphic: a big, off-center minimalist icon
   that fills most of the card. */
.link-btn-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.link-btn-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent-fg, var(--fg));
  opacity: 0.1;
  transition: opacity 0.45s ease;
}

.link-btn:hover .link-btn-bg::before {
  opacity: 0.16;
}

.link-btn-icon {
  position: relative;
  width: 62%;
  height: 62%;
  max-width: 200px;
  max-height: 200px;
  color: var(--accent-fg, var(--fg));
  opacity: 1;
  stroke-width: 1.6px;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, 0.14));
  transform: translate(18%, 18%) rotate(-6deg);
  transition: filter 0.45s ease;
}

.link-btn:hover .link-btn-icon {
  filter: drop-shadow(0 18px 30px var(--accent-fg, rgba(0, 0, 0, 0.25)));
}

.link-btn--big .link-btn-icon {
  width: 70%;
  height: 70%;
  max-width: 280px;
  max-height: 280px;
}

/* Text overlay, bottom-left, sitting on a subtle gradient so it
   reads over the background icon. */
.link-btn-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 22px;
  width: 100%;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.7) 55%, rgba(255, 255, 255, 0) 100%);
}

.link-btn-label {
  font-size: clamp(17px, 1.8vw, 24px);
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.link-btn-sub {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
  transition: color 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Per-card accent colors — punchier, more saturated foregrounds so the
   icons and hover glow read as bold pops of color against the cards. */
.link-btn--art     { --accent-bg: #ffe1ea; --accent-fg: #e0266f; }
.link-btn--wordle  { --accent-bg: #dffbe9; --accent-fg: #15a85a; }
.link-btn--books   { --accent-bg: #fef0d9; --accent-fg: #d6790a; }
.link-btn--food    { --accent-bg: #ffe9da; --accent-fg: #f1530a; }
.link-btn--lift    { --accent-bg: #e2eeff; --accent-fg: #0a6fe0; }
.link-btn--write   { --accent-bg: #efe6ff; --accent-fg: #6f2ff0; }

/* Icons stay still at rest — they only animate when the card is hovered. */
.link-btn:hover .icon-art     { animation: icon-pulse 1.4s ease-in-out infinite; }
.link-btn:hover .icon-wordle  { animation: icon-pulse 1.4s ease-in-out infinite; }
.link-btn:hover .icon-books   { animation: icon-wiggle 2s ease-in-out infinite; }
.link-btn:hover .icon-food    { animation: icon-bob 1.7s ease-in-out infinite; }
.link-btn:hover .icon-lift    { animation: icon-pop 1.6s ease-in-out infinite; }
.link-btn:hover .icon-write   { animation: icon-wiggle 1.8s ease-in-out infinite; }

@keyframes icon-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes icon-pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

@keyframes icon-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}

@keyframes icon-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.18); }
}

@keyframes icon-ring {
  0%, 8%, 16% { transform: rotate(0deg); }
  2%, 10% { transform: rotate(-14deg); }
  4%, 12% { transform: rotate(14deg); }
  20%, 100% { transform: rotate(0deg); }
}

@keyframes icon-spin {
  to { transform: rotate(360deg); }
}

@keyframes icon-flap {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.6) translateY(-2px); }
}

/* On hover, the icon badge grows and pops to the foreground */
.link-btn:hover .link-btn-visual {
  transform: scale(1.12);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.link-btn-visual {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}

/* Hover state: snaps toward the cursor, scales up, brightens the
   border — the stick figure (not a color invert) carries the "active"
   feeling now. */
.link-btn:hover,
.link-btn.is-active {
  border-color: var(--accent-fg, var(--fg));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22),
              0 10px 28px -10px var(--accent-fg, rgba(0, 0, 0, 0.18));
  z-index: 5;
  transform: perspective(600px)
             translate(var(--mx, 0px), var(--my, 0px))
             scale(1.1)
             rotate(var(--mr, 0deg))
             rotateX(var(--rx, 0deg))
             rotateY(var(--ry, 0deg));
}

.link-btn:hover .link-btn-label,
.link-btn:hover .link-btn-sub {
  transform: translate(var(--lx, 0px), var(--ly, 0px));
}

/* Non-hovered buttons ease slightly away from the cursor */
.links-grid.is-hovering .link-btn:not(:hover) {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translate(var(--px, 0px), var(--py, 0px));
}

@media (max-width: 900px) {
  .links-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(140px, 24vh);
    padding: 100px 20px 40px;
    gap: 12px;
  }
}

@media (max-width: 540px) {
  .links-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(120px, 26vh);
  }
  .link-btn--big {
    grid-column: span 1;
    grid-row: span 1;
  }
}

/* ============================================================
   Link info modal — shown when a card is clicked, with a short
   blurb about that link before sending the user onward.
   ============================================================ */
.info-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.info-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.info-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 8, 10, 0.7);
  backdrop-filter: blur(10px) saturate(120%);
}

.info-modal-card {
  --accent: #6f2ff0;
  position: relative;
  z-index: 1;
  max-width: 480px;
  width: calc(100% - 48px);
  max-height: calc(100vh - 80px);
  overflow: hidden;
  overflow-y: auto;
  background: #121214;
  color: #f4f4f2;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.6),
              0 0 0 1px rgba(255, 255, 255, 0.02),
              0 0 100px -30px var(--accent);
  transform: translateY(24px) scale(0.96);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.info-modal.is-open .info-modal-card {
  transform: translateY(0) scale(1);
}

/* Colorful header band with the category icon, echoing the big
   background icons on the link cards themselves. */
.info-modal-visual {
  position: relative;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 25% 0%, var(--accent) 0%, transparent 65%),
    #1a1a1d;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.info-modal-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  opacity: 0.16;
  mix-blend-mode: screen;
}

.info-modal-icon {
  position: relative;
  z-index: 1;
  width: 58px;
  height: 58px;
  color: var(--accent);
  stroke-width: 1.4px;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.5));
}

.info-modal-content {
  padding: 26px 32px 32px;
}

.info-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(6px);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  color: #fff;
  transition: background 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.info-modal-close:hover {
  background: rgba(0, 0, 0, 0.55);
  transform: scale(1.08) rotate(90deg);
}

.info-modal-body h3 {
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #f8f8f6;
}

.info-modal-body .info-modal-tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.info-modal-body p {
  margin: 0 0 20px;
  line-height: 1.7;
  color: #aeaeb4;
  font-size: 14.5px;
}

.info-modal-body .info-modal-list {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.info-modal-body .info-modal-list li {
  position: relative;
  padding-left: 22px;
  line-height: 1.5;
  font-size: 14px;
  color: #dcdce0;
}

.info-modal-body .info-modal-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--accent);
}

.info-modal-body .info-modal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.info-modal-body .info-modal-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 13.5px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease, opacity 0.2s ease;
}

.info-modal-body .info-modal-link:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 12px 28px -8px var(--accent);
}

.info-modal-body .info-modal-link--secondary {
  background: rgba(255, 255, 255, 0.07);
  color: #f4f4f2;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.info-modal-body .info-modal-link--secondary:hover {
  box-shadow: none;
  background: rgba(255, 255, 255, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .link-btn {
    animation: none !important;
    transition: none !important;
  }
  .link-btn:hover {
    transform: none;
  }
}