/* Motion — transform and opacity only. Hover is gated to fine pointers. */

/* Pen writes each word left to right, then lifts before the next word. */
.script-r__word {
  display: inline-block;
  padding: 0.14em 0.05em 0.2em;
  animation: script-write 1.35s cubic-bezier(0.42, 0.02, 0.2, 1) both;
}

.script-r__word--next {
  margin-left: 0.22em;
  animation-duration: 0.95s;
  animation-delay: 1.05s;
}

@keyframes script-write {
  0% {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 28%, transparent 31.5%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 28%, transparent 31.5%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 380% 100%;
    mask-size: 380% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  100% {
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 28%, transparent 31.5%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, #000 28%, transparent 31.5%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 380% 100%;
    mask-size: 380% 100%;
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
  }
}

.loader-words span {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(8px);
  letter-spacing: 0.18em;
}

.loader-words span:nth-child(1) { animation: loader-word 0.4s 0.08s var(--ease) both; }
.loader-words span:nth-child(2) { animation: loader-word 0.4s 0.16s var(--ease) both; }
.loader-words span:nth-child(3) { animation: loader-word 0.4s 0.24s var(--ease) both; }

.loader-bar span {
  animation: loader-bar 0.5s 0.08s var(--ease) forwards;
}

@keyframes loader-word {
  to { opacity: 1; filter: blur(0); transform: none; letter-spacing: 0.04em; }
}

@keyframes loader-bar {
  to { transform: scaleX(1); }
}

.reveal {
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}

.page-main {
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), filter 0.22s var(--ease);
}

html.is-leaving .page-main {
  opacity: 0;
  transform: translateY(-10px);
  filter: blur(6px);
}

html.is-leaving::after {
  animation: overlay-in 0.16s var(--ease) both;
}

@keyframes overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.to-top {
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}

.nav.is-open {
  transition: background 0.2s var(--ease);
}

.timeline::after,
.timeline-item,
.timeline-item::before,
.timeline-item p {
  transition: opacity 0.45s var(--ease), background 0.45s var(--ease),
    box-shadow 0.45s var(--ease), color 0.45s var(--ease);
}

.project-card,
.venture-card,
.focus-card,
.social-card,
.interest,
.btn,
.filter-btn,
.icon-btn {
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease),
    background 0.2s var(--ease), opacity 0.2s var(--ease), color 0.2s var(--ease);
}

.project-card__media img {
  transition: transform 0.45s var(--ease);
}

.project-card::before {
  transition: transform 0.25s var(--ease);
}

.social-card__arrow {
  transition: transform 0.2s var(--ease);
}

.btn:active,
.icon-btn:active,
.filter-btn:active {
  transform: translateY(1px);
}

.node-pulse {
  animation: node-pulse 4.5s ease-in-out infinite;
}

@keyframes node-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

@media (hover: hover) and (pointer: fine) {
  .project-card:hover,
  .venture-card:hover,
  .focus-card:hover,
  .social-card:hover:not(.is-placeholder),
  .interest:hover {
    border-color: var(--border-strong);
    transform: translateY(-3px);
  }

  .project-card:hover {
    box-shadow: var(--shadow);
  }

  .project-card:hover .project-card__media img {
    transform: scale(1.05);
  }

  .project-card:hover::before {
    transform: scaleY(1);
  }

  .project-card.is-open:hover {
    transform: none;
  }

  .project-card.is-open:hover .project-card__media img {
    transform: none;
  }

  .social-card:hover:not(.is-placeholder) .social-card__arrow {
    transform: translateX(4px);
  }

  .btn--primary:hover {
    background: var(--accent-hover);
  }

  .btn--ghost:hover {
    border-color: var(--accent-line);
    background: var(--accent-soft);
  }

  .filter-btn:hover:not(.is-active) {
    border-color: var(--accent-line);
    color: var(--text);
  }

  .nav__list a:hover {
    background-size: 100% 100%;
    color: var(--text);
  }

  .nav-toggle:hover::before {
    clip-path: inset(0 0 0 0 round 10px);
  }

  .nav-toggle:hover span {
    background: var(--on-accent);
    transition-delay: 0s, 0.28s, 0s;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    filter: none !important;
  }

  .reveal,
  html.is-leaving .page-main {
    opacity: 1;
    transform: none;
  }

  .script-r,
  .script-r__word,
  .loader-words span,
  .timeline.is-tracking .timeline-item {
    opacity: 1;
    transform: none;
    filter: none;
    letter-spacing: 0;
  }

  html.is-transitioning::after,
  html.is-leaving::after,
  html.is-arriving::after {
    display: none;
  }
}