/* =====================================================================
   Orvala — Barn House 07 configurator
   Brand tokens mirror css/site.css so the viewer reads as one product.
   ===================================================================== */

:root{
  --bg:#0b0b09;
  --cream:#f4f0e7;
  --dim:rgba(244,240,231,.55);
  --dimmer:rgba(244,240,231,.30);
  --gold:#c9a86a;
  --gold-soft:rgba(201,168,106,.14);
  --line:rgba(244,240,231,.13);
  --glass:rgba(14,14,12,.62);
  --ease:cubic-bezier(.22,.61,.36,1);
  --panel-w:344px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--cream);
  font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}

svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round}

.eyebrow{
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dimmer);font-weight:600;
}

/* ------------------------------------------------------------ loader */
.loader{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 40%,#16160f 0%,var(--bg) 70%);
  transition:opacity .9s var(--ease),visibility .9s;
}
.loader.done{opacity:0;visibility:hidden}
.loader-inner{text-align:center;width:min(84vw,340px)}
.brand-mark{
  width:30px;height:30px;margin:0 auto 22px;border-radius:50%;
  border:1px solid var(--gold);position:relative;
}
.brand-mark::after{
  content:"";position:absolute;inset:7px;border-radius:50%;background:var(--gold);
  animation:pulse 2.4s var(--ease) infinite;
}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.72)}50%{opacity:1;transform:scale(1)}}
.loader-brand{font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold)}
.loader-title{
  font-family:Fraunces,Georgia,serif;font-weight:300;font-size:clamp(30px,6vw,42px);
  margin:10px 0 30px;letter-spacing:-.01em;
}
.loader-title em{font-style:italic;color:var(--gold)}
.loader-bar{height:1px;background:var(--line);overflow:hidden}
.loader-bar i{display:block;height:100%;width:0;background:var(--gold);
  transition:width .35s var(--ease)}
.loader-pct{margin-top:16px;font-size:26px;font-weight:200;font-variant-numeric:tabular-nums}
.loader-pct .unit{font-size:12px;color:var(--dimmer);margin-left:3px}
.loader-note{margin-top:6px;font-size:11px;color:var(--dimmer);letter-spacing:.08em}

/* ------------------------------------------------------------ top bar */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:20;
  display:flex;align-items:center;gap:16px;
  padding:max(18px,env(safe-area-inset-top)) 22px 34px;
  background:linear-gradient(180deg,rgba(11,11,9,.82),transparent);
  pointer-events:none;
}
.topbar > *{pointer-events:auto}
.title-block h2{
  font-family:Fraunces,Georgia,serif;font-weight:300;font-size:19px;
  letter-spacing:-.01em;line-height:1.15;margin-top:2px;
}
.topbar-actions{margin-left:auto;display:flex;gap:8px}

.icon-btn{
  width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;
  border-radius:11px;border:1px solid var(--line);background:var(--glass);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  color:var(--cream);cursor:pointer;text-decoration:none;
  transition:background .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.icon-btn svg{width:17px;height:17px}
.icon-btn:hover{background:var(--gold-soft);border-color:rgba(201,168,106,.4);transform:translateY(-1px)}
.icon-btn:active{transform:translateY(0)}

/* ------------------------------------------------------------- views */
.views{
  position:fixed;left:22px;bottom:max(22px,env(safe-area-inset-bottom));z-index:20;
  display:flex;gap:7px;padding:5px;border-radius:13px;
  border:1px solid var(--line);background:var(--glass);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
}
.view-btn{
  border:0;background:transparent;color:var(--dim);cursor:pointer;
  font:600 11px/1 Manrope,sans-serif;letter-spacing:.09em;text-transform:uppercase;
  padding:9px 13px;border-radius:9px;
  transition:color .25s var(--ease),background .25s var(--ease);
}
.view-btn:hover{color:var(--cream)}
.view-btn.on{color:var(--bg);background:var(--gold)}

/* -------------------------------------------------------- time of day */
.tod{
  position:fixed;z-index:20;left:50%;transform:translateX(-50%);
  bottom:max(22px,env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:13px;padding:0 16px;height:48px;
  border-radius:13px;border:1px solid var(--line);background:var(--glass);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
}
.tod-ico{width:16px;height:16px;color:var(--gold);flex:0 0 16px}
.tod-read{
  font-size:12px;font-variant-numeric:tabular-nums;color:var(--dim);
  min-width:42px;text-align:right;letter-spacing:.04em;
}
#todRange{
  -webkit-appearance:none;appearance:none;width:190px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#2a2a22,var(--gold),#2a2a22);
  outline:none;cursor:pointer;
}
#todRange::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:var(--cream);border:2px solid var(--bg);cursor:grab;
  box-shadow:0 0 0 1px var(--gold);
}
#todRange::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;background:var(--cream);
  border:2px solid var(--bg);cursor:grab;box-shadow:0 0 0 1px var(--gold);
}

