/* ==========================================================================
   DUKE KAMANDA — animations.css
   [data-reveal]/[data-stagger] states, card hover lifts, image zoom,
   button micro-interactions, nav underline, filter-tab indicator, marquee,
   divider grow, count-up, prefers-reduced-motion override.
   ========================================================================== */

/* ── Scroll reveal ──────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out),
    filter 0.7s var(--ease-out),
    clip-path 0.8s var(--ease-out);
  will-change: opacity, transform;
}

[data-reveal="up"]    { transform: translateY(32px); }
[data-reveal="down"]  { transform: translateY(-32px); }
[data-reveal="left"]  { transform: translateX(40px); }
[data-reveal="right"] { transform: translateX(-40px); }
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal="blur"]  { filter: blur(12px); }
[data-reveal="clip"]  { clip-path: inset(0 0 100% 0); }

[data-reveal].revealed {
  opacity: 1;
  transform: none;
  filter: none;
}
/* Only the "clip" variant needs a clip-path. Applying it to every revealed
   element clips to the border-box, which cuts off neumorphic box-shadows
   (e.g. the raised buttons). Scope it here so shadows on up/down/left/right/
   scale/blur reveals render in full. */
[data-reveal="clip"].revealed { clip-path: inset(0 0 0% 0); }

/* ── Stagger (JS assigns delays at 80ms steps) ─────────────────────── */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s var(--ease-out),
    transform 0.6s var(--ease-out);
}
[data-stagger].revealed > * {
  opacity: 1;
  transform: none;
}

/* ── Card hover lift (neumorphic emboss deepens on hover) ─────────────── */
/* filter, not box-shadow: cards in this pattern (.work-tile) also set
   overflow: hidden to clip their media zoom, and box-shadow gets hard-
   clipped by an element's own overflow — filter composites after that
   clipping, so the shadow still fades smoothly. */
.card-lift {
  transition: transform 0.35s var(--ease-out),
              filter 0.35s ease;
}
.card-lift:hover {
  transform: translateY(-6px);
  filter: var(--neu-raised-lg-filter);
}

/* ── Image zoom on hover ────────────────────────────────────────────── */
.img-zoom { overflow: hidden; }
.img-zoom img,
.img-zoom .img-fill {
  transition: transform 0.7s var(--ease-out);
}
.img-zoom:hover img,
.img-zoom:hover .img-fill { transform: scale(1.05); }

/* ── Nav underline ──────────────────────────────────────────────────── */
.nav-links a { position: relative; }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}
.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ── Filter tabs ────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.filter-tab {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-muted);
  background: var(--bg-raised);
  border: none;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  box-shadow: var(--neu-raised-sm);
  position: relative;
  transition: color 0.25s, box-shadow 0.25s ease, background-color 0.25s;
}
.filter-tab:hover { color: var(--fg); box-shadow: var(--neu-pressed-sm); }
.filter-tab.active {
  color: var(--on-accent);
  background: var(--accent);
  box-shadow: var(--neu-pressed-sm);
  font-weight: 500;
}
.filter-count {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-left: auto;
}
.filter-count strong { color: var(--accent); font-weight: 400; }

/* filter transition on tiles */
.work-tile {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.work-tile.filtered-out {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
  position: absolute;
  visibility: hidden;
}

/* ── Marquee / ticker ───────────────────────────────────────────────── */
.marquee-wrap {
  position: relative;
  overflow: hidden;
  padding: 0.5rem var(--pad-x);
}
.marquee {
  display: flex;
  width: max-content;
  animation: marquee 24s linear infinite;
}
.marquee-wrap:hover .marquee,
.marquee.paused { animation-play-state: paused; }

/* keyboard/click pause control — auto-scrolling content needs a stop
   mechanism beyond mouse hover (WCAG 2.2.2) */
.marquee-pause {
  position: absolute;
  top: 50%;
  right: var(--pad-x);
  transform: translateY(-50%);
  z-index: 2;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 50%;
  background: var(--bg-raised);
  box-shadow: var(--neu-raised-sm);
  color: var(--fg-muted);
  font-size: 9px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, box-shadow 0.2s ease;
}
.marquee-pause::before { content: '\275A\275A'; }
.marquee-pause[aria-pressed="true"]::before { content: '\25B6'; }
.marquee-pause:hover, .marquee-pause:focus-visible { color: var(--accent); box-shadow: var(--neu-pressed-sm); }
.marquee-item {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  white-space: nowrap;
  margin: 0 0.4rem;
}
.marquee-item:not(:empty) {
  background: var(--bg-raised);
  border-radius: var(--radius-pill);
  padding: 0.5rem 1.1rem;
  box-shadow: var(--neu-raised-sm);
}
.marquee-item.accent { color: var(--accent); }
.marquee-item.accent:nth-of-type(8n+5) { color: var(--accent-2); }

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Divider grow ───────────────────────────────────────────────────── */
.divider-grow {
  height: 0.5px;
  background: var(--rule);
  border: none;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1s var(--ease-out);
}
.divider-grow.revealed { transform: scaleX(1); }

/* ── Count-up stat ──────────────────────────────────────────────────── */
.stat-num {
  font-family: var(--serif);
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--fg);
  text-shadow: var(--neu-text-engrave);
  font-variant-numeric: tabular-nums;
}
.stat-num .suffix { color: var(--accent); }
.stat-label {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-top: 0.5rem;
}

/* ── Button micro-interaction (arrow nudge) ─────────────────────────── */
.btn .arr { transition: transform 0.3s var(--ease-out); display: inline-block; }
.btn:hover .arr { transform: translateX(5px); }

.link-line {
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: left bottom;
  transition: background-size 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.link-line:hover { background-size: 100% 1px; }

/* ── Hero entrance (no-JS-safe: pure CSS keyframes) ─────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.anim-1 { animation: fadeUp 0.5s var(--ease-out) both 0.1s; }
.anim-2 { animation: fadeUp 0.6s var(--ease-out) both 0.25s; }
.anim-3 { animation: fadeUp 0.6s var(--ease-out) both 0.4s; }

/* ── Reduced motion override ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
  [data-reveal],
  [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
  .grain-overlay { animation: none !important; }
  .marquee { animation: none !important; }
  .divider-grow { transform: scaleX(1) !important; }
}