/* «چطور کار می‌کند» lab (2026-10-16) — animation layer for the homepage's 3-step section, driven by assets/how-lab.js through
   data-hw-* attributes on .tl-sec[data-sec="how"]. It sits on top of the owner's chosen "float" look (how-styles.css) and never changes
   the markup the homepage uses (.how-grid > .how-step > .how-step__num + h3 + p); the illustrations (.hw-ill) are injected by the lab JS only.
   No hex literals on purpose (rgb()/rgba() + existing tokens), so scripts/tokenize_colors.py has nothing to wrap here. */

.tl-sec[data-sec="how"] { --hw-rgb: 61, 122, 93; --hw-ease: cubic-bezier(.22, 1, .36, 1); --hw-pop: cubic-bezier(.34, 1.56, .64, 1); }
.tl-sec[data-sec="how"] .how-grid { perspective: 1200px; }

/* ================================================================ entrance (hidden until .hw-in; .hw-reset = jump back with no transition) */
.tl-sec[data-sec="how"]:not([data-hw-ent="none"]) .how-step.reveal {
  opacity: 1; transform: none;
  transition: opacity .7s var(--hw-ease), translate .8s var(--hw-ease), scale .8s var(--hw-pop), rotate .9s var(--hw-ease), transform .35s var(--hw-ease), box-shadow .35s var(--hw-ease);
  transition-delay: calc(var(--i, 0) * .16s), calc(var(--i, 0) * .16s), calc(var(--i, 0) * .16s), calc(var(--i, 0) * .16s), 0s, 0s;
}
.tl-sec[data-sec="how"]:not([data-hw-ent="none"]):not(.hw-in) .how-step.reveal { opacity: 0; }
.tl-sec[data-sec="how"][data-hw-ent="rise"]:not(.hw-in) .how-step.reveal  { translate: 0 54px; }
.tl-sec[data-sec="how"][data-hw-ent="pop"]:not(.hw-in) .how-step.reveal   { scale: .8; translate: 0 20px; }
.tl-sec[data-sec="how"][data-hw-ent="flip"]:not(.hw-in) .how-step.reveal  { rotate: x 62deg; translate: 0 30px; }
.tl-sec[data-sec="how"][data-hw-ent="slide"]:not(.hw-in) .how-step.reveal { translate: 90px 0; }
.tl-sec[data-sec="how"].hw-reset .how-step.reveal, .tl-sec[data-sec="how"].hw-reset .how-step.reveal * { transition: none !important; animation: none !important; }
/* the number circle drops in just after its card, the chevron draws in after both */
.tl-sec[data-sec="how"]:not([data-hw-ent="none"]) .how-step__num { transition: scale .6s var(--hw-pop), background-color .4s, color .4s, box-shadow .4s; transition-delay: calc(var(--i, 0) * .16s + .25s), 0s, 0s, 0s; }
.tl-sec[data-sec="how"]:not([data-hw-ent="none"]):not(.hw-in) .how-step__num { scale: .2; }
.tl-sec[data-sec="how"] { --hw-ci: none; }
.tl-sec[data-sec="how"]:not([data-hw-ent="none"]).hw-in { --hw-ci: hw-chev-in .7s var(--hw-pop) backwards; }
@keyframes hw-chev-in { from { opacity: 0; scale: .3; } }

