/* ============================================================================
   TradeYoke landing — playful motion layer. Everything here is additive to
   site.css: new selectors only, all --ty-* tokens, all guarded by
   prefers-reduced-motion (tokens.css already forces near-zero durations
   globally under that query — the extra rules below cover things that need
   a *state* change, not just a paused animation, e.g. hiding the progress
   bar fill transition or freezing a scene on its resting frame).
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .trade-art *, .motion-progress__bar, .btn, .trade-card__icon, .gallery__item img,
  .split__media img, .hero__art--image img, .hero .accent, .stat { animation: none !important; transition: none !important; }
  .t-scene .wc-haze { opacity: 0 !important; }
  .t-scene .so-panel, .t-scene .sc-tier { opacity: 1 !important; transform: none !important; }
}

/* ---- Utilities -------------------------------------------------------------- */
.motion-spin { transform-origin: 0 0; animation: motion-spin 12s linear infinite; }
@keyframes motion-spin { to { transform: rotate(360deg); } }

/* ---- Scroll-progress bar ----------------------------------------------------- */
.motion-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: calc(var(--ty-z-nav) + 1);
  background: transparent; pointer-events: none;
}
.motion-progress__bar {
  height: 100%; width: 0%; transform-origin: left;
  background: linear-gradient(90deg, var(--ty-color-primary), var(--ty-color-primary-ink));
  transition: width 80ms linear;
}

/* ---- Hero: pointer parallax + tilt + shimmering accent ------------------------ */
@media (pointer: fine) {
  .hero__blob { transition: transform 240ms ease-out; }
  .hero__art { transition: transform 200ms ease-out; transform-style: preserve-3d; }
}
.hero .accent {
  background-size: 220% 100%;
  animation: motion-shimmer 5s ease-in-out infinite;
}
@keyframes motion-shimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---- Per-trade section dividers (decorative, cheap) --------------------------
   A soft edge carved out of the hero's bottom, coloured to match the page body
   (the common case for the section that follows). Purely decorative — skipped
   entirely under reduced motion isn't needed since it's a static shape, not
   an animation. */
