/* ============================================================
   WDA UI KIT — EFFECTS LAYER  (v1.0)
   Signature agency-site motion patterns, extracted from the
   Xriver theme family and rebuilt natively in the WDA system.
   Pure CSS + a thin driver (effects.js). Every value reads the
   motion.* / color / type tokens from tokens.css. No libraries.

   Contains:
     1 · Infinite marquee  (.mq) + logo / mega-text variants
     2 · Count-up stats     (.stats / [data-count])
     3 · Project hover list (.projlist) — cursor-follow image
     4 · Gallery marquee     (.gmq) — opposite-direction rows
     5 · Skill bars          (.skills) — reveal-driven fill
     6 · Parallax            ([data-speed]) — scroll travel
     7 · Custom cursor       (.xcursor) — dot + ring
   ============================================================ */

/* ------------------------------------------------------------
   1 · INFINITE MARQUEE
   Author writes items ONCE inside .mq__track; effects.js clones
   the set so translateX(-50%) loops seamlessly. Items carry a
   right margin (not flex gap) so the period is exact.
   ------------------------------------------------------------ */
.mq { --mq-gap: 64px; --mq-dur: 38s; overflow: hidden; display: flex; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq--edge-hard { -webkit-mask-image: none; mask-image: none; }
.mq__track { display: flex; flex: none; align-items: center; min-width: 100%; animation: mq-scroll var(--mq-dur) linear infinite; will-change: transform; }
.mq__track > * { flex: none; margin-right: var(--mq-gap); }
.mq--reverse .mq__track { animation-direction: reverse; }
.mq--slow { --mq-dur: 56s; }
.mq--fast { --mq-dur: 24s; }
.mq[data-pause-hover]:hover .mq__track { animation-play-state: paused; }
@keyframes mq-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* logo / client / integration row */
.mq--logos { --mq-gap: 56px; }
.mq-logo { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -.01em; color: var(--color-text-muted); white-space: nowrap; transition: color var(--motion-duration-standard) var(--motion-easing-standard); }
.mq-logo:hover { color: var(--color-text-primary); }
.mq-logo svg, .mq-logo .mq-logo__ic { width: 26px; height: 26px; flex: none; color: var(--color-text-brand); }
.mq-logo .mq-logo__ic { display: grid; place-items: center; border-radius: 7px; background: var(--color-brand-tint); }
.mq-logo .mq-logo__ic svg { width: 16px; height: 16px; }
.section--ink .mq-logo, .sec--ink .mq-logo { color: var(--color-text-on-dark-muted); }
.section--ink .mq-logo:hover, .sec--ink .mq-logo:hover { color: #fff; }

/* mega running headline (footer / band) */
.mq--mega .mq__track { animation-duration: 46s; }
.mq-mega { display: inline-flex; align-items: center; gap: 28px; font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 7vw, 96px); line-height: 1; letter-spacing: -.03em; text-transform: uppercase; color: var(--color-ink); -webkit-text-stroke: 1.5px var(--color-ink); }
.mq-mega--ghost { color: transparent; }
.mq-mega__sep { width: clamp(20px, 3vw, 38px); height: clamp(20px, 3vw, 38px); flex: none; color: var(--color-brand-primary); -webkit-text-stroke: 0; }
.sec--ink .mq-mega { color: #fff; -webkit-text-stroke: 1.5px rgba(255,255,255,.5); }
.sec--ink .mq-mega--ghost { color: transparent; }
/* footer marquee: solid letters, no hollow outline */
.site-footer .mq-mega { color: #fff; -webkit-text-stroke: 0; }
.site-footer .mq-mega--ghost { color: rgba(255,255,255,.16); -webkit-text-stroke: 0; }

/* ------------------------------------------------------------
   2 · COUNT-UP STATS
   [data-count="50"] [data-suffix="+"] — effects.js animates the
   number from 0 when the cell scrolls into view.
   ------------------------------------------------------------ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--color-ink-border); border-radius: var(--radius-xl); overflow: hidden; }
.stat-cell { background: var(--color-ink); padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 34px); position: relative; }
.stat-cell__num { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5.4vw, 68px); line-height: 1; letter-spacing: -.03em; color: #fff; display: flex; align-items: baseline; gap: 2px; }
.stat-cell__num .suf, .stat-cell__num .pre { color: var(--color-brand-primary); }
.stat-cell__label { margin: 14px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--color-text-on-dark-muted); max-width: 220px; }
.stat-cell__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--color-brand-primary); transition: width var(--motion-duration-cinematic) var(--motion-easing-soft); }
.stats.is-in .stat-cell__bar { width: 100%; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .stats { grid-template-columns: 1fr; } }

/* light variant of stats (on surface) */
.stats--light { background: var(--color-border-default); }
.stats--light .stat-cell { background: var(--color-bg-page); }
.stats--light .stat-cell__num { color: var(--color-text-primary); }
.stats--light .stat-cell__label { color: var(--color-text-muted); }

/* ------------------------------------------------------------
   3 · PROJECT HOVER LIST  (cursor-follow image reveal)
   Big rows; hovering one floats its image at the pointer.
   .projlist__float is created/positioned by effects.js.
   ------------------------------------------------------------ */
.projlist { border-top: 1px solid var(--color-border-default); }
.sec--ink .projlist, .section--ink .projlist { border-top-color: var(--color-ink-border); }
.projlist__row { position: relative; display: flex; align-items: center; gap: 24px; padding: clamp(22px, 3vw, 36px) 6px; border-bottom: 1px solid var(--color-border-default); text-decoration: none; color: inherit; cursor: pointer; transition: padding-left var(--motion-duration-emphasis) var(--motion-easing-standard); }
.sec--ink .projlist__row, .section--ink .projlist__row { border-bottom-color: var(--color-ink-border); }
.projlist__row:hover { padding-left: 22px; }
.projlist__idx { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--color-text-muted); flex: none; width: 38px; transition: color var(--motion-duration-standard); }
.projlist__row:hover .projlist__idx { color: var(--color-text-brand); }
.projlist__main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.projlist__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 3.4vw, 44px); line-height: 1.04; letter-spacing: -.02em; color: var(--color-text-primary); transition: color var(--motion-duration-standard) var(--motion-easing-standard); }
.sec--ink .projlist__title, .section--ink .projlist__title { color: #fff; }
.projlist__row:hover .projlist__title { color: var(--color-text-brand); }
.sec--ink .projlist__row:hover .projlist__title, .section--ink .projlist__row:hover .projlist__title { color: var(--color-brand-primary); }
.projlist__tags { display: flex; flex-wrap: wrap; gap: 7px; }
.projlist__tags span { font-size: 12px; font-weight: var(--fw-semibold); letter-spacing: .03em; padding: 4px 11px; border-radius: var(--radius-pill); background: var(--color-bg-surface); color: var(--color-text-secondary); }
.sec--ink .projlist__tags span, .section--ink .projlist__tags span { background: rgba(255,255,255,.07); color: #C7CEC9; }
.projlist__arrow { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--color-border-strong); display: grid; place-items: center; color: var(--color-text-primary); transform: scale(.82) rotate(-12deg); opacity: .5; transition: all var(--motion-duration-emphasis) var(--motion-easing-standard); }
.sec--ink .projlist__arrow, .section--ink .projlist__arrow { border-color: var(--color-ink-border-strong); color: #fff; }
.projlist__arrow svg { width: 20px; height: 20px; }
.projlist__row:hover .projlist__arrow { opacity: 1; transform: none; background: var(--color-brand-primary); border-color: var(--color-brand-primary); color: var(--color-text-on-brand); }

/* inline thumb — only used as the touch / no-pointer fallback */
.projlist__thumb { display: none; flex: none; width: 84px; height: 64px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-ink) center/cover no-repeat; }

/* the floating, cursor-following preview (one per list) */
.projlist__float { position: fixed; top: 0; left: 0; z-index: var(--z-float); pointer-events: none; width: clamp(240px, 26vw, 360px); aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-ink) center/cover no-repeat; box-shadow: var(--shadow-lg); opacity: 0; transform: translate(-50%, -50%) scale(.7) rotate(-6deg); transition: opacity var(--motion-duration-standard) var(--motion-easing-standard), transform var(--motion-duration-emphasis) var(--motion-easing-enter); will-change: transform, opacity; }
.projlist__float.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
.projlist__float::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,16,32,.05), rgba(11,16,32,.35)); }
@media (hover: none), (pointer: coarse) {
  .projlist__float { display: none !important; }
  .projlist__thumb { display: block; }
  .projlist__row:hover { padding-left: 6px; }
}