/* ================================================================ number circle: pulse / filling ring / dashed spin */
@property --hw-p { syntax: "<number>"; inherits: false; initial-value: 100; }
.tl-sec[data-sec="how"] .how-step__num::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; pointer-events: none; opacity: 0; }
.tl-sec[data-sec="how"].hw-in[data-hw-num="pulse"] .how-step__num::before { border: 2px solid rgba(var(--hw-rgb), .55); animation: hw-pulse 2.6s ease-out infinite; animation-delay: calc(var(--i, 0) * .5s); }
.tl-sec[data-sec="how"].hw-in[data-hw-num="ring"] .how-step__num::before {
  opacity: 1; background: conic-gradient(rgb(var(--hw-rgb)) calc(var(--hw-p) * 1%), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), rgb(0 0 0) calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), rgb(0 0 0) calc(100% - 2px));
  animation: hw-ring 3.6s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .45s + .8s);
}
.tl-sec[data-sec="how"].hw-in[data-hw-num="spin"] .how-step__num::before { opacity: 1; border: 2px dashed rgba(var(--hw-rgb), .6); animation: hw-spin 16s linear infinite; }
@keyframes hw-pulse { 0% { scale: .86; opacity: .85; } 100% { scale: 1.7; opacity: 0; } }
@keyframes hw-ring { 0% { --hw-p: 0; opacity: 1; } 45% { --hw-p: 100; } 85% { --hw-p: 100; opacity: 1; } 100% { --hw-p: 100; opacity: 0; } }
@keyframes hw-spin { to { rotate: 360deg; } }

/* ================================================================ chevrons between the cards */
.tl-sec[data-sec="how"] { --hw-cl: none; }
.tl-sec[data-sec="how"][data-hw-chev="flow"] { --hw-cl: hw-flow 2.4s linear 1s infinite; }
.tl-sec[data-sec="how"][data-hw-chev="nudge"] { --hw-cl: hw-nudge 1.5s ease-in-out 1s infinite; --hw-dx: -9px; --hw-dy: 0px; }
.tl-sec[data-sec="how"] .how-step:not(:last-child)::after { animation: var(--hw-ci), var(--hw-cl); }
.tl-sec[data-sec="how"][data-hw-chev="flow"] .how-step:not(:last-child)::after {
  background: linear-gradient(100deg, var(--lc-c3ddd0, rgb(195, 221, 208)) 0 38%, rgba(var(--hw-rgb), .95) 50%, var(--lc-c3ddd0, rgb(195, 221, 208)) 62% 100%); background-size: 300% 100%;
}
@keyframes hw-flow { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes hw-nudge { 0%, 100% { translate: 0 0; } 50% { translate: var(--hw-dx, 0) var(--hw-dy, 0); } }
@media (max-width: 860px) { .tl-sec[data-sec="how"][data-hw-chev="nudge"] { --hw-dx: 0px; --hw-dy: 9px; } }

/* ================================================================ spotlight: the active step lifts, fills its circle, lights its chevron */
.tl-sec[data-sec="how"] .how-step.reveal { transition-property: opacity, translate, scale, rotate, transform, box-shadow; }
.tl-sec[data-sec="how"][data-hw-ent] .how-step.hw-on { transform: translateY(-7px); box-shadow: 0 34px 50px -28px rgba(var(--hw-rgb), .5), 0 0 0 2px rgba(var(--hw-rgb), .28); }
.tl-sec[data-sec="how"][data-hw-ent] .how-step.hw-on .how-step__num { background: rgb(var(--hw-rgb)); color: rgb(255 255 255); box-shadow: 0 14px 22px -10px rgba(var(--hw-rgb), .7); }
.tl-sec[data-sec="how"] .how-step.hw-on:not(:last-child)::after, .tl-sec[data-sec="how"][data-hw-chev] .how-step.hw-on:not(:last-child)::after { background: rgb(var(--hw-rgb)); }
.tl-sec[data-sec="how"] .how-step.hw-on .hw-ill { background: rgba(var(--hw-rgb), .13); }

/* ================================================================ hover (also used by the lab's short demo, .hw-demo) */
.tl-sec[data-sec="how"][data-hw-hov="lift"] .how-step:hover, .tl-sec[data-sec="how"][data-hw-hov="lift"] .how-step.hw-demo { transform: translateY(-9px); box-shadow: 0 34px 50px -28px rgba(var(--hw-rgb), .5); }
.tl-sec[data-sec="how"][data-hw-hov="tilt"] .how-step:hover, .tl-sec[data-sec="how"][data-hw-hov="tilt"] .how-step.hw-demo {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px); box-shadow: 0 40px 56px -30px rgba(var(--hw-rgb), .55);
}
.tl-sec[data-sec="how"][data-hw-hov="glow"] .how-step:hover, .tl-sec[data-sec="how"][data-hw-hov="glow"] .how-step.hw-demo {
  background-image: radial-gradient(280px circle at var(--cx, 50%) var(--cy, 40%), rgba(var(--hw-rgb), .14), transparent 62%); transform: translateY(-4px);
}
.tl-sec[data-sec="how"] .how-step:hover .how-step__num { scale: 1.1; }

