150 Attribute Tricks
for Webflow

[data-animate="fade-in"] {
  opacity: 0;
  animation: fadeIn linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 25%;
}
@keyframes fadeIn { to { opacity: 1; } }

[data-animate="slide-up"] {
  opacity: 0;
  transform: translateY(40px);
  animation: slideUp linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}
@keyframes slideUp { to { opacity: 1; transform: none; } }

[data-stagger="children"] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
[data-stagger="children"].is-visible > * { opacity: 1; transform: none; }
[data-stagger="children"].is-visible > *:nth-child(1) { transition-delay: 0ms; }
[data-stagger="children"].is-visible > *:nth-child(2) { transition-delay: 80ms; }
[data-stagger="children"].is-visible > *:nth-child(3) { transition-delay: 160ms; }
[data-stagger="children"].is-visible > *:nth-child(4) { transition-delay: 240ms; }
[data-stagger="children"].is-visible > *:nth-child(5) { transition-delay: 320ms; }

document.querySelectorAll('[data-stagger="children"]').forEach(el => {
  new IntersectionObserver(([e]) => {
    if (e.isIntersecting) el.classList.add('is-visible');
  }, { threshold: 0.1 }).observe(el);
});

document.querySelectorAll('[data-parallax]').forEach(el => {
  const speed = parseFloat(el.dataset.parallax) || 0.3;
  window.addEventListener('scroll', () => {
    el.style.transform = `translateY(${window.scrollY * speed}px)`;
  }, { passive: true });
});

document.querySelectorAll('[data-countup]').forEach(el => {
  const target = parseInt(el.textContent, 10);
  const duration = 1500;
  let start = null;
  const observer = new IntersectionObserver(([e]) => {
    if (!e.isIntersecting) return;
    observer.disconnect();
    const step = (ts) => {
      if (!start) start = ts;
      const progress = Math.min((ts - start) / duration, 1);
      el.textContent = Math.floor(progress * target);
      if (progress < 1) requestAnimationFrame(step);
      else el.textContent = target;
    };
    requestAnimationFrame(step);
  });
  observer.observe(el);
});

[data-typewriter]::after {
  content: '|';
  animation: blink 0.7s step-end infinite;
}
@keyframes blink { 50% { opacity: 0; } }

document.querySelectorAll('[data-typewriter]').forEach(el => {
  const text = el.dataset.typewriter;
  el.textContent = '';
  let i = 0;
  const type = () => {
    if (i < text.length) { el.textContent += text[i++]; setTimeout(type, 55); }
  };
  new IntersectionObserver(([e]) => {
    if (e.isIntersecting) { type(); }
  }, { threshold: 0.5 }).observe(el);
});

[data-glow="pulse"] {
  animation: glowPulse 2s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99,102,241,0.5); }
  50%       { box-shadow: 0 0 0 12px rgba(99,102,241,0); }
}

