/* noAarchitecten - opener
   Standalone. Nothing here depends on app.css, and app.css does not depend on
   this. Every class is prefixed noaa-op- so it cannot collide with the site.

   Two loops share this stylesheet, set by `source` in opener.js:
     .is-film   - the Kanal film, which needs a credit line
     .is-stills - project photography, which needs a caption per frame */

.noaa-op{
  position:fixed;
  inset:0;
  z-index:9999;
  background:#fff;
  opacity:1;
  transition:opacity .55s ease;
  font:400 14px/1.4 "Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  color:#fff;
  cursor:pointer;
}
.noaa-op[hidden]{display:none}
.noaa-op.is-leaving{opacity:0;pointer-events:none}

/* the page must not scroll behind the opener */
html.noaa-op-open,
html.noaa-op-open body{overflow:hidden}

/* ---- the picture ---------------------------------------------------------
   .noaa-op-film is the <video>, or the <img> used for a single still.
   .noaa-op-layer is the pair of cross-dissolving photographs. */

.noaa-op-film{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#fff;
  display:block;
}

.noaa-op-layer{
  position:absolute;
  inset:0;
  background:center center / cover no-repeat;
  opacity:0;
  /* long enough that one photograph melts into the next rather than cutting;
     a quarter of the time each frame is up */
  transition:opacity .5s linear;
}
.noaa-op-layer.is-on{opacity:1}
/* Each photograph arrives at full frame and drifts in from there, so nothing
   is cropped at the moment it is seen. The animation is far longer than any
   one frame is on screen, so a picture only ever plays the opening sliver of
   it - which is what makes the movement slow. Duration sets the speed, longer
   being slower; the scale values set how far it could travel, not how fast.
   What matters is the rate, not the endpoint: the scale travelled divided by
   the duration. At 22% over 12s a picture moves about 3.7% during the 2000 ms
   it is up - enough to read as a continuous move rather than a twitch.
   For no movement at all, delete the animation line below. */
/* keyed to is-drift alone, not is-on: the outgoing picture has to keep
   moving while it fades, and it loses is-on the moment the next one arrives */
.noaa-op-layer.is-drift{animation:noaa-op-drift 12s linear both}
@keyframes noaa-op-drift{
  from{transform:scale(1)}
  to{transform:scale(1.22)}
}

/* ---- type over picture ---------------------------------------------------
   The film needs only a shallow lift along the bottom edge, since its own
   titles are already legible. Photography needs more. */

.noaa-op-scrim{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.5) 0,rgba(0,0,0,.14) 16%,rgba(0,0,0,0) 32%);
}
.noaa-op.is-stills .noaa-op-scrim{
  background:
    linear-gradient(180deg,rgba(0,0,0,.44) 0,rgba(0,0,0,.11) 26%,rgba(0,0,0,0) 44%),
    linear-gradient(0deg,rgba(0,0,0,.66) 0,rgba(0,0,0,.22) 22%,rgba(0,0,0,0) 46%),
    linear-gradient(90deg,rgba(0,0,0,.26) 0,rgba(0,0,0,0) 38%);
}

/* ---- wordmark ------------------------------------------------------------
   Neither loop carries a wordmark of its own, so one is drawn over both.
   opener.js measures the site's logo on the page underneath and lays this
   exactly on top of it, so nothing shifts when the opener dissolves. */

.noaa-op-mark{
  display:none;
  position:absolute;
  top:28px;
  left:28px;
  z-index:2;
  font-size:32px;
  line-height:1;
  letter-spacing:-.01em;
  white-space:nowrap;
  text-shadow:0 1px 14px rgba(0,0,0,.55);
}
.noaa-op-mark b{font-weight:700}

/* opener.js measures the site's own logo and places this on top of it. These
   are only the fallback, for a page where that selector finds nothing. */
.noaa-op .noaa-op-mark{display:block}
.noaa-op.is-phone .noaa-op-mark{top:14px;left:14px}

/* ---- caption (stills only) ---- */

.noaa-op-cap{
  display:none;
  position:absolute;
  left:28px;
  bottom:38px;
  max-width:46ch;
  z-index:2;
  text-shadow:0 1px 14px rgba(0,0,0,.55);
}
.noaa-op.is-stills .noaa-op-cap{display:block}
.noaa-op.is-phone .noaa-op-cap{left:16px;right:16px;bottom:74px;max-width:none}
.noaa-op-cap .no{font-variant-numeric:tabular-nums;letter-spacing:.06em}
.noaa-op-cap .ttl{text-transform:uppercase;letter-spacing:.03em}
.noaa-op-cap .sub{color:rgba(255,255,255,.72);margin-top:2px}

/* ---- credit, over the film only ---- */