/* ================================================================ the three dots under the title run like a loader */
.tl-sec[data-sec="how"].hw-in[data-hw-dots="1"] .how-step p::before { background: rgb(var(--hw-rgb)); animation: hw-dots 1.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * .3s); }
@keyframes hw-dots {
  0%, 100% { box-shadow: -12px 0 0 rgba(var(--hw-rgb), .9), 12px 0 0 rgba(var(--hw-rgb), .22); opacity: 1; }
  33% { box-shadow: -12px 0 0 rgba(var(--hw-rgb), .22), 12px 0 0 rgba(var(--hw-rgb), .22); }
  66% { box-shadow: -12px 0 0 rgba(var(--hw-rgb), .22), 12px 0 0 rgba(var(--hw-rgb), .9); }
}

/* ================================================================ illustrations */
.tl-sec[data-sec="how"] .hw-ill { inline-size: 132px; block-size: 78px; margin: 4px auto 2px; border-radius: 22px; display: grid; place-items: center; background: rgba(var(--hw-rgb), .075); transition: background-color .4s; }
.tl-sec[data-sec="how"] .hw-ill svg { inline-size: 112px; block-size: auto; overflow: visible; color: rgb(var(--hw-rgb)); }
.tl-sec[data-sec="how"][data-hw-ill="0"] .hw-ill { display: none; }
.tl-sec[data-sec="how"] .hw-ill * { transform-box: fill-box; }
.hw-i-card { fill: var(--card, rgb(255 255 255)); stroke: rgba(var(--hw-rgb), .35); stroke-width: 1.5; }
.hw-i-line { fill: rgba(var(--hw-rgb), .2); }
.hw-i-dot { fill: rgba(var(--hw-rgb), .1); stroke: rgba(var(--hw-rgb), .55); stroke-width: 1.5; }
.hw-i-tick { fill: none; stroke: rgb(var(--hw-rgb)); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12; stroke-dashoffset: 12; }
.hw-i-base { fill: none; stroke: rgba(var(--hw-rgb), .35); stroke-width: 2; stroke-linecap: round; }
.hw-i-bar { fill: rgba(var(--hw-rgb), .75); transform-origin: 50% 100%; }
.hw-i-bar:nth-of-type(odd) { fill: rgba(var(--hw-rgb), .5); }
.hw-i-track { fill: none; stroke: rgba(var(--hw-rgb), .18); stroke-width: 4; }
.hw-i-ring { fill: none; stroke: rgb(var(--hw-rgb)); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 69.1; stroke-dashoffset: 69.1; transform: rotate(-90deg); transform-origin: 50% 50%; }
.hw-i-spark { fill: rgb(var(--hw-rgb)); transform-origin: 50% 50%; opacity: 0; }
.hw-i-bub { fill: var(--card, rgb(255 255 255)); stroke: rgba(var(--hw-rgb), .4); stroke-width: 1.5; }
.hw-i-bub--me { fill: rgba(var(--hw-rgb), .9); stroke: none; }
.hw-i-td { fill: rgb(255 255 255); transform-origin: 50% 50%; }
.hw-i-b1, .hw-i-b2 { transform-origin: 50% 100%; }

