/* =====================================================================
   TAGSCOPE brand motion (brand.js): the Tag Lens logo, the living hero,
   the signal strip, tool-card vignettes, scroll reveals and the footer glow.
   Transforms and opacity only; paused off screen; off under reduced motion.
   ===================================================================== */

/* ---------- Wordmark font: Archivo ExtraBold (SIL OFL), the 8 letters of TAGSCOPE only ---------- */
@font-face { font-family: 'Archivo TS'; font-weight: 800; font-display: block; src: url('../fonts/archivo-800-tagscope.woff') format('woff'); }

/* ---------- Logo ---------- */
:root { --lg1: #6C4DF6; --lg2: #9A4FE6; --lg3: #F0607A; --lg4: #FF8A5C; --lg-dot: #6C4DF6; }
:root[data-theme="dark"] { --lg1: #7B61FF; --lg2: #A46BF0; --lg3: #F0778E; --lg4: #FF9C6E; --lg-dot: #FF9C6E; }
.lg1 { stop-color: var(--lg1); } .lg2 { stop-color: var(--lg2); } .lg3 { stop-color: var(--lg3); } .lg4 { stop-color: var(--lg4); }

.ts-logo { gap: .3em; }
.ts-logo .ts-mark { width: 1.3em; height: 1.3em; flex: none; overflow: visible; }
.ts-logo .ts-body { fill: url(#tsLogoGrad); }
.ts-logo .ts-dot { fill: var(--lg-dot); }
.ts-logo .ts-bar { fill: #fff; transform-box: fill-box; transform-origin: left center; }
.ts-logo .ts-ring { fill: none; stroke: var(--lg-dot); stroke-width: 1.6; opacity: 0; }
.ts-logo .ts-tag, .ts-logo .ts-ring { transform-origin: 24px 32px; }
.ts-logo .ts-word { display: inline-flex; font: 800 .92em/1 'Archivo TS', 'Arial Black', sans-serif; font-stretch: normal; letter-spacing: -.01em; color: var(--text); }
.ts-logo .ts-word span { display: inline-block; }
.logo-pill.ts-logo:hover { transform: none; }

/* First load */
.ts-logo.is-intro .ts-mark { animation: ts-drop .7s cubic-bezier(.2, .9, .3, 1.15) both; }
.ts-logo.is-intro .ts-tag { animation: ts-swing-in 1.5s .12s cubic-bezier(.45, 0, .55, 1) both; }
.ts-logo.is-intro .ts-ring { animation: ts-ping 1s .55s ease-out both; }
.ts-logo.is-intro .ts-bar { animation: ts-decode .5s .55s cubic-bezier(.2, .7, .2, 1) both; }
.ts-logo.is-intro .ts-bar:nth-of-type(2) { animation-delay: .63s; }
.ts-logo.is-intro .ts-bar:nth-of-type(3) { animation-delay: .71s; }
.ts-logo.is-intro .ts-word span { animation: ts-letter .6s calc(.32s + var(--i) * 45ms) cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ts-drop { from { opacity: 0; transform: translateY(-55%); } }
@keyframes ts-swing-in { 0% { transform: rotate(-38deg); } 26% { transform: rotate(22deg); } 46% { transform: rotate(-12deg); } 66% { transform: rotate(6deg); } 84% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }
@keyframes ts-letter { from { opacity: 0; transform: translateY(.38em); filter: blur(5px); } }

/* Hover / focus / working */
.ts-logo.is-live .ts-tag { animation: ts-swing 1.6s cubic-bezier(.45, 0, .55, 1) infinite; }
.ts-logo.is-live .ts-ring { animation: ts-ping 1.6s ease-out infinite; }
.ts-logo.is-live .ts-bar { animation: ts-decode .45s cubic-bezier(.2, .7, .2, 1) both; }
.ts-logo.is-live .ts-bar:nth-of-type(2) { animation-delay: .08s; }
.ts-logo.is-live .ts-bar:nth-of-type(3) { animation-delay: .16s; }
@keyframes ts-swing { 0% { transform: rotate(0); } 15% { transform: rotate(-16deg); } 35% { transform: rotate(11deg); } 55% { transform: rotate(-6deg); } 75% { transform: rotate(3deg); } 100% { transform: rotate(0); } }
@keyframes ts-ping { 0% { opacity: .9; transform: scale(.6); } 70%, 100% { opacity: 0; transform: scale(2.8); } }
@keyframes ts-decode { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Living aurora behind the header and hero ---------- */
.aurora::before { display: none; }
.aurora { animation: au-bloom 1.8s cubic-bezier(.2, .8, .2, 1) both; }
.aurora i, .foot-glow i { position: absolute; display: block; border-radius: 50%; opacity: var(--glow-a); filter: blur(70px); will-change: transform; animation: au-drift 52s ease-in-out infinite alternate; }
.aurora .au-a { width: 48vw; height: 48vw; left: -8vw; top: -18vw; background: radial-gradient(circle, var(--violet), transparent 66%); }
.aurora .au-b { width: 40vw; height: 40vw; left: 32vw; top: -24vw; background: radial-gradient(circle, var(--coral), transparent 66%); animation-name: au-drift-b; animation-duration: 60s; animation-delay: -15s; }
.aurora .au-c { width: 40vw; height: 40vw; right: -10vw; top: -6vw; background: radial-gradient(circle, var(--glow-3), transparent 66%); animation-name: au-drift-c; animation-duration: 68s; animation-delay: -28s; }
:root[data-theme="dark"] .aurora i, :root[data-theme="dark"] .foot-glow i { mix-blend-mode: screen; filter: blur(80px) saturate(1.15); }
@keyframes au-bloom { from { opacity: 0; transform: scale(1.04); } }
@keyframes au-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4vw, 2.5vw) scale(1.07); } 100% { transform: translate(1vw, 4vw) scale(.96); } }
@keyframes au-drift-b { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-5vw, 3.5vw) scale(.94); } 100% { transform: translate(3.5vw, 2vw) scale(1.08); } }
@keyframes au-drift-c { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-3.5vw, -2vw) scale(1.1); } 100% { transform: translate(-7vw, 3vw) scale(.95); } }