/* ------------------------------------------------------------
   4 · GALLERY MARQUEE  (opposite-direction photo rows)
   ------------------------------------------------------------ */
.gmq { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 22px); }
.gmq .mq { --mq-gap: clamp(14px, 1.6vw, 22px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.gmq__img { width: clamp(220px, 26vw, 360px); height: clamp(150px, 17vw, 240px); border-radius: var(--radius-lg); overflow: hidden; position: relative; background: var(--color-ink) center/cover no-repeat; border: 1px solid var(--color-border-default); }
.sec--ink .gmq__img, .section--ink .gmq__img { border-color: var(--color-ink-border); }
.gmq__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(11,16,32,.45)); opacity: 0; transition: opacity var(--motion-duration-standard); }
.gmq__img .cap { position: absolute; left: 14px; bottom: 12px; z-index: 2; font-size: 12.5px; font-weight: var(--fw-bold); letter-spacing: .04em; color: #fff; opacity: 0; transform: translateY(8px); transition: opacity var(--motion-duration-standard), transform var(--motion-duration-standard) var(--motion-easing-standard); }
.gmq__img:hover::after { opacity: 1; }
.gmq__img:hover .cap { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   5 · SKILL BARS  (reveal-driven fill + count-up %)
   Container gets data-inview → .is-in (motion.js); bars read --v.
   ------------------------------------------------------------ */
.skills { display: grid; gap: clamp(20px, 2.6vw, 30px); }
.skill__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.skill__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 2.2vw, 26px); letter-spacing: -.01em; color: var(--color-text-primary); }
.sec--ink .skill__name, .section--ink .skill__name { color: #fff; }
.skill__name .hash { color: var(--color-text-brand); margin-right: 4px; }
.skill__pct { font-family: var(--font-display); font-weight: 700; font-size: clamp(17px, 2vw, 22px); color: var(--color-text-brand); }
.sec--ink .skill__pct, .section--ink .skill__pct { color: var(--color-brand-primary); }
.skill__track { height: 8px; border-radius: var(--radius-pill); background: var(--color-bg-surface-2); overflow: hidden; }
.sec--ink .skill__track, .section--ink .skill__track { background: var(--color-ink-elevated); }
.skill__bar { height: 100%; width: 0; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--color-brand-primary), var(--color-brand-primary-hover)); transition: width var(--motion-duration-cinematic) var(--motion-easing-soft); transition-delay: calc(var(--i, 0) * var(--motion-delay-stagger-sm)); }
.skills.is-in .skill__bar { width: var(--v, 0%); }