.tl-sec[data-sec="how"].hw-in .hw-i-tick { animation: hw-tick 4.4s ease-in-out infinite; animation-delay: calc(var(--d, 0) * .55s + .6s); }
.tl-sec[data-sec="how"].hw-in .hw-i-dot { animation: hw-dotfill 4.4s ease-in-out infinite; animation-delay: calc(var(--d, 0) * .55s + .6s); }
.tl-sec[data-sec="how"].hw-in .hw-i-bar { animation: hw-grow 4.4s var(--hw-ease) infinite; animation-delay: calc(var(--d, 0) * .16s + .5s); }
.tl-sec[data-sec="how"].hw-in .hw-i-ring { animation: hw-score 4.4s ease-in-out infinite .5s; }
.tl-sec[data-sec="how"].hw-in .hw-i-spark { animation: hw-spark 4.4s ease-in-out infinite .5s; }
.tl-sec[data-sec="how"].hw-in .hw-i-b1 { animation: hw-bub 4.8s var(--hw-pop) infinite .5s; }
.tl-sec[data-sec="how"].hw-in .hw-i-b2 { animation: hw-bub2 4.8s var(--hw-pop) infinite .5s; }
.tl-sec[data-sec="how"].hw-in .hw-i-td { animation: hw-type 1s ease-in-out infinite; animation-delay: calc(var(--d, 0) * .16s); }

@keyframes hw-tick { 0%, 6% { stroke-dashoffset: 12; } 16%, 84% { stroke-dashoffset: 0; } 94%, 100% { stroke-dashoffset: 12; } }
@keyframes hw-dotfill { 0%, 6% { fill: rgba(var(--hw-rgb), .1); } 16%, 84% { fill: rgba(var(--hw-rgb), .24); } 94%, 100% { fill: rgba(var(--hw-rgb), .1); } }
@keyframes hw-grow { 0%, 4% { transform: scaleY(0); } 26%, 82% { transform: scaleY(1); } 94%, 100% { transform: scaleY(0); } }
@keyframes hw-score { 0%, 8% { stroke-dashoffset: 69.1; } 40%, 82% { stroke-dashoffset: 17; } 94%, 100% { stroke-dashoffset: 69.1; } }
@keyframes hw-spark { 0%, 40% { opacity: 0; scale: .3; } 52% { opacity: 1; scale: 1.25; } 62%, 82% { opacity: 1; scale: 1; } 94%, 100% { opacity: 0; scale: .3; } }
@keyframes hw-bub { 0%, 4% { opacity: 0; scale: .5; } 14%, 86% { opacity: 1; scale: 1; } 96%, 100% { opacity: 0; scale: .5; } }
@keyframes hw-bub2 { 0%, 26% { opacity: 0; scale: .5; } 38%, 86% { opacity: 1; scale: 1; } 96%, 100% { opacity: 0; scale: .5; } }
@keyframes hw-type { 0%, 100% { translate: 0 0; opacity: .55; } 50% { translate: 0 -3.5px; opacity: 1; } }

/* ================================================================ dark mode */
html[data-theme="dark"] .tl-sec[data-sec="how"] .hw-ill { background: rgba(var(--hw-rgb), .14); }
html[data-theme="dark"] .hw-i-card, html[data-theme="dark"] .hw-i-bub { fill: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .hw-i-bub--me { fill: rgba(var(--hw-rgb), .85); }

/* ================================================================ phones + reduced motion */
@media (max-width: 860px) {
  .tl-sec[data-sec="how"][data-hw-ent="slide"]:not(.hw-in) .how-step.reveal { translate: 0 50px; }
  .tl-sec[data-sec="how"][data-hw-ent="flip"]:not(.hw-in) .how-step.reveal { rotate: x 45deg; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-sec[data-sec="how"] .how-step, .tl-sec[data-sec="how"] .how-step * , .tl-sec[data-sec="how"] .how-step::after { animation: none !important; transition: none !important; }
  .tl-sec[data-sec="how"] .how-step.reveal { opacity: 1 !important; translate: none !important; scale: none !important; rotate: none !important; }
  .tl-sec[data-sec="how"] .how-step__num { scale: none !important; }
  .tl-sec[data-sec="how"] .hw-i-tick { stroke-dashoffset: 0; }
  .tl-sec[data-sec="how"] .hw-i-ring { stroke-dashoffset: 17; }
  .tl-sec[data-sec="how"] .hw-i-spark, .tl-sec[data-sec="how"] .hw-i-b1, .tl-sec[data-sec="how"] .hw-i-b2 { opacity: 1; }
}