[data-hover="shake"]:hover {
  animation: shake 0.4s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

[data-progress-bar] {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: var(--accent, #6366f1);
  z-index: 9999;
  transition: width 0.1s linear;
}

const bar = document.querySelector('[data-progress-bar]');
if (bar) {
  window.addEventListener('scroll', () => {
    const pct = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
    bar.style.width = pct + '%';
  }, { passive: true });
}

html { scroll-behavior: smooth; }

document.querySelectorAll('[data-scroll-to]').forEach(el => {
  el.addEventListener('click', e => {
    e.preventDefault();
    document.querySelector(el.dataset.scrollTo)?.scrollIntoView({ behavior: 'smooth' });
  });
});

[data-snap="container"] {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
[data-snap="container"] > * {
  scroll-snap-align: start;
  min-height: 100vh;
}

[data-back-to-top] {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
[data-back-to-top].is-visible {
  opacity: 1;
  pointer-events: auto;
}

const btn = document.querySelector('[data-back-to-top]');
if (btn) {
  window.addEventListener('scroll', () => {
    btn.classList.toggle('is-visible', window.scrollY > 400);
  }, { passive: true });
  btn.addEventListener('click', () => window.scrollTo({ top: 0, behavior: 'smooth' }));
}

[data-scroll="horizontal"] {
  overflow-x: auto;
  overflow-y: hidden;
  display: flex;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
[data-scroll="horizontal"]::-webkit-scrollbar { display: none; }
[data-scroll="horizontal"] > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

[data-cursor="follow"] {
  position: fixed;
  width: 20px; height: 20px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.12s ease, opacity 0.3s ease;
}

const cursor = document.querySelector('[data-cursor="follow"]');
if (cursor) {
  let mx = 0, my = 0, cx = 0, cy = 0;
  document.addEventListener('mousemove', e => { mx = e.clientX; my = e.clientY; });
  (function loop() {
    cx += (mx - cx) * 0.12;
    cy += (my - cy) * 0.12;
    cursor.style.left = (cx - 10) + 'px';
    cursor.style.top  = (cy - 10) + 'px';
    requestAnimationFrame(loop);
  })();
}

[data-magnetic] { transition: transform 0.3s ease; }

document.querySelectorAll('[data-magnetic]').forEach(el => {
  el.addEventListener('mousemove', e => {
    const r = el.getBoundingClientRect();
    const x = (e.clientX - r.left - r.width / 2) * 0.35;
    const y = (e.clientY - r.top - r.height / 2) * 0.35;
    el.style.transform = `translate(${x}px, ${y}px)`;
  });
  el.addEventListener('mouseleave', () => el.style.transform = '');
});

[data-cursor="blend"] {
  position: fixed;
  width: 24px; height: 24px;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
}

const cur = document.querySelector('[data-cursor="blend"]');
if (cur) {
  document.addEventListener('mousemove', e => {
    cur.style.left = (e.clientX - 12) + 'px';
    cur.style.top  = (e.clientY - 12) + 'px';
  });
}

[data-text="gradient"] {
  background: linear-gradient(90deg, #6366f1, #ec4899, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

[data-text="gradient-animate"] {
  background: linear-gradient(90deg, #6366f1, #ec4899, #f59e0b, #6366f1);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradShift 3s linear infinite;
}
@keyframes gradShift { to { background-position: 200% center; } }

const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%';
document.querySelectorAll('[data-scramble]').forEach(el => {
  const original = el.textContent;
  let frame, iteration = 0;
  el.addEventListener('mouseenter', () => {
    clearInterval(frame);
    iteration = 0;
    frame = setInterval(() => {
      el.textContent = original.split('').map((c, i) => {
        if (c === ' ') return ' ';
        if (i < iteration) return original[i];
        return chars[Math.floor(Math.random() * chars.length)];
      }).join('');
      if (iteration >= original.length) clearInterval(frame);
      iteration += 0.5;
    }, 30);
  });
});

[data-reveal="words"] .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
[data-reveal="words"].is-visible .word { opacity: 1; transform: none; }

document.querySelectorAll('[data-reveal="words"]').forEach(el => {
  el.innerHTML = el.textContent.split(' ')
    .map((w, i) => `<span class="word" style="transition-delay:${i * 60}ms">${w}&nbsp;</span>`)
    .join('');
  new IntersectionObserver(([e]) => {
    if (e.isIntersecting) el.classList.add('is-visible');
  }, { threshold: 0.3 }).observe(el);
});

[data-text="outline"] {
  -webkit-text-stroke: 1.5px currentColor;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

[data-highlight] {
  background: linear-gradient(to right, #fde047 0%, #fde047 100%) no-repeat;
  background-size: 0% 40%;
  background-position: 0 80%;
  transition: background-size 0.6s ease;
}
[data-highlight].is-visible { background-size: 100% 40%; }

document.querySelectorAll('[data-highlight]').forEach(el => {
  new IntersectionObserver(([e]) => {
    if (e.isIntersecting) el.classList.add('is-visible');
  }, { threshold: 0.6 }).observe(el);
});

[data-toggle-target] { display: none; }
[data-toggle-target].is-open { display: block; }

document.querySelectorAll('[data-toggle]').forEach(trigger => {
  trigger.addEventListener('click', () => {
    document.querySelectorAll(trigger.dataset.toggle).forEach(target => {
      target.classList.toggle('is-open');
    });
  });
});

[data-accordion] { overflow: hidden; max-height: 0; transition: max-height 0.4s ease; }
[data-accordion].is-open { max-height: 600px; }

document.querySelectorAll('[data-accordion-trigger]').forEach(trigger => {
  trigger.addEventListener('click', () => {
    const target = document.querySelector(trigger.dataset.accordionTrigger);
    target?.classList.toggle('is-open');
    trigger.setAttribute('aria-expanded', target?.classList.contains('is-open') ? 'true' : 'false');
  });
});

[data-tooltip] { position: relative; cursor: default; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  font-size: 0.75rem;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
[data-tooltip]:hover::after { opacity: 1; }

[data-copy] { cursor: pointer; }
[data-copy].copied::after { content: ' ✓ Copied'; color: #6bcb77; font-size: 0.8em; }

document.querySelectorAll('[data-copy]').forEach(el => {
  el.addEventListener('click', () => {
    navigator.clipboard.writeText(el.textContent.trim()).then(() => {
      el.classList.add('copied');
      setTimeout(() => el.classList.remove('copied'), 2000);
    });
  });
});

[data-tab-panel] { display: none; }
[data-tab-panel].is-active { display: block; }
[data-tab].is-active { font-weight: 700; border-bottom: 2px solid currentColor; }

document.querySelectorAll('[data-tab]').forEach(tab => {
  tab.addEventListener('click', () => {
    document.querySelectorAll('[data-tab]').forEach(t => t.classList.remove('is-active'));
    document.querySelectorAll('[data-tab-panel]').forEach(p => p.classList.remove('is-active'));
    tab.classList.add('is-active');
    document.querySelector(`[data-tab-panel="${tab.dataset.tab}"]`)?.classList.add('is-active');
  });
});

[data-modal] {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
[data-modal].is-open { display: flex; }

document.querySelectorAll('[data-modal-open]').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelector(btn.dataset.modalOpen)?.classList.add('is-open');
  });
});
document.querySelectorAll('[data-modal-close]').forEach(btn => {
  btn.closest('[data-modal]')?.addEventListener('click', e => {
    if (e.target === btn || e.target === btn.closest('[data-modal]'))
      btn.closest('[data-modal]').classList.remove('is-open');
  });
});

[data-src] { opacity: 0; transition: opacity 0.4s ease; }
[data-src].loaded { opacity: 1; }

document.querySelectorAll('img[data-src]').forEach(img => {
  new IntersectionObserver(([e], obs) => {
    if (!e.isIntersecting) return;
    img.src = img.dataset.src;
    img.onload = () => img.classList.add('loaded');
    obs.disconnect();
  }).observe(img);
});

html.dark { filter: invert(1) hue-rotate(180deg); }
html.dark img, html.dark video { filter: invert(1) hue-rotate(180deg); }

const toggle = document.querySelector('[data-theme-toggle]');
if (toggle) {
  const html = document.documentElement;
  if (localStorage.getItem('theme') === 'dark') html.classList.add('dark');
  toggle.addEventListener('click', () => {
    html.classList.toggle('dark');
    localStorage.setItem('theme', html.classList.contains('dark') ? 'dark' : 'light');
  });
}

[data-grid="equal"] {
  display: grid;
  grid-auto-rows: 1fr;
  align-items: stretch;
}
[data-grid="equal"] > * { height: 100%; }

[data-grid="masonry"] {
  columns: 3 280px;
  column-gap: 1.5rem;
}
[data-grid="masonry"] > * {
  break-inside: avoid;
  margin-bottom: 1.5rem;
}

[data-bleed="full"] {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

[data-ratio] { aspect-ratio: attr(data-ratio); }
[data-ratio="16/9"] { aspect-ratio: 16/9; }
[data-ratio="1/1"]  { aspect-ratio: 1/1; }
[data-ratio="4/3"]  { aspect-ratio: 4/3; }

[data-sticky] {
  position: sticky;
  top: 2rem;
  align-self: start;
}

[data-tilt] { transform-style: preserve-3d; transition: transform 0.1s ease; }

document.querySelectorAll('[data-tilt]').forEach(el => {
  el.addEventListener('mousemove', e => {
    const r = el.getBoundingClientRect();
    const x = (e.clientY - r.top - r.height / 2) / r.height * -20;
    const y = (e.clientX - r.left - r.width / 2) / r.width * 20;
    el.style.transform = `perspective(600px) rotateX(${x}deg) rotateY(${y}deg)`;
  });
  el.addEventListener('mouseleave', () => el.style.transform = '');
});

[data-glass] {
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
}

[data-noise] { position: relative; }
[data-noise]::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity: 0.06;
}

[data-spotlight] {
  position: relative;
  overflow: hidden;
}
[data-spotlight]::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.08) 0%, transparent 60%);
  transition: opacity 0.3s;
  opacity: 0;
}
[data-spotlight]:hover::before { opacity: 1; }

document.querySelectorAll('[data-spotlight]').forEach(el => {
  el.addEventListener('mousemove', e => {
    const r = el.getBoundingClientRect();
    el.style.setProperty('--mx', ((e.clientX - r.left) / r.width * 100) + '%');
    el.style.setProperty('--my', ((e.clientY - r.top) / r.height * 100) + '%');
  });
});

[data-border="gradient"] {
  position: relative;
  border-radius: 12px;
  background: var(--bg, #fff);
  z-index: 0;
}
[data-border="gradient"]::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #6366f1, #ec4899, #f59e0b, #6366f1);
  background-size: 200% 200%;
  z-index: -1;
  animation: borderSpin 3s linear infinite;
}
@keyframes borderSpin { to { background-position: 200% 200%; } }

[data-float-label] { position: relative; }
[data-float-label] label {
  position: absolute;
  left: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
  color: #888;
  pointer-events: none;
  transition: 0.2s ease;
}
[data-float-label] input:focus + label,
[data-float-label] input:not(:placeholder-shown) + label {
  top: 0; font-size: 0.72rem; color: #6366f1;
  background: white; padding: 0 4px;
}

[data-strength-bar] {
  height: 4px;
  border-radius: 2px;
  background: #e5e7eb;
  overflow: hidden;
}
[data-strength-bar]::after {
  content: '';
  display: block;
  height: 100%;
  width: var(--strength, 0%);
  background: var(--strength-color, #ef4444);
  transition: width 0.3s ease, background 0.3s ease;
  border-radius: 2px;
}

const meter = document.querySelector('[data-strength-meter]');
const bar = document.querySelector('[data-strength-bar]');
if (meter && bar) {
  meter.addEventListener('input', () => {
    const v = meter.value;
    let score = 0;
    if (v.length >= 8) score++;
    if (/[A-Z]/.test(v)) score++;
    if (/[0-9]/.test(v)) score++;
    if (/[^A-Za-z0-9]/.test(v)) score++;
    const colors = ['#ef4444','#f97316','#facc15','#22c55e'];
    bar.style.setProperty('--strength', (score * 25) + '%');
    bar.style.setProperty('--strength-color', colors[score - 1] || '#ef4444');
  });
}

[data-char-display] { font-size: 0.75rem; color: #888; text-align: right; }
[data-char-display].over { color: #ef4444; }

document.querySelectorAll('[data-char-count]').forEach(el => {
  const max = parseInt(el.dataset.max, 10) || 0;
  const display = document.querySelector(`[data-char-display="${el.id}"]`);
  if (!display) return;
  el.addEventListener('input', () => {
    const len = el.value.length;
    display.textContent = max ? `${len} / ${max}` : len;
    display.classList.toggle('over', max > 0 && len > max);
  });
});

[data-navbar="shrink"] {
  transition: padding 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
[data-navbar="shrink"].scrolled {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}

const nav = document.querySelector('[data-navbar="shrink"]');
if (nav) {
  window.addEventListener('scroll', () => {
    nav.classList.toggle('scrolled', window.scrollY > 80);
  }, { passive: true });
}

[data-nav-link].active {
  color: var(--accent, #6366f1);
  font-weight: 700;
}

document.querySelectorAll('[data-nav-link]').forEach(link => {
  if (link.href === window.location.href ||
      window.location.pathname.startsWith(new URL(link.href).pathname) && link.href !== '/') {
    link.classList.add('active');
  }
});

[data-no-rightclick] { user-select: none; -webkit-user-drag: none; }

document.querySelectorAll('[data-no-rightclick]').forEach(el => {
  el.addEventListener('contextmenu', e => e.preventDefault());
});

[data-external-links] a[target="_blank"]::after {
  content: ' ↗';
  font-size: 0.8em;
  opacity: 0.5;
}

document.querySelectorAll('[data-external-links] a').forEach(link => {
  try {
    if (new URL(link.href).hostname !== window.location.hostname) {
      link.setAttribute('target', '_blank');
      link.setAttribute('rel', 'noopener noreferrer');
    }
  } catch(e) {}
});

@media print {
  body > *:not([data-print-only]) { display: none !important; }
  [data-print-only] { display: block !important; }
}

document.querySelectorAll('[data-hotkey]').forEach(el => {
  document.addEventListener('keydown', e => {
    if ((e.ctrlKey || e.metaKey) && e.key === el.dataset.hotkey) {
      e.preventDefault();
      el.click();
    }
  });
});

@keyframes confettiFly {
  to { transform: translateY(-200px) rotate(720deg); opacity: 0; }
}

document.querySelectorAll('[data-confetti]').forEach(btn => {
  btn.addEventListener('click', e => {
    const colors = ['#6366f1','#ec4899','#f59e0b','#22c55e','#ef4444','#3b82f6'];
    for (let i = 0; i < 30; i++) {
      const dot = document.createElement('span');
      Object.assign(dot.style, {
        position: 'fixed',
        left: e.clientX + 'px', top: e.clientY + 'px',
        width: Math.random() * 8 + 4 + 'px',
        height: Math.random() * 8 + 4 + 'px',
        background: colors[Math.floor(Math.random() * colors.length)],
        borderRadius: Math.random() > 0.5 ? '50%' : '2px',
        pointerEvents: 'none', zIndex: 9999,
        transform: `translate(${(Math.random()-0.5)*80}px,0)`,
        animation: `confettiFly ${Math.random()*0.5+0.5}s ease-out forwards`,
      });
      document.body.appendChild(dot);
      dot.addEventListener('animationend', () => dot.remove());
    }
  });
});

[data-animate="blur-in"] {
  opacity: 0;
  filter: blur(12px);
  animation: blurIn linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}
@keyframes blurIn { to { opacity: 1; filter: blur(0); } }

[data-animate="scale-up"] {
  opacity: 0;
  transform: scale(0.8);
  animation: scaleUp linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}
@keyframes scaleUp { to { opacity: 1; transform: scale(1); } }

[data-animate="slide-left"] {
  opacity: 0;
  transform: translateX(-60px);
  animation: slideLeft linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}
@keyframes slideLeft { to { opacity: 1; transform: none; } }

[data-animate="slide-right"] {
  opacity: 0;
  transform: translateX(60px);
  animation: slideRight linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 30%;
}
@keyframes slideRight { to { opacity: 1; transform: none; } }

[data-animate="flip-in"] {
  opacity: 0;
  transform: rotateX(90deg);
  transform-origin: top center;
  animation: flipIn linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 35%;
}
@keyframes flipIn { to { opacity: 1; transform: rotateX(0); } }

[data-animate="bounce-in"] {
  opacity: 0;
  animation: bounceIn linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 20%;
}
@keyframes bounceIn {
  0%  { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.05); }
  70% { transform: scale(0.95); }
  100%{ transform: scale(1); }
}

[data-float] {
  animation: floatLoop 3s ease-in-out infinite;
}
@keyframes floatLoop {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

[data-spin] {
  animation: spinLoop 1s linear infinite;
}
@keyframes spinLoop { to { transform: rotate(360deg); } }

[data-heartbeat] {
  animation: heartbeat 1.2s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14%       { transform: scale(1.3); }
  28%       { transform: scale(1); }
  42%       { transform: scale(1.2); }
  70%       { transform: scale(1); }
}

[data-blink] {
  animation: blinkAnim 1s step-end infinite;
}
@keyframes blinkAnim {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

new IntersectionObserver((entries) => {
  entries.forEach(e => {
    if (e.isIntersecting) e.target.classList.add('is-visible');
  });
}, { threshold: 0.15 }).observe(...document.querySelectorAll('[data-reveal]'));

[data-scroll-fade] { transition: opacity 0.1s linear; }

document.querySelectorAll('[data-scroll-fade]').forEach(el => {
  window.addEventListener('scroll', () => {
    const r = el.getBoundingClientRect();
    const pct = Math.max(0, Math.min(1, 1 - r.bottom / window.innerHeight));
    el.style.opacity = 1 - pct;
  }, { passive: true });
});

[data-nav-item].is-active {
  color: var(--accent, #6366f1);
  font-weight: 700;
}

const sections = document.querySelectorAll('[data-section-id]');
const navItems = document.querySelectorAll('[data-nav-item]');
new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      navItems.forEach(n => n.classList.toggle('is-active', n.dataset.navItem === e.target.dataset.sectionId));
    }
  });
}, { threshold: 0.5 }).observe(...sections);

[data-marquee] {
  overflow: hidden;
  display: flex;
}
[data-marquee] > * {
  display: flex;
  flex-shrink: 0;
  animation: marquee 20s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

[data-velocity-tilt] { transition: transform 0.3s ease; }

let lastY = 0;
document.querySelectorAll('[data-velocity-tilt]').forEach(el => {
  window.addEventListener('scroll', () => {
    const vel = window.scrollY - lastY;
    el.style.transform = `rotateX(${Math.max(-8, Math.min(8, -vel * 0.3))}deg)`;
    lastY = window.scrollY;
  }, { passive: true });
});

[data-cursor="dot"] {
  position: fixed;
  width: 8px; height: 8px;
  background: currentColor;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.2s ease, width 0.2s ease, height 0.2s ease;
}
body:has([data-cursor-grow]:hover) [data-cursor="dot"] {
  transform: scale(4);
}

const dot = document.querySelector('[data-cursor="dot"]');
if (dot) {
  document.addEventListener('mousemove', e => {
    dot.style.left = (e.clientX - 4) + 'px';
    dot.style.top  = (e.clientY - 4) + 'px';
  });
}

@keyframes trailFade { to { opacity: 0; transform: scale(0); } }

document.addEventListener('mousemove', e => {
  const dot = document.createElement('span');
  Object.assign(dot.style, {
    position: 'fixed', left: e.clientX + 'px', top: e.clientY + 'px',
    width: '6px', height: '6px', borderRadius: '50%',
    background: `hsl(${Math.random()*360},80%,60%)`,
    pointerEvents: 'none', zIndex: 9999,
    animation: 'trailFade 0.6s ease forwards',
  });
  document.body.appendChild(dot);
  dot.addEventListener('animationend', () => dot.remove());
});

document.querySelectorAll('[data-cursor-icon]').forEach(el => {
  const icon = el.dataset.cursorIcon;
  const svg = `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text y='26' font-size='26'>${icon}</text></svg>`;
  el.style.cursor = `url('${svg}') 16 16, auto`;
});

[data-glitch] {
  position: relative;
}
[data-glitch]:hover::before,
[data-glitch]:hover::after {
  content: attr(data-glitch);
  position: absolute;
  left: 0; top: 0;
  animation: glitch 0.3s infinite;
}
[data-glitch]:hover::before { color: #f0f; clip-path: polygon(0 30%,100% 30%,100% 50%,0 50%); }
[data-glitch]:hover::after  { color: #0ff; clip-path: polygon(0 55%,100% 55%,100% 75%,0 75%); left: 2px; }
@keyframes glitch {
  0%  { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
  100%{ transform: translateX(0); }
}

document.querySelectorAll('[data-glitch]').forEach(el => {
  el.setAttribute('data-glitch', el.textContent ?? '');
});

[data-text="expand"] {
  letter-spacing: 0em;
  transition: letter-spacing 0.4s ease;
}
[data-text="expand"]:hover { letter-spacing: 0.3em; }

[data-rotate-text] .rt-word {
  display: inline-block;
  animation: rtFade 0.4s ease;
}
@keyframes rtFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

document.querySelectorAll('[data-rotate-text]').forEach(el => {
  const words = el.dataset.rotateText.split(',');
  let i = 0;
  el.innerHTML = `<span class="rt-word">${words[0]}</span>`;
  setInterval(() => {
    i = (i + 1) % words.length;
    el.innerHTML = `<span class="rt-word">${words[i]}</span>`;
  }, 2000);
});

[data-char-split] span {
  display: inline-block;
  transition: transform 0.3s ease;
}
[data-char-split]:hover span { transform: translateY(-6px) rotate(var(--r, 0deg)); }

document.querySelectorAll('[data-char-split]').forEach(el => {
  el.innerHTML = [...el.textContent].map((c, i) =>
    `<span style="--r:${(i%2===0?1:-1)*Math.random()*15}deg">${c === ' ' ? '&nbsp;' : c}</span>`
  ).join('');
});

[data-text="balance"] {
  text-wrap: balance;
}

[data-wipe] {
  clip-path: inset(0 100% 0 0);
  animation: wipe linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 40%;
}
@keyframes wipe { to { clip-path: inset(0 0% 0 0); } }

[data-toast-msg] {
  position: fixed;
  bottom: 2rem; left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: #111;
  color: #fff;
  padding: 0.65rem 1.25rem;
  border-radius: 8px;
  font-size: 0.85rem;
  z-index: 9999;
  opacity: 0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  pointer-events: none;
}
[data-toast-msg].show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

function showToast(msg) {
  let el = document.querySelector('[data-toast-msg]');
  if (!el) {
    el = document.createElement('div');
    el.setAttribute('data-toast-msg', '');
    document.body.appendChild(el);
  }
  el.textContent = msg;
  el.classList.add('show');
  setTimeout(() => el.classList.remove('show'), 2500);
}
document.querySelectorAll('[data-toast]').forEach(btn => {
  btn.addEventListener('click', () => showToast(btn.dataset.toast));
});

[data-skeleton] {
  background: linear-gradient(90deg, var(--border) 25%, var(--border-med) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 6px;
  color: transparent !important;
  pointer-events: none;
}
[data-skeleton] * { visibility: hidden; }
@keyframes shimmer { to { background-position: -200% 0; } }

[data-draggable] { cursor: grab; user-select: none; }
[data-draggable].dragging { cursor: grabbing; }

document.querySelectorAll('[data-draggable]').forEach(el => {
  let ox = 0, oy = 0, mx = 0, my = 0;
  el.addEventListener('mousedown', e => {
    e.preventDefault();
    ox = e.clientX - el.offsetLeft;
    oy = e.clientY - el.offsetTop;
    el.classList.add('dragging');
    document.addEventListener('mousemove', move);
    document.addEventListener('mouseup', up, { once: true });
  });
  function move(e) {
    el.style.position = 'fixed';
    el.style.left = (e.clientX - ox) + 'px';
    el.style.top  = (e.clientY - oy) + 'px';
  }
  function up() {
    el.classList.remove('dragging');
    document.removeEventListener('mousemove', move);
  }
});

[data-popover-box] {
  position: fixed;
  background: #111;
  color: #fff;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  font-size: 0.8rem;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.15s, transform 0.15s;
}
[data-popover-box].show { opacity: 1; transform: scale(1); }

let box = document.querySelector('[data-popover-box]');
if (!box) {
  box = document.createElement('div');
  box.setAttribute('data-popover-box', '');
  document.body.appendChild(box);
}
document.querySelectorAll('[data-popover]').forEach(el => {
  el.addEventListener('click', e => {
    const r = el.getBoundingClientRect();
    box.textContent = el.dataset.popover;
    box.style.left = r.left + 'px';
    box.style.top  = (r.bottom + 8) + 'px';
    box.classList.toggle('show');
  });
});
document.addEventListener('click', e => {
  if (!e.target.closest('[data-popover]')) box.classList.remove('show');
});

[data-star-rating] { display: flex; gap: 4px; cursor: pointer; font-size: 1.5rem; }
[data-star-rating] span { color: #d1d5db; transition: color 0.15s; }
[data-star-rating] span.active { color: #facc15; }

document.querySelectorAll('[data-star-rating]').forEach(el => {
  const stars = Array.from({ length: 5 }, (_, i) => {
    const s = document.createElement('span');
    s.textContent = '★';
    s.dataset.val = String(i + 1);
    el.appendChild(s);
    return s;
  });
  stars.forEach(s => {
    s.addEventListener('click', () => {
      const v = Number(s.dataset.val);
      el.dataset.rating = String(v);
      stars.forEach((x, i) => x.classList.toggle('active', i < v));
    });
    s.addEventListener('mouseenter', () => {
      stars.forEach((x, i) => x.classList.toggle('active', i <= stars.indexOf(s)));
    });
  });
  el.addEventListener('mouseleave', () => {
    const v = Number(el.dataset.rating) || 0;
    stars.forEach((x, i) => x.classList.toggle('active', i < v));
  });
});

[data-read-more] {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines, 3);
  transition: -webkit-line-clamp 0s;
}
[data-read-more].expanded { -webkit-line-clamp: unset; }

document.querySelectorAll('[data-read-more]').forEach(el => {
  el.style.setProperty('--lines', el.dataset.lines || '3');
  const btn = document.createElement('button');
  btn.textContent = 'Read more';
  btn.style.cssText = 'display:block;margin-top:0.5rem;font-size:0.85rem;color:var(--accent,#6366f1);background:none;border:none;cursor:pointer;padding:0';
  el.after(btn);
  btn.addEventListener('click', () => {
    const open = el.classList.toggle('expanded');
    btn.textContent = open ? 'Read less' : 'Read more';
  });
});

[data-zoom] { overflow: hidden; }
[data-zoom] img {
  transition: transform 0.4s ease;
  display: block;
  width: 100%;
}
[data-zoom]:hover img { transform: scale(1.08); }

[data-before-after] {
  position: relative;
  overflow: hidden;
  cursor: col-resize;
  user-select: none;
}
[data-before-after] .ba-after {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 50%);
  transition: clip-path 0s;
}
[data-before-after] .ba-handle {
  position: absolute; top: 0; bottom: 0;
  width: 3px; background: #fff;
  left: 50%; transform: translateX(-50%);
  cursor: col-resize;
}

document.querySelectorAll('[data-before-after]').forEach(el => {
  const after = el.querySelector('.ba-after');
  const handle = el.querySelector('.ba-handle');
  let dragging = false;
  el.addEventListener('mousedown', () => dragging = true);
  document.addEventListener('mouseup', () => dragging = false);
  document.addEventListener('mousemove', e => {
    if (!dragging) return;
    const r = el.getBoundingClientRect();
    const pct = Math.max(0, Math.min(100, ((e.clientX - r.left) / r.width) * 100));
    after.style.clipPath = `inset(0 0 0 ${pct}%)`;
    handle.style.left = pct + '%';
  });
});

const trigger = document.querySelector('[data-infinite-trigger]');
if (trigger) {
  new IntersectionObserver(([e]) => {
    if (e.isIntersecting) trigger.dispatchEvent(new CustomEvent('load-more', { bubbles: true }));
  }, { rootMargin: '200px' }).observe(trigger);
  trigger.addEventListener('load-more', () => {
    console.log('Load next page of content');
  });
}

body.scroll-locked { overflow: hidden; }

document.querySelectorAll('[data-scroll-lock]').forEach(el => {
  const observer = new MutationObserver(() => {
    document.body.classList.toggle('scroll-locked', el.classList.contains('is-open'));
  });
  observer.observe(el, { attributes: true, attributeFilter: ['class'] });
});

document.addEventListener('keydown', e => {
  if (e.key !== 'Escape') return;
  document.querySelectorAll('[data-escape-close].is-open').forEach(el => {
    el.classList.remove('is-open');
  });
});

[data-frosted] {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

[data-aurora] {
  position: relative;
  overflow: hidden;
}
[data-aurora]::before,
[data-aurora]::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  animation: auroraMove 8s ease-in-out infinite alternate;
}
[data-aurora]::before { width: 60%; padding-bottom: 60%; background: #6366f1; top: -20%; left: -10%; }
[data-aurora]::after  { width: 50%; padding-bottom: 50%; background: #ec4899; bottom: -20%; right: -10%; animation-delay: -4s; }
@keyframes auroraMove {
  from { transform: translate(0,0) scale(1); }
  to   { transform: translate(5%,10%) scale(1.1); }
}

[data-mesh] {
  background:
    radial-gradient(at 0% 0%,   #6366f1 0px, transparent 50%),
    radial-gradient(at 100% 0%,  #ec4899 0px, transparent 50%),
    radial-gradient(at 100% 100%,#f59e0b 0px, transparent 50%),
    radial-gradient(at 0% 100%,  #22c55e 0px, transparent 50%);
}

[data-neumorphic] {
  background: #e0e5ec;
  border-radius: 16px;
  box-shadow:
    6px 6px 12px #b8bec7,
    -6px -6px 12px #ffffff;
}

[data-duotone] {
  filter: url(#duotone);
}

if (!document.getElementById('duotone-filter')) {
  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  svg.setAttribute('id', 'duotone-filter');
  svg.style.cssText = 'position:absolute;width:0;height:0';
  svg.innerHTML = `<defs><filter id="duotone">
    <feColorMatrix type="saturate" values="0"/>
    <feComponentTransfer>
      <feFuncR type="table" tableValues="0.1 0.9"/>
      <feFuncG type="table" tableValues="0.05 0.3"/>
      <feFuncB type="table" tableValues="0.5 0.1"/>
    </feComponentTransfer>
  </filter></defs>`;
  document.body.prepend(svg);
}

[data-ripple] { position: relative; overflow: hidden; }
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: scale(0);
  animation: rippleExpand 0.6s linear;
  pointer-events: none;
}
@keyframes rippleExpand {
  to { transform: scale(4); opacity: 0; }
}

document.querySelectorAll('[data-ripple]').forEach(el => {
  el.addEventListener('click', e => {
    const r = el.getBoundingClientRect();
    const size = Math.max(r.width, r.height);
    const wave = document.createElement('span');
    wave.className = 'ripple-wave';
    Object.assign(wave.style, {
      width: size + 'px', height: size + 'px',
      left: (e.clientX - r.left - size / 2) + 'px',
      top:  (e.clientY - r.top  - size / 2) + 'px',
    });
    el.appendChild(wave);
    wave.addEventListener('animationend', () => wave.remove());
  });
});

[data-glow-shadow] {
  box-shadow:
    0 0 20px -5px var(--glow-color, #6366f1),
    0 0 60px -10px var(--glow-color, #6366f1);
}

[data-neon] {
  color: #fff;
  text-shadow:
    0 0 5px  #fff,
    0 0 10px #fff,
    0 0 20px var(--neon-color, #0ff),
    0 0 40px var(--neon-color, #0ff),
    0 0 80px var(--neon-color, #0ff);
}

[data-bg="dots"] {
  background-image: radial-gradient(circle, rgba(0,0,0,0.12) 1px, transparent 1px);
  background-size: 24px 24px;
}

[data-bg="grid"] {
  background-image:
    linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size: 32px 32px;
}

[data-grid="auto"] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--min, 240px), 1fr));
  gap: var(--gap, 1.5rem);
}

[data-center] {
  display: grid;
  place-items: center;
}

[data-fluid-type] {
  font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
  line-height: 1.2;
}

[data-cq] {
  container-type: inline-size;
}
@container (min-width: 400px) {
  [data-cq] .cq-inner {
    display: flex;
    gap: 1rem;
  }
}

[data-layout="sidebar"] {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 768px) {
  [data-layout="sidebar"] { grid-template-columns: 1fr; }
}

[data-breadcrumb] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
  font-size: 0.85rem;
}
[data-breadcrumb] a + a::before {
  content: '›';
  margin-right: 0.25rem;
  color: var(--text-faint);
}

document.querySelectorAll('[data-swipe-close]').forEach(el => {
  let startX = 0;
  el.addEventListener('touchstart', e => { startX = e.touches[0].clientX; }, { passive: true });
  el.addEventListener('touchend', e => {
    if (startX - e.changedTouches[0].clientX > 60) el.classList.remove('is-open');
  });
});

[data-dot-nav] { display: flex; gap: 0.5rem; }
[data-dot-nav] button {
  width: 8px; height: 8px;
  border-radius: 50%; border: none;
  background: var(--border-med);
  transition: background 0.2s, transform 0.2s;
  cursor: pointer; padding: 0;
}
[data-dot-nav] button.active {
  background: var(--text);
  transform: scale(1.3);
}

document.querySelectorAll('[data-dot-nav]').forEach(nav => {
  const dots = nav.querySelectorAll('button');
  dots.forEach((dot, i) => {
    dot.addEventListener('click', () => {
      dots.forEach(d => d.classList.remove('active'));
      dot.classList.add('active');
      nav.dispatchEvent(new CustomEvent('dot-change', { detail: i, bubbles: true }));
    });
  });
  dots[0]?.classList.add('active');
});

[data-autoresize] {
  resize: none;
  overflow: hidden;
  min-height: 48px;
  transition: height 0.1s ease;
}

document.querySelectorAll('[data-autoresize]').forEach(el => {
  const resize = () => {
    el.style.height = 'auto';
    el.style.height = el.scrollHeight + 'px';
  };
  el.addEventListener('input', resize);
  resize();
});

[data-validate]:valid   { border-color: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,0.15); }
[data-validate]:invalid { border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,0.15); }
[data-validate]:placeholder-shown { border-color: var(--border-med); box-shadow: none; }

[data-pwd-wrap] { position: relative; }
[data-pwd-toggle] {
  position: absolute; right: 0.75rem; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  cursor: pointer; color: var(--text-faint);
  font-size: 0.8rem;
}

document.querySelectorAll('[data-pwd-toggle]').forEach(btn => {
  const input = btn.closest('[data-pwd-wrap]')?.querySelector('input');
  if (!input) return;
  btn.addEventListener('click', () => {
    const isText = input.type === 'text';
    input.type = isText ? 'password' : 'text';
    btn.textContent = isText ? '👁' : '🙈';
  });
});

[data-stepper] { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--border-med); border-radius: 8px; overflow: hidden; }
[data-stepper] button { background: var(--border); border: none; padding: 0.4rem 0.7rem; cursor: pointer; font-size: 1rem; color: var(--text); }
[data-stepper] input  { width: 3rem; text-align: center; border: none; background: none; font-size: 0.9rem; color: var(--text); }

document.querySelectorAll('[data-stepper]').forEach(el => {
  const input = el.querySelector('input');
  el.querySelectorAll('button').forEach(btn => {
    btn.addEventListener('click', () => {
      const step = Number(input.step) || 1;
      const val  = Number(input.value) || 0;
      input.value = String(btn.dataset.dir === '+' ? val + step : val - step);
    });
  });
});

[data-range-wrap] { position: relative; }
[data-range-output] {
  position: absolute;
  bottom: calc(100% + 4px);
  left: var(--pct, 50%);
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  pointer-events: none;
}

document.querySelectorAll('[data-range-live]').forEach(input => {
  const wrap = input.closest('[data-range-wrap]') || input.parentElement;
  const out = wrap?.querySelector('[data-range-output]');
  const update = () => {
    const pct = ((Number(input.value) - Number(input.min)) / (Number(input.max) - Number(input.min))) * 100;
    if (out) { out.textContent = input.value; out.style.setProperty('--pct', pct + '%'); }
  };
  input.addEventListener('input', update);
  update();
});

[data-filter-item].hidden { display: none; }

document.querySelectorAll('[data-search-filter]').forEach(input => {
  const list = document.querySelector(input.dataset.searchFilter);
  if (!list) return;
  let timer;
  input.addEventListener('input', () => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      const q = input.value.toLowerCase();
      list.querySelectorAll('[data-filter-item]').forEach(item => {
        item.classList.toggle('hidden', !item.textContent.toLowerCase().includes(q));
      });
    }, 200);
  });
});

document.querySelectorAll('[data-share]').forEach(btn => {
  if (!navigator.share) { btn.style.display = 'none'; return; }
  btn.addEventListener('click', () => {
    navigator.share({
      title: document.title,
      url: location.href,
    }).catch(() => {});
  });
});

[data-anchor-headings] :is(h1,h2,h3,h4) .anchor {
  opacity: 0;
  margin-left: 0.5rem;
  text-decoration: none;
  color: var(--text-faint);
  font-size: 0.85em;
  transition: opacity 0.2s;
}
[data-anchor-headings] :is(h1,h2,h3,h4):hover .anchor { opacity: 1; }

document.querySelectorAll('[data-anchor-headings]').forEach(el => {
  el.querySelectorAll('h1,h2,h3,h4').forEach(h => {
    if (!h.id) h.id = h.textContent.toLowerCase().replace(/\s+/g, '-').replace(/[^a-z0-9-]/g, '');
    const a = document.createElement('a');
    a.className = 'anchor';
    a.href = '#' + h.id;
    a.textContent = '#';
    h.appendChild(a);
  });
});

function relTime(date) {
  const diff = (Date.now() - new Date(date).getTime()) / 1000;
  const units = [['year',31536000],['month',2592000],['day',86400],['hour',3600],['minute',60],['second',1]];
  for (const [name, sec] of units) {
    const n = Math.floor(diff / sec);
    if (n >= 1) return `${n} ${name}${n > 1 ? 's' : ''} ago`;
  }
  return 'just now';
}
document.querySelectorAll('[data-relative-time]').forEach(el => {
  el.textContent = relTime(el.getAttribute('datetime') || el.textContent);
});

[data-once][disabled] { opacity: 0.5; cursor: not-allowed; }

document.querySelectorAll('form:has([data-once])').forEach(form => {
  form.addEventListener('submit', () => {
    form.querySelectorAll('[data-once]').forEach(btn => {
      btn.disabled = true;
      btn.textContent = btn.dataset.loadingText || 'Submitting…';
    });
  });
});

document.querySelectorAll('[data-resize-watch]').forEach(el => {
  new ResizeObserver(([entry]) => {
    el.dispatchEvent(new CustomEvent('resized', {
      detail: { width: entry.contentRect.width, height: entry.contentRect.height },
      bubbles: true,
    }));
  }).observe(el);
  el.addEventListener('resized', e => console.log('Resized:', e.detail));
});

document.querySelectorAll('[data-print]').forEach(btn => {
  btn.addEventListener('click', () => window.print());
});

document.querySelectorAll('[data-idle]').forEach(el => {
  const secs = parseInt(el.dataset.idle, 10) * 1000;
  let timer;
  const reset = () => {
    clearTimeout(timer);
    timer = setTimeout(() => el.dispatchEvent(new CustomEvent('idle', { bubbles: true })), secs);
  };
  ['mousemove','keydown','scroll','touchstart'].forEach(ev => document.addEventListener(ev, reset, { passive: true }));
  el.addEventListener('idle', () => alert('Are you still there?'));
  reset();
});

document.querySelectorAll('[data-redirect]').forEach(el => {
  const delay = (parseFloat(el.dataset.delay) || 3) * 1000;
  setTimeout(() => location.href = el.dataset.redirect, delay);
});

body.is-offline [data-connectivity]::after {
  content: 'You are offline';
  display: block;
  background: #ef4444;
  color: #fff;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.85rem;
}

window.addEventListener('offline', () => document.body.classList.add('is-offline'));
window.addEventListener('online',  () => document.body.classList.remove('is-offline'));

document.querySelectorAll('[data-format-number]').forEach(el => {
  const n = parseFloat(el.textContent.replace(/[^0-9.-]/g, ''));
  if (!isNaN(n)) el.textContent = n.toLocaleString();
});

document.querySelectorAll('[data-focus-trap]').forEach(el => {
  el.addEventListener('keydown', e => {
    if (e.key !== 'Tab') return;
    const focusable = [...el.querySelectorAll('a,button,input,select,textarea,[tabindex]:not([tabindex="-1"])')].filter(f => !f.disabled);
    const first = focusable[0], last = focusable[focusable.length - 1];
    if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
    else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
  });
});

document.querySelectorAll('a[data-prefetch]').forEach(link => {
  link.addEventListener('mouseenter', () => {
    const rel = document.createElement('link');
    rel.rel = 'prefetch';
    rel.href = link.href;
    document.head.appendChild(rel);
  }, { once: true });
});

document.querySelectorAll('[data-defer-src]').forEach(el => {
  const load = () => {
    const s = document.createElement('script');
    s.src = el.dataset.deferSrc;
    document.body.appendChild(s);
  };
  'requestIdleCallback' in window ? requestIdleCallback(load) : setTimeout(load, 2000);
});

[data-will-change] { will-change: var(--wc, transform); }
[data-will-change="opacity"]   { --wc: opacity; }
[data-will-change="transform"] { --wc: transform; }
[data-will-change="scroll"]    { --wc: scroll-position; }

[data-cv-auto] {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

document.querySelectorAll('[data-dns-prefetch]').forEach(el => {
  const link = document.createElement('link');
  link.rel = 'dns-prefetch';
  link.href = '//' + el.dataset.dnsPrefetch;
  document.head.appendChild(link);
});

[data-skip-link] {
  position: fixed;
  top: -100%;
  left: 1rem;
  background: var(--text);
  color: var(--bg);
  padding: 0.5rem 1rem;
  border-radius: 0 0 6px 6px;
  font-size: 0.85rem;
  z-index: 9999;
  transition: top 0.2s ease;
  text-decoration: none;
}
[data-skip-link]:focus { top: 0; }

[data-live-region] {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

let liveEl = document.querySelector('[data-live-region]');
if (!liveEl) {
  liveEl = document.createElement('div');
  liveEl.setAttribute('data-live-region', '');
  liveEl.setAttribute('aria-live', 'polite');
  liveEl.setAttribute('aria-atomic', 'true');
  document.body.appendChild(liveEl);
}
document.querySelectorAll('[data-announce]').forEach(el => {
  el.addEventListener('click', () => {
    liveEl.textContent = '';
    requestAnimationFrame(() => { liveEl.textContent = el.dataset.announce; });
  });
});

@media (prefers-reduced-motion: reduce) {
  [data-motion-safe] *,
  [data-motion-safe] *::before,
  [data-motion-safe] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

[data-high-contrast] {
  --text: #000;
  --bg: #fff;
  --text-muted: #000;
  --border: #000;
  background: #fff;
  color: #000;
}
html[data-theme="dark"] [data-high-contrast] {
  --text: #fff;
  --bg: #000;
  background: #000;
  color: #fff;
}

document.querySelectorAll('[data-tab-hidden]').forEach(el => {
  const items = el.querySelectorAll('a,button,input,select,textarea,[tabindex]');
  const apply = () => {
    const hidden = !el.classList.contains('is-open');
    items.forEach(item => item.setAttribute('tabindex', hidden ? '-1' : '0'));
  };
  apply();
  new MutationObserver(apply).observe(el, { attributes: true, attributeFilter: ['class'] });
});

document.querySelectorAll('video[data-autoplay-scroll]').forEach(video => {
  new IntersectionObserver(([e]) => {
    e.isIntersecting ? video.play() : video.pause();
  }, { threshold: 0.4 }).observe(video);
});

document.querySelectorAll('[data-mute-toggle]').forEach(btn => {
  const video = btn.closest('[data-video-wrap]')?.querySelector('video') || document.querySelector('video');
  if (!video) return;
  btn.addEventListener('click', () => {
    video.muted = !video.muted;
    btn.textContent = video.muted ? '🔇' : '🔊';
  });
});

[data-extract-color] { --dominant: #888; }

document.querySelectorAll('img[data-extract-color]').forEach(img => {
  img.crossOrigin = 'anonymous';
  img.addEventListener('load', () => {
    const c = document.createElement('canvas');
    c.width = c.height = 1;
    c.getContext('2d').drawImage(img, 0, 0, 1, 1);
    const [r,g,b] = c.getContext('2d').getImageData(0,0,1,1).data;
    img.style.setProperty('--dominant', `rgb(${r},${g},${b})`);
  }, { once: true });
  if (img.complete) img.dispatchEvent(new Event('load'));
});

#wm-lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
#wm-lightbox.open { display: flex; }
#wm-lightbox img  { max-width: 90vw; max-height: 90vh; border-radius: 4px; }

let lb = document.getElementById('wm-lightbox');
if (!lb) {
  lb = document.createElement('div');
  lb.id = 'wm-lightbox';
  lb.innerHTML = '<img>';
  document.body.appendChild(lb);
  lb.addEventListener('click', () => lb.classList.remove('open'));
}
document.querySelectorAll('img[data-lightbox]').forEach(img => {
  img.style.cursor = 'zoom-in';
  img.addEventListener('click', () => {
    lb.querySelector('img').src = img.src;
    lb.classList.add('open');
  });
});

[data-long-press] { user-select: none; }

document.querySelectorAll('[data-long-press]').forEach(el => {
  let timer;
  const start = () => { timer = setTimeout(() => el.dispatchEvent(new CustomEvent('longpress', { bubbles: true })), 500); };
  const cancel = () => clearTimeout(timer);
  el.addEventListener('mousedown', start);
  el.addEventListener('touchstart', start, { passive: true });
  el.addEventListener('mouseup', cancel);
  el.addEventListener('touchend', cancel);
  el.addEventListener('longpress', () => console.log('Long press!'));
});

[data-dblclick-like] .like-pop {
  position: absolute;
  font-size: 2rem;
  pointer-events: none;
  animation: popUp 0.6s ease forwards;
}
@keyframes popUp {
  from { transform: scale(0) translateY(0); opacity: 1; }
  to   { transform: scale(1.5) translateY(-60px); opacity: 0; }
}

document.querySelectorAll('[data-dblclick-like]').forEach(el => {
  el.style.position = 'relative';
  el.addEventListener('dblclick', e => {
    const pop = document.createElement('span');
    pop.className = 'like-pop';
    pop.textContent = '❤️';
    pop.style.cssText = `left:${e.offsetX - 15}px;top:${e.offsetY - 15}px`;
    el.appendChild(pop);
    pop.addEventListener('animationend', () => pop.remove());
  });
});

document.querySelectorAll('[data-swipe]').forEach(el => {
  let sx = 0, sy = 0;
  el.addEventListener('touchstart', e => { sx = e.touches[0].clientX; sy = e.touches[0].clientY; }, { passive: true });
  el.addEventListener('touchend', e => {
    const dx = e.changedTouches[0].clientX - sx;
    const dy = e.changedTouches[0].clientY - sy;
    if (Math.abs(dx) < 30 || Math.abs(dx) < Math.abs(dy)) return;
    el.dispatchEvent(new CustomEvent(dx > 0 ? 'swipe-right' : 'swipe-left', { bubbles: true }));
  });
  el.addEventListener('swipe-left',  () => console.log('Swiped left'));
  el.addEventListener('swipe-right', () => console.log('Swiped right'));
});

[data-hover-intent] .intent-content {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
[data-hover-intent].hovered .intent-content {
  opacity: 1;
  pointer-events: auto;
}

document.querySelectorAll('[data-hover-intent]').forEach(el => {
  let timer;
  el.addEventListener('mouseenter', () => { timer = setTimeout(() => el.classList.add('hovered'), 200); });
  el.addEventListener('mouseleave', () => { clearTimeout(timer); el.classList.remove('hovered'); });
});

[data-pinch-zoom] { touch-action: none; overflow: hidden; }
[data-pinch-zoom] > * { transform-origin: center center; transition: transform 0.1s ease; }

document.querySelectorAll('[data-pinch-zoom]').forEach(el => {
  const inner = el.firstElementChild;
  let lastDist = 0, scale = 1;
  el.addEventListener('touchmove', e => {
    if (e.touches.length !== 2) return;
    e.preventDefault();
    const dx = e.touches[0].clientX - e.touches[1].clientX;
    const dy = e.touches[0].clientY - e.touches[1].clientY;
    const dist = Math.hypot(dx, dy);
    if (lastDist) scale = Math.max(1, Math.min(4, scale * (dist / lastDist)));
    inner.style.transform = `scale(${scale})`;
    lastDist = dist;
  }, { passive: false });
  el.addEventListener('touchend', () => { lastDist = 0; });
});

[data-drag-scroll] { cursor: grab; overflow-x: auto; scrollbar-width: none; }
[data-drag-scroll]::-webkit-scrollbar { display: none; }
[data-drag-scroll].active { cursor: grabbing; user-select: none; }

document.querySelectorAll('[data-drag-scroll]').forEach(el => {
  let down = false, startX, scrollLeft;
  el.addEventListener('mousedown', e => {
    down = true; el.classList.add('active');
    startX = e.pageX - el.offsetLeft;
    scrollLeft = el.scrollLeft;
  });
  document.addEventListener('mouseup', () => { down = false; el.classList.remove('active'); });
  el.addEventListener('mousemove', e => {
    if (!down) return;
    el.scrollLeft = scrollLeft - (e.pageX - el.offsetLeft - startX) * 1.5;
  });
});

document.querySelectorAll('[data-css-var]').forEach(el => {
  el.dataset.cssVar.split(';').forEach(pair => {
    const [prop, val] = pair.split(':');
    if (prop && val) el.style.setProperty(prop.trim(), val.trim());
  });
});

[data-random-accent] { color: var(--accent-random, #6366f1); }

const palette = ['#6366f1','#ec4899','#f59e0b','#22c55e','#3b82f6','#ef4444','#8b5cf6'];
const pick = palette[Math.floor(Math.random() * palette.length)];
document.querySelectorAll('[data-random-accent]').forEach(el => {
  el.style.setProperty('--accent-random', pick);
});

const dark = window.matchMedia('(prefers-color-scheme: dark)');
document.documentElement.classList.toggle('prefers-dark', dark.matches);
document.documentElement.classList.toggle('prefers-light', !dark.matches);
dark.addEventListener('change', e => {
  document.documentElement.classList.toggle('prefers-dark', e.matches);
  document.documentElement.classList.toggle('prefers-light', !e.matches);
});

[data-swatch] {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--sw);
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color 0.15s;
}
[data-swatch].active { border-color: var(--text); }

document.querySelectorAll('[data-swatch]').forEach(el => {
  el.style.setProperty('--sw', el.dataset.swatch);
  el.addEventListener('click', () => {
    document.documentElement.style.setProperty('--accent', el.dataset.swatch);
    document.querySelectorAll('[data-swatch]').forEach(s => s.classList.remove('active'));
    el.classList.add('active');
  });
});

html[data-theme="dark"] [data-invert-dark] {
  filter: invert(1);
}

document.querySelectorAll('[data-email-user]').forEach(el => {
  const email = el.dataset.emailUser + '@' + el.dataset.emailDomain;
  el.href = 'mailto:' + email;
  if (!el.textContent.trim()) el.textContent = email;
});

[data-cookie-banner] {
  position: fixed; bottom: 1rem; left: 1rem; right: 1rem;
  max-width: 480px; margin: 0 auto;
  background: #111; color: #fff;
  border-radius: 12px; padding: 1rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: 0.83rem; z-index: 9999;
}
[data-cookie-banner].hidden { display: none; }

document.querySelectorAll('[data-cookie-banner]').forEach(el => {
  if (localStorage.getItem('cookie-consent')) { el.classList.add('hidden'); return; }
  el.querySelector('[data-accept]')?.addEventListener('click', () => {
    localStorage.setItem('cookie-consent', '1');
    el.classList.add('hidden');
  });
});

[data-nps] { display: flex; gap: 4px; flex-wrap: wrap; }
[data-nps] button {
  width: 36px; height: 36px;
  border-radius: 50%; border: 1px solid var(--border-med);
  background: none; font-size: 0.8rem; cursor: pointer; color: var(--text);
  transition: background 0.15s, color 0.15s;
}
[data-nps] button.selected { background: var(--text); color: var(--bg); }

document.querySelectorAll('[data-nps]').forEach(el => {
  for (let i = 0; i <= 10; i++) {
    const b = document.createElement('button');
    b.textContent = String(i);
    b.addEventListener('click', () => {
      el.querySelectorAll('button').forEach(x => x.classList.remove('selected'));
      b.classList.add('selected');
      el.dispatchEvent(new CustomEvent('nps-score', { detail: i, bubbles: true }));
      console.log('NPS Score:', i);
    });
    el.appendChild(b);
  }
});

[data-reactions] { display: flex; gap: 0.4rem; flex-wrap: wrap; }
[data-reactions] button {
  display: flex; align-items: center; gap: 0.3rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: none; padding: 0.3rem 0.75rem;
  font-size: 0.85rem; cursor: pointer; color: var(--text);
  transition: background 0.15s, border-color 0.15s;
}
[data-reactions] button:hover { background: var(--border); }
[data-reactions] button.reacted { border-color: var(--accent, #6366f1); background: rgba(99,102,241,0.1); }

document.querySelectorAll('[data-reactions]').forEach(el => {
  el.dataset.reactions.split(',').forEach(emoji => {
    let count = 0;
    const btn = document.createElement('button');
    const span = document.createElement('span');
    span.textContent = '0';
    btn.append(emoji, ' ', span);
    btn.addEventListener('click', () => {
      count = btn.classList.toggle('reacted') ? count + 1 : count - 1;
      span.textContent = String(count);
    });
    el.appendChild(btn);
  });
});

@keyframes snowFall {
  to { transform: translateY(110vh) rotate(360deg); opacity: 0; }
}

if (document.querySelector('[data-snow]')) {
  for (let i = 0; i < 60; i++) {
    const flake = document.createElement('span');
    const size = Math.random() * 10 + 4;
    Object.assign(flake.style, {
      position: 'fixed',
      top: '-10px',
      left: Math.random() * 100 + 'vw',
      width: size + 'px',
      height: size + 'px',
      borderRadius: '50%',
      background: '#fff',
      opacity: Math.random() * 0.7 + 0.3,
      pointerEvents: 'none',
      zIndex: 9998,
      animation: `snowFall ${Math.random() * 4 + 4}s linear ${Math.random() * 6}s infinite`,
    });
    document.body.appendChild(flake);
  }
}