/* The balcony of a demonstration development (/explore/<id>/): the view, full screen, with the
   viewer's controls on top. The brand of the site: Inter, paper on night, one touch of brass,
   hairlines, pills. The pages are written by tools/explorar.py; the behaviour is /js/explore.js. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
           src:url(/fonts/inter-latin.woff2) format("woff2")}
:root{--paper:#f6f3ee;--night:#161412;--brass:#a68a62;--brass-lit:#d9c5a3;
      --glass:rgba(22,20,18,.6);--line:rgba(246,243,238,.16);--soft:rgba(246,243,238,.6);
      --ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--night);color:var(--paper)}
body{font:15px/1.5 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
     -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
svg,img{display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
p,h1{margin:0}

.xp{position:fixed;inset:0;overflow:hidden;background:var(--night)}

/* ------------------------------------------------------------ the view */
.xp-scene{position:absolute;inset:0;overflow:hidden}
.xp-pan{position:absolute;inset:0}
.xp-pan img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
            user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.xp-pan img.is-start{opacity:1}
/* with the script: the picture is laid out at its own size and moved as one piece */
.is-live .xp-scene{cursor:grab;touch-action:none}
.is-live .xp-pan{inset:auto;left:0;top:0;transform-origin:0 0;will-change:transform;transition:transform .8s var(--ease)}
.is-live .xp-pan img{object-fit:fill}
.is-drag .xp-scene{cursor:grabbing}
.is-drag .xp-pan,.is-opening .xp-pan{transition:none}

/* the symbol opening onto the view -- the same move as the clip on the map */
.xp-open{position:absolute;inset:0;z-index:4;width:100%;height:100%;display:none;pointer-events:none}
.is-opening .xp-open{display:block}
.xp-dark{fill:var(--night)}
.xp-mark{fill:var(--paper)}

/* ------------------------------------------------------------ the header: symbol, name, place */
.xp-top{position:absolute;inset:0 0 auto 0;z-index:5;display:flex;align-items:center;gap:10px 16px;
        padding:calc(env(safe-area-inset-top) + 18px) clamp(16px,3vw,32px) 44px;
        background:linear-gradient(to bottom,rgba(22,20,18,.66),rgba(22,20,18,0));
        pointer-events:none;transition:opacity .7s var(--ease)}
.xp-top a{pointer-events:auto}
.xp-brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-weight:500;font-size:17px;letter-spacing:.02em}
.xp-rule{width:1px;height:22px;background:rgba(246,243,238,.4)}
.xp-place{font-size:17px;font-weight:400;letter-spacing:0;white-space:nowrap}
.xp-place span{color:var(--soft)}
.xp-note{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;
         padding:6px 11px;border:1px solid rgba(166,138,98,.6);border-radius:999px;color:var(--brass-lit);
         background:rgba(22,20,18,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}   /* 02/10: legivel sobre ceu claro */
.xp-back{margin-left:auto;display:inline-flex;align-items:center;gap:8px;padding:10px 16px 10px 12px;
         font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
         border:1px solid rgba(246,243,238,.36);border-radius:999px;background:rgba(22,20,18,.28);
         transition:background .25s,color .25s}
.xp-back:hover{background:var(--paper);color:var(--night)}

/* ------------------------------------------------------------ the controls */
.xp-dock{position:absolute;z-index:5;left:50%;bottom:calc(env(safe-area-inset-bottom) + 20px);transform:translateX(-50%);
         display:none;align-items:center;gap:22px;width:min(780px,calc(100% - 32px));padding:12px 14px 10px 12px;
         background:var(--glass);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);
         border:1px solid var(--line);border-radius:4px;transition:opacity .7s var(--ease)}
.xp-look{display:flex;align-items:center;gap:10px}
.xp-icon{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid rgba(246,243,238,.28);
         border-radius:999px;background:transparent;cursor:pointer;transition:background .25s}
.xp-icon:hover{background:rgba(246,243,238,.12)}
.xp-dial{position:relative;width:56px;height:1px;background:rgba(246,243,238,.35)}
.xp-dial i{position:absolute;top:-3px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;
           background:var(--brass);transition:left .8s var(--ease)}
.is-drag .xp-dial i{transition:none}
.xp-hour{flex:1;min-width:0}
.xp-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:22px;margin:0;background:transparent;cursor:pointer}
.xp-range:focus-visible{outline-offset:4px}
.xp-range::-webkit-slider-runnable-track{height:1px;background:rgba(246,243,238,.42)}
.xp-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-7.5px;border:0;border-radius:50%;
                                background:var(--paper);box-shadow:0 0 0 4px rgba(166,138,98,.5)}
.xp-range::-moz-range-track{height:1px;background:rgba(246,243,238,.42)}
.xp-range::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--paper);box-shadow:0 0 0 4px rgba(166,138,98,.5)}
.xp-ticks{display:flex;justify-content:space-between;margin:2px 0 0;padding:0;list-style:none}
.xp-ticks button{padding:4px 0;border:0;background:none;cursor:pointer;font-size:10.5px;font-weight:600;
                 letter-spacing:.16em;text-transform:uppercase;color:rgba(246,243,238,.5);transition:color .25s}
.xp-ticks button:hover,.xp-ticks button.is-on{color:var(--paper)}
.xp-clean{height:40px;padding:0 16px;border:1px solid rgba(246,243,238,.28);border-radius:999px;background:transparent;
          cursor:pointer;white-space:nowrap;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
          transition:background .25s}
.xp-clean:hover{background:rgba(246,243,238,.12)}

.xp-hint{position:absolute;z-index:5;left:50%;bottom:calc(env(safe-area-inset-bottom) + 112px);transform:translateX(-50%);
         font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
         text-shadow:0 1px 12px rgba(22,20,18,.8);opacity:0;pointer-events:none;transition:opacity .7s var(--ease)}
.xp-show{position:absolute;z-index:6;right:calc(env(safe-area-inset-right) + 16px);bottom:calc(env(safe-area-inset-bottom) + 16px);
         display:none;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:999px;
         background:var(--glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);cursor:pointer}

/* ------------------------------------------------------------ states */
/* with the script, the controls come in once the symbol has opened */
.is-live .xp-dock{display:flex}
.is-live .xp-top,.is-live .xp-dock{opacity:0;pointer-events:none}
.is-open .xp-top{opacity:1}
.is-open .xp-dock{opacity:1;pointer-events:auto}
.is-open .xp-hint{opacity:.9}
.is-open.is-moved .xp-hint{opacity:0}
/* clean view: only the view */
.is-clean .xp-top,.is-clean .xp-dock,.is-clean .xp-hint{opacity:0!important;pointer-events:none!important}
.is-clean .xp-show{display:grid}

/* ------------------------------------------------------------ small screens */
@media (max-width:720px){
  .xp-top{flex-wrap:wrap}
  .xp-place span,.xp-long{display:none}
  .xp-note{order:9}
  .is-live .xp-dock{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"hour hour hour" "look . clean";
                    gap:12px;bottom:calc(env(safe-area-inset-bottom) + 12px);width:calc(100% - 24px)}
  .xp-hour{grid-area:hour}
  .xp-look{grid-area:look}
  .xp-clean{grid-area:clean}
  .xp-hint{bottom:calc(env(safe-area-inset-bottom) + 150px)}
}
@media (max-width:340px){
  .xp-brand span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .is-live .xp-pan,.xp-dial i,.xp-top,.xp-dock,.xp-hint{transition:none}
}