/* Opening window scene. Hidden unless theme.js marked this visit for it (html.win-intro). */
#intro { display: none; }
.win-intro, .win-intro body { overflow: hidden; }
.win-intro #intro {
  display: block; position: fixed; inset: 0; z-index: 1000; background: #17110e;
  touch-action: none; user-select: none; -webkit-user-select: none; transition: opacity .6s ease;
  font-family: "Figtree", system-ui, sans-serif; color: #f4f4f0;
}
#intro.intro-out { display: block; position: fixed; inset: 0; z-index: 1000; opacity: 0; pointer-events: none; }
.intro-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.intro-top { position: absolute; top: 14px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; pointer-events: none; }
.intro-top > * { pointer-events: auto; }
.intro-brand { font-weight: 800; font-size: 15px; letter-spacing: .02em; }
.intro-tools { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.intro-tool, .intro-live {
  min-height: 38px; padding: 7px 12px; background: rgba(17, 17, 17, .55); color: #f4f4f0;
  border: 1px solid rgba(244, 244, 240, .25); font: 600 13px/1 "Figtree", sans-serif; cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, color .2s, border-color .2s;
}
.intro-tool:hover, .intro-live:hover { border-color: #dcf522; }
.intro-tool[aria-pressed="true"] { background: #dcf522; color: #111; border-color: #dcf522; }
.intro-skip { border-color: rgba(220, 245, 34, .6); }

.intro-cord { position: absolute; width: 60px; height: 84px; margin: -48px 0 0 -30px; background: transparent; border: 0; border-radius: 30px; cursor: grab; touch-action: none; }
.intro-cord:active { cursor: grabbing; }
.intro.is-open .intro-cord, .intro.is-flying .intro-cord { pointer-events: none; }
.intro-dial { position: absolute; border-radius: 50%; cursor: grab; touch-action: none; }
.intro-dial:active { cursor: grabbing; }
.intro-cord:focus-visible, .intro-dial:focus-visible, .intro-desk a:focus-visible { outline: 3px solid #dcf522; outline-offset: 4px; }

.intro-desk a { position: absolute; display: block; color: #f4f4f0; text-decoration: none; }
.intro-desk a span {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  font: 700 12px/1 "Figtree", sans-serif; letter-spacing: .04em; text-transform: uppercase; padding: 6px 9px;
  background: rgba(17, 17, 17, .78); border: 1px solid rgba(220, 245, 34, .45); white-space: nowrap;
  opacity: 0; transition: opacity .4s, background .2s, color .2s;
}
.intro.is-open .intro-desk a span { animation: intro-tags 5s .6s both; }
@keyframes intro-tags { 0% { opacity: 0; } 12%, 70% { opacity: .95; } 100% { opacity: 0; } }
.intro-desk a:hover span, .intro-desk a:focus-visible span { animation: none; opacity: 1; background: #dcf522; color: #111; }

.intro-bottom { position: absolute; left: 16px; right: 16px; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; pointer-events: none; }
.intro-bottom > * { pointer-events: auto; }
.intro-hint { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); width: max-content; max-width: min(34rem, calc(100vw - 560px)); margin: 0; font: 600 15px/1.35 "Figtree", sans-serif; padding: 8px 14px; background: rgba(17, 17, 17, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.intro-row { display: flex; gap: 8px; align-items: center; }
.intro-clock { font: 500 13px/1 "Figtree", sans-serif; color: rgba(244, 244, 240, .82); font-variant-numeric: tabular-nums; }
.intro-live { min-height: 30px; padding: 5px 10px; font-size: 12px; }
.intro-enter { opacity: 0; transform: translateY(12px); visibility: hidden; transition: opacity .5s .9s, transform .5s .9s, visibility 0s .9s; }
.intro.is-open .intro-enter { opacity: 1; transform: none; visibility: visible; }
.intro.is-flying .intro-top, .intro.is-flying .intro-bottom, .intro.is-flying .intro-desk { opacity: 0; transition: opacity .3s; }

/* Landing on the hero after flying through the window */
.intro-landed .hero { animation: intro-land 1.1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes intro-land { from { transform: scale(1.08); filter: blur(8px); opacity: 0; } }

@media (max-width: 719px) {
  .intro-brand { display: none; }
  .intro-top { justify-content: flex-end; }
  .intro-tool { min-height: 36px; padding: 6px 10px; font-size: 12px; }
  .intro-hint { font-size: 13px; top: 58px; max-width: calc(100vw - 32px); padding: 6px 10px; }
  .intro-desk a span { font-size: 11px; padding: 5px 7px; }
}