/* ---------- Home — phone "gyro" lean ----------
 * home-mobile-gyro.js writes --gx / --gy (about -1…1, + = phone tipped right / top toward you) on each target while
 * it is on screen: .hcm__stage, .hcm__chan, .hm-deck, .hmo__stage, .hmh__art, .hm-rev__art, .hmp__coin. Children read
 * them by inheritance. Gated on html.hgy (set by the script). Things slide downhill and lean with the phone, renders
 * drift, and a streak of light runs over the black metal the other way. Transforms only; `translate` where an
 * element's `transform` is already taken (the reveal uses translate / scale, the float keyframes translate — both compose).
 */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    /* Hero: the card deck slides and leans, its floor shadow follows, light crosses the front card */
    html.hgy .hcm__stage { overflow-x: clip; }
    html.hgy .hcm__deck {
        transform: perspective(800px) translate3d(calc(var(--gx, 0) * 16px), calc(var(--gy, 0) * 10px), 0)
            rotateX(calc(var(--gy, 0) * -12deg)) rotateY(calc(var(--gx, 0) * 18deg));
    }
    html.hgy .hcm__floor { translate: calc(var(--gx, 0) * 22px) calc(var(--gy, 0) * 5px); }
    html.hgy .hcm__card { overflow: hidden; }
    html.hgy .hcm__chan { isolation: isolate; }
    /* z-index -1 inside the card's stacking context: over the metal, under the text */
    html.hgy :is(.hcm__card, .hcm__chan)::before {
        content: ''; position: absolute; z-index: -1; inset: -20% -60%; pointer-events: none;
        background: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.07) 46%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0.07) 54%, rgba(255, 255, 255, 0) 60%);
        transform: translate3d(calc(var(--gx, 0) * -40% + var(--gy, 0) * 12% - 8%), 0, 0);
    }
    html.hgy .hcm__card::before { opacity: 0; transition: opacity .9s; }
    html.hgy .hcm__card[data-slot="0"]::before { opacity: 1; }
    html.hgy .hcm__chan-mark { transform: translate3d(calc(var(--gx, 0) * 14px), calc(var(--gy, 0) * 8px), 0); }

    /* "Enable motion" pill (iPhones only, added by the script under the card deck); the icon rocks to hint "tilt me" */
    .hgy-pill {
        position: absolute; z-index: 4; left: 50%; bottom: 14px; translate: -50% 0;
        display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 15px 0 13px; border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.06);
        -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
        font-family: Sora, 'Noto Sans Arabic', system-ui, sans-serif; font-size: 12.5px; font-weight: 500; letter-spacing: -0.01em; white-space: nowrap;
        color: rgba(255, 255, 255, 0.86); cursor: pointer; -webkit-tap-highlight-color: transparent;
        transition: opacity .35s ease, scale .35s ease;
    }
    html[dir="rtl"] .hgy-pill { letter-spacing: 0; }
    .hgy-pill i { font-size: 13px; animation: hgyRock 2.4s ease-in-out infinite; }
    .hgy-pill:active { scale: .96; }
    .hgy-pill:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
    .hgy-pill.is-gone { opacity: 0; scale: .9; pointer-events: none; }
    html[data-theme="light"] .hgy-pill { border-color: rgba(0, 0, 0, 0.14); background: rgba(0, 0, 0, 0.04); color: var(--theme-ink); }
    html[data-theme="light"] .hgy-pill:focus-visible { outline-color: var(--theme-ink); }

    /* Reviews + FAQ decks: the whole stack slides and leans (kept small so the text stays readable), a soft light drifts on the panel */
    html.hgy .hm-deck {
        transform: perspective(1200px) translate3d(calc(var(--gx, 0) * 8px), calc(var(--gy, 0) * 5px), 0)
            rotateX(calc(var(--gy, 0) * -4deg)) rotateY(calc(var(--gx, 0) * 6deg));
    }
    html.hgy .hm-deck__panel { position: relative; isolation: isolate; }
    html.hgy .hm-deck__panel::before {
        content: ''; position: absolute; z-index: -1; left: -25%; top: -45%; width: 150%; height: 120%; pointer-events: none;
        background: radial-gradient(closest-side, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
        transform: translate3d(calc(var(--gx, 0) * -22%), calc(var(--gy, 0) * 16%), 0);
    }
    html[data-theme="light"].hgy .hm-deck__panel::before { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)); }

    /* Why Choose Us: the rings tip like a gyroscope, the outer one a step further than the rest */
    html.hgy .hmo__stage {
        transform: perspective(800px) translate3d(calc(var(--gx, 0) * 10px), calc(var(--gy, 0) * 6px), 0)
            rotateX(calc(var(--gy, 0) * -16deg)) rotateY(calc(var(--gx, 0) * 18deg));
    }
    html.hgy .hmo__ring--outer { transform: rotateX(calc(var(--gy, 0) * -12deg)) rotateY(calc(var(--gx, 0) * 14deg)); }

    /* Section renders roll downhill a few px */
    html.hgy :is(.hm-rev__art, .hmf__coin-wrap, .hmh__art) { transform: translate3d(calc(var(--gx, 0) * 14px), calc(var(--gy, 0) * 9px), 0); }
    html.hgy .hmp__coin { transform: translate3d(calc(var(--gx, 0) * 16px), calc(var(--gy, 0) * 10px), 0); }
}
@keyframes hgyRock { 0%, 55%, 100% { rotate: 0deg; } 15% { rotate: -14deg; } 35% { rotate: 14deg; } }