.hero[data-module] { position: relative; }
.hero[data-module]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 34px;
  background: var(--ty-color-surface); pointer-events: none;
}
.hero[data-module="window-cleaning"]::after { clip-path: polygon(0 100%, 100% 40%, 100% 100%); }
.hero[data-module="gardening"]::after {
  clip-path: polygon(0% 100%,0% 40%,4% 60%,8% 35%,12% 60%,16% 35%,20% 60%,24% 35%,28% 60%,32% 35%,36% 60%,40% 35%,
    44% 60%,48% 35%,52% 60%,56% 35%,60% 60%,64% 35%,68% 60%,72% 35%,76% 60%,80% 35%,84% 60%,88% 35%,92% 60%,96% 35%,100% 60%,100% 100%);
}
.hero[data-module="scaffolding"]::after {
  clip-path: polygon(0% 100%,0% 55%,12.5% 55%,12.5% 30%,25% 30%,25% 55%,37.5% 55%,37.5% 30%,50% 30%,50% 55%,
    62.5% 55%,62.5% 30%,75% 30%,75% 55%,87.5% 55%,87.5% 30%,100% 30%,100% 100%);
}
.hero[data-module="electrician"]::after {
  clip-path: polygon(0% 100%,0% 45%,10% 60%,20% 40%,30% 60%,40% 40%,50% 60%,60% 40%,70% 60%,80% 40%,90% 60%,100% 45%,100% 100%);
}
.hero[data-module="solar-installer"]::after {
  clip-path: polygon(0% 100%,0% 60%,8.3% 30%,16.6% 60%,25% 30%,33.3% 60%,41.6% 30%,50% 60%,58.3% 30%,66.6% 60%,75% 30%,83.3% 60%,91.6% 30%,100% 60%,100% 100%);
}
.hero[data-module="plumber"]::after {
  background: var(--ty-color-surface);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20 0 10 Q12.5 0 25 10 T50 10 T75 10 T100 10 L100 20Z' fill='%23000'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20' preserveAspectRatio='none'%3E%3Cpath d='M0 20 0 10 Q12.5 0 25 10 T50 10 T75 10 T100 10 L100 20Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}

/* ---- Magnetic buttons + ripple ------------------------------------------------ */
@media (pointer: fine) {
  .btn--primary, .btn--lg { transition: transform 160ms var(--ty-ease), background 160ms; }
}
.btn { position: relative; overflow: hidden; }
.btn__ripple {
  position: absolute; border-radius: 50%; background: rgba(255,255,255,.55); transform: scale(0);
  opacity: .8; pointer-events: none; animation: motion-ripple 600ms ease-out forwards;
}
.btn--ghost .btn__ripple, .btn--ghost-onink .btn__ripple { background: color-mix(in srgb, var(--ty-color-primary) 35%, transparent); }
@keyframes motion-ripple { to { transform: scale(2.6); opacity: 0; } }

/* ---- Trade cards: hover tint + trade-specific icon micro-animation ------------ */
.trade-card { transition: transform var(--ty-motion-standard) var(--ty-ease), box-shadow var(--ty-motion-standard), border-color var(--ty-motion-standard); border: 1px solid transparent; }
.trade-card:hover { border-color: color-mix(in srgb, var(--ty-color-primary) 35%, transparent); }
.trade-card__icon { transition: transform 200ms var(--ty-ease); }
[data-module="window-cleaning"] .trade-card:hover .trade-card__icon,
[data-module="window-cleaning"] .trade-card:focus-within .trade-card__icon { animation: tc-wipe 900ms ease-in-out; }
[data-module="gardening"] .trade-card:hover .trade-card__icon,
[data-module="gardening"] .trade-card:focus-within .trade-card__icon { animation: tc-sway 900ms ease-in-out; }
[data-module="scaffolding"] .trade-card:hover .trade-card__icon,
[data-module="scaffolding"] .trade-card:focus-within .trade-card__icon { animation: tc-build 900ms ease-in-out; }
[data-module="electrician"] .trade-card:hover .trade-card__icon,
[data-module="electrician"] .trade-card:focus-within .trade-card__icon { animation: tc-flicker 900ms ease-in-out; }
[data-module="plumber"] .trade-card:hover .trade-card__icon,
[data-module="plumber"] .trade-card:focus-within .trade-card__icon { animation: tc-drip 900ms ease-in-out; }
[data-module="solar-installer"] .trade-card:hover .trade-card__icon,
[data-module="solar-installer"] .trade-card:focus-within .trade-card__icon { animation: tc-spin 900ms ease-in-out; }
@keyframes tc-wipe { 0%, 100% { transform: none; } 30% { transform: translate(-4px,-3px) rotate(-14deg); } 60% { transform: translate(4px,3px) rotate(-14deg); } }
@keyframes tc-sway { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
@keyframes tc-build { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px) scale(1.06); } }
@keyframes tc-flicker { 0%, 40%, 100% { opacity: 1; transform: scale(1); } 20%, 60% { opacity: .35; transform: scale(.92); } 80% { transform: scale(1.1); } }
@keyframes tc-drip { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(5px) scaleY(1.15); } 65% { transform: translateY(-2px); } }
@keyframes tc-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ---- Screenshots: tilt-on-hover with a glossy highlight ----------------------- */
.gallery__item, .split__media { perspective: 1200px; }
.gallery__item img, .split__media img, .hero__art--image img { transition: transform 260ms var(--ty-ease); position: relative; }
@media (pointer: fine) {
  .gallery__item:hover img, .split__media:hover img, .hero__art--image:hover img { transform: rotateX(3deg) rotateY(-4deg) scale(1.02); }
}
.gallery__item, .hero__art--image { position: relative; overflow: hidden; }
.gallery__item::before, .hero__art--image::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 48%, transparent 56%);
  background-size: 220% 220%; background-position: 140% -40%; transition: background-position 700ms ease;
}
.gallery__item:hover::before, .hero__art--image:hover::before { background-position: -20% 120%; }

/* ---- Stats: a small pop once the count-up finishes ---------------------------- */
.stat { transition: transform 220ms var(--ty-ease); }
.stat.motion-pop { animation: motion-stat-pop 420ms var(--ty-ease); }
@keyframes motion-stat-pop { 0% { transform: scale(1); } 45% { transform: scale(1.09); } 100% { transform: scale(1); } }

