/* Planet of mines (/tour/): the start screen, then the full-screen player (builder/www/src/tour/main.js). */

/* ---------- start screen ---------- */
.tour-start { padding: clamp(110px, 14vw, 150px) 0 clamp(60px, 8vw, 100px); }
.tour-start .crumbs { font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.tour-start .crumbs a { color: var(--muted); }
.tk-hero { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.tk-hero h1 { font-size: clamp(42px, 6.4vw, 84px); line-height: 1; letter-spacing: -.03em; margin: 0 0 18px; }
.tk-hero .sub { color: #c9d4d0; font-size: 18px; max-width: 58ch; }
.tk-hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.tk-hero button.btn { border: 0; cursor: pointer; font-family: inherit; }
.tk-keys { color: var(--muted); font-size: 14px; margin-top: 18px; }
kbd { font-family: var(--mono); font-size: 12px; padding: 1px 6px; border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 6px; color: var(--text); }
.tk-shot { margin: 0; }
.tk-shot img { width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line2); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8); }
.tk-shot figcaption { color: var(--muted); font-size: 13px; margin-top: 10px; }
.tk-sec { margin-top: clamp(56px, 8vw, 96px); }
.tk-sec h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 10px; }
.tk-sec > p { color: #c9d4d0; max-width: 70ch; }
.tk-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; counter-reset: tk; }
.tk-list li { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line2); border-radius: 14px; padding: 10px 14px; background: rgba(255, 255, 255, .02); counter-increment: tk; }
.tk-list label { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; flex: 1; min-width: 0; cursor: pointer; }
.tk-list input { grid-row: span 3; align-self: center; accent-color: var(--lime); width: 18px; height: 18px; }
.tk-list .tk-k { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--lime); }
.tk-list b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-list .tk-p { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-list li a { font-size: 13px; color: var(--muted); white-space: nowrap; }
.tk-list li a:hover { color: var(--lime); }
.tk-list li:has(input:not(:checked)) label { opacity: .45; }
.tk-opts { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin-top: 18px; color: #c9d4d0; font-size: 14px; }
.tk-opts label { display: inline-flex; align-items: center; gap: 8px; }
.tk-opts input[type=checkbox] { accent-color: var(--lime); width: 16px; height: 16px; }
.tk-opts select, .tk-opts input[name=ref], .tk-link input { font: inherit; color: var(--text); background: rgba(255, 255, 255, .04); border: 1px solid var(--line2); border-radius: 10px; padding: 6px 10px; }
.tk-opts input[name=ref] { width: 150px; }
.tk-link { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tk-link input { flex: 1 1 320px; min-width: 0; font-family: var(--mono); font-size: 13px; }
.tk-link button { border: 0; cursor: pointer; font-family: inherit; }
.tk-link button.ghost { border: 1px solid var(--line2); }
.tk-link button:disabled { opacity: .4; cursor: default; }
.tk-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.tk-how article { border: 1px solid var(--line2); border-radius: 16px; padding: 22px; background: rgba(255, 255, 255, .02); }
.tk-how h3 { font-size: 18px; margin: 0 0 8px; }
.tk-how p { color: var(--muted); font-size: 15px; margin: 0; }
.tk-how code { font-family: var(--mono); font-size: 12.5px; color: var(--text); }
.tk-note { font-size: 13px; color: #75827e; max-width: 900px; margin-top: 30px; }
@media (max-width: 900px) { .tk-hero, .tk-how { grid-template-columns: 1fr; } }

/* ---------- player ---------- */
body.touring { overflow: hidden; }
body.touring > :not(#tour):not(script) { display: none !important; }
.tour { position: fixed; inset: 0; z-index: 50; background: #020405; color: var(--text); overflow: hidden; cursor: none; }
.tour[hidden] { display: none; }
.tour.ui { cursor: default; }
.tk-stage, .tk-media, .tk-shade { position: absolute; inset: 0; }
.tk-stage { background: radial-gradient(120% 90% at 50% 40%, #0b171a 0%, #020405 70%); }
.tk-stage canvas { width: 100%; height: 100%; display: block; }
.tk-stage .glabels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tk-stage .glabel { position: absolute; left: 0; top: 0; white-space: nowrap; font: 13px/1.3 var(--mono); color: var(--muted); transition: opacity .3s;
  margin: -34px 0 0 12px; padding: 5px 10px; border-radius: 999px; background: rgba(5, 10, 12, .72); border: 1px solid rgba(220, 255, 60, .35); }
.tk-stage .glabel b { color: var(--text); font: 600 14px/1.3 Inter, sans-serif; margin-right: 8px; }
.tk-shade { pointer-events: none; z-index: 2;
  background: linear-gradient(to top, rgba(2, 4, 5, .88) 0%, rgba(2, 4, 5, .35) 26%, transparent 46%), linear-gradient(to bottom, rgba(2, 4, 5, .55), transparent 18%); }

/* media layers: the one arriving fades in over the globe, the one leaving fades out and is removed */
.tk-media { z-index: 1; }
.tk-layer { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; background: #020405; overflow: hidden; }
.tk-layer.on { opacity: 1; }
.tk-layer iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; background: #020405; }
.tk-layer picture, .tk-layer img, .tk-layer video { position: absolute; inset: 0; width: 100%; height: 100%; }
.tk-layer img, .tk-layer video { object-fit: cover; }
.tk-layer .kb { animation: kb-in var(--dur, 30s) linear both; transform-origin: center; }
.tk-layer .kb-out { animation-name: kb-out; } .tk-layer .kb-left { animation-name: kb-left; } .tk-layer .kb-right { animation-name: kb-right; } .tk-layer .kb-up { animation-name: kb-up; }
.tk-layer .tone-archive { filter: sepia(.25) saturate(.85) contrast(1.05); }
@keyframes kb-in { from { transform: scale(1.02); } to { transform: scale(1.16); } }
@keyframes kb-out { from { transform: scale(1.16); } to { transform: scale(1.02); } }
@keyframes kb-left { from { transform: scale(1.12) translateX(3%); } to { transform: scale(1.12) translateX(-3%); } }
@keyframes kb-right { from { transform: scale(1.12) translateX(-3%); } to { transform: scale(1.12) translateX(3%); } }
@keyframes kb-up { from { transform: scale(1.12) translateY(3%); } to { transform: scale(1.12) translateY(-3%); } }

/* then and now: the later image wipes across from the left once the stop is on screen */
.tk-pair .tk-now { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); }
.tk-pair.on .tk-now { animation: tk-wipe calc(var(--dur, 30s) * .55) cubic-bezier(.45, 0, .25, 1) calc(var(--dur, 30s) * .2) both; }
.tk-pair .tk-wipe { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--lime); box-shadow: 0 0 18px var(--lime); opacity: 0; }
.tk-pair.on .tk-wipe { animation: tk-line calc(var(--dur, 30s) * .55) cubic-bezier(.45, 0, .25, 1) calc(var(--dur, 30s) * .2) both; }
@keyframes tk-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes tk-line { 0% { left: 0; opacity: 1; } 96% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.tk-yr { position: absolute; top: clamp(96px, 13vh, 140px); font: 600 clamp(20px, 2.2vw, 32px)/1 var(--mono); color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .7);
  padding: 6px 14px; border-radius: 999px; background: rgba(2, 4, 5, .5); }
.tk-yr.a { left: clamp(20px, 3vw, 44px); } .tk-yr.b { right: clamp(20px, 3vw, 44px); color: var(--lime); }
.tk-yr.big { right: clamp(20px, 3vw, 44px); font-size: clamp(30px, 4vw, 60px); color: var(--lime); }
.tk-frames img { opacity: 0; transition: opacity 1.4s ease; }
.tk-frames img.on { opacity: 1; }

/* HUD */
.tk-brand, .tk-count, .tk-cap, .tk-qr, .tk-bar, .tk-ctl { position: absolute; z-index: 3; }
.tk-brand { text-shadow: 0 1px 10px rgba(0, 0, 0, .7); top: clamp(16px, 2.4vw, 32px); left: clamp(16px, 3vw, 44px); display: flex; align-items: center; gap: 10px; font: 600 17px/1 var(--head); }
.tour.on-model .tk-brand { opacity: 0; }
.tk-brand { transition: opacity .6s ease; }
.tk-brand em { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--lime); margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--line2); }
.tk-count { top: clamp(16px, 2.4vw, 32px); right: clamp(16px, 3vw, 44px); text-align: right; font: 500 13px/1.4 var(--mono); color: #c9d4d0; padding: 8px 14px; border-radius: 14px; background: rgba(5, 10, 12, .62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tk-count b { display: block; color: var(--text); font-weight: 500; }
.tk-cap { left: clamp(16px, 3vw, 44px); bottom: clamp(30px, 4.5vw, 64px); max-width: min(760px, 62vw); opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s var(--ease); }
.tk-cap.on { opacity: 1; transform: none; }
.tk-kick { font: 500 clamp(11px, 1vw, 14px)/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lime); margin-bottom: 10px; }
.tk-t { font: 600 clamp(34px, 4.6vw, 76px)/1 var(--head); letter-spacing: -.03em; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .5); }
.tk-big { font: 700 clamp(48px, 7vw, 120px)/1 var(--head); color: var(--lime); letter-spacing: -.03em; margin-top: 14px; }
.tk-cap p { font-size: clamp(16px, 1.45vw, 22px); line-height: 1.45; color: #dfe7e4; margin: 14px 0 0; max-width: 46ch; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
.tk-facts { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tk-facts li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(5, 10, 12, .6); font-size: clamp(13px, 1vw, 15px); color: var(--muted); }
.tk-facts b { color: var(--lime); font-family: var(--head); font-weight: 600; }
.tk-cred { display: block; margin-top: 14px; font-size: 12px; line-height: 1.4; color: rgba(223, 231, 228, .62); max-width: 70ch; }

.tk-qr { right: clamp(16px, 3vw, 44px); bottom: clamp(30px, 4.5vw, 64px); display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; border-radius: 18px;
  background: rgba(5, 10, 12, .78); border: 1px solid var(--line2); color: var(--text); text-decoration: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0; transition: opacity .8s ease; }
.tour.arrived .tk-qr { opacity: 1; }
.tour.noqr .tk-qr { display: none; }
.tk-qr-code { width: clamp(84px, 8vw, 132px); aspect-ratio: 1; background: #fff; padding: 8px; border-radius: 10px; display: block; }
.tk-qr-code svg { width: 100%; height: 100%; display: block; }
.tk-qr-t { display: grid; gap: 4px; max-width: 200px; }
.tk-qr-t b { font: 600 15px/1.2 var(--head); }
.tk-qr-t span { font: 12px/1.35 var(--mono); color: var(--muted); overflow-wrap: anywhere; }

.tk-bar { left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .06); }
.tk-bar i { display: block; height: 100%; width: 100%; background: var(--lime); transform-origin: left; transform: scaleX(0); box-shadow: 0 0 10px var(--lime); }
@keyframes tk-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.tk-ctl { left: 50%; top: clamp(14px, 2.2vw, 28px); transform: translateX(-50%); display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: rgba(5, 10, 12, .8);
  border: 1px solid var(--line2); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.tour.ui .tk-ctl, .tour.paused .tk-ctl { opacity: 1; pointer-events: auto; }
.tk-ctl button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--text); font: 18px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.tk-ctl button:hover, .tk-ctl button:focus-visible { background: rgba(255, 255, 255, .1); }

@media (max-width: 700px) {
  .tk-brand em, .tk-qr { display: none; }
  .tk-cap { max-width: none; right: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .tk-layer .kb, .tk-pair.on .tk-now, .tk-pair.on .tk-wipe { animation: none; }
  .tk-pair .tk-now { clip-path: inset(0 0 0 50%); }
}