/* =============================================================================
   THE RESIDENCE — the interactive room on /experience
   -----------------------------------------------------------------------------
   Ported from the standalone prototype in ~/Downloads/smart-home-room-site.
   Two changes were structural rather than cosmetic:

   1. EVERY SELECTOR IS NAMESPACED UNDER .xr. The prototype styles .hero, .panel,
      .card, .grid, .wrap, .row, .bar and .note — every one of which already
      means something else in this stylesheet. Dropped in unscoped it would have
      restyled the home page. It also declared :root variables named --ink and
      --ease, which this site already defines and depends on; scoping them to
      the container gives the room the prototype's palette and changes nothing
      outside it.

   2. Its :root, body and * rules became .xr, .xr and .xr * — the prototype
      owned a whole document; this owns one section.
   ========================================================================== */
.xr{--warm:#e2b07c;
    --ink:#0b0a09;
    --paper:#f5f1ec;
    --glass:rgba(16,15,14,.66);
    --stroke:rgba(255,255,255,.14);
    --stroke-hot:rgba(226,176,124,.55);
    --ease:cubic-bezier(.22,.61,.36,1);}
  .xr *{box-sizing:border-box;margin:0;padding:0}
  .xr{background:var(--ink);color:var(--paper);
    font:400 16px/1.5 ui-sans-serif,-apple-system,"Segoe UI",Inter,system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;}
  /* ---------------- hero ---------------- */
  /* Kept position:relative on purpose. A fixed stage plus a z-indexed spacer
     is how the previous build buried its own buttons under an invisible div. */
  .xr .hero{position:relative;width:100%;height:100vh;min-height:560px;overflow:hidden;background:#07070a}
  .xr .stage{position:absolute;inset:0;z-index:1}
  .xr .stage img.base, .xr .stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    opacity:0;will-change:opacity;}
  .xr .stage img.base.on, .xr .stage video.on{opacity:1;z-index:1}
  .xr .vignette{position:absolute;inset:0;z-index:2;pointer-events:none;
    background:
      radial-gradient(130% 90% at 40% 45%,transparent 42%,rgba(0,0,0,.40) 100%),
      linear-gradient(to bottom,rgba(0,0,0,.50) 0%,transparent 20%,transparent 60%,rgba(0,0,0,.60) 100%);}
  .xr .brand{position:absolute;top:34px;left:42px;z-index:5;
    font-weight:600;letter-spacing:.3em;font-size:12px;text-transform:uppercase;}
  .xr .brand span{color:var(--warm)}
  .xr .headline{position:absolute;left:42px;bottom:48px;z-index:5;max-width:26ch;
    text-shadow:0 2px 30px rgba(0,0,0,.55);}
  .xr .headline em{display:block;font-style:normal;font-size:11px;letter-spacing:.3em;
    text-transform:uppercase;color:var(--warm);margin-bottom:12px;}
  .xr .headline h1{font-size:clamp(28px,3.6vw,50px);font-weight:400;line-height:1.08;letter-spacing:-.025em}
  .xr .headline p{margin-top:12px;font-size:14px;color:rgba(245,241,236,.62);max-width:34ch}
  /* ---------------- control panel ---------------- */
  .xr .panel{position:absolute;z-index:6;top:50%;right:46px;transform:translateY(-50%);
    width:330px;padding:20px;border-radius:22px;
    background:var(--glass);border:1px solid var(--stroke);
    backdrop-filter:blur(22px) saturate(1.35);
    -webkit-backdrop-filter:blur(22px) saturate(1.35);
    box-shadow:0 30px 80px rgba(0,0,0,.5);}
  .xr .panel .head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:4px}
  .xr .panel .head b{font-size:15px;font-weight:600;letter-spacing:-.01em}
  .xr .panel .head i{font-style:normal;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,241,236,.42)}
  .xr .panel .sub{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--warm);margin-bottom:16px}
  .xr .grp{margin-top:16px}
  .xr .grp>span{display:block;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
    color:rgba(245,241,236,.38);margin-bottom:9px;}
  .xr .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .xr .tiles.two{grid-template-columns:repeat(2,1fr)}
  .xr .tile{appearance:none;border:1px solid var(--stroke);border-radius:14px;
    background:rgba(255,255,255,.045);color:var(--paper);
    padding:12px 8px 10px;cursor:pointer;text-align:center;
    display:flex;flex-direction:column;align-items:center;gap:7px;
    transition:all .22s var(--ease);font-family:inherit;}
  .xr .tile svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.5;
    stroke-linecap:round;stroke-linejoin:round;opacity:.82}
  .xr .tile b{font-size:11px;font-weight:500;letter-spacing:.01em}
  .xr .tile s{display:block;text-decoration:none;font-size:9px;letter-spacing:.18em;
    text-transform:uppercase;color:rgba(245,241,236,.34)}
  .xr .tile:hover:not(:disabled){background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.26);transform:translateY(-1px)}
  .xr .tile.active{background:rgba(226,176,124,.16);border-color:var(--stroke-hot);
    color:#fff;box-shadow:0 0 0 1px rgba(226,176,124,.18) inset;}
  .xr .tile.active svg{opacity:1;color:var(--warm)}
  .xr .tile.active s{color:var(--warm)}
  .xr .tile:disabled{opacity:.42;cursor:default}
  .xr .status{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.09);
    display:flex;align-items:center;gap:9px;font-size:12px;color:rgba(245,241,236,.62);
    min-height:20px;}
  .xr .dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);flex:none;transition:background .3s}
  .xr .dot.live{background:var(--warm);box-shadow:0 0 0 4px rgba(226,176,124,.16)}
  .xr .dot.working{animation:blink 1s infinite}
  @keyframes blink{
    50%{opacity:.25}}
  /* climate sub-control, DOM only — no clip can answer a slider */
  .xr .climate{margin-top:12px;padding:12px;border-radius:12px;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);
    display:none;}
  .xr .climate.show{display:block}
  .xr .climate .row{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
  .xr .climate .row b{font-size:22px;font-weight:300;font-variant-numeric:tabular-nums}
  .xr .climate .row b small{font-size:12px;color:var(--warm)}
  .xr .climate label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,241,236,.4)}
  .xr input[type=range]{appearance:none;width:100%;height:3px;border-radius:2px;
    background:rgba(255,255,255,.2);outline:none;cursor:pointer;margin-top:2px;}
  .xr input[type=range]::-webkit-slider-thumb{appearance:none;width:15px;height:15px;border-radius:50%;background:var(--warm);border:0;cursor:pointer;}
  .xr input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--warm);border:0;cursor:pointer;}
  /* ---------------- below the fold ---------------- */
  .xr .below{padding:110px 42px 130px;background:var(--ink);position:relative;z-index:1}
  .xr .below .wrap{max-width:1120px;margin:0 auto}
  .xr .below h2{font-size:clamp(26px,3.6vw,46px);font-weight:400;letter-spacing:-.025em;line-height:1.12}
  .xr .below h2 span{color:var(--warm)}
  .xr .below .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px;margin-top:52px}
  .xr .below .card{border-top:1px solid rgba(255,255,255,.12);padding-top:16px}
  .xr .below .card b{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--warm);margin-bottom:7px}
  .xr .below .card p{font-size:14px;color:rgba(245,241,236,.58);line-height:1.6}
  .xr .note{margin-top:66px;font-size:12px;color:rgba(245,241,236,.3)}
  /* ---------------- loader ---------------- */
  .xr #loader{position:fixed;inset:0;z-index:40;background:#07070a;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
    transition:opacity .6s var(--ease);}
  .xr #loader.gone{opacity:0;pointer-events:none}
  .xr #loader .bar{width:170px;height:2px;background:rgba(255,255,255,.13);border-radius:2px;overflow:hidden}
  .xr #loader .bar i{display:block;height:100%;width:0;background:var(--warm);transition:width .25s linear}
  .xr #loader p{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:rgba(245,241,236,.42)}
  @media (max-width:1000px){
  .xr .panel{position:static;transform:none;width:auto;margin:0;border-radius:0;
      border-left:0;border-right:0;backdrop-filter:none;-webkit-backdrop-filter:none;
      background:rgba(11,10,9,.96)}
  .xr .hero{height:auto;min-height:0}
  .xr .stage{position:relative;height:56vw;min-height:240px}
  .xr .headline{position:static;padding:26px 22px 0;max-width:none}
  .xr .brand{top:18px;left:22px}}