/* ---------- Hero headline: types in letter by letter; each letter arrives in the brand colours and settles to ink ---------- */
.hero .hero-type .hero-line { animation: none; }
.hero-type .w { display: inline-block; white-space: nowrap; }
.hero-type .ch { display: inline-block; animation: ch-in 1.3s calc(.2s + var(--i) * 40ms) cubic-bezier(.2, .7, .2, 1) both; }
@keyframes ch-in {
  0% { opacity: 0; filter: blur(9px); color: var(--c); transform: translateX(-.05em); }
  24% { opacity: 1; filter: blur(0); color: var(--c); transform: none; }
  100% { color: var(--text); }
}

/* ---------- Signal strip: examples of what gets decoded, drifting past ---------- */
.sig { display: flex; align-items: center; gap: 14px; margin-top: clamp(24px, 3vw, 34px); max-width: 980px; animation: hero-fade .8s .45s cubic-bezier(.2, .8, .2, 1) both; }
.sig-k { flex: none; display: inline-flex; align-items: center; gap: 8px; font: 600 12.5px/1 var(--f-body); color: var(--muted); }
.sig-k i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); animation: sig-live 1.8s ease-out infinite; }
@keyframes sig-live { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 100% { box-shadow: 0 0 0 9px transparent; } }
.sig-track { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 88%, transparent); }
.sig-row { display: inline-flex; gap: 8px; padding: 2px 0; white-space: nowrap; animation: sig-move 70s linear infinite; }
.sig:hover .sig-row { animation-play-state: paused; }
@keyframes sig-move { to { transform: translateX(-50%); } }
.sig-c { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px 7px 10px; border-radius: var(--pill); background: color-mix(in srgb, var(--panel) 82%, transparent); border: 1px solid var(--line); font: 500 12.5px/1 var(--f-body); color: var(--text-2); backdrop-filter: blur(6px); }
.sig-c i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.sig-c b { font-weight: 650; color: var(--text); }
.sig-c span { font: 500 11.5px/1 var(--f-mono); color: var(--muted); }

/* ---------- Tool cards: tiny looping previews of what each tool does ---------- */
.tool-tab { padding-right: 160px; overflow: visible; }
.vig { position: absolute; right: 26px; top: 50%; transform: translateY(-50%); display: grid; gap: 7px; justify-items: start; pointer-events: none; }
/* Ad: one 7-second loop. A 300x250 creative loads and its impression fires; a pointer clicks it and the
   click is recorded; then a 728x90 is served in its place (new size, new impression). */
