/* The villa keypad + sun demo (services/home-automation). Markup in that page; script in /assets/js/villa-demo.js.
   Seven pictures in /assets/experience/villa/, one per lighting state, cross-faded. */
  .xk-modes { display:flex; gap:8px; justify-content:center; margin:0 0 18px; flex-wrap:wrap; }
  .xk-modes button { background:var(--bg); color:var(--text); border:1px solid rgba(255,255,255,.14); border-radius:24px; padding:9px 18px; font:inherit; font-size:.9rem; cursor:pointer; min-height:40px; }
  .xk-modes button.on { border-color:var(--amber); color:var(--amber); }

  .xk-shell { max-width:1400px; margin:0 auto; padding:0 16px; }
  .xk-wrap { position:relative; }
  .xk-stage { position:relative; border-radius:16px; overflow:hidden; background:#000; aspect-ratio:16/9; user-select:none; -webkit-user-select:none; box-shadow:0 30px 80px -30px rgba(0,0,0,.8); }
  .xk-stage canvas { width:100%; height:100%; display:block; }
  .xk-loading { position:absolute; inset:0; display:grid; place-items:center; color:var(--text-dim); font-size:.9rem; }
  .xk-loading[hidden] { display:none; }

  /* Top-left caption, as on a touchpanel */
  .xk-title { position:absolute; left:3%; top:5%; color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.6); pointer-events:none; }
  .xk-title small { display:block; font-size:clamp(.6rem,1vw,.78rem); letter-spacing:.12em; text-transform:uppercase; opacity:.85; }
  .xk-title b { display:block; font-size:clamp(1.1rem,2.6vw,2rem); font-weight:500; margin-top:3px; transition:opacity .3s; }

  .xk-full-btn { position:absolute; right:2.2%; top:4%; width:40px; height:40px; border-radius:50%; border:0; background:rgba(0,0,0,.4); color:#fff; display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
  .xk-full-btn svg { width:18px; height:18px; }
  .xk-sound { position:absolute; right:calc(2.2% + 50px); top:4%; height:40px; padding:0 14px 0 12px; border-radius:20px; border:0; background:rgba(0,0,0,.4); color:#fff; display:flex; align-items:center; gap:7px; font:inherit; font-size:.8rem; cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
  .xk-sound svg { width:18px; height:18px; }
  .xk-sound .wave { display:none; }
  .xk-sound.on { background:rgba(252,176,66,.9); color:#1a1206; }
  .xk-sound.on .wave { display:inline; }
  .xk-sound.on .mute { display:none; }

  /* ---- Lutron Alisse-style keypad, drawn in CSS. 1em = 1% of its width (set by script). ---- */
  .xk-pad {
    position:absolute; right:3%; bottom:6%; width:17%; aspect-ratio:1; border-radius:4.5%;
    font-size:2.4px; box-sizing:border-box;
    background:
      repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, rgba(0,0,0,.035) 1px 2px, transparent 2px 4px),
      linear-gradient(135deg, #d6b56f 0%, #c39d55 35%, #d9bb78 55%, #b38c45 100%);
    box-shadow: 0 1.5em 5em rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.2);
    display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; align-items:center;
    padding:15em 10em 13em;
  }
  .xk-key { background:none; border:0; padding:0; display:flex; flex-direction:column; align-items:center; gap:5em; cursor:pointer; font:inherit; color:#6a5330; -webkit-tap-highlight-color:transparent; }
  .xk-key i {
    display:block; width:17em; aspect-ratio:1; border-radius:50%;
    background: linear-gradient(135deg, #dcc07f, #bd9750);
    box-shadow: 0 0 0 1px rgba(110,80,30,.45), 0 1.5em 2em rgba(70,45,10,.35), inset 0 1px 0 rgba(255,255,255,.45);
    transition: box-shadow .2s, transform .15s;
  }
  .xk-key span { font-size:6.6em; line-height:1; letter-spacing:.01em; text-shadow:0 1px 0 rgba(255,255,255,.3); white-space:nowrap; }
  .xk-key:active i { transform:scale(.94); box-shadow:0 0 0 1px rgba(110,80,30,.5), inset 0 1em 2em rgba(70,45,10,.35); }
  .xk-key.on i { box-shadow:0 0 0 1px rgba(110,80,30,.45), 0 0 0 1.4em rgba(255,250,235,.75), 0 0 5em rgba(255,245,215,.8), inset 0 1px 0 rgba(255,255,255,.45); }
  .xk-key:focus-visible { outline:2px solid #fff; outline-offset:2px; border-radius:6px; }

  /* ---- Sun path ---- */
  .xk-sun { position:absolute; inset:0; width:100%; height:100%; touch-action:none; cursor:grab; }
  .xk-sun:active { cursor:grabbing; }
  .xk-sun .path { fill:none; stroke:rgba(255,255,255,.75); stroke-width:2; vector-effect:non-scaling-stroke; }
  .xk-sun .horizon { stroke:rgba(255,255,255,.3); stroke-width:1; stroke-dasharray:5 7; vector-effect:non-scaling-stroke; }
  .xk-sun .halo { fill:rgba(255,236,190,.28); }
  .xk-sun .dot { fill:#fff; }
  .xk-sun text { fill:#fff; font:600 20px Montserrat, system-ui, sans-serif; paint-order:stroke; stroke:rgba(0,0,0,.35); stroke-width:3px; }
  .xk-play { position:absolute; left:50%; bottom:5%; transform:translateX(-50%); width:44px; height:44px; border-radius:50%; border:0; background:rgba(0,0,0,.4); color:#fff; display:grid; place-items:center; cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
  .xk-hint { position:absolute; left:3%; bottom:6%; color:#fff; font-size:clamp(.65rem,1.1vw,.85rem); opacity:.9; text-shadow:0 1px 6px rgba(0,0,0,.7); pointer-events:none; }

  [hidden] { display:none !important; }

  /* Phones: the keypad would be too small to tap over the picture, so it sits under it */
  @media (max-width: 640px) {
    .xk-shell { padding:0; }
    .xk-wrap:not(.full) .xk-stage { aspect-ratio:auto; overflow:visible; background:none; box-shadow:none; }
    .xk-wrap:not(.full) .xk-stage canvas { aspect-ratio:16/9; height:auto; border-radius:12px; background:#000; }
    .xk-wrap:not(.full) .xk-pad { position:relative; right:auto; bottom:auto; width:min(230px, 64%); margin:20px auto 0; }
  }

  /* Full screen (real fullscreen where the browser allows it, otherwise this) */
  .xk-wrap.full { position:fixed; inset:0; z-index:10000; background:#000; display:grid; place-items:center; }
  .xk-wrap.full .xk-stage { width:min(100vw, calc(100dvh * 16 / 9)); border-radius:0; box-shadow:none; }

  .xk-note { color:var(--text-faint); font-size:.8rem; margin-top:16px; text-align:center; padding:0 16px; }