/* ---- Footer: a little animated yoke mark -------------------------------------- */
.footer-brand .brand__mark svg { transition: transform 260ms var(--ty-ease); }
.footer-brand .brand:hover .brand__mark svg { transform: rotate(-12deg) scale(1.08); }

/* ============================================================================
   TradeArt — the per-trade animated hero scene. Same panel language as
   .app-art (HeroArt) but no phone/diary; a single framed stage plus a toast.
   ============================================================================ */
.trade-art { position: relative; padding: 8px 0 56px 0; perspective: 1400px; }
.trade-art__panel {
  background: var(--ty-color-surface); border-radius: var(--ty-radius-panel); overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.08);
  transform: rotateY(-8deg) rotateX(4deg); transform-origin: 60% 50%;
  animation: trade-art-float 9s ease-in-out infinite;
}
@keyframes trade-art-float { 0%, 100% { transform: rotateY(-8deg) rotateX(4deg) translateY(0); } 50% { transform: rotateY(-8deg) rotateX(4deg) translateY(-8px); } }
.trade-art__bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--ty-color-surface-2); border-bottom: 1px solid var(--ty-color-border); font-size: 11px; color: var(--ty-color-text-muted); }
.trade-art__dots { display: inline-flex; gap: 5px; }
.trade-art__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--ty-color-border-strong); }
.trade-art__url { flex: 1; background: var(--ty-color-surface); border-radius: 6px; padding: 4px 10px; border: 1px solid var(--ty-color-border); }
.trade-art__stage { line-height: 0; }

/* ---- Job-card strip under the scene: 2-3 rows, ties the scene back to the app --- */
.trade-art__strip { display: flex; flex-direction: column; gap: 5px; padding: 9px 14px 12px; background: var(--ty-color-surface); border-top: 1px solid var(--ty-color-border); }
.trade-art__row { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.trade-art__row i { width: 7px; height: 7px; border-radius: 50%; background: var(--ty-color-primary); flex: none; }
.trade-art__row span { flex: 1; color: var(--ty-color-text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-art__row b { font-weight: 700; color: var(--ty-color-text-muted); flex: none; }
.trade-art__row.is-done { opacity: .82; }
.trade-art__row.is-done i { background: var(--ty-color-success); }
.trade-art__row.is-done b { color: var(--ty-color-success-ink); }

/* ---- Shared "still alive" utilities: cloud drift, LED blink, flag flutter, heat shimmer, gauge idle --- */
.ta-cloud { animation: ta-cloud 17s ease-in-out infinite alternate; }
.ta-cloud--2 { animation-duration: 21s; animation-delay: -6s; }
@keyframes ta-cloud { from { transform: translateX(-8px); } to { transform: translateX(14px); } }
.ta-blink { animation: ta-blink 1.8s steps(1) infinite; }
@keyframes ta-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .15; } }
.ta-flag { transform-box: fill-box; transform-origin: 0% 50%; animation: ta-flag 2.4s ease-in-out infinite; }
@keyframes ta-flag { 0%, 100% { transform: skewX(0deg); } 50% { transform: skewX(11deg); } }
.ta-heat { transform-box: fill-box; transform-origin: 50% 100%; animation: ta-heat 2.4s ease-in infinite; }
@keyframes ta-heat { 0% { transform: translateY(0) scaleY(1); opacity: .55; } 75% { opacity: .2; } 100% { transform: translateY(-13px) scaleY(1.35); opacity: 0; } }
.ta-needle { transform-origin: 0 0; animation: ta-needle-idle 3.6s ease-in-out infinite; }
@keyframes ta-needle-idle { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(11deg); } }
.trade-art__toast {
  position: absolute; left: -8px; bottom: 8px; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: var(--ty-color-surface); color: var(--ty-color-text); border-radius: 12px; box-shadow: var(--ty-shadow-lg); font-size: 12px; line-height: 1.2;
  animation: trade-art-toast-in .7s var(--ty-ease) 1.6s both;
}
.trade-art__toast small { display: block; color: var(--ty-color-text-muted); font-size: 10.5px; margin-top: 2px; }
.trade-art__toast-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--ty-color-success); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
@keyframes trade-art-toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }

.t-scene { width: 100%; height: auto; display: block; }

/* ---- window-cleaning: squeegee wipes the haze off each pane, sparkle, drips --- */
.wc-blade { transform-box: fill-box; animation: wc-wipe 7.5s ease-in-out infinite; animation-delay: calc(var(--i) * 2.5s); }
.wc-haze { animation: wc-clear 7.5s ease-in-out infinite; animation-delay: calc(var(--i) * 2.5s); }
.wc-spark { transform-box: fill-box; transform-origin: center; animation: wc-spark 7.5s ease-in-out infinite; animation-delay: calc(var(--i) * 2.5s); }
.wc-drop { animation: wc-drop-fall 3s ease-in infinite; animation-delay: calc(var(--i) * 1s); }
@keyframes wc-wipe {
  0% { transform: translate(-6px,-8px) rotate(25deg); opacity: 0; }
  6% { opacity: 1; }
  40% { transform: translate(38px,50px) rotate(25deg); opacity: 1; }
  47% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes wc-clear {
  0%, 36% { opacity: .85; }
  47% { opacity: 0; }
  96% { opacity: 0; }
  100% { opacity: .85; }
}
@keyframes wc-spark {
  0%, 44% { opacity: 0; transform: scale(.3); }
  50% { opacity: 1; transform: scale(1); }
  62%, 100% { opacity: 0; }
}
@keyframes wc-drop-fall {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 1; }
  90% { opacity: .25; }
  100% { transform: translateY(30px); opacity: 0; }
}

/* ---- gardening: sun spins, grass sways, leaves drift, mower crosses once ------ */
.gd-blade { transform-box: fill-box; transform-origin: 50% 100%; animation: gd-sway 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * .25s); }
@keyframes gd-sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(9deg); } }
.gd-leaf { transform-box: fill-box; transform-origin: center; animation: gd-drift 10s ease-in-out infinite; animation-delay: calc(var(--i) * 3.2s); }
@keyframes gd-drift {
  0% { transform: translate(0,0) rotate(0deg); opacity: 0; }
  10% { opacity: .9; }
  50% { transform: translate(34px,26px) rotate(70deg); opacity: .9; }
  90% { opacity: 0; }
  100% { transform: translate(60px,10px) rotate(120deg); opacity: 0; }
}
.gd-mower { animation: gd-mow 9s ease-in-out infinite; }
@keyframes gd-mow {
  0% { transform: translateX(-40px); opacity: 0; }
  6% { opacity: 1; }
  46% { transform: translateX(266px); opacity: 1; }
  54% { opacity: 0; }
  100% { opacity: 0; }
}

/* ---- scaffolding: tiers build bottom-to-top, tag drops in and stamps --------- */
.sc-tier { transform-box: fill-box; opacity: 0; transform: translateY(14px); }
.sc-tier--1 { animation: sc-tier1 8s ease-in-out infinite; }
.sc-tier--2 { animation: sc-tier2 8s ease-in-out infinite; }
.sc-tier--3 { animation: sc-tier3 8s ease-in-out infinite; }
.sc-tier--4 { animation: sc-tier4 8s ease-in-out infinite; }
@keyframes sc-tier1 { 0% { opacity: 0; transform: translateY(14px); } 6%, 88% { opacity: 1; transform: translateY(0); } 96%, 100% { opacity: 0; transform: translateY(14px); } }
@keyframes sc-tier2 { 0%, 12% { opacity: 0; transform: translateY(14px); } 18%, 88% { opacity: 1; transform: translateY(0); } 96%, 100% { opacity: 0; transform: translateY(14px); } }
@keyframes sc-tier3 { 0%, 24% { opacity: 0; transform: translateY(14px); } 30%, 88% { opacity: 1; transform: translateY(0); } 96%, 100% { opacity: 0; transform: translateY(14px); } }
@keyframes sc-tier4 { 0%, 36% { opacity: 0; transform: translateY(14px); } 42%, 88% { opacity: 1; transform: translateY(0); } 96%, 100% { opacity: 0; transform: translateY(14px); } }
.sc-tag { transform-box: fill-box; animation: sc-tag 8s ease-in-out infinite; }
@keyframes sc-tag {
  0%, 48% { opacity: 0; transform: translateY(-14px); }
  56% { opacity: 1; transform: translateY(2px); }
  62% { transform: translateY(0); }
  90% { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: translateY(-14px) scale(.9); }
}

