/* Tirgum "how it works" animated explainer */
.howto { margin: 8px 0 20px; }
.howto-stage {
  position: relative; border-radius: 20px; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 90% at 20% 0%, #2c2760 0%, #1b1838 55%, #120f26 100%);
  aspect-ratio: 16 / 10; box-shadow: 0 24px 60px -24px rgba(27, 24, 56, .55), inset 0 0 0 1px rgba(255,255,255,.06);
}
@media (max-width: 560px) { .howto-stage { aspect-ratio: 4 / 4.2; } }
.howto-stage::before { /* soft stage light */
  content: ""; position: absolute; inset: -30% -10% auto; height: 70%; z-index: 0;
  background: radial-gradient(closest-side, rgba(217,154,43,.22), transparent 70%); filter: blur(10px);
  animation: hw-glow 6s ease-in-out infinite alternate;
}
@keyframes hw-glow { from { transform: translateX(-12%); } to { transform: translateX(12%); } }
.hw-scene {
  position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column;
  opacity: 0; transform: scale(1.04); filter: blur(6px);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1), filter .7s ease; pointer-events: none;
}
.hw-scene.show { opacity: 1; transform: none; filter: none; pointer-events: auto; }
.hw-scene svg { flex: 1; width: 100%; height: 100%; display: block; }
.hw-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px 20px;
  background: linear-gradient(transparent, rgba(10, 8, 24, .85)); color: #f6efe2;
}
.hw-cap b { display: block; font-size: clamp(17px, 2.6vw, 22px); letter-spacing: -.01em; }
.hw-cap span { font-size: clamp(13px, 1.9vw, 15px); color: #cfc8e4; }
.hw-cap .n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #d99a2b; color: #1b1838; font-size: 13px; font-weight: 800; margin-right: 8px; vertical-align: 2px; }
.hw-scene.show .hw-cap { animation: hw-capin .6s .15s both cubic-bezier(.2,.8,.2,1); }
@keyframes hw-capin { from { opacity: 0; transform: translateY(10px); } }

.howto-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.howto-steps button {
  font: inherit; text-align: left; cursor: pointer; border: 1px solid var(--line); background: var(--surface);
  color: var(--muted); border-radius: 12px; padding: 10px 12px 12px; position: relative; overflow: hidden; font-size: 13px; font-weight: 600; line-height: 1.3;
}
.howto-steps button[aria-current="true"] { color: var(--text); border-color: var(--gold); }
.howto-steps button i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--gold); }
.howto-steps button[aria-current="true"] i { animation: hw-progress var(--hw-dur, 4.6s) linear forwards; }
.howto.paused .howto-steps button i { animation-play-state: paused; }
@keyframes hw-progress { to { width: 100%; } }
@media (max-width: 560px) { .howto-steps button span { display: none; } .howto-steps button { text-align: center; } }

/* ---------- shared SVG pieces ---------- */
.hw-svgtext { font-family: "Inter", "Noto Sans Ethiopic", "Noto Naskh Arabic", sans-serif; }
.hw-am { font-family: "Noto Sans Ethiopic", sans-serif; }
.hw-ar { font-family: "Noto Naskh Arabic", sans-serif; }
.hw-scene * { transform-box: fill-box; }