/* ------------------------------------------------------------
   6 · PARALLAX  ([data-speed]) — gentle scroll travel.
   effects.js sets --py; positive speed drifts up as you scroll.
   ------------------------------------------------------------ */
[data-speed] { will-change: transform; transform: translate3d(0, var(--py, 0px), 0); }

/* scattered showcase cluster (big-text + parallax photos) */
.showcase { position: relative; }
.showcase__display { font-family: var(--font-display); font-weight: 800; font-size: clamp(48px, 12vw, 168px); line-height: .92; letter-spacing: -.04em; text-transform: uppercase; margin: 0; color: var(--color-text-primary); }
.showcase__display .ghost { color: transparent; -webkit-text-stroke: 1.5px var(--color-border-strong); }
.showcase__display .accent { color: var(--color-text-brand); }
.showcase__row { display: flex; align-items: flex-start; gap: clamp(14px, 2vw, 28px); margin: clamp(24px, 4vw, 56px) 0; }
.showcase__pic { flex: 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-ink) center/cover no-repeat; box-shadow: var(--shadow-lg); border: 1px solid var(--color-border-default); }
.showcase__pic--1 { height: clamp(200px, 24vw, 320px); margin-top: clamp(40px, 7vw, 96px); }
.showcase__pic--2 { height: clamp(240px, 30vw, 400px); }
.showcase__pic--3 { height: clamp(200px, 24vw, 320px); margin-top: clamp(20px, 4vw, 56px); }
.showcase__count { display: flex; flex-direction: column; gap: 6px; }
.showcase__count .n { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 6vw, 84px); line-height: 1; color: var(--color-text-primary); }
.showcase__count .n .suf { color: var(--color-text-brand); }
.showcase__count .l { font-size: 14.5px; color: var(--color-text-muted); max-width: 240px; }
@media (max-width: 720px) {
  .showcase__row { flex-direction: column; }
  .showcase__pic { width: 100%; flex: none; margin-top: 0 !important; transform: none !important; }
}

