/* The narrated tours: /harbour-tour and the rest. Shared by every tour page; demo.js builds
   the parts this styles, and each page supplies only its card tags and its cue sheet. */
:root{--cream:#f3eee3;--ink2:#12293e;--accent:#edbb68;--glass:rgba(11,23,36,.62);
  --serif:Georgia,"Times New Roman",Times,serif;--mono:"Courier New",Courier,ui-monospace,monospace;
  --sans:-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --top:env(safe-area-inset-top,0px);--bottom:env(safe-area-inset-bottom,0px)}
html,body{margin:0;height:100%;background:#0b1220;overflow:hidden;color:var(--cream);font:15px/1.5 var(--sans)}
button{font:inherit;color:inherit;cursor:pointer}
iframe{position:fixed;inset:0;border:0;display:block;width:100%;height:100%}
/* Covers the world while the tour flies it, so a stray drag cannot take the camera away
   from the narration. A tap pauses, the way it would on a video. */
#stage{position:fixed;inset:0;z-index:2;cursor:pointer;-webkit-tap-highlight-color:transparent}
#curtain{position:fixed;inset:0;z-index:3;background:#0b1220;opacity:0;pointer-events:none}

/* The way home and the way to collect, together at top centre: the world keeps its own
   controls chip top left and its panels down both sides. */
.top{position:fixed;z-index:6;top:calc(12px + var(--top));left:50%;transform:translateX(-50%);
  display:flex;gap:2px;white-space:nowrap}
.top a,.top button{font:12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(238,244,246,.8);background:rgba(11,23,36,.6);border:0;padding:8px 13px;text-decoration:none;
  transition:color .2s ease,background .2s ease}
.top a:hover,.top a:focus-visible,.top button:hover,.top button:focus-visible{color:#fff;background:rgba(11,23,36,.88)}
.top .home{border-left:2px solid var(--accent)}
.top .buy{color:var(--accent)}
.top .replay{display:none}
[data-state=free] .top .replay{display:block}

/* Before the tour: the harbour is already running behind the title. */
#intro{position:fixed;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 16px;text-align:center;cursor:pointer;
  background:radial-gradient(ellipse at center,rgba(8,16,26,.72) 0%,rgba(8,16,26,.42) 60%,rgba(8,16,26,.25) 100%);
  transition:opacity .5s ease}
.eyebrow{margin:0;font:12px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(243,238,227,.78)}
#intro h1{margin:.12em 0 .18em;font:700 clamp(40px,7vw,78px)/1.05 var(--serif);letter-spacing:.04em;
  text-shadow:0 2px 24px rgba(0,0,0,.45)}
#intro .lede{margin:0 0 22px;max-width:32ch;font:clamp(18px,2.2vw,22px)/1.4 var(--serif);text-shadow:0 1px 12px rgba(0,0,0,.5)}
#intro .small,#intro .status{margin:0;font:12px/1.5 var(--mono);letter-spacing:.08em;color:rgba(243,238,227,.86);
  text-shadow:0 1px 8px rgba(0,0,0,.9)}
#intro .status{margin-top:10px;min-height:1.5em;color:rgba(243,238,227,.7)}
#intro .eyebrow{text-shadow:0 1px 8px rgba(0,0,0,.9)}

/* Shown while the browser has the tour muted: most arrive from a link without having tapped
   anything yet, and sound has to wait for a tap. */
#sound{position:fixed;z-index:6;left:50%;top:calc(62px + var(--top));transform:translateX(-50%);
  display:none;align-items:center;gap:.6em;padding:.8em 1.25em;border:0;border-radius:999px;
  background:var(--accent);color:var(--ink2);font-weight:600;font-size:15px;box-shadow:0 4px 18px rgba(0,0,0,.35)}
#sound:hover{background:#f0c77e}
#sound svg{width:18px;height:18px}
.needs-sound[data-state=playing] #sound,.needs-sound[data-state=paused] #sound{display:inline-flex}

