/* Zarq tool scenes: small motion graphics that explain each tool. */
.zt-scene { --c: #2563eb; display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 9%, #fff), color-mix(in srgb, var(--c) 18%, #fff)); }
.zt-scene svg { display: block; width: 100%; height: 100%; }
.zt-scene * { transform-box: fill-box; transform-origin: center; }
html[data-zt-theme="dark"] .zt-scene { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, #171813), color-mix(in srgb, var(--c) 26%, #171813)); }

/* Shared fills */
.sc-blob { fill: color-mix(in srgb, var(--c) 14%, transparent); }
.sc-paper { fill: #fff; filter: drop-shadow(0 6px 10px rgba(14, 14, 12, .12)); }
.sc-sky { fill: color-mix(in srgb, var(--c) 28%, #fff); }
.sc-hill { fill: var(--c); }
.sc-sun { fill: #C5F04A; }
.sc-ink { fill: #0E0E0C; }
.sc-line { fill: color-mix(in srgb, var(--c) 22%, #e6e6e0); }
.sc-line-d { fill: #0E0E0C; }
.sc-dark { fill: #0E0E0C; }
.sc-accent { fill: #C5F04A; }
.sc-accent-s { fill: #C5F04A; filter: drop-shadow(0 0 10px #C5F04A); }
.sc-soft { fill: color-mix(in srgb, var(--c) 12%, #f1f1ec); }
.sc-ok { fill: #16a34a; }
.sc-ok-s { fill: #16a34a; opacity: .7; }
.sc-blue { fill: #1a0dab; }
.sc-screen { fill: color-mix(in srgb, var(--c) 20%, #fff); }
.sc-mess { fill: #ef4444; }
.sc-flame { fill: #f59e0b; animation: sc-flame .6s ease-in-out infinite alternate; }
.sc-scan { fill: #C5F04A; filter: drop-shadow(0 0 6px #C5F04A); }
.sc-stroke, .sc-stroke-w, .sc-stroke-d, .sc-stroke-a { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.sc-stroke { stroke: var(--c); }
.sc-stroke-w { stroke: #fff; stroke-width: 3; }
.sc-stroke-d { stroke: #0E0E0C; stroke-width: 3; }
.sc-stroke-a { stroke: #C5F04A; }
.sc-thick { stroke-width: 4; }
.sc-dash { fill: none; stroke: var(--c); stroke-width: 2; stroke-dasharray: 6 5; opacity: .6; }
.sc-dash-l { fill: none; stroke: var(--c); stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; }
.sc-cut { stroke: #0E0E0C; stroke-width: 2; stroke-dasharray: 5 5; animation: sc-dash 1s linear infinite; }
.sc-ring, .sc-ring-d { fill: none; stroke: #0E0E0C; stroke-width: 2.5; }
.sc-crop { fill: none; stroke: rgba(14, 14, 12, .5); stroke-width: 400; }
.sc-grid { stroke: rgba(255, 255, 255, .6); stroke-width: 1; }
.sc-track { fill: none; stroke: color-mix(in srgb, var(--c) 18%, #e6e6e0); stroke-width: 10; }
.sc-pc-ring, .sc-scc-ring { fill: none; stroke: var(--c); stroke-width: 10; stroke-linecap: round; }

/* Text */
.zt-scene text { font-family: "JetBrains Mono", ui-monospace, monospace; }
.sc-tag { font-size: 10px; font-weight: 700; fill: #0E0E0C; }
.sc-tag-l { font-size: 10px; font-weight: 700; fill: #C5F04A; }
.sc-type { font-size: 13px; font-weight: 600; fill: #0E0E0C; }
.sc-big { font-family: "Inter Tight", Inter, sans-serif !important; font-size: 30px; font-weight: 800; fill: #0E0E0C; letter-spacing: -.02em; }
.sc-big-l { font-family: "Inter Tight", Inter, sans-serif !important; font-size: 22px; font-weight: 800; fill: #fff; }
.sc-huge, .sc-huge-l { font-family: "Inter Tight", Inter, sans-serif !important; font-size: 26px; font-weight: 800; fill: #0E0E0C; letter-spacing: -.02em; }
.sc-huge-l { fill: #C5F04A; }
.sc-code { font-size: 12.5px; fill: #e7f7b8; }
.sc-pw { font-size: 18px; font-weight: 700; fill: #C5F04A; letter-spacing: .06em; }

/* Pause when off screen or when the visitor prefers less motion */
.zt-motion .zt-card:not(.is-in) .zt-scene *, .zt-motion .zt-cat-card:not(.is-in) .zt-scene * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .zt-scene *, .zt-scene *::before { animation: none !important; } }

@keyframes sc-dash { to { stroke-dashoffset: -10; } }
@keyframes sc-flame { from { transform: scale(1) rotate(-4deg); } to { transform: scale(1.15, .9) rotate(4deg); } }
@keyframes sc-fade4 { 0%, 22% { opacity: 1; } 25%, 97% { opacity: 0; } 100% { opacity: 1; } }

/* Image Compressor: big photo squeezes into a small one */
.sc-cmp-big { animation: sc-cmp-big 4s ease-in-out infinite; }
@keyframes sc-cmp-big { 0%, 20% { transform: scale(1); } 45%, 70% { transform: scale(.82, .78); } 100% { transform: scale(1); } }
.sc-cmp-arrows { animation: sc-push 4s ease-in-out infinite; }
@keyframes sc-push { 0%, 20% { transform: translateX(-8px); opacity: .4; } 45%, 70% { transform: translateX(6px); opacity: 1; } 100% { transform: translateX(-8px); opacity: .4; } }
.sc-cmp-small, .sc-cmp-badge { animation: sc-pop 4s cubic-bezier(.3, 1.6, .5, 1) infinite; }
@keyframes sc-pop { 0%, 40% { transform: scale(.2); opacity: 0; } 55%, 88% { transform: scale(1); opacity: 1; } 100% { transform: scale(.2); opacity: 0; } }

/* Image Resizer: photo shrinks while the handle drags */
.sc-rs-photo { animation: sc-rs 4.5s ease-in-out infinite; transform-origin: 0 0 !important; transform-box: view-box !important; }
@keyframes sc-rs { 0%, 15% { transform: translate(60px, 30px) scale(1) translate(-60px, -30px); } 50%, 75% { transform: translate(60px, 30px) scale(.55) translate(-60px, -30px); } 100% { transform: translate(60px, 30px) scale(1) translate(-60px, -30px); } }
.sc-rs-handle { animation: sc-rs-h 4.5s ease-in-out infinite; }
@keyframes sc-rs-h { 0%, 15% { transform: translate(0, 0); } 50%, 75% { transform: translate(-90px, -54px); } 100% { transform: translate(0, 0); } }
.sc-rs-a { animation: sc-ab 4.5s infinite; } .sc-rs-b { animation: sc-ab 4.5s infinite reverse; }
@keyframes sc-ab { 0%, 40% { opacity: 1; } 45%, 85% { opacity: 0; } 90%, 100% { opacity: 1; } }

/* Image Converter: card flips through formats */
.sc-cv-card { opacity: 0; animation: sc-flip 6s infinite; }
.sc-cv-1 { animation-delay: 2s; } .sc-cv-2 { animation-delay: 4s; }
@keyframes sc-flip { 0% { opacity: 0; transform: rotateY(90deg); } 6%, 30% { opacity: 1; transform: rotateY(0); } 36%, 100% { opacity: 0; transform: rotateY(-90deg); } }
.sc-spin-a { animation: sc-rot 3s linear infinite; transform-origin: 160px 90px !important; transform-box: view-box !important; }
@keyframes sc-rot { to { transform: rotate(360deg); } }

/* Image Cropper: crop frame moves and resizes */
.sc-cr-box { animation: sc-cr 5s ease-in-out infinite; }
@keyframes sc-cr { 0%, 100% { transform: translate(0, 0) scale(1); } 30% { transform: translate(-30px, -6px) scale(.8); } 60% { transform: translate(34px, 8px) scale(.9, 1.05); } }

/* Social image resizer: phone frame changes aspect ratio */
.sc-so-frame { animation: sc-so 6s ease-in-out infinite; }
@keyframes sc-so { 0%, 25% { transform: scale(1.4, .66); } 33%, 58% { transform: scale(1.12, .8); } 66%, 92% { transform: scale(1); } 100% { transform: scale(1.4, .66); } }
.sc-so-a, .sc-so-b, .sc-so-c { opacity: 0; animation: sc-third 6s infinite; }
.sc-so-b { animation-delay: 2s; } .sc-so-c { animation-delay: 4s; }
@keyframes sc-third { 0%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }

/* Merge PDF: two pages slide together */
.sc-mg-a { animation: sc-mg-a 4s ease-in-out infinite; } .sc-mg-b { animation: sc-mg-b 4s ease-in-out infinite; }
@keyframes sc-mg-a { 0%, 15% { transform: translateX(0); } 50%, 85% { transform: translateX(78px) rotate(-3deg); } 100% { transform: translateX(0); } }
@keyframes sc-mg-b { 0%, 15% { transform: translateX(0); } 50%, 85% { transform: translateX(-78px) rotate(4deg); } 100% { transform: translateX(0); } }
.sc-mg-plus { animation: sc-out 4s infinite; } .sc-mg-done { animation: sc-pop 4s cubic-bezier(.3, 1.6, .5, 1) infinite; }
@keyframes sc-out { 0%, 25% { opacity: 1; transform: scale(1); } 40%, 90% { opacity: 0; transform: scale(.3); } 100% { opacity: 1; } }

/* Split PDF: one page fans into three */
.sc-sp-1 { animation: sc-sp1 4s ease-in-out infinite; } .sc-sp-3 { animation: sc-sp3 4s ease-in-out infinite; }
@keyframes sc-sp1 { 0%, 20% { transform: translateX(0); } 50%, 85% { transform: translateX(-92px) rotate(-6deg); } 100% { transform: translateX(0); } }
@keyframes sc-sp3 { 0%, 20% { transform: translateX(0); } 50%, 85% { transform: translateX(92px) rotate(6deg); } 100% { transform: translateX(0); } }
.sc-sp-sc { animation: sc-snip 4s ease-in-out infinite; }
@keyframes sc-snip { 0%, 10% { transform: translateY(0); } 40% { transform: translateY(140px); } 41%, 100% { transform: translateY(0); opacity: 0; } }

/* JPG to PDF: photos drop into the PDF */
.sc-jp-1, .sc-jp-2, .sc-jp-3 { opacity: 0; animation: sc-drop 3.6s ease-in infinite; }
.sc-jp-2 { animation-delay: 1.2s; } .sc-jp-3 { animation-delay: 2.4s; }
@keyframes sc-drop { 0% { opacity: 0; transform: translateY(-30px) rotate(-8deg); } 10% { opacity: 1; } 30% { opacity: 1; transform: translateY(70px) rotate(0) scale(.7); } 34%, 100% { opacity: 0; transform: translateY(80px) scale(.5); } }
.sc-jp-n { animation: sc-pulse 1.2s ease-in-out infinite; }
@keyframes sc-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }

/* QR generator: modules appear, then a scan */
.sc-qr-m { animation: sc-qr 4s infinite; animation-delay: var(--d); }
@keyframes sc-qr { 0% { opacity: 0; transform: scale(.2); } 8%, 85% { opacity: 1; transform: scale(1); } 95%, 100% { opacity: 0; } }
.sc-qr-scan { animation: sc-scan 4s ease-in-out infinite; }
@keyframes sc-scan { 0%, 40% { transform: translateY(0); opacity: 0; } 45% { opacity: 1; } 80% { transform: translateY(102px); opacity: 1; } 85%, 100% { opacity: 0; } }
.sc-caret { animation: sc-blink 1s steps(2) infinite; }
@keyframes sc-blink { 50% { opacity: 0; } }

/* QR scanner: scan line, then a green check */
.sc-qs-line { animation: sc-qs 3s ease-in-out infinite; }
@keyframes sc-qs { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(80px); } }
.sc-qs-ok { animation: sc-pop 3s cubic-bezier(.3, 1.6, .5, 1) infinite; }

/* Word counter: lines type in, number ticks */
.sc-wc-l { transform-origin: left center !important; animation: sc-grow 3s ease-out infinite; animation-delay: var(--d); }
@keyframes sc-grow { 0% { transform: scaleX(0); } 25%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.sc-wc-n1, .sc-wc-n2, .sc-wc-n3 { opacity: 0; animation: sc-third 3s infinite; }
.sc-wc-n2 { animation-delay: 1s; } .sc-wc-n3 { animation-delay: 2s; }

/* Case converter: cycles through cases */
.sc-cc-1, .sc-cc-2, .sc-cc-3, .sc-cc-4 { opacity: 0; animation: sc-fade4 6s infinite; }
.sc-cc-2 { animation-delay: 1.5s; } .sc-cc-3 { animation-delay: 3s; } .sc-cc-4 { animation-delay: 4.5s; }

/* Text cleaner: a lime sweep straightens messy lines */
.sc-tc-l { animation: sc-tidy 4s ease-in-out infinite; animation-delay: var(--d); }
@keyframes sc-tidy { 0%, 20% { transform: translateX(var(--o)); } 45%, 85% { transform: translateX(0); } 100% { transform: translateX(var(--o)); } }
.sc-mess { animation: sc-out 4s infinite; }
.sc-tc-broom { animation: sc-sweep 4s ease-in-out infinite; }
@keyframes sc-sweep { 0%, 15% { transform: translateX(40px); opacity: 0; } 20% { opacity: 1; } 45% { transform: translateX(276px); opacity: 1; } 50%, 100% { transform: translateX(276px); opacity: 0; } }

/* SERP preview: title types, meter fills green */
.sc-sp-title { transform-origin: left center !important; animation: sc-grow 4s ease-out infinite; }
.sc-sp-meter { transform-origin: left center !important; animation: sc-meter 4s ease-out infinite; }
@keyframes sc-meter { 0% { transform: scaleX(0); fill: #ef4444; } 30% { fill: #f59e0b; } 60%, 90% { transform: scaleX(.86); fill: #16a34a; } 100% { transform: scaleX(0); } }

/* Meta tags: lines type in */
.sc-mt-1, .sc-mt-2, .sc-mt-3, .sc-mt-4 { animation: sc-type 5s steps(1) infinite; }
.sc-mt-2 { animation-delay: .6s; } .sc-mt-3 { animation-delay: 1.2s; } .sc-mt-4 { animation-delay: 1.8s; }
@keyframes sc-type { 0% { opacity: 0; } 4%, 85% { opacity: 1; } 90%, 100% { opacity: 0; } }
.sc-mt-chip { animation: sc-pop 5s cubic-bezier(.3, 1.6, .5, 1) infinite; }

/* JSON: one line expands into a tree */
.sc-js-min { animation: sc-js-min 4.5s infinite; }
@keyframes sc-js-min { 0%, 25% { opacity: 1; } 30%, 95% { opacity: 0; } 100% { opacity: 1; } }
.sc-js-tree { animation: sc-js-tree 4.5s infinite; }
@keyframes sc-js-tree { 0%, 27% { opacity: 0; } 32%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
.sc-js-l { animation: sc-js-l 4.5s ease-out infinite; animation-delay: var(--d); }
@keyframes sc-js-l { 0%, 30% { transform: translateX(-14px); opacity: 0; } 42%, 100% { transform: none; opacity: 1; } }
.sc-js-ok { animation: sc-pop 4.5s cubic-bezier(.3, 1.6, .5, 1) infinite; }

/* Base64: dots travel, output pops */
.sc-b6-dot { animation: sc-travel 1.5s linear infinite; animation-delay: var(--d); }
@keyframes sc-travel { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(64px); opacity: 0; } }
.sc-b6-out { animation: sc-pulse 1.5s ease-in-out infinite; }

/* Password: values shuffle, meter fills, lock closes */
.sc-pw-1, .sc-pw-2, .sc-pw-3 { opacity: 0; animation: sc-third 1.8s steps(1) infinite; }
.sc-pw-2 { animation-delay: .6s; } .sc-pw-3 { animation-delay: 1.2s; }
.sc-pw-meter { transform-origin: left center !important; animation: sc-meter 3.6s ease-out infinite; }
.sc-pw-shackle { animation: sc-lock 3.6s ease-in-out infinite; }
@keyframes sc-lock { 0%, 40% { transform: translateY(-5px); } 60%, 100% { transform: translateY(0); } }

/* Percentage: ring fills to 75% */
.sc-pc-ring { stroke-dasharray: 339.3; animation: sc-ring75 3.5s ease-out infinite; transform-box: view-box !important; transform-origin: 110px 90px !important; }
@keyframes sc-ring75 { 0% { stroke-dashoffset: 339.3; } 50%, 90% { stroke-dashoffset: 84.8; } 100% { stroke-dashoffset: 339.3; } }

/* Age: calendar days flip */
.sc-ag-1, .sc-ag-2, .sc-ag-3 { opacity: 0; animation: sc-third 2.4s infinite; }
.sc-ag-2 { animation-delay: .8s; } .sc-ag-3 { animation-delay: 1.6s; }

/* Social character counter: lines grow, ring fills and turns red */
.sc-scc-l { transform-origin: left center !important; animation: sc-grow 4s ease-out infinite; animation-delay: var(--d); }
.sc-scc-ring { stroke-dasharray: 163.4; animation: sc-scc 4s ease-in-out infinite; transform-box: view-box !important; transform-origin: 262px 88px !important; }
@keyframes sc-scc { 0% { stroke-dashoffset: 163.4; stroke: var(--c); } 60% { stroke: #f59e0b; } 85%, 92% { stroke-dashoffset: 6; stroke: #ef4444; } 100% { stroke-dashoffset: 163.4; } }