/* ---------- Home — phone layout: Why Choose Us (design "b": rings + render, copy, feature dial) ----------
 * Markup: components/home/mobile/why-m.php · Script: home-mobile-why-orbit.js.
 * The script sets --rot on the orbit (the light circles the rings, a quarter turn per feature, never unwinding),
 * --wheel on the dial (the active feature sits on top of the arc) and data-d (distance from the active node).
 * The stage scales from --hmo-s; the dial is a 640px circle of which only the top arc shows.
 */
@media (max-width: 767px) {
    .hmo {
        --hmo-s: min(290px, calc(100vw - 100px)); --hmo-dur: 3600ms; --hmo-r: 320px; --s: 1;
        display: flex; flex-direction: column; padding: 18px 20px 24px;
    }
    html[dir="rtl"] .hmo { --s: -1; }
    .hmo .hm__glow { top: 80px; width: 560px; height: 560px; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 65%); }
    .hmo__title { position: relative; margin: 0; text-align: center; font-family: var(--hm-display); font-size: 38px; line-height: 1.06; letter-spacing: -0.05em; font-weight: 600; color: #fff; }
    .hmo__title span { color: rgba(255, 255, 255, 0.42); }
    html[dir="rtl"] .hmo__title { letter-spacing: 0; line-height: 1.25; }

    /* Stage: two rings, a light travelling the dashed one, the active feature's render in the middle */
    .hmo__stage { position: relative; flex-shrink: 0; width: var(--hmo-s); aspect-ratio: 1; margin: 18px auto 0; }
    .hmo__ring { position: absolute; border-radius: 50%; pointer-events: none; }
    .hmo__ring--outer { inset: 0; border: 1px solid rgba(255, 255, 255, 0.07); background: radial-gradient(circle, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 70%); }
    .hmo__ring--dash { inset: calc(var(--hmo-s) * .117); border: 1px dashed rgba(255, 255, 255, 0.12); }
    .hmo__orbit { position: absolute; inset: 0; transform: rotate(var(--rot, 0deg)); transition: transform 1s var(--hm-ease); pointer-events: none; }
    .hmo__dot {
        position: absolute; left: 50%; top: calc(var(--hmo-s) * .117); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
        background: #fff; box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.08), 0 0 22px rgba(255, 255, 255, 0.7);
    }
    .hmo__coin {
        position: absolute; left: 50%; top: 50%; width: calc(var(--hmo-s) * .538); height: auto; aspect-ratio: 1;
        margin: calc(var(--hmo-s) * -.269) 0 0 calc(var(--hmo-s) * -.269); object-fit: contain; pointer-events: none; user-select: none;
        filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.8)); animation: hmFloatA 6s ease-in-out infinite;
        opacity: 0; transform: translateY(10px) scale(0.9); transition: opacity .45s ease, transform .6s var(--hm-ease);
    }
    .hmo__coin.is-active { opacity: 1; transform: none; }
    .hmo__floor { position: absolute; left: 50%; bottom: calc(var(--hmo-s) * .152); width: calc(var(--hmo-s) * .517); height: 18px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 70%); pointer-events: none; }

    /* Copy */
    .hmo__copy { position: relative; margin-top: 16px; min-height: 142px; text-align: center; touch-action: pan-y; }
    .hmo__item[hidden] { display: none; }
    .hmo__item.is-active { animation: hmIn .6s var(--hm-ease) both; }
    .hmo__item-title { margin: 0; font-family: var(--hm-display); font-size: 28px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.15; color: #fff; }
    html[dir="rtl"] .hmo__item-title { letter-spacing: 0; line-height: 1.35; }
    .hmo__item-line { margin: 10px auto 0; max-width: 33ch; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); text-wrap: balance; }
    .hmo__lead { font-weight: 600; color: #fff; }

    /* Dial: the features along the top arc of a large dashed circle, faded out at both ends */
    .hmo__dial {
        position: relative; height: 128px; margin: 14px -20px 0; overflow: hidden;
        -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 2%, #000 18%, #000 82%, rgba(0, 0, 0, 0) 98%);
        mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 2%, #000 18%, #000 82%, rgba(0, 0, 0, 0) 98%);
    }
    .hmo__arc { position: absolute; left: 50%; top: 48px; width: calc(var(--hmo-r) * 2); height: calc(var(--hmo-r) * 2); margin-left: calc(var(--hmo-r) * -1); border-radius: 50%; border: 1px dashed rgba(255, 255, 255, 0.14); pointer-events: none; }
    .hmo__spark { position: absolute; left: 50%; top: 48px; width: 52px; height: 3px; margin: -1.5px 0 0 -26px; border-radius: 2px; background: radial-gradient(ellipse, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%); pointer-events: none; }
    .hmo__wheel { position: absolute; left: 50%; top: calc(48px + var(--hmo-r)); width: 0; height: 0; transform: rotate(var(--wheel, 0deg)); transition: transform .9s var(--hm-ease); }
    .hmo__node {
        position: absolute; left: 0; top: 0; width: 76px; height: 76px; margin: -38px 0 0 -38px; padding: 0; border: 0; background: none;
        display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
        transform: rotate(calc(var(--a) * var(--s))) translateY(calc(var(--hmo-r) * -1)) rotate(calc(var(--a) * var(--s) * -1 - var(--wheel, 0deg)));
        transition: transform .9s var(--hm-ease), opacity .5s ease;
    }
    .hmo__node[data-d="1"] { opacity: .7; }
    .hmo__node[data-d="2"] { opacity: .4; }
    .hmo__node[data-d="3"] { opacity: .2; }
    .hmo__node:focus-visible { outline: none; }
    .hmo__node:focus-visible .hmo__disc { outline: 2px solid #fff; outline-offset: 4px; }
    /* progress ring around the active node: fills over --hmo-dur while autoplay runs */
    .hmo__prog { position: absolute; inset: 0; width: 76px; height: 76px; transform: rotate(-90deg); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
    .hmo__prog circle { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 232.48; stroke-dashoffset: 232.48; }
    .hmo__node.is-active .hmo__prog { opacity: 1; }
    .hmo.is-run .hmo__node.is-active .hmo__prog circle { animation: hmoRing var(--hmo-dur) linear forwards; }
    .hmo.is-still .hmo__node.is-active .hmo__prog circle { stroke-dashoffset: 0; }
    .hmo__disc {
        width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        border: 1px solid rgba(255, 255, 255, 0.08); background: linear-gradient(180deg, #19191c 0%, #0c0c0e 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 6px 14px rgba(0, 0, 0, 0.5);
        transition: width .5s var(--hm-ease), height .5s var(--hm-ease), background .5s ease, border-color .5s ease, box-shadow .5s ease;
    }
    .hmo__node.is-active .hmo__disc {
        width: 64px; height: 64px; border-color: rgba(255, 255, 255, 0.32);
        background: radial-gradient(120% 100% at 50% 0%, #55555d 0%, #26262b 45%, #111114 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 -10px 18px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.6), 0 0 26px rgba(255, 255, 255, 0.14);
    }
    .hmo__disc img { width: 30px; height: 30px; object-fit: contain; pointer-events: none; user-select: none; filter: brightness(0.85); transition: width .5s var(--hm-ease), height .5s var(--hm-ease), filter .5s ease; }
    .hmo__node.is-active .hmo__disc img { width: 42px; height: 42px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.7)); }
}
@media (max-width: 360px) {
    .hmo { padding-inline: 16px; }
    .hmo__title { font-size: 32px; }
    .hmo__item-title { font-size: 24px; }
    .hmo__item-line { font-size: 15px; }
    .hmo__dial { margin-inline: -16px; }
}
@keyframes hmoRing { from { stroke-dashoffset: 232.48; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .hmo__coin, .hmo__item.is-active, .hmo.is-run .hmo__node.is-active .hmo__prog circle { animation: none !important; }
    .hmo__orbit, .hmo__wheel, .hmo__node, .hmo__coin, .hmo__disc, .hmo__disc img { transition: none !important; }
}