/* During the tour. */
#cap{position:fixed;z-index:4;left:50%;bottom:calc(84px + var(--bottom));transform:translateX(-50%);
  width:min(760px,calc(100% - 32px));margin:0;text-align:center;pointer-events:none;
  opacity:0;transition:opacity .25s ease}
#cap span{font:600 clamp(16px,2vw,21px)/1.5 var(--sans);background:rgba(8,16,26,.74);padding:.16em .5em;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
#cap.on{opacity:1}
#controls{position:fixed;z-index:5;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(18px + var(--bottom));
  display:flex;gap:8px}
#controls button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(243,238,227,.28);
  background:var(--glass);display:grid;place-items:center;padding:0;transition:background .15s ease}
#controls button:hover,#controls button:focus-visible{background:rgba(11,23,36,.9)}
#controls svg{width:18px;height:18px}
#cc{font:700 12px/1 var(--sans);letter-spacing:.04em}
#cc[aria-pressed=false]{opacity:.55}
.i-play,.i-muted,[data-state=playing] .i-play,.muted .i-sound{display:none}
[data-state=paused] .i-play,.muted .i-muted{display:block}
[data-state=paused] .i-pause{display:none}
#progress{position:fixed;z-index:5;left:0;right:0;bottom:0;height:3px;background:var(--accent);
  transform-origin:left;transform:scaleX(0)}

/* After it: the collect card, over the harbour turning slowly at night. */
#end{position:fixed;z-index:5;left:50%;top:50%;transform:translate(-50%,-46%);width:min(420px,calc(100% - 32px));
  box-sizing:border-box;padding:30px 28px 26px;text-align:center;background:rgba(11,23,36,.8);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:2px solid var(--accent);
  opacity:0;visibility:hidden;transition:opacity .3s ease,transform .3s ease,visibility 0s linear .3s}
#end h2{margin:.15em 0 .3em;font:700 38px/1.1 var(--serif);letter-spacing:.04em}
#end p.note{margin:0 0 22px;font:18px/1.45 var(--serif);color:rgba(243,238,227,.9)}
#end .buy{display:flex;justify-content:center;align-items:center;gap:.5em;padding:.95em 1.2em;border-radius:3px;
  background:var(--accent);color:var(--ink2);font-weight:600;font-size:16px;text-decoration:none}
#end .buy:hover{background:#f0c77e}
#end .row{display:flex;gap:8px;margin-top:8px}
#end .row button{flex:1;padding:.85em .6em;border-radius:3px;border:1.5px solid rgba(243,238,227,.55);background:transparent;
  font-weight:600;font-size:14px}
#end .row button:hover,#end .row button:focus-visible{background:rgba(243,238,227,.1)}
#end .follow{display:inline-block;margin-top:16px;font:12px/1.4 var(--mono);letter-spacing:.1em;
  text-transform:uppercase;color:rgba(243,238,227,.72);text-decoration:none}
#end .follow:hover,#end .follow:focus-visible{color:#fff}

/* Which parts show when. */
[data-state=playing] #intro,[data-state=paused] #intro,[data-state=ended] #intro,[data-state=free] #intro,
[data-state=still] #intro{opacity:0;pointer-events:none}
#controls,#progress{display:none}
[data-state=playing] #controls,[data-state=paused] #controls{display:flex}
[data-state=playing] #progress,[data-state=paused] #progress{display:block}
.nocc #cap{visibility:hidden}
[data-state=ended] #end{opacity:1;visibility:visible;transform:translate(-50%,-50%);
  transition:opacity .8s ease .6s,transform .8s ease .6s,visibility 0s linear .6s}
[data-state=free] #stage{display:none}
[data-state=still] .top{display:none}

@media (max-width:520px){
  .top .home span{display:none}
  .top a,.top button{padding:8px 11px;letter-spacing:.1em}
  #cap{bottom:calc(76px + var(--bottom))}
  #end{padding:24px 20px 20px}
}
@media (prefers-reduced-motion:reduce){
  #end,#intro,#cap{transition:none}
}