/* First-visit opening screen (prototype D, "Mosaic to flight", picked by Raian on 4 Oct 2026; site/opener.js).
   A huge title beside Europe drawn as a mosaic of score hexagons in the site's five greys; Begin hands over to a live
   map that flies down to Plaça d'Espanya, then the atlas pages (intro.css) open. Shown only while the inline script
   in index.html sets data-opener; the atlas pages wait underneath until then. Every rule is scoped to .opener. */
.opener{display:none}
:root[data-opener] .opener{display:block}
:root[data-opener="1"] .intro{display:none}
.opener{position:fixed;inset:0;z-index:101;background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--f-body);
  overflow:hidden;outline:none;overscroll-behavior:contain;
  --ease-in-3:cubic-bezier(.32,0,.67,0)}
:root[data-opener="out"] .opener{opacity:0;pointer-events:none;transition:opacity 300ms var(--ease-in-3)}
:where(.opener) :where(p,h2){margin:0}

.op-mosaic{position:absolute;inset:0;width:100%;height:100%;display:block}
.op-map{position:absolute;inset:0;opacity:0;pointer-events:none}
.opener.is-flying .op-map{opacity:1;transition:opacity 450ms var(--ease-out-3)}
.opener.is-flying .op-mosaic{opacity:0;transition:opacity 200ms linear 450ms}

/* city names over the mosaic, placed by script in the same projection */
.op-labels{position:absolute;inset:0;pointer-events:none}
/* the names rise into place, one after another; no fade, so a name is always fully legible once it shows */
.op-city{position:absolute;left:0;top:0;font:400 12px/1 var(--f-display);color:var(--ink);white-space:nowrap;visibility:hidden}
.op-city > span{transform:translateY(6px)}
.op-city::before{content:"";position:absolute;left:-3px;top:-3px;width:6px;height:6px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 1.5px var(--ink)}
.op-city span{position:absolute;left:8px;top:-7px;padding:1px 3px;background:var(--paper)}
.op-city.l span{left:auto;right:8px}
.opener.is-named .op-city{visibility:visible;transition:visibility 0s calc(var(--i, 0) * 50ms)}
.opener.is-named .op-city > span{transform:none;transition:transform 400ms var(--ease-out-4) calc(var(--i, 0) * 50ms)}
.opener.is-flying .op-labels{opacity:0;transition:opacity 250ms linear}

/* the words: a left column on a desk; top and foot on a phone. Each text block sits on its own paper (the same
   colour as the empty canvas behind it), so the words never depend on what the canvas draws */
/* (on a desk the title box is as wide as its longest word, so its paper never reaches over the mosaic) */
.op-title,.op-line,.op-key,.op-go,.op-credit{background:var(--paper);width:fit-content}
.op-title{width:min-content}
.op-copy{position:absolute;left:clamp(16px,5.5vw,84px);top:50%;transform:translateY(-50%);width:min(44vw,640px);z-index:3}
.op-title{font:600 clamp(64px,10.4vw,156px)/.86 var(--f-body);letter-spacing:-.022em;margin-left:-.05em}
.op-line{margin-top:28px;font-size:clamp(19px,1.75vw,26px);line-height:1.3;max-width:24ch}
.op-key{margin-top:30px;display:flex;align-items:center;gap:12px;font:400 13px/1.3 var(--f-display);color:var(--ink-2)}
.op-key svg{display:block;flex:none}
.op-go{margin-top:38px;display:flex;align-items:center;gap:18px}
.op-keys{font-size:14px;color:var(--ink-2)}
.op-keys kbd{font:400 12px/1 var(--f-display);border:1px solid var(--ink-2);border-radius:3px;padding:2px 5px;color:var(--ink)}
.op-credit{position:absolute;left:clamp(16px,5.5vw,84px);bottom:20px;font:400 12px/1.4 var(--f-display);color:var(--ink-2);z-index:3}
.op-pcredit{display:none}
.opener.is-leaving .op-copy,.opener.is-leaving .op-credit,.opener.is-flying .op-copy,.opener.is-flying .op-credit{opacity:0;transform:translate(-56px,-50%);pointer-events:none;
  transition:opacity 380ms var(--ease-in-3),transform 380ms var(--ease-in-3)}
