/*
 * nd-motion.css — ニコルデジマ Motion System
 * ============================================
 * Hover transitions, scroll-triggered reveal animations,
 * tab underline effects, and soft link underlines.
 *
 * All timing values reference motion tokens from nd-tokens.css:
 *   --ease-soft:  cubic-bezier(0.22, 1, 0.36, 1)
 *   --hover-dur:  380ms
 *   --rev-dur:    900ms
 *
 * REDUCED MOTION: nd-base.css already has the global
 * prefers-reduced-motion override. This file adds a
 * redundant safety net for reveal-specific elements.
 *
 * DEPENDS ON: nd-tokens.css, nd-base.css, nd-global.css
 */


/* ═══════════════════════════════════════════════
   1. BASE HOVER REFINEMENTS
   ═══════════════════════════════════════════════
   Slower, softer than browser defaults.
   Applied to global components from nd-global.css.
   ═══════════════════════════════════════════════ */

/* Navigation */
.nav a {
  transition:
    color var(--hover-dur) var(--ease-soft),
    opacity var(--hover-dur) var(--ease-soft);
}
.nav a:hover {
  opacity: 0.7;
}

/* Breadcrumb */
.breadcrumb a,
.rank-math-breadcrumb a {
  transition: color var(--hover-dur) var(--ease-soft);
}

/* Buttons */
.btn-primary {
  transition: background var(--hover-dur) var(--ease-soft);
}

.btn-outline {
  transition:
    background var(--hover-dur) var(--ease-soft),
    color var(--hover-dur) var(--ease-soft),
    border-color var(--hover-dur) var(--ease-soft);
}

.btn-text {
  transition: color var(--hover-dur) var(--ease-soft);
}

.share-btn {
  transition:
    border-color var(--hover-dur) var(--ease-soft),
    color var(--hover-dur) var(--ease-soft);
}

/* Section links */
.section-link,
.feature-link {
  transition: color var(--hover-dur) var(--ease-soft);
}

/* Footer items */
.footer-col li a {
  transition: color var(--hover-dur) var(--ease-soft);
}

/* Tag chips */
.tag-cloud .tag {
  transition:
    background var(--hover-dur) var(--ease-soft),
    color var(--hover-dur) var(--ease-soft);
}

/* Pagination */
.pagination span,
.pagination a,
.pagination .page-numbers {
  transition:
    background var(--hover-dur) var(--ease-soft),
    color var(--hover-dur) var(--ease-soft);
}

/* Cards — subtle opacity on hover */
.feat-art,
.arc-art,
.latest-row,
.art-row {
  transition: opacity 500ms var(--ease-soft);
}

.art-row:hover {
  opacity: 1;
}

/* Card title colour shift on hover */
.art-row h3 {
  transition: color var(--hover-dur) var(--ease-soft);
}
.art-row:hover h3 {
  color: var(--kaki);
}

/* Sidebar items */
.cat-item,
.pop-item {
  transition:
    color var(--hover-dur) var(--ease-soft),
    opacity var(--hover-dur) var(--ease-soft);
}
.cat-item:hover,
.pop-item:hover {
  opacity: 0.85;
}

/* Mobile drawer links */
.mobile-drawer-nav a {
  transition: color var(--hover-dur) var(--ease-soft);
}


/* ═══════════════════════════════════════════════
   2. TAB UNDERLINE — sliding scale effect
   ═══════════════════════════════════════════════
   Used on Article Index category tabs.
   Replaces a hard border-color flip with a
   smooth scaleX animation.
   ═══════════════════════════════════════════════ */

.tab {
  transition:
    color var(--hover-dur) var(--ease-soft),
    border-color var(--hover-dur) var(--ease-soft);
  position: relative;
  border-bottom-color: transparent;
}

.tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--kaki);
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    transform 520ms var(--ease-soft),
    background var(--hover-dur) var(--ease-soft);
}

.tab.active::after {
  transform: scaleX(1);
}

.tab:not(.active):hover::after {
  transform: scaleX(0.4);
  background: var(--ink-3);
}


/* ═══════════════════════════════════════════════
   3. SOFT TEXT UNDERLINE — background-size reveal
   ═══════════════════════════════════════════════
   Used on sidebar links, welcome card links,
   and inline links in article body.
   ═══════════════════════════════════════════════ */

.welcome a,
.sb-foot,
.inline-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition:
    background-size 540ms var(--ease-soft),
    color var(--hover-dur) var(--ease-soft),
    opacity var(--hover-dur) var(--ease-soft);
}

.welcome a:hover,
.sb-foot:hover,
.inline-link:hover {
  background-size: 100% 1px;
}


/* ═══════════════════════════════════════════════
   4. SCROLL-TRIGGERED REVEALS
   ═══════════════════════════════════════════════
   Elements with [data-reveal] start hidden and
   animate in when IntersectionObserver adds
   the .is-in class (handled by nd-reveal.js).
   ═══════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

  /* Base reveal state — hidden, slightly shifted down */
  [data-reveal] {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity var(--rev-dur) var(--ease-soft),
      transform var(--rev-dur) var(--ease-soft);
  }

  /* Revealed state */
  [data-reveal].is-in {
    opacity: 1;
    transform: translateY(0);
  }

  /* Staggered reveal for article rows */
  .art-row[data-reveal].is-in:nth-child(1) { transition-delay: 0ms; }
  .art-row[data-reveal].is-in:nth-child(2) { transition-delay: 60ms; }
  .art-row[data-reveal].is-in:nth-child(3) { transition-delay: 120ms; }
  .art-row[data-reveal].is-in:nth-child(4) { transition-delay: 180ms; }

  /* Image fade-in inside revealed rows — subtle scale settle */
  .art-row .thumb {
    opacity: 0.001;
    transform: scale(0.992);
    transition:
      opacity 1100ms var(--ease-soft) 120ms,
      transform 1100ms var(--ease-soft) 120ms;
  }

  .art-row[data-reveal].is-in .thumb,
  .art-row:not([data-reveal]) .thumb {
    opacity: 1;
    transform: scale(1);
  }
}


/* ═══════════════════════════════════════════════
   5. PAGE-HEAD INTRO REVEAL (CSS-only, no JS)
   ═══════════════════════════════════════════════
   Used on Article Index page header — title,
   description, and stats cascade in on load.
   ═══════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

  .page-head .page-h1,
  .page-head .page-dek,
  .page-head .page-stats {
    opacity: 0;
    transform: translateY(6px);
    animation: nd-revealUp var(--rev-dur) var(--ease-soft) forwards;
  }

  .page-head .page-h1   { animation-delay: 80ms; }
  .page-head .page-dek  { animation-delay: 220ms; }
  .page-head .page-stats { animation-delay: 380ms; }

  /* Tabs subtle on-load fade */
  .tabs {
    opacity: 0;
    animation: nd-fadeIn 700ms var(--ease-soft) 480ms forwards;
  }
}

@keyframes nd-revealUp {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes nd-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ═══════════════════════════════════════════════
   6. REDUCED MOTION — safety net
   ═══════════════════════════════════════════════
   nd-base.css already has the global override.
   This is a redundant safety net specifically
   for reveal elements, in case nd-base loads
   out of order or is removed.
   ═══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}