/* A single light pulse resolves into the OEK mark, then opens the city. */
html.intro-is-active{overflow:hidden}
/* Main is a focus destination after dismissal, not an interactive control. */
.intro-complete #main:focus{outline:none}
.oek-intro{
  --intro-ease:cubic-bezier(.22,1,.36,1);
  position:fixed;z-index:1000;inset:0;
  display:none;place-items:center;align-content:center;gap:8px;
  overflow:hidden;isolation:isolate;touch-action:none;outline:0;
  background:#090d0f;color:#fff;opacity:1;
  transition:opacity 520ms cubic-bezier(.4,0,.2,1),visibility 0s linear 520ms;
}
.intro-is-active .oek-intro{display:grid}
.oek-intro.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
.oek-intro.is-skipping{transition-duration:160ms;transition-delay:0s,160ms}
.oek-intro__halo{
  position:absolute;width:min(125vw,620px);aspect-ratio:1;pointer-events:none;
  border-radius:50%;opacity:0;transform:scale(.65);
  background:radial-gradient(circle,rgba(240,128,28,.18),rgba(223,100,16,.055) 38%,transparent 68%);
}
.oek-intro__stage{
  position:relative;display:grid;place-items:center;
  width:240px;height:224px;isolation:isolate;
  transition:transform 520ms var(--intro-ease);
}
.oek-intro.is-leaving .oek-intro__stage{transform:translate3d(0,-8px,0) scale(1.025)}
.oek-intro__pulse{
  position:absolute;top:6px;width:188px;height:188px;
  border:1px solid rgba(255,174,89,.48);border-radius:50%;
  opacity:0;transform:scale(.5);pointer-events:none;
}
.oek-intro__spark{
  position:absolute;top:98px;width:90px;height:2px;
  border-radius:50%;opacity:0;transform:rotate(45deg) scaleX(.12);
  background:linear-gradient(90deg,transparent,#ef7f1a 22%,#fff1d9 52%,#ffb25c 78%,transparent);
  box-shadow:0 0 16px 3px rgba(239,127,26,.3);
}
.oek-intro__brand{
  position:relative;display:grid;justify-items:center;align-content:center;
  gap:21px;width:100%;height:100%;padding-top:10px;
}
.oek-intro__mark{display:block;width:120px;height:120px;overflow:visible;color:#ef7f1a}
.oek-intro__outline{
  fill:none;stroke:#ffb86e;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;opacity:0;
}
.oek-intro__symbol{fill:currentColor;opacity:0}
.oek-intro__brand b{
  margin:0;padding-left:.16em;color:#f4f1ed;
  font:700 23px/1 Arial,sans-serif;letter-spacing:.16em;
  opacity:0;transform:translate3d(0,7px,0);
}
.oek-intro__label{
  position:relative;margin:0;padding-left:.2em;
  font:500 10px/1.5 Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase;
  color:#aaa6a0;opacity:0;transform:translate3d(0,7px,0);
}
.oek-intro__skip{
  position:absolute;right:max(18px,env(safe-area-inset-right));
  bottom:max(20px,env(safe-area-inset-bottom));
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:0 15px;border:1px solid #333637;border-radius:999px;
  background:transparent;color:#d5d4d1;font:500 12px/1 Arial,sans-serif;cursor:pointer;
  transition:color 160ms ease,border-color 160ms ease,background-color 160ms ease;
}
.oek-intro__skip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.oek-intro__skip:focus-visible{outline:2px solid #f08b24;outline-offset:4px}
.oek-intro__skip:active{background:rgba(255,255,255,.07)}
@media(hover:hover){.oek-intro__skip:hover{color:#fff;border-color:#6e655c;background:rgba(255,255,255,.04)}}
.oek-intro.is-playing .oek-intro__halo{animation:intro-glow 1900ms ease-out both}
.oek-intro.is-playing .oek-intro__spark{animation:intro-spark 900ms var(--intro-ease) both}
.oek-intro.is-playing .oek-intro__pulse{animation:intro-pulse 1400ms 180ms cubic-bezier(.16,.6,.3,1) both}
.oek-intro.is-playing .oek-intro__outline{animation:intro-trace 1150ms 220ms ease-in-out both}
.oek-intro.is-playing .oek-intro__symbol{animation:intro-symbol 900ms 580ms var(--intro-ease) both}
.oek-intro.is-playing .oek-intro__brand b{animation:intro-caption 650ms 850ms var(--intro-ease) both}
.oek-intro.is-playing .oek-intro__label{animation:intro-caption 650ms 1050ms var(--intro-ease) both}
@keyframes intro-glow{
  0%{opacity:0;transform:scale(.65)}
  55%{opacity:1}
  100%{opacity:.7;transform:scale(1.12)}
}
@keyframes intro-spark{
  0%{opacity:0;transform:rotate(45deg) scaleX(.12)}
  24%{opacity:1}
  64%{opacity:.85;transform:rotate(45deg) scaleX(1)}
  100%{opacity:0;transform:rotate(45deg) scaleX(1.25)}
}
@keyframes intro-pulse{
  0%{opacity:0;transform:scale(.5)}
  26%{opacity:.55}
  100%{opacity:0;transform:scale(1.32)}
}
@keyframes intro-trace{
  0%{stroke-dashoffset:1;opacity:0}
  22%{opacity:.9}
  72%{stroke-dashoffset:0;opacity:.6}
  100%{stroke-dashoffset:0;opacity:0}
}
@keyframes intro-symbol{
  from{opacity:0}
  to{opacity:1}
}
@keyframes intro-caption{
  from{opacity:0;transform:translate3d(0,7px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@media(max-height:420px){
  .oek-intro{gap:0}
  .oek-intro__stage{height:190px}
  .oek-intro__pulse{top:-8px}
  .oek-intro__spark{top:83px}
  .oek-intro__brand{gap:12px;padding:0}
  .oek-intro__mark{width:104px;height:104px}
  .oek-intro__skip{bottom:12px;right:12px}
}
@media(prefers-reduced-motion:reduce){
  .oek-intro,.oek-intro__stage{transition:none}
  .oek-intro .oek-intro__halo,.oek-intro .oek-intro__spark,
  .oek-intro .oek-intro__pulse,.oek-intro .oek-intro__outline{display:none;animation:none}
  .oek-intro.is-playing .oek-intro__symbol,.oek-intro.is-playing .oek-intro__brand b,
  .oek-intro.is-playing .oek-intro__label{opacity:1;transform:none;animation:none}
}