/* Home tile dashboard, built from Avery's dashboard.html and design-notes "Tile illustrations and motion".
   Motion animates only transform and opacity; box-shadow animates only on the Urgent badge (AC-87). */
.hello{padding:8px 32px 20px;display:flex;align-items:flex-end;gap:16px}
.hello h1{font-size:34px;font-weight:900;letter-spacing:-.5px}
.hello p{color:var(--hw-muted);font-weight:600;margin-top:4px}
.status{margin-left:auto;display:flex;flex-wrap:wrap;gap:10px}
.status .chip{background:#fff;box-shadow:var(--shadow)}
.dot-on{background:var(--hw-green)}
.dot-off{background:#9A938F}
.dot-live{background:var(--hw-red)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:20px;padding:0 32px 32px}

/* ---- tile: scene + wash, drifting clouds, bobbing subject, text on a white scrim ---- */
.tile{--c:var(--hw-green);--wash:.3;--bs:auto 190%;--bp:50% 50%;--bob:5s;--bd:0s;
 position:relative;display:block;border-radius:var(--r-tile);isolation:isolate;color:var(--hw-ink);text-decoration:none;
 transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.tile-body{position:absolute;inset:0;container-type:inline-size;border-radius:inherit;padding:14px;overflow:hidden;isolation:isolate;
 display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;
 background-color:var(--c);box-shadow:inset 0 -6px 0 rgba(0,0,0,.08),var(--shadow)}
/* Hover glow is a static shadow behind the clipped body; only its opacity animates. */
.tile::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;
 box-shadow:0 14px 34px color-mix(in srgb,var(--c) 60%,transparent),var(--shadow-lift);transition:opacity .22s ease}
.tile:hover{transform:translateY(-6px)}
.tile:hover::before{opacity:1}
.tile:active{transform:scale(.98);transition-duration:.08s}
.tile:focus-visible{outline:4px solid var(--hw-link);outline-offset:3px}
/* If the scene image fails, the tile keeps its solid --c fill and the same scrim and text (AC-88). */
.tile .bg{position:absolute;inset:0 -6%;z-index:-2;background:url(../img/bg-landscape.jpg) var(--bp)/var(--bs) no-repeat;animation:drift 30s ease-in-out infinite alternate}
.tile .bg::after{content:"";position:absolute;inset:0;background:var(--c);opacity:var(--wash)}
@keyframes drift{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
.grass{position:absolute;left:-4%;right:-4%;bottom:-2px;height:18px;z-index:-1;transform-origin:50% 100%;
 background:radial-gradient(ellipse 9px 16px at 50% 100%,#3DBE6B 60%,transparent 62%) 0 100%/14px 18px repeat-x;opacity:.85;animation:sway 6s ease-in-out infinite alternate}
@keyframes sway{from{transform:skewX(-5deg)}to{transform:skewX(5deg)}}
.clouds{position:absolute;inset:0;z-index:-1;pointer-events:none}
.clouds i{position:absolute;left:0;top:var(--y,14px);width:var(--w,56px);height:calc(var(--w,56px)*.34);border-radius:99px;background:#fff;opacity:.92;
 animation:cloud var(--t,60s) linear infinite;animation-delay:var(--dl,0s)}
.clouds i::before,.clouds i::after{content:"";position:absolute;background:#fff;border-radius:50%}
.clouds i::before{width:48%;aspect-ratio:1;left:14%;bottom:30%}
.clouds i::after{width:34%;aspect-ratio:1;left:50%;bottom:36%}
@keyframes cloud{from{transform:translateX(-110px)}to{transform:translateX(calc(100cqw + 30px))}}
.subj{position:absolute;right:14px;bottom:14px;width:118px;height:118px;z-index:1;filter:drop-shadow(0 4px 0 rgba(0,0,0,.08));
 animation:bob var(--bob) ease-in-out infinite alternate;animation-delay:var(--bd);transition:scale .22s ease}
.tile:hover .subj{scale:1.05}
@keyframes bob{from{translate:0 0}to{translate:0 -4px}}
.scrim{position:relative;z-index:2;background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
 border-radius:16px;padding:8px 14px 9px;box-shadow:0 2px 8px rgba(46,42,51,.08);max-width:calc(100% - 140px);color:var(--hw-ink)}
@supports not ((backdrop-filter:blur(6px)) or (-webkit-backdrop-filter:blur(6px))){.scrim{background:rgba(255,255,255,.92)}}
.tile h2{font-size:24px;font-weight:900;letter-spacing:-.3px;line-height:1.15}
.tile .sub{font-weight:700;font-size:14px;margin-top:1px;line-height:1.3}

/* ---- per-tile crops, washes and stagger ---- */
.alerts{--c:var(--hw-orange);--bp:0% 18%;--bob:4.4s;--bd:-1s}
.animals{--c:var(--hw-yellow);--bp:42% 62%;--bob:5.2s;--bd:-2.3s;--wash:.34}
.health{--c:var(--hw-pink);--bp:24% 70%;--bob:4.8s;--bd:-3.1s;--wash:.38}
.health .bg::after{background:linear-gradient(to bottom,transparent 0 38%,var(--c) 70%)}
.cameras{--c:var(--hw-sky);--bp:72% 55%;--bob:5.6s;--bd:-.6s;--wash:.25}
.settings{--c:#F2C9A0;--bs:100% auto;--bp:50% 42%;--bob:6s;--bd:-1.8s;--wash:.35;grid-column:1/-1}
.settings .scrim{max-width:none}

/* ---- Live Wall hero ---- */
.live .tile-body{padding:0}
.live{grid-column:span 2;grid-row:span 2;--c:var(--hw-green);--bs:cover;--bp:50% 30%;--wash:.28}
.live .feed{position:absolute;inset:14px 14px 86px 14px;border-radius:18px;background:#2E2A33 center/cover no-repeat;box-shadow:0 0 0 4px rgba(255,255,255,.9)}
.live .feed.empty{background:rgba(255,255,255,.85);display:grid;place-items:center}
.live .feed.low{outline:4px solid var(--hw-yellow);filter:saturate(.55)}
.feed-empty{font-weight:800;font-size:16px;color:var(--hw-ink);padding:0 16px;text-align:center}
.live .feed .mode{position:absolute;left:12px;bottom:12px;background:var(--hw-yellow);color:var(--hw-ink);max-width:calc(100% - 24px)}
.mode .short{display:none}
.live .lwicon{position:absolute;left:16px;bottom:16px;width:92px;height:92px;z-index:3;animation-duration:5.4s}
.live .foot{position:absolute;left:118px;right:18px;bottom:16px;display:flex;align-items:flex-end;gap:10px}
.live .foot .scrim{max-width:none}
.live .foot .sp{flex:1}
.livebadge{position:absolute;top:28px;left:28px;background:#fff}
.cams{display:flex;gap:6px}
.cams .chip{background:rgba(255,255,255,.92);box-shadow:0 2px 6px rgba(46,42,51,.12)}

.badge{position:absolute;top:16px;left:16px;z-index:3;min-width:40px;height:40px;border-radius:20px;background:#fff;display:grid;place-items:center;font-weight:900;font-size:20px;padding:0 10px}
.badge.urgent{color:var(--hw-red-text);box-shadow:0 0 0 0 rgba(229,72,77,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}70%{box-shadow:0 0 0 14px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}}

/* Pause everything while the tab is hidden (App.razor toggles html.paused). */
.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .tile:hover,.tile:active{transform:none}.tile:hover .subj{scale:1}
 .clouds i:nth-child(1){left:14%}.clouds i:nth-child(2){left:46%}.clouds i:nth-child(3){left:70%}
}
@media (max-width:600px){
 .hello{padding:4px 18px 14px;flex-direction:column;align-items:flex-start}.hello h1{font-size:26px}
 .status{margin-left:0}.grid{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:14px;padding:0 18px 24px}
 .tile{--bs:auto 200%}.tile-body{padding:9px}.settings{--bs:150% auto}
 .subj{width:68px;height:68px;right:8px;top:6px;bottom:auto}
 .scrim{max-width:none;width:100%;padding:6px 10px 7px;border-radius:13px}
 .tile h2{font-size:19px}.tile .sub{font-size:12.5px}
 .badge{top:10px;left:10px;min-width:34px;height:34px;font-size:17px}
 .live .feed{inset:10px 10px 74px 10px}
 .live .lwicon{width:66px;height:66px;left:10px;bottom:12px;top:auto;right:auto}
 .live .foot{left:84px;right:10px;bottom:10px}.live .foot .scrim{width:auto}
 .livebadge{top:20px;left:20px}
 .mode .long{display:none}.mode .short{display:inline}
 .cams{display:none}
}