.noaa-op-credit{
  position:absolute;
  left:0;
  right:0;
  bottom:24px;
  z-index:2;
  text-align:center;
  font-size:11px;
  letter-spacing:.04em;
  color:rgba(255,255,255,.55);
  text-shadow:0 1px 14px rgba(0,0,0,.55);
  pointer-events:none;
}
.noaa-op.is-stills .noaa-op-credit{display:none}
.noaa-op.is-phone.is-fit .noaa-op-credit{color:#6d6d6b;text-shadow:none}

/* ---- the way in ---- */

.noaa-op-enter{
  position:absolute;
  right:28px;
  bottom:38px;
  text-align:right;
  z-index:2;
  text-shadow:0 1px 14px rgba(0,0,0,.55);
}
.noaa-op-go{
  font:inherit;
  color:inherit;
  background:none;
  border:0;
  padding:0 0 2px;
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:.06em;
  border-bottom:1px solid rgba(255,255,255,.5);
}
.noaa-op-go:hover{border-bottom-color:#fff}

/* a bare mark rather than a phrase: no rule under it, and set large enough to
   read as an invitation rather than a stray character */
.noaa-op-go.is-mark{
  font-size:30px;
  line-height:1;
  letter-spacing:0;
  padding:0 0 0 2px;
  border-bottom:0;
  opacity:.92;
  /* a single glyph has far less ink than a phrase, so it needs a firmer
     shadow to hold against a bright frame */
  text-shadow:0 1px 3px rgba(0,0,0,.5), 0 2px 22px rgba(0,0,0,.65);
  transition:opacity .2s linear;
}
.noaa-op-go.is-mark:hover{border-bottom:0;opacity:1}
.noaa-op-go:focus-visible{outline:1px solid currentColor;outline-offset:3px}
.noaa-op-auto{
  display:block;
  margin-top:8px;
  font-size:11px;
  letter-spacing:.05em;
  color:rgba(255,255,255,.62);
  font-variant-numeric:tabular-nums;
}

/* ---- the minute, marked where the loop starts over ---- */

.noaa-op-time{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:2px;
  background:rgba(255,255,255,.26);
}
.noaa-op-time i{
  position:absolute;
  inset:0 100% 0 0;
  background:rgba(255,255,255,.92);
  transition:right .1s linear;
}
.noaa-op-time u{
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background:#fff;
  opacity:.75;
}

/* ---- phone ---------------------------------------------------------------
   A phone gets a portrait cut of the film rather than a crop of the wide one.
   The way in sits above the credit line; the photographs carry no credit, so
   theirs sits lower. */

.noaa-op.is-phone .noaa-op-enter{
  right:16px;
  left:16px;
  bottom:24px;
  text-align:center;
}
.noaa-op.is-film .noaa-op-enter{bottom:52px}          /* clear of the credit */
.noaa-op.is-film.is-phone:not(.is-fit) .noaa-op-enter{bottom:58px}

.noaa-op.is-film.is-phone:not(.is-fit) .noaa-op-scrim{
  background:
    linear-gradient(180deg,rgba(0,0,0,.34) 0,rgba(0,0,0,0) 22%),
    linear-gradient(0deg,rgba(0,0,0,.5) 0,rgba(0,0,0,.14) 16%,rgba(0,0,0,0) 32%);
}

/* ---- phone, fitted (film only) -------------------------------------------
   16:9 footage on a 9:19.5 screen. Rather than cropping two thirds of the
   frame away, the film sits as a band on the site's own white paper, and the
   type turns black. Set mobileMode:'fit' in opener.js. */

.noaa-op.is-phone.is-fit{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-bottom:6vh;
  color:#000;
}
.noaa-op.is-phone.is-fit .noaa-op-film{
  position:relative;
  inset:auto;
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  flex:0 0 auto;
  object-fit:contain;
}
.noaa-op.is-phone.is-fit .noaa-op-scrim{display:none}
.noaa-op.is-phone.is-fit .noaa-op-enter{
  position:relative;
  inset:auto;
  margin:30px auto 0;
  text-align:center;
  text-shadow:none;
}
.noaa-op.is-phone.is-fit .noaa-op-go{border-bottom-color:rgba(0,0,0,.4)}
.noaa-op.is-phone.is-fit .noaa-op-go:hover{border-bottom-color:#000}
.noaa-op.is-phone.is-fit .noaa-op-auto{color:#6d6d6b}
.noaa-op.is-phone.is-fit .noaa-op-time{background:rgba(0,0,0,.16)}
.noaa-op.is-phone.is-fit .noaa-op-time i{background:rgba(0,0,0,.72)}
.noaa-op.is-phone.is-fit .noaa-op-time u{background:#fff;opacity:1}