/* ============================================================
   MOTION — subtle intro, scroll reveals, hover details.
   Everything is scoped to html.has-motion (set inline in <head>
   unless prefers-reduced-motion), so with motion off — or if JS
   fails — the page is simply static and fully visible.

   Triggers (js/motion.js):
   - [data-reveal-root] gets .is-in   → hero + nav on load, sections on scroll
   - --d on an element = its delay
   ============================================================ */

/* ---------- Lines draw in from the left ---------- */
.has-motion [data-reveal-root] .ruled::before,
.has-motion [data-reveal-root] .ruled::after {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 1.2s var(--ease-out);
  transition-delay: var(--d, 0s);
}
.has-motion [data-reveal-root] .ruled::after { transition-delay: calc(var(--d, 0s) + 0.15s); }
.has-motion .is-in .ruled::before,
.has-motion .is-in .ruled::after { transform: scaleX(1); }

/* ---------- Fade up ---------- */
.has-motion [data-reveal-root] .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-reveal) var(--ease-out) var(--d, 0s),
    transform var(--dur-reveal) var(--ease-out) var(--d, 0s);
}
.has-motion .is-in .reveal { opacity: 1; transform: none; }

/* ---------- Blue tags open like a shutter (left → right) ---------- */
.has-motion [data-reveal-root] .reveal-wipe {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s var(--ease-out) var(--d, 0s);
}
.has-motion .is-in .reveal-wipe { clip-path: inset(0 0 0 0); }

/* ---------- Hero name rises from under its baseline ---------- */
.has-motion .hero__name { overflow: hidden; }
.has-motion .hero__name-text {
  transform: translateY(105%);
  transition: transform 1.1s var(--ease-out) 0.15s;
}
.has-motion .is-in .hero__name-text { transform: none; }

/* ---------- Project list: headings, then rows one by one ---------- */
.has-motion [data-reveal-root] .project-table th,
.has-motion [data-reveal-root] .project-row td {
  opacity: 0;
  transform: translateY(10px);
}
.has-motion [data-reveal-root] .project-table th {
  transition:
    opacity var(--dur-reveal) var(--ease-out) var(--d, 0.35s),
    transform var(--dur-reveal) var(--ease-out) var(--d, 0.35s);
}
.has-motion [data-reveal-root] .project-row td {
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    font-weight 0s,
    opacity var(--dur-reveal) var(--ease-out) var(--d, 0s),
    transform var(--dur-reveal) var(--ease-out) var(--d, 0s);
}
.has-motion .is-in .project-table th,
.has-motion .is-in .project-row td { opacity: 1; transform: none; }

/* ---------- Hover details ---------- */

/* ↗ nudges toward where it points */
.link-out .glyph { display: inline-block; transition: transform 0.35s var(--ease-out); }
.link-out:hover .glyph { transform: translate(2px, -2px); }

/* "+" turns a quarter on hover (rows that open) */
.row-toggle__icon { display: inline-block; transition: transform 0.4s var(--ease-out); }
.project-row:not(.is-open):hover .row-toggle__icon { transform: rotate(90deg); }

/* A grayed row that can be opened darkens under the pointer */
.project-table .project-row.is-dimmed:has(.row-toggle):hover td { color: var(--color-text); }

/* Cover settles in when the row opens */
/* Spotify player settles in when the row opens */
.has-motion .detail .spotify-embed,
.has-motion .detail .youtube-embed {
  transform: translateY(6px) scale(0.985);
  transform-origin: 0 0;
  transition: transform 1s var(--ease-out);
}
.has-motion .detail-row.is-open .spotify-embed,
.has-motion .detail-row.is-open .youtube-embed { transform: none; }

/* ---------- Cursor: grows over things you can click, tightens on press ----------
   cursor.js owns `transform` (position + kick pulse), so size changes use
   width/height and a margin that keeps the dot centred (base size 20px). */
html .csuki-cursor {
  transition:
    opacity 0.2s,
    width 0.4s var(--ease-out),
    height 0.4s var(--ease-out),
    margin 0.4s var(--ease-out);
}
/* Base 20px → 28px over clickables (slight). margin = (20 − size) / 2 */
html .csuki-cursor.is-hover { width: 28px; height: 28px; margin: -4px 0 0 -4px; }
html .csuki-cursor.is-down { width: 14px; height: 14px; margin: 3px 0 0 3px; transition-duration: 0.2s, 0.15s, 0.15s, 0.15s; }
html .csuki-cursor.is-hover.is-down { width: 22px; height: 22px; margin: -1px 0 0 -1px; }

@media (prefers-reduced-motion: reduce) {
  .link-out .glyph,
  .row-toggle__icon,
  html .csuki-cursor { transition: none; }
}