.vig-ad { width: 104px; justify-items: center; }
.va-stage { position: relative; width: 100px; height: 52px; display: grid; place-items: center; }
.va-frame { position: relative; width: 56px; height: 47px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, color-mix(in srgb, var(--lg1) 24%, var(--panel-2)), color-mix(in srgb, var(--lg3) 24%, var(--panel-2))); border: 1px solid var(--line-2); animation: va-size 7s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes va-size { 0%, 46% { width: 56px; height: 47px; } 52%, 92% { width: 98px; height: 16px; border-radius: 5px; } 98%, 100% { width: 56px; height: 47px; } }
.va-frame b { font: 800 10px/1 var(--f-body); letter-spacing: .08em; color: var(--text-2); }
.va-shine { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .6) 50%, transparent 70%); transform: translateX(-120%); animation: va-shine 7s ease-in-out infinite; }
@keyframes va-shine { 0%, 2% { transform: translateX(-120%); } 14% { transform: translateX(120%); } 15%, 53% { transform: translateX(-120%); } 65%, 100% { transform: translateX(120%); } }
.va-size { position: relative; height: 12px; width: 100%; }
.va-size b { position: absolute; inset: 0; text-align: center; font: 600 10px/12px var(--f-mono); color: var(--muted); animation: va-l1 7s ease infinite; }
.va-size b + b { animation-name: va-l2; }
@keyframes va-l1 { 0%, 44% { opacity: 1; } 49%, 95% { opacity: 0; } 99%, 100% { opacity: 1; } }
@keyframes va-l2 { 0%, 47% { opacity: 0; } 53%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }
.va-cur { position: absolute; left: 50%; top: 50%; width: 12px; height: 15px; fill: var(--text); stroke: var(--panel); stroke-width: 1.2; opacity: 0; animation: va-cur 7s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes va-cur { 0%, 26% { opacity: 0; transform: translate(26px, 18px); } 30% { opacity: 1; transform: translate(26px, 18px); } 37% { opacity: 1; transform: translate(2px, 0); } 39% { transform: translate(2px, 0) scale(.78); } 41% { transform: translate(2px, 0) scale(1); } 47%, 100% { opacity: 0; transform: translate(4px, 2px); } }
.va-ping { position: absolute; padding: 4px 8px; border-radius: var(--pill); font: 600 10px/1 var(--f-body); white-space: nowrap; opacity: 0; }
.va-imp { right: -10px; top: -12px; background: var(--inv-bg); color: var(--inv-text); animation: va-imp 7s cubic-bezier(.2, 1.3, .4, 1) infinite; }
.va-clk { left: -14px; bottom: 6px; background: var(--lg2); color: #fff; animation: va-clk 7s cubic-bezier(.2, 1.3, .4, 1) infinite; }
@keyframes va-imp { 0%, 6% { opacity: 0; transform: translateY(6px) scale(.8); } 10%, 24% { opacity: 1; transform: none; } 30%, 56% { opacity: 0; transform: translateY(-6px); } 60%, 74% { opacity: 1; transform: none; } 80%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes va-clk { 0%, 39% { opacity: 0; transform: translateY(6px) scale(.8); } 42%, 52% { opacity: 1; transform: none; } 58%, 100% { opacity: 0; transform: translateY(-6px); } }
/* Site: a page loads, the banner is accepted, pixels light up */
.vig-site { grid-template-columns: auto auto; align-items: center; gap: 8px; }
.vs-win { position: relative; width: 52px; height: 44px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--panel-2); overflow: hidden; }
.vs-bar { position: absolute; left: 0; right: 0; top: 0; height: 9px; background: var(--panel-3); }
.vs-cookie { position: absolute; left: 7px; right: 7px; bottom: 6px; height: 12px; border-radius: 4px; background: var(--panel-3); display: grid; place-items: center; font: 800 9px/1 var(--f-body); color: transparent; animation: vs-cookie 4.5s ease-in-out infinite; }
@keyframes vs-cookie { 0%, 22% { background: var(--panel-3); color: transparent; } 30%, 52% { background: var(--ok); color: #fff; } 64%, 100% { opacity: 0; background: var(--ok); color: #fff; } }
.vs-chips { display: grid; gap: 4px; }
.vs-chips b { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px 3px 5px; border-radius: var(--pill); background: var(--panel-2); border: 1px solid var(--line); font: 600 10px/1 var(--f-body); color: var(--text-2); opacity: 0; animation: vs-chip 4.5s cubic-bezier(.2, 1.3, .4, 1) infinite; }
.vs-chips b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.vs-chips b:nth-child(1) { animation-delay: .9s; } .vs-chips b:nth-child(2) { animation-delay: 1.2s; } .vs-chips b:nth-child(3) { animation-delay: 1.5s; }
@keyframes vs-chip { 0% { opacity: 0; transform: translateX(-6px) scale(.85); } 8%, 62% { opacity: 1; transform: none; } 72%, 100% { opacity: 0; } }
@media (max-width: 560px) { .tool-tab { padding-right: 112px; } .vig { right: 16px; transform: translateY(-50%) scale(.82); transform-origin: right center; } }

/* ---------- Scroll reveals ---------- */
.reveal-ink { background: linear-gradient(90deg, var(--text) 50%, color-mix(in srgb, var(--text) 16%, transparent) 50%); background-size: 200% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position 1.3s cubic-bezier(.4, .1, .2, 1); }
.reveal-ink.is-in { background-position: 0 0; }
.reveal-up > * { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2, .8, .2, 1), transform .6s cubic-bezier(.2, .8, .2, 1); }
.reveal-up.is-in > * { opacity: 1; transform: none; }
.reveal-up.is-in > :nth-child(2) { transition-delay: .1s; } .reveal-up.is-in > :nth-child(3) { transition-delay: .2s; } .reveal-up.is-in > :nth-child(4) { transition-delay: .3s; }

/* ---------- Footer glow: the hero's colours rise again behind the last section ---------- */
.foot-zone { position: relative; isolation: isolate; overflow: hidden; background: var(--panel); }
.foot-zone .support { background: transparent; }
.foot-glow { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; z-index: -1; pointer-events: none; -webkit-mask-image: linear-gradient(to top, #000 35%, transparent 92%); mask-image: linear-gradient(to top, #000 35%, transparent 92%); }
.foot-glow i { opacity: var(--glow-a); }
:root[data-theme="light"] .foot-glow i { opacity: calc(var(--glow-a) * 1.35); }
.foot-glow .au-a { width: 46vw; height: 46vw; left: -10vw; bottom: -20vw; background: radial-gradient(circle, var(--violet), transparent 66%); }
.foot-glow .au-b { width: 42vw; height: 42vw; left: 30vw; bottom: -24vw; background: radial-gradient(circle, var(--coral), transparent 66%); animation-name: au-drift-b; animation-duration: 60s; animation-delay: -9s; }
.foot-glow .au-c { width: 44vw; height: 44vw; right: -12vw; bottom: -18vw; background: radial-gradient(circle, var(--glow-3), transparent 66%); animation-name: au-drift-c; animation-duration: 68s; animation-delay: -22s; }
.foot-zone .band--foot { background: color-mix(in srgb, var(--ink) 55%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top-color: color-mix(in srgb, var(--line) 60%, transparent); }

/* ---------- Pause when off screen or in a background tab ---------- */
.is-off i, .is-off .sig-row, .is-off .va-shine, .is-off .va-frame, .is-off .va-size b, .is-off .va-cur, .is-off .va-ping, .is-off .vs-cookie, .is-off .vs-chips b,
html.is-hidden .aurora i, html.is-hidden .foot-glow i, html.is-hidden .sig-row { animation-play-state: paused !important; }

/* ---------- Reduced motion: everything still, nothing hidden ---------- */
@media (prefers-reduced-motion: reduce) {
  .aurora i, .foot-glow i, .sig-row, .va-shine, .va-frame, .va-size b, .va-cur, .va-ping, .vs-cookie, .vs-chips b, .sig-k i, .hero-type .ch { animation: none !important; }
  .va-size b + b { opacity: 0; } .va-cur { opacity: 0; }
  .vs-chips b { opacity: 1; }
  .sig-track { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .reveal-ink { transition: none; background-position: 0 0; }
  .reveal-up > * { opacity: 1; transform: none; transition: none; }
}