/* ---- electrician: traces light up in sequence, bolt flickers, stamp appears --- */
.el-trace { stroke-dasharray: 100; animation: el-trace 7s linear infinite; animation-delay: calc(var(--i) * .5s); }
@keyframes el-trace {
  0% { stroke-dashoffset: 100; opacity: .25; }
  18% { stroke-dashoffset: 0; opacity: 1; }
  46% { opacity: 1; }
  60% { opacity: .25; stroke-dashoffset: 0; }
  61% { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 100; opacity: .25; }
}
.el-bolt { transform-box: fill-box; transform-origin: center; animation: el-flicker 2.6s ease-in-out infinite; }
@keyframes el-flicker { 0%, 100% { opacity: .3; } 8%, 14% { opacity: 1; } 11% { opacity: .4; } 50% { opacity: .3; } 58%, 64% { opacity: 1; } }
.el-stamp { transform-box: fill-box; transform-origin: center; animation: el-stamp 7s ease-in-out infinite; }
@keyframes el-stamp {
  0%, 55% { opacity: 0; transform: scale(1.7); }
  62% { opacity: 1; transform: scale(1); }
  90% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(1.3); }
}

/* ---- plumber: dashed flow, flame flicker, gauge settles, tap drips ------------ */
.pl-flow { animation: pl-flow 1.4s linear infinite; }
.pl-flow--2 { animation-duration: 1.9s; animation-direction: reverse; }
@keyframes pl-flow { to { stroke-dashoffset: -32; } }
.pl-flame { transform-box: fill-box; transform-origin: 50% 100%; animation: pl-flame 1.1s ease-in-out infinite; }
.pl-flame--2 { animation-duration: 1.3s; animation-delay: .15s; }
@keyframes pl-flame { 0%, 100% { transform: scaleY(1) scaleX(1); } 50% { transform: scaleY(1.15) scaleX(.92); } }
.pl-needle { transform-origin: 0 0; animation: pl-gauge 8s ease-in-out infinite; }
@keyframes pl-gauge {
  0% { transform: rotate(-58deg); }
  22% { transform: rotate(14deg); }
  32% { transform: rotate(-6deg); }
  40%, 70% { transform: rotate(2deg); }
  85% { transform: rotate(-4deg); }
  100% { transform: rotate(-58deg); }
}
.pl-drop { animation: pl-drip 2.6s ease-in infinite; }
@keyframes pl-drip {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  8% { opacity: 1; }
  70% { transform: translateY(16px) scale(1); opacity: 1; }
  78% { transform: translateY(18px) scale(1.4, .6); opacity: .5; }
  86%, 100% { opacity: 0; }
}

/* ---- solar-installer: panels pop in, sun spins, counter ticks, battery fills -- */
.so-panel { transform-box: fill-box; transform-origin: center; animation: so-panel 8s ease-in-out infinite; animation-delay: calc(var(--i) * .3s); }
@keyframes so-panel {
  0%, 90%, 100% { opacity: 0; transform: scale(.4); }
  8% { opacity: 1; transform: scale(1.08); }
  14%, 86% { opacity: 1; transform: scale(1); }
}
.so-counter text { opacity: 0; }
.so-counter text[style*="--i:0"] { animation: so-count 8s steps(1) infinite; animation-delay: 0s; }
.so-counter text[style*="--i:1"] { animation: so-count 8s steps(1) infinite; animation-delay: 2s; }
.so-counter text[style*="--i:2"] { animation: so-count 8s steps(1) infinite; animation-delay: 4s; }
.so-counter text[style*="--i:3"] { animation: so-count 8s steps(1) infinite; animation-delay: 6s; }
@keyframes so-count { 0% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 0; } }
.so-battery { transform-box: fill-box; transform-origin: 50% 100%; animation: so-battery 8s ease-in-out infinite; }
@keyframes so-battery {
  0% { transform: scaleY(.22); }
  80% { transform: scaleY(.92); }
  92% { transform: scaleY(.92); }
  97%, 100% { transform: scaleY(.22); }
}