/* ---- integration adjustments -------------------------------------------
   Everything below is the cost of moving this out of its own tab. */

/* The two inline style="" attributes the prototype carried. They are here
   rather than on the elements because this site's CSP sets style-src 'self',
   which blocks inline style attributes outright — they would have been dropped
   silently, and the fan row would have collapsed against the slider above it. */
.xr .climate .row-fan{margin:10px 0 0}
.xr .climate .fan-label{font-size:13px}

/* The prototype's media preloader was position:fixed, which in its own tab
   meant "cover the page". Dropped into this site unchanged it would have
   covered the nav, the footer and everything else while eight video pairs
   downloaded. It is the SECTION's loader, so it is bounded by the section. */
.xr{position:relative}
.xr #loader{position:absolute}

/* The room is the full-bleed hero of this page; the site's normal main padding
   would inset it and reveal the page ground down both edges. */
.xr .hero{height:100svh}

@media (max-width:1000px){
  .xr .hero{height:auto;min-height:0}
}

/* MODE GATING, inherited from the walk-through it replaces.
   The room is hidden by default and only shown in scrub mode, so a
   prefers-reduced-motion visitor — and anyone whose scripting never runs — gets
   the storyboard instead and no video is ever fetched. Without this the room
   would render its panel over a poster that can never change.

   It deliberately does NOT reuse the .xp class. That one is position:fixed with
   a separate spacer generating the scroll height: the machinery of a scrubbed
   walk. This room is an ordinary section in the flow, and inheriting a fixed
   full-viewport container would have pinned it over the page with nothing to
   scroll. */
.xr{display:none}
:root[data-xp="scrub"] .xr{display:block}