/* ══════════════════════════════════════════════════════════════
   Motion of the IoT UI, driven by ui-motion.js:
   • a light that follows the pointer over cards ([data-lit], --mx / --my)
   • a gentle 3D tilt of home cards under the mouse ([data-tilt], --rx / --ry)
   • a ripple where a card is pressed, mouse or touch ([data-press], --tx / --ty)
   plus ambient animation: orbiting borders on running devices,
   staggered entrances and icon micro-motion. Everything stops when <html data-motion="off"> (the in-app
   animations switch; on "system" it follows prefers-reduced-motion).
   ══════════════════════════════════════════════════════════════ */

@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --rip { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --ripa { syntax: '<number>'; inherits: false; initial-value: 0; }

/* ── pointer light + press ripple: one overlay per card ─────── */
.iot-home :is(.ih-w, .ih-hall, .ih-attn-item, .ih-module, .ih-panel, .ih-units, .ih-unit),
.htr :is(.htr-tile, .clm-kpi, .htr-shortcut, .htr-card) {
    position: relative;
    isolation: isolate;
}

.iot-home :is(.ih-w, .ih-hall, .ih-attn-item, .ih-module, .ih-panel, .ih-units, .ih-unit)::after,
.htr :is(.htr-tile, .clm-kpi, .htr-shortcut, .htr-card)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(circle at var(--tx, 50%) var(--ty, 50%), color-mix(in srgb, var(--acc) calc(var(--ripa) * 32%), transparent) var(--rip), transparent calc(var(--rip) + 2px)),
        radial-gradient(18rem circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--acc) 11%, transparent), transparent 55%);
    opacity: 0;
    transition: opacity .35s var(--ease-soft);
}

:is(.iot-home, .htr) [data-lit]::after, :is(.iot-home, .htr) [data-press]::after { opacity: 1; }
:is(.iot-home, .htr) [data-press]::after { animation: ui-ripple .6s ease-out; }
:is(.iot-home, .htr) [data-lit] { border-color: color-mix(in srgb, var(--acc) 32%, var(--line)); }

/* ── 3D tilt (mouse) ────────────────────────────────────────── */
.iot-home :is(.ih-w, .ih-hall, .ih-module, .ih-attn-item) {
    transform-style: preserve-3d;
    transition: transform .55s var(--ease-soft), box-shadow .35s var(--ease-soft), border-color .35s var(--ease-soft);
}

.iot-home [data-tilt] {
    transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-4px);
    transition: transform .12s ease-out, box-shadow .35s var(--ease-soft), border-color .35s var(--ease-soft);
    box-shadow: var(--sh-2);
}

    /* contents float a little above the card while it tilts */
    .iot-home [data-tilt] :is(.ih-w-temp-big, .ih-w-figure, .ih-w-ico, .ih-dial, .ih-module-ico, .ih-attn-ico, .ih-hall-readings) { transform: translateZ(22px); }
    .iot-home :is(.ih-w-temp-big, .ih-w-figure, .ih-w-ico, .ih-dial, .ih-module-ico, .ih-attn-ico, .ih-hall-readings) { transition: transform .55s var(--ease-soft); }