/* ------------------------------------------------------------- panel */
.panel{
  position:fixed;z-index:25;top:0;right:0;height:100%;width:var(--panel-w);
  display:flex;flex-direction:column;
  border-left:1px solid var(--line);
  background:linear-gradient(180deg,rgba(14,14,12,.80),rgba(9,9,8,.90));
  backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);
  transition:transform .6s var(--ease);
}
.panel.hidden{transform:translateX(100%)}
.panel-grab{display:none}

.panel-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:max(24px,env(safe-area-inset-top)) 24px 18px;border-bottom:1px solid var(--line);
}
.panel-head h3{
  font-family:Fraunces,Georgia,serif;font-weight:300;font-size:22px;
  letter-spacing:-.01em;margin-top:5px;line-height:1.1;
}
.text-btn{
  border:0;background:none;color:var(--dimmer);cursor:pointer;
  font:600 10px/1 Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  padding:6px 0;transition:color .25s var(--ease);
}
.text-btn:hover{color:var(--gold)}

.panel-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:6px 24px 20px}
.panel-body::-webkit-scrollbar{width:3px}
.panel-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}

.group{padding:20px 0;border-bottom:1px solid var(--line)}
.group:last-child{border-bottom:0}
.group-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:13px}
.group-val{font-size:11px;color:var(--dim)}

.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:9px}
.sw{
  position:relative;border:0;padding:0;background:none;cursor:pointer;
  border-radius:10px;overflow:hidden;aspect-ratio:1;
  outline:1px solid var(--line);outline-offset:0;
  transition:outline-color .25s var(--ease),transform .25s var(--ease);
}
.sw canvas,.sw .flat{position:absolute;inset:0;width:100%;height:100%;display:block}
.sw::after{
  content:"";position:absolute;inset:0;border-radius:10px;
  box-shadow:inset 0 -18px 22px -14px rgba(0,0,0,.75);
}
.sw:hover{transform:translateY(-2px);outline-color:rgba(244,240,231,.34)}
.sw.on{outline:2px solid var(--gold);outline-offset:1px}
.sw.on::before{
  content:"";position:absolute;z-index:2;right:5px;top:5px;width:6px;height:6px;
  border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px rgba(11,11,9,.75);
}
.sw-name{
  position:absolute;z-index:1;left:0;right:0;bottom:0;padding:5px 5px 4px;
  font:600 8px/1.25 Manrope,sans-serif;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.9);
}

.panel-foot{padding:18px 24px max(22px,env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.foot-meta{
  display:flex;gap:16px;margin-bottom:13px;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dimmer);
}
.foot-meta b{color:var(--cream);font-weight:600}
.cta{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 17px;border-radius:11px;background:var(--gold);color:#151206;
  font:700 12px/1 Manrope,sans-serif;letter-spacing:.03em;text-decoration:none;
  transition:filter .25s var(--ease),transform .25s var(--ease);
}
.cta svg{width:15px;height:15px;flex:0 0 15px;stroke-width:2}
.cta:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* ------------------------------------------------------------- toast */
.toast{
  position:fixed;z-index:60;left:50%;top:76px;transform:translate(-50%,-14px);
  padding:9px 16px;border-radius:10px;border:1px solid var(--line);
  background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  font-size:12px;letter-spacing:.02em;opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.toast.on{opacity:1;transform:translate(-50%,0)}

.fallback{position:fixed;inset:0;display:grid;place-items:center;padding:30px;text-align:center}

/* -------------------------------------------------------- responsive */
@media (max-width:900px){
  :root{--panel-w:100%}
  .topbar{padding-left:16px;padding-right:16px;gap:12px}
  .title-block h2{font-size:16px}

  .panel{
    top:auto;bottom:0;height:auto;max-height:62vh;width:100%;
    border-left:0;border-top:1px solid var(--line);
    border-radius:20px 20px 0 0;
  }
  .panel.hidden{transform:translateY(calc(100% - 46px))}
  .panel-grab{
    display:block;position:relative;width:100%;height:26px;border:0;
    background:none;cursor:pointer;
  }
  .panel-grab i{
    position:absolute;left:50%;top:11px;transform:translateX(-50%);
    width:38px;height:3px;border-radius:3px;background:var(--line);
  }
  .panel-head{padding:2px 20px 14px}
  .panel-body{padding:2px 20px 14px;max-height:34vh}
  .panel-foot{padding:14px 20px max(16px,env(safe-area-inset-bottom))}
  .foot-meta{display:none}

  .views{left:16px;bottom:auto;top:calc(max(18px,env(safe-area-inset-top)) + 52px);padding:4px}
  .view-btn{padding:8px 10px;font-size:10px}

  .tod{left:16px;right:16px;transform:none;bottom:auto;
       top:calc(max(18px,env(safe-area-inset-top)) + 104px);height:44px}
  #todRange{flex:1;width:auto}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}