/* scene 1: preacher */
.s1-arm { transform-box: view-box; transform-origin: 345px 232px; } /* rotate around the shoulder so the arm stays attached */
.active .s1-arm { animation: s1-arm 1.6s ease-in-out infinite; }
@keyframes s1-arm { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-16deg); } }
.active .s1-head { animation: s1-nod 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes s1-nod { 50% { transform: rotate(4deg); } }
.s1-wave { opacity: 0; transform-origin: 0% 50%; }
.active .s1-wave { animation: s1-wave 1.8s ease-out infinite; }
.active .s1-wave.w2 { animation-delay: .35s; } .active .s1-wave.w3 { animation-delay: .7s; }
@keyframes s1-wave { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: .9; } 100% { opacity: 0; transform: scale(1.5); } }
.s1-b { opacity: 0; transform-origin: 0% 100%; }
.active .s1-b1 { animation: hw-pop .6s .5s both cubic-bezier(.3,1.6,.5,1), hw-float 3s 1.1s ease-in-out infinite; }
.active .s1-b2 { animation: hw-pop .6s 1.9s both cubic-bezier(.3,1.6,.5,1), hw-float 3s 2.5s ease-in-out infinite; }
@keyframes hw-pop { from { opacity: 0; transform: scale(.3) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hw-float { 50% { transform: translateY(-5px); } }
.active .s1-mic { animation: s1-mic 1s ease-in-out infinite; }
@keyframes s1-mic { 50% { opacity: .35; } }

/* scene 2: translate hub */
.s2-dot { opacity: 0; }
.active .s2-dot { animation: s2-in 1.4s linear infinite; }
.active .s2-dot.d2 { animation-delay: .35s; } .active .s2-dot.d3 { animation-delay: .7s; } .active .s2-dot.d4 { animation-delay: 1.05s; }
@keyframes s2-in { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(250px); } }
.active .s2-hub { animation: s2-hub 1.4s ease-in-out infinite; transform-origin: 50% 50%; }
@keyframes s2-hub { 50% { transform: scale(1.06); } }
.active .s2-ring { animation: s2-ring 2.1s ease-out infinite; transform-origin: 50% 50%; }
.active .s2-ring.r2 { animation-delay: 1.05s; }
@keyframes s2-ring { from { opacity: .7; transform: scale(.8); } to { opacity: 0; transform: scale(1.9); } }
.s2-beam { stroke-dasharray: 240; stroke-dashoffset: 240; }
.active .s2-beam { animation: s2-beam .7s ease-out forwards; }
.s2-chip { opacity: 0; }
.active .s2-chip { animation: s2-chip .55s cubic-bezier(.3,1.5,.5,1) forwards; }
.active .c1, .active .b1 { animation-delay: .7s; } .active .c2, .active .b2 { animation-delay: 1.1s; }
.active .c3, .active .b3 { animation-delay: 1.5s; } .active .c4, .active .b4 { animation-delay: 1.9s; }
@keyframes s2-beam { to { stroke-dashoffset: 0; } }
@keyframes s2-chip { from { opacity: 0; transform: translateX(-14px) scale(.9); } to { opacity: 1; transform: none; } }

/* scene 3: scan */
.s3-phone { transform: translate(190px, 60px) rotate(8deg); }
.active .s3-phone { animation: s3-phone 1.3s .2s both cubic-bezier(.2,.9,.2,1); }
@keyframes s3-phone { from { transform: translate(190px, 60px) rotate(8deg); opacity: 0; } to { transform: none; opacity: 1; } }
.s3-scan { opacity: 0; }
.active .s3-scan { animation: s3-scan 1s 1.3s ease-in-out 2 both; }
@keyframes s3-scan { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(118px); } }
.s3-flash { opacity: 0; }
.active .s3-flash { animation: s3-flash .5s 3.2s both; }
@keyframes s3-flash { 0% { opacity: 0; } 30% { opacity: .9; } 100% { opacity: 0; } }
.s3-cam, .s3-list { opacity: 0; }
.active .s3-cam { animation: hw-show 2s 1.2s both; }
@keyframes hw-show { 0%, 90% { opacity: 1; } 100% { opacity: 0; } }
.active .s3-list { animation: hw-fadein .4s 3.3s both; }
@keyframes hw-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.s3-sel { transform: translateY(0); }
.active .s3-sel { animation: s3-sel 1s 3.7s both cubic-bezier(.5,0,.2,1); }
@keyframes s3-sel { to { transform: translateY(34px); } }

/* scene 4: pews */
.s4-phone { opacity: 0; }
.active .s4-phone { animation: hw-rise .7s both cubic-bezier(.2,.9,.2,1); }
.active .p2 { animation-delay: .15s; } .active .p3 { animation-delay: .3s; }
@keyframes hw-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.s4-cover { transform-origin: 100% 50%; }
.s4-cover.rtl { transform-origin: 0% 50%; }
.active .s4-cover { animation: s4-type 1.6s steps(16) both; }
.active .l2 { animation-delay: 1.9s !important; }
.active .q1 { animation-delay: .7s; } .active .q2 { animation-delay: .9s; } .active .q3 { animation-delay: 1.1s; }
@keyframes s4-type { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.s4-sound { opacity: 0; transform-origin: 0% 50%; }
.active .s4-sound { animation: s1-wave 1.6s 1s ease-out infinite; }
.active .s4-sound.k2 { animation-delay: 1.4s; }
.active .s4-live { animation: s1-mic 1.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .hw-scene, .hw-scene * , .howto-stage::before { animation: none !important; transition: none !important; }
  .s1-b, .s2-chip, .s3-list, .s4-phone, .s1-wave { opacity: 1 !important; }
  .s2-beam { stroke-dashoffset: 0 !important; } .s4-cover { display: none; } .s3-phone { transform: none; } .s3-cam { opacity: 0 !important; }
}