/* ------------------------------------------------------------
   7 · CUSTOM CURSOR  (.xcursor) — created by effects.js
   Only active on fine-pointer devices; respects reduced-motion.
   ------------------------------------------------------------ */
.xcursor { position: fixed; top: 0; left: 0; z-index: var(--z-cursor); pointer-events: none; width: 0; height: 0; }
.xcursor__ring, .xcursor__dot { position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); border-radius: 50%; }
.xcursor__dot { width: 7px; height: 7px; background: var(--color-brand-primary); transition: opacity var(--motion-duration-fast); }
.xcursor__ring { width: 38px; height: 38px; border: 1.5px solid var(--color-brand-primary); transition: width var(--motion-duration-standard) var(--motion-easing-cursor), height var(--motion-duration-standard) var(--motion-easing-cursor), background var(--motion-duration-standard) var(--motion-easing-cursor), border-color var(--motion-duration-standard) var(--motion-easing-cursor), opacity var(--motion-duration-fast); display: grid; place-items: center; color: var(--color-ink); }
.xcursor__ring .label { font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .03em; opacity: 0; transform: scale(.7); transition: opacity var(--motion-duration-fast), transform var(--motion-duration-standard) var(--motion-easing-standard); white-space: nowrap; }
.xcursor.is-down .xcursor__ring { width: 30px; height: 30px; }
/* hover an interactive element → ring grows, dot shrinks */
.xcursor.is-hover .xcursor__ring { width: 56px; height: 56px; background: rgba(var(--color-brand-primary-rgb),.14); }
.xcursor.is-hover .xcursor__dot { opacity: 0; }
/* over a [data-cursor-label] element → filled disc with a word */
.xcursor.is-view .xcursor__ring { width: 92px; height: 92px; background: var(--color-brand-primary); border-color: var(--color-brand-primary); }
.xcursor.is-view .xcursor__ring .label { opacity: 1; transform: none; }
.xcursor.is-view .xcursor__dot { opacity: 0; }
.xcursor.is-hidden { opacity: 0; }
body.has-xcursor { cursor: none; }
body.has-xcursor a, body.has-xcursor button, body.has-xcursor .projlist__row, body.has-xcursor [data-cursor-label], body.has-xcursor label, body.has-xcursor summary { cursor: none; }
body.has-xcursor input, body.has-xcursor textarea, body.has-xcursor select { cursor: auto; }

/* ------------------------------------------------------------
   REDUCED MOTION — collapse continuous animation
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .mq__track { animation: none !important; }
  .mq { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  [data-speed] { transform: none !important; }
  .projlist__float { transition: opacity 120ms linear; }
}