.opener.is-leaving .op-credit,.opener.is-flying .op-credit{transform:translateX(-56px)}

.op-begin{min-height:56px;min-width:168px;padding:0 30px;border:0;border-radius:3px;background:var(--ink);color:var(--paper);
  font:600 22px/1 var(--f-body);letter-spacing:.01em;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:12px;
  transition:transform 160ms var(--ease-out-3),background-color 160ms var(--ease-out-3)}
.op-begin svg{transition:transform 160ms var(--ease-out-3)}
.op-begin:active{transform:scale(.97)}
.op-begin:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
@media (hover:hover){.op-begin:hover{background:#3a3742}.op-begin:hover svg{transform:translateX(3px)}}
/* Skip: clear of every edge, on the paper or over the flight */
.opener .op-skip{position:absolute;right:24px;top:20px;z-index:4;min-height:44px}

/* during the flight: where the camera is, top left */
.op-readout{position:absolute;left:24px;top:20px;z-index:3;background:var(--paper-veil);border:1px solid var(--rule);padding:9px 12px 10px;
  font:400 13px/1.35 var(--f-display);min-width:248px;opacity:0;pointer-events:none}
.opener.is-flying .op-readout{opacity:1;transition:opacity 400ms var(--ease-out-3) 500ms}
.op-readout b{display:block;font:600 16px/1.2 var(--f-body);margin-bottom:2px}
.op-readout .r{display:grid}
.op-readout .r > *{grid-area:1/1;transition:opacity 300ms var(--ease-out-3)}
.op-readout [data-at="near"]{opacity:0}
.opener.is-city .op-place [data-at="far"],.opener.is-street .op-cell [data-at="far"]{opacity:0}
.opener.is-city .op-place [data-at="near"],.opener.is-street .op-cell [data-at="near"]{opacity:1}
.op-readout small{display:block;margin-top:6px;font-size:12px;color:var(--ink-2)}

/* phones, and portrait tablets (a desk layout there leaves the map a third of the width) */
@media (max-width:760px),(orientation:portrait) and (max-width:1100px){
  .op-copy{top:calc(16px + env(safe-area-inset-top));left:16px;right:16px;width:auto;transform:none}
  .op-title{font-size:clamp(52px,16vw,76px);width:auto;max-width:calc(100% - 96px)}
  .op-line{margin-top:10px;font-size:18px;max-width:none}
  .op-foot{position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom))}
  .op-key{margin:0 0 12px;font-size:12px;padding:4px 0;background:var(--paper)}
  .op-go{margin:0;flex-direction:column;align-items:stretch;gap:8px;width:auto}
  .op-begin{width:100%}
  .op-keys{display:none}
  .op-credit:not(.op-pcredit){display:none}
  .op-pcredit{display:block;position:static;font-size:12px;text-align:center}
  .opener.is-leaving .op-copy,.opener.is-flying .op-copy{transform:translateY(-40px)}
  .opener .op-skip{right:16px;top:calc(16px + env(safe-area-inset-top))}
  .op-readout{left:16px;right:16px;top:auto;bottom:calc(16px + env(safe-area-inset-bottom));min-width:0;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .opener.is-flying .op-copy,.opener.is-flying .op-credit,.opener.is-flying .op-labels{transition:opacity 200ms linear}
  .opener.is-flying .op-copy{transform:translateY(-50%)}
  .opener.is-flying .op-credit{transform:none}
  .op-city,.op-city > span,.opener.is-named .op-city,.opener.is-named .op-city > span{transition:none;transform:none}
  :root[data-opener="out"] .opener{transition:opacity 200ms linear}
}
@media (prefers-reduced-motion:reduce) and (max-width:760px),(prefers-reduced-motion:reduce) and (orientation:portrait) and (max-width:1100px){.opener.is-flying .op-copy{transform:none}}