/* ==========================================================================
   Extra interactions and animations
   Each feature is one numbered block here (and, if it has one, the block
   with the same number in js/extras.js). Delete both to remove a feature.
   All motion is switched off for visitors who ask for reduced motion.
   ========================================================================== */

/* ---------- 1. Smooth page-to-page fade (View Transitions) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.35s; }

/* ---------- 2. Yellow highlight sweeps in behind the word ---------- */
.js-sweep .highlight {
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.9s var(--ease) 0.35s;
}
.js-sweep .highlight.is-drawn { background-size: 100% 100%; }

/* ---------- 3. Reading progress bar on project pages ---------- */
.read-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 60;
  width: 100%;
  height: 4px;
  background: var(--yellow);
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
  pointer-events: none;
}

/* ---------- 4. Pictures open larger on click (lightbox) ---------- */
.zoomable { cursor: zoom-in; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(1, 39, 49, 0.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img {
  max-width: 100%;
  max-height: calc(100vh - 7rem);
  border-radius: var(--radius);
  background: #fff;
  transform: scale(0.96);
  transition: transform 0.3s var(--ease);
}
.lightbox.is-open .lightbox__img { transform: none; }
.lightbox__caption { margin: 0.75rem 0 0; color: #fff; font-size: 1rem; text-align: center; max-width: 60ch; }
.lightbox__close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--yellow);
  color: var(--teal-deep);
  cursor: pointer;
}
.lightbox__close svg { width: 22px; height: 22px; }
.lightbox figure { margin: 0; display: grid; justify-items: center; }

/* ---------- 5. Pictures in a group fade in one after another ---------- */
.js-stagger .media > img,
.js-stagger .media > video,
.js-stagger .media > figure {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
  transition-delay: calc(var(--n, 0) * 90ms);
}
.js-stagger .media.is-shown > img,
.js-stagger .media.is-shown > video,
.js-stagger .media.is-shown > figure { opacity: 1; transform: none; }

/* ---------- 7. Big numbers count up (e.g. Gentle Touch stats) ---------- */
/* (JS only) */

/* ---------- 8. Home illustration floats gently ---------- */
@keyframes float-soft {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.hero__art.is-visible img { animation: float-soft 6s ease-in-out 1s infinite; }

/* ---------- 9. "Next project" card lifts and its arrow nudges ---------- */
.next-project { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.next-project:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.next-project:hover .dot-arrow::before { transform: translate(-50%, -50%) scale(0); opacity: 0; }
.next-project:hover .dot-arrow svg { opacity: 1; transform: none; }

/* ---------- 10. Skill icons wiggle on hover (About page) ---------- */
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}
.skill { transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.skill:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.skill:hover .skill__icon svg { animation: wiggle 0.5s ease-in-out; }

/* ---------- Reduced motion: keep everything, just without movement ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .js-sweep .highlight { background-size: 100% 100%; transition: none; }
  .js-stagger .media > * { opacity: 1 !important; transform: none !important; }
  .hero__art.is-visible img { animation: none; }
  .next-project:hover, .skill:hover { transform: none; }
  .skill:hover .skill__icon svg { animation: none; }
}