/* ── running devices: a light orbits the border ─────────────── */
.iot-home .ih-w-switch.is-on::before,
.iot-home .ih-unit.is-on::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(from var(--ang), transparent 0 62%, var(--tone, var(--warm)) 82%, color-mix(in srgb, var(--tone, var(--warm)) 30%, #fff) 88%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: ui-orbit 4.5s linear infinite;
}

.iot-home .ih-unit.is-on::before { --tone: #fde68a; animation-duration: 2.6s; }
.iot-home .ih-w-switch.is-on::before { --tone: #34d399; }

/* ── stage widgets: the numbers and the lit parts come alive ─── */
.ih-w-temp-big { animation: ui-pop .9s var(--dcc-e-spring) .25s backwards; }
.ih-ruler-track { animation: ui-ruler-in 1.2s var(--dcc-e-out) .2s backwards; }
.ih-ruler-sel::after { animation: ui-breathe 2.8s ease-in-out infinite; }
.ih-w-chart-plot .line { stroke-dasharray: 2000; animation: ui-draw 2s var(--dcc-e-out) backwards; }
.ih-w-chart-plot .area { animation: ui-fade 1.6s var(--ease-soft) .4s backwards; }
.ih-w-bubble { animation: ui-pop .7s var(--dcc-e-spring) 1.4s backwards; }
.ih-w:hover .ih-w-ico i { animation: ui-wiggle .7s var(--dcc-e-spring); }
.ih-w-go i { transition: transform .35s var(--dcc-e-spring); }
.ih-w-go:hover i { transform: scale(1.2) rotate(-8deg); }
.ih-stage-chips button.is-active { animation: ui-pop .45s var(--dcc-e-spring); }

/* ── icon micro-motion ──────────────────────────────────────── */
.iot-home :is(.ih-attn-ico, .ih-module-ico, .ih-hall-ico) { transition: transform .45s var(--dcc-e-spring), box-shadow .45s var(--ease-soft); }
.iot-home :is(.ih-attn-item, .ih-module, .ih-hall):hover :is(.ih-attn-ico, .ih-module-ico, .ih-hall-ico) { transform: translateZ(18px) scale(1.12) rotate(-6deg); box-shadow: 0 10px 22px -10px var(--tone, var(--acc)); }
.iot-home .ih-link i { transition: transform .35s var(--dcc-e-spring); }
.iot-home .ih-link:hover i { transform: translateX(4px); }
[dir="rtl"] .iot-home .ih-link:hover i { transform: translateX(-4px) scaleX(-1); }
.iot-home .ih-unit { transition: transform .45s var(--dcc-e-spring), background .35s var(--dcc-e-std); }
.iot-home .ih-unit:hover { transform: translateY(-4px) scale(1.06); }
.iot-rail-link i { transition: transform .35s var(--dcc-e-spring), color .2s; }
.iot-rail-link:hover i { transform: scale(1.18); }
.iot-tab:active i { transform: scale(.85); }

/* ── staggered entrance, scroll reveal below the fold ───────── */
.iot-home :is(.ih-stage-intro, .ih-stage-halls, .ih-w, .ih-attn-item, .ih-unit) { animation: ui-enter .7s var(--ease-soft) backwards; /* backwards only: a held transform would cancel the tilt */ }
.iot-home :is(.ih-widgets, .ih-attn, .ih-units) > :nth-child(2) { animation-delay: .06s; }
.iot-home :is(.ih-widgets, .ih-attn, .ih-units) > :nth-child(3) { animation-delay: .12s; }
.iot-home :is(.ih-widgets, .ih-attn, .ih-units) > :nth-child(4) { animation-delay: .18s; }
.iot-home :is(.ih-widgets, .ih-attn, .ih-units) > :nth-child(5) { animation-delay: .24s; }
.iot-home :is(.ih-widgets, .ih-attn, .ih-units) > :nth-child(n+6) { animation-delay: .3s; }

@supports (animation-timeline: view()) {
    .iot-home :is(.ih-hall, .ih-module, .ih-panel) {
        animation: ui-enter linear backwards;
        animation-timeline: view();
        animation-range: entry 0% entry 60%;
    }
}

@keyframes ui-ripple { from { --rip: 0px; --ripa: 1; } to { --rip: 420px; --ripa: 0; } }
@keyframes ui-orbit { to { --ang: 360deg; } }
@keyframes ui-ruler-in { from { transform: translateX(80px); opacity: 0; } }
@keyframes ui-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes ui-draw { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } }
@keyframes ui-fade { from { opacity: 0; } }
@keyframes ui-pop { from { opacity: 0; transform: scale(.7); } }
@keyframes ui-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg) scale(1.15); } 60% { transform: rotate(10deg); } }
@keyframes ui-enter { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* motion off: the system asks for reduced motion and the in-app switch follows it, or the switch is off */
:root[data-motion="off"] :is(.iot-home, .htr, .iot-app) *,
:root[data-motion="off"] :is(.iot-home, .htr, .iot-app) *::before,
:root[data-motion="off"] :is(.iot-home, .htr, .iot-app) *::after { animation: none !important; transition: none !important; }
:root[data-motion="off"] .iot-home [data-tilt] { transform: none !important; }