:root{
  --bg:#eaf3fb;
  --bg-deep:#dcebf8;
  --surface:#ffffff;
  --primary:#0a5aa8;
  --primary-dark:#063f78;
  --teal:#00a6ad;
  --success:#1fa363;
  --success-dark:#158056;
  --text:#152531;
  --text-muted:#5c7186;
  --locked:#c6d6e4;
  --locked-line:#b7cadb;
  --radius-lg:22px;
  --radius-md:16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box;}
html,body{
  margin:0; padding:0; height:100%;
  background:var(--bg);
  font-family: "Segoe UI", "Heebo", -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--text);
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}
#app{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  background:var(--bg);
}
.bg-layer{
  position:absolute; inset:0; z-index:-1;
  opacity:0; transition:opacity 1.2s ease;
}
.bg-layer.visible{opacity:1;}

/* ---------- App bar ---------- */
.app-bar{
  padding: calc(14px + var(--safe-top)) 18px 12px;
  display:flex; align-items:center; justify-content:space-between;
  background:var(--surface);
  box-shadow:0 2px 10px rgba(10,60,110,0.08);
  z-index:20;
}
.app-bar-title{display:flex; align-items:center; gap:10px;}
.app-bar-emoji{
  font-size:26px; width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--primary),var(--teal));
  border-radius:14px; color:#fff; box-shadow:0 4px 10px rgba(10,90,168,0.35);
}
.app-bar-title h1{font-size:16px; margin:0; color:var(--primary-dark); font-weight:800;}
.app-bar-title p{font-size:11.5px; margin:1px 0 0; color:var(--text-muted);}
.reset-btn{
  border:none; background:var(--bg-deep); color:var(--primary-dark);
  width:38px; height:38px; border-radius:50%; font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease, background .15s ease;
}
.reset-btn:active{transform:scale(0.88); background:var(--locked);}

/* ---------- Progress ---------- */
.progress-wrap{
  padding:10px 18px 14px; background:var(--surface);
  display:flex; align-items:center; gap:10px;
  border-bottom:1px solid #e3edf6;
  z-index:19;
}
.progress-track{
  flex:1; height:10px; border-radius:6px; background:var(--bg-deep); overflow:hidden;
  position:relative;
}
.progress-fill{
  height:100%; width:0%; border-radius:6px;
  background:linear-gradient(90deg, var(--primary), var(--teal));
  transition:width .6s cubic-bezier(.22,.9,.32,1);
}
.progress-fill.full{background:linear-gradient(90deg, var(--teal), var(--success));}
.progress-label{font-size:11.5px; font-weight:700; color:var(--primary-dark); white-space:nowrap;}

/* ---------- Map viewport ---------- */
.map-viewport{
  flex:1; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding:26px 0 40px;
  position:relative;
}
.scroll-top-button{
  position:fixed; left:18px; bottom:calc(18px + var(--safe-bottom)); z-index:22;
  width:48px; height:48px; display:grid; place-items:center; padding:0;
  border:0; border-radius:50%; background:var(--success); color:#fff;
  box-shadow:0 9px 18px rgba(21,128,86,.28); font-size:22px; font-weight:800;
  line-height:1; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease,filter .2s ease;
}
.scroll-top-button.visible{opacity:1;visibility:visible;transform:translateY(0)}
.scroll-top-button:hover{filter:brightness(.96)}
.scroll-top-button:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
.path-track{
  display:flex; flex-direction:column; align-items:center;
  gap:6px; position:relative; padding:0 20px;
  max-width:480px; margin:0 auto;
}

.connector{
  width:4px; height:46px; background:var(--locked-line); border-radius:4px;
  transition:background .5s ease;
}
.connector.done{background:linear-gradient(180deg, var(--success), var(--teal));}

.stage{
  position:relative;
  width:120px; height:120px;
  display:flex; align-items:center; justify-content:center;
  align-self:center;
}
.stage:nth-of-type(4n+2){align-self:flex-start; margin-inline-start:6%;}
.stage:nth-of-type(4n){align-self:flex-end; margin-inline-end:6%;}

.node{
  width:92px; height:92px; border-radius:50%;
  background:var(--locked);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#fff; font-weight:800; cursor:pointer; border:none;
  box-shadow:0 6px 14px rgba(20,50,80,0.15);
  transition:transform .18s ease, background .35s ease, box-shadow .35s ease;
  position:relative; z-index:2;
}
.node:active{transform:scale(0.93);}
.node .emoji{font-size:26px; line-height:1;}
.node .idx{font-size:10px; margin-top:2px; opacity:.85;}

.node.locked{background:var(--locked); cursor:default;}
.node.locked .emoji{filter:grayscale(1) opacity(.55);}
.node.active{
  background:linear-gradient(150deg,var(--primary),var(--teal));
  box-shadow:0 0 0 6px rgba(10,90,168,0.16), 0 8px 18px rgba(10,90,168,0.35);
  animation:pulse 2.2s ease-in-out infinite;
}
.node.active::after{
  content:"";
  position:absolute; inset:0; border-radius:50%;
  border:3px solid var(--teal);
  animation:ripple 1.8s cubic-bezier(.2,.7,.3,1) infinite;
  pointer-events:none;
}
@keyframes ripple{
  0%{ transform:scale(1); opacity:.65; }
  100%{ transform:scale(1.55); opacity:0; }
}

.tap-hint{
  position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
  margin-bottom:4px;
  display:flex; flex-direction:row-reverse; align-items:center; gap:4px;
  z-index:6; pointer-events:none; width:max-content;
  background:var(--primary-dark); border-radius:14px; padding:4px 10px;
  box-shadow:0 4px 10px rgba(6,63,120,.35);
  animation:tap-bounce 1.3s ease-in-out infinite;
}
.tap-hint .finger{
  font-size:14px; line-height:1;
  filter:drop-shadow(0 2px 3px rgba(20,50,80,.25));
}
.tap-hint .label{
  font-size:9.5px; font-weight:800; color:#fff;
  white-space:nowrap;
}
.tap-hint::after{
  content:"";
  position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--primary-dark);
}
@keyframes tap-bounce{
  0%,100%{ transform:translate(-50%,0); }
  50%{ transform:translate(-50%,4px); }
}
.node.completed{
  background:linear-gradient(150deg,var(--success),var(--teal));
  box-shadow:0 6px 16px rgba(31,163,99,0.35);
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 6px rgba(10,90,168,0.16), 0 8px 18px rgba(10,90,168,0.35);}
  50%{ box-shadow:0 0 0 12px rgba(10,90,168,0.06), 0 8px 18px rgba(10,90,168,0.35);}
}

.badge{
  position:absolute; bottom:-10px; left:50%; transform:translateX(-50%);
  background:var(--surface); color:var(--primary-dark);
  font-size:9.5px; font-weight:800; letter-spacing:.2px;
  padding:3px 8px; border-radius:20px; white-space:nowrap;
  box-shadow:0 3px 8px rgba(10,60,110,0.18);
  z-index:3; font-family:"Segoe UI", sans-serif;
}
.node.locked ~ .badge{opacity:.6;}

.check{
  position:absolute; top:-6px; right:-6px; z-index:4;
  width:26px; height:26px; border-radius:50%; background:var(--success-dark);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:14px; box-shadow:0 3px 6px rgba(0,0,0,.25);
  opacity:0; transform:scale(0);
  transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.node.completed + .check, .stage.is-completed .check{opacity:1; transform:scale(1);}

/* ---------- Clouds ---------- */
.cloud-layer{
  position:absolute; inset:-36px; z-index:5; pointer-events:none;
}
.cloud{
  position:absolute; background:#ffffff; border-radius:22px;
  box-shadow: inset 0 -3px 0 rgba(186,208,226,.55);
  filter:drop-shadow(0 5px 7px rgba(20,50,80,.16));
  animation-timing-function:ease-in-out; animation-iteration-count:infinite;
  transition:opacity 1.1s ease;
}
.cloud::before, .cloud::after{
  content:""; position:absolute; background:#ffffff; border-radius:50%;
  box-shadow: inset 0 -2px 0 rgba(186,208,226,.5);
}

.cloud:nth-child(1){ width:60px; height:22px; top:6px; left:26px; animation-duration:6.5s; animation-delay:0s; }
.cloud:nth-child(1)::before{ width:28px; height:28px; top:-13px; left:5px; }
.cloud:nth-child(1)::after{ width:20px; height:20px; top:-9px; right:7px; }

.cloud:nth-child(2){ width:48px; height:18px; top:44px; left:-8px; animation-duration:8.2s; animation-delay:1.4s; }
.cloud:nth-child(2)::before{ width:22px; height:22px; top:-10px; left:4px; }
.cloud:nth-child(2)::after{ width:16px; height:16px; top:-7px; right:5px; }

.cloud:nth-child(3){ width:52px; height:20px; top:48px; right:-10px; animation-duration:7.4s; animation-delay:0.7s; }
.cloud:nth-child(3)::before{ width:24px; height:24px; top:-11px; left:5px; }
.cloud:nth-child(3)::after{ width:17px; height:17px; top:-8px; right:5px; }

.cloud:nth-child(4){ width:44px; height:16px; top:90px; left:30px; animation-duration:9.6s; animation-delay:2.1s; }
.cloud:nth-child(4)::before{ width:20px; height:20px; top:-9px; left:3px; }
.cloud:nth-child(4)::after{ width:14px; height:14px; top:-6px; right:4px; }
.cloud:nth-child(odd){ animation-name:drift-right; }
.cloud:nth-child(even){ animation-name:drift-left; }

@keyframes drift-right{
  0%{ transform:translate(0,0); }
  50%{ transform:translate(14px,-6px); }
  100%{ transform:translate(0,0); }
}
@keyframes drift-left{
  0%{ transform:translate(0,0); }
  50%{ transform:translate(-14px,5px); }
  100%{ transform:translate(0,0); }
}
.stage.unlocked .cloud{
  opacity:0; pointer-events:none;
  animation-play-state:paused;
  transition:opacity 1.1s ease, transform 1.1s cubic-bezier(.4,0,.2,1);
}
.stage.unlocked .cloud:nth-child(1){transform:translate(0,-90px) rotate(-6deg);}
.stage.unlocked .cloud:nth-child(2){transform:translate(-90px,-30px) rotate(-14deg);}
.stage.unlocked .cloud:nth-child(3){transform:translate(90px,-30px) rotate(14deg);}
.stage.unlocked .cloud:nth-child(4){transform:translate(0,90px) rotate(8deg);}

.end-cap{
  align-self:center; text-align:center; color:var(--text-muted);
  font-size:12px; padding-top:10px; max-width:220px; line-height:1.5;
}

.app-footer{
  flex-shrink:0; background:var(--surface); padding:10px 0 calc(10px + var(--safe-bottom));
  text-align:center; z-index:15;
}
.app-footer-message{
  margin:0 18px 8px; color:var(--text-muted); font-size:12px; line-height:1.45;
}
.app-footer-stripe{
  height:2px; border-radius:999px; margin:0 auto 8px;
  width:min(220px, 60%);
  background:linear-gradient(90deg, var(--primary), var(--teal));
}
.app-footer-brand{
  color:var(--primary-dark); font-size:11.5px; font-weight:800; letter-spacing:.3px;
}

/* ---------- Detail sheet (mobile: bottom sheet) ---------- */
.backdrop{
  position:fixed; inset:0; background:rgba(10,25,40,0.35);
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:30;
}
.backdrop.show{opacity:1; pointer-events:auto;}

.sheet{
  position:fixed; inset:0;
  background:var(--surface);
  border-radius:0;
  padding:calc(12px + var(--safe-top)) 22px calc(22px + var(--safe-bottom));
  transform:translateY(105%);
  transition:transform .32s cubic-bezier(.32,.72,0,1);
  box-shadow:0 -8px 30px rgba(10,40,70,0.25);
  z-index:31; max-height:none; overflow-y:auto;
}
.sheet.show{transform:translateY(0);}
.sheet-handle{width:42px; height:5px; border-radius:4px; background:var(--locked); margin:8px auto 14px;}
.sheet-badge{
  display:inline-block; font-size:11px; font-weight:800; letter-spacing:.3px;
  color:#fff; background:linear-gradient(135deg,var(--primary),var(--teal));
  padding:5px 12px; border-radius:20px; margin-bottom:10px;
}
.sheet h2{margin:0 0 6px; font-size:19px; color:var(--primary-dark);}
.sheet .message{font-size:14px; color:var(--text); line-height:1.6; margin:0 0 14px;}
.checklist{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:8px;}
.checklist-item{
  display:flex; align-items:center; gap:10px; font-size:13px; color:var(--text-muted);
  background:var(--bg); border-radius:12px; padding:9px 12px;
  cursor:pointer; user-select:none;
  transition:background .2s ease, color .2s ease;
}
.checklist-item:active{transform:scale(0.98);}
.checklist-item .check-box{
  flex-shrink:0; width:22px; height:22px; border-radius:7px;
  border:2px solid var(--locked-line); display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:13px; font-weight:900; line-height:1;
  transition:background .2s ease, border-color .2s ease;
}
.checklist-item.checked{background:#e3f6ec; color:var(--text);}
.checklist-item.checked .check-box{background:var(--success); border-color:var(--success);}
.checklist-hint{font-size:11.5px; color:var(--text-muted); text-align:center; margin:-6px 0 14px;}
.sheet-actions{display:flex; gap:10px;}
.btn{
  flex:1; border:none; border-radius:14px; padding:13px 14px; font-size:14.5px; font-weight:800;
  cursor:pointer; transition:transform .15s ease, opacity .2s ease;
}
.btn:active{transform:scale(0.97);}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--teal)); color:#fff;}
.btn-ghost{background:var(--bg-deep); color:var(--primary-dark);}
.btn[disabled]{opacity:.55; cursor:default;}
.done-tag{
  display:flex; align-items:center; gap:6px; color:var(--success-dark); font-weight:800; font-size:13px; margin-bottom:14px;
}

/* ---------- Mobile scale-up (x1.5 for better visibility) ---------- */
@media (max-width: 899px){
  .app-bar{padding: calc(21px + var(--safe-top)) 27px 18px;}
  .app-bar-title{gap:15px;}
  .app-bar-emoji{font-size:39px; width:63px; height:63px; border-radius:21px;}
  .app-bar-title h1{font-size:24px;}
  .app-bar-title p{font-size:17px;}
  .reset-btn{width:57px; height:57px; font-size:27px;}

  .progress-wrap{padding:15px 27px 21px; gap:15px;}
  .progress-track{height:15px; border-radius:9px;}
  .progress-fill{border-radius:9px;}
  .progress-label{font-size:17px;}

  .map-viewport{padding:39px 0 60px;}
  .path-track{gap:9px; padding:0 30px;}

  .connector{width:6px; height:69px;}

  .stage{width:180px; height:180px;}

  .node{width:138px; height:138px;}
  .node .emoji{font-size:39px;}
  .node .idx{font-size:15px; margin-top:3px;}
  .node.active{box-shadow:0 0 0 9px rgba(10,90,168,0.16), 0 12px 27px rgba(10,90,168,0.35);}
  .node.active::after{border-width:4.5px;}
  .node.completed{box-shadow:0 9px 24px rgba(31,163,99,0.35);}

  .tap-hint{margin-bottom:6px; gap:6px; padding:6px 15px; border-radius:21px; box-shadow:0 6px 15px rgba(6,63,120,.35);}
  .tap-hint .finger{font-size:21px;}
  .tap-hint .label{font-size:14px;}
  .tap-hint::after{border-width:9px;}

  .badge{bottom:-15px; font-size:14px; padding:4.5px 12px; border-radius:30px; box-shadow:0 4.5px 12px rgba(10,60,110,0.18);}

  .check{top:-9px; right:-9px; width:39px; height:39px; font-size:21px; box-shadow:0 4.5px 9px rgba(0,0,0,.25);}

  .cloud-layer{inset:-54px;}
  .cloud:nth-child(1){ width:90px; height:33px; top:9px; left:39px; }
  .cloud:nth-child(1)::before{ width:42px; height:42px; top:-20px; left:8px; }
  .cloud:nth-child(1)::after{ width:30px; height:30px; top:-14px; right:10px; }

  .cloud:nth-child(2){ width:72px; height:27px; top:66px; left:-12px; }
  .cloud:nth-child(2)::before{ width:33px; height:33px; top:-15px; left:6px; }
  .cloud:nth-child(2)::after{ width:24px; height:24px; top:-10px; right:7px; }

  .cloud:nth-child(3){ width:78px; height:30px; top:72px; right:-15px; }
  .cloud:nth-child(3)::before{ width:36px; height:36px; top:-16px; left:7px; }
  .cloud:nth-child(3)::after{ width:25px; height:25px; top:-12px; right:7px; }

  .cloud:nth-child(4){ width:66px; height:24px; top:135px; left:45px; }
  .cloud:nth-child(4)::before{ width:30px; height:30px; top:-13px; left:4px; }
  .cloud:nth-child(4)::after{ width:21px; height:21px; top:-9px; right:6px; }

  @keyframes drift-right{
    0%{ transform:translate(0,0); }
    50%{ transform:translate(21px,-9px); }
    100%{ transform:translate(0,0); }
  }
  @keyframes drift-left{
    0%{ transform:translate(0,0); }
    50%{ transform:translate(-21px,7px); }
    100%{ transform:translate(0,0); }
  }
  .stage.unlocked .cloud:nth-child(1){transform:translate(0,-135px) rotate(-6deg);}
  .stage.unlocked .cloud:nth-child(2){transform:translate(-135px,-45px) rotate(-14deg);}
  .stage.unlocked .cloud:nth-child(3){transform:translate(135px,-45px) rotate(14deg);}
  .stage.unlocked .cloud:nth-child(4){transform:translate(0,135px) rotate(8deg);}

  .end-cap{font-size:18px; max-width:330px; padding-top:15px;}
}

/* ---------- Desktop layout ---------- */
@media (min-width: 900px){
  .app-bar{padding:18px 34px 14px;}
  .progress-wrap{padding:12px 34px 16px;}
  .map-viewport{padding:40px 20px 60px;}
  .path-track{
    flex-direction:row; max-width:none; width:max-content; margin:0 auto;
    align-items:center; gap:0; padding:0 60px;
  }
  .stage{width:150px; height:150px;}
  .stage:nth-of-type(4n+2){align-self:flex-start; margin-inline-start:0; margin-top:-4px;}
  .stage:nth-of-type(4n){align-self:flex-end; margin-inline-end:0; margin-bottom:-4px;}
  .stage:nth-of-type(4n+1),.stage:nth-of-type(4n+3){align-self:center;}
  .connector{width:64px; height:4px; align-self:center;}
  .node{width:104px; height:104px;}
  .node .emoji{font-size:30px;}
  .end-cap{padding:0 20px; max-width:160px;}

  .backdrop{background:rgba(10,25,40,0.2);}
  .sheet{
    left:auto; right:0; top:0; bottom:0;
    width:380px; height:100%; max-height:none;
    border-radius:22px 0 0 22px;
    transform:translateX(105%);
    padding:26px 28px;
    display:flex; flex-direction:column; justify-content:center;
  }
  .sheet.show{transform:translateX(0);}
  .sheet-handle{display:none;}
}

/* ---------- Login screen (license number, then password - both 6-digit keypad) ---------- */
.login-screen{
  position:fixed; inset:0; z-index:110;
  display:flex; flex-direction:column; align-items:center;
  background:var(--bg);
  padding:calc(28px + var(--safe-top)) 24px calc(24px + var(--safe-bottom));
  transition:opacity .35s ease, visibility .35s ease, transform .35s ease;
}
.login-screen.is-hidden{opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-16px);}
.login-header{width:100%; max-width:340px; text-align:center; margin-top:8px; position:relative;}
.login-back{
  position:absolute; top:-4px; right:0; border:none; background:var(--bg-deep); color:var(--primary-dark);
  width:36px; height:36px; border-radius:50%; font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .2s ease, transform .15s ease;
}
.login-back.visible{opacity:1; visibility:visible;}
.login-back:active{transform:scale(0.88);}
.login-title{margin:0 0 6px; font-size:19px; color:var(--primary-dark); font-weight:800;}
.login-subtitle{margin:0; font-size:13px; color:var(--text-muted);}

.login-dots{display:flex; gap:14px; margin:34px 0; direction:ltr;}
.login-dot{
  width:14px; height:14px; border-radius:50%; background:var(--bg-deep);
  border:2px solid var(--locked-line);
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.login-dot.filled{background:var(--primary); border-color:var(--primary); transform:scale(1.1);}
.login-dots.error .login-dot{background:var(--danger); border-color:var(--danger);}
.login-dots.error{animation:login-shake .4s ease;}
@keyframes login-shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-8px);}
  40%{transform:translateX(8px);}
  60%{transform:translateX(-6px);}
  80%{transform:translateX(6px);}
}

.login-keypad{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
  width:100%; max-width:300px;
}
.login-key{
  width:100%; aspect-ratio:1; border-radius:50%; border:none;
  background:var(--surface); color:var(--text); font-size:22px; font-weight:700;
  box-shadow:0 4px 12px rgba(10,60,110,0.1);
  cursor:pointer; min-height:64px; min-width:64px;
  transition:transform .12s ease, background .12s ease;
}
.login-key:active{transform:scale(0.95); background:var(--bg-deep);}
.login-key-side{background:transparent; box-shadow:none; font-size:20px; color:var(--text-muted);}

.login-footer{margin-top:auto; padding-top:20px;}
.login-forgot{
  border:none; background:transparent; color:var(--primary);
  font-size:13px; text-decoration:underline; text-underline-offset:4px; cursor:pointer;
}

@media (max-width:899px){
  .login-title{font-size:26px;}
  .login-subtitle{font-size:17px;}
  .login-back{width:50px; height:50px; font-size:22px;}
  .login-dots{gap:18px; margin:44px 0;}
  .login-dot{width:19px; height:19px;}
  .login-keypad{max-width:400px; gap:26px;}
  .login-key{font-size:29px; min-height:84px;}
  .login-key-side{font-size:27px;}
  .login-forgot{font-size:17px;}
}

/* ---------- Six-second journey intro ---------- */
.journey-intro{
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; align-items:center;
  min-width:320px; overflow:hidden;
  padding:calc(28px + var(--safe-top)) 24px calc(24px + var(--safe-bottom));
  background:
    radial-gradient(circle at 84% 13%, rgba(0,166,173,.13), transparent 26rem),
    radial-gradient(circle at 5% 88%, rgba(31,163,99,.10), transparent 21rem),
    var(--bg);
  transition:opacity .45s ease, visibility .45s ease;
}
.journey-intro.is-hidden{opacity:0; visibility:hidden; pointer-events:none;}
.intro-cloud{
  position:absolute; border:1px solid rgba(255,255,255,.8); border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.65));
  box-shadow:inset 0 -4px 0 rgba(176,208,233,.28),0 8px 18px rgba(39,83,119,.08);
  opacity:0; animation:intro-cloud-in .55s .55s ease forwards,intro-cloud-clear 1.1s 2.2s cubic-bezier(.4,0,.2,1) forwards;
}
.intro-cloud::before,.intro-cloud::after{position:absolute; content:""; border:inherit; border-radius:50%; background:inherit; box-shadow:inset 0 -3px 0 rgba(176,208,233,.22);}
.intro-cloud--1{width:74px;height:24px;top:11%;right:-18px;}
.intro-cloud--1::before{width:35px;height:35px;top:-18px;right:13px}.intro-cloud--1::after{width:27px;height:27px;top:-12px;left:15px}
.intro-cloud--2{width:60px;height:20px;bottom:18%;left:-20px;animation-delay:.8s,2.45s}.intro-cloud--2::before{width:29px;height:29px;top:-15px;right:9px}.intro-cloud--2::after{width:22px;height:22px;top:-10px;left:12px}
.intro-cloud--3{width:54px;height:18px;top:41%;left:-10px;animation-delay:1.05s,2.7s}.intro-cloud--3::before{width:28px;height:28px;top:-15px;right:8px}.intro-cloud--3::after{width:19px;height:19px;top:-9px;left:11px}
.intro-cloud--4{width:76px;height:25px;top:54%;right:-31px;animation-delay:1.25s,2.9s}.intro-cloud--4::before{width:36px;height:36px;top:-19px;right:14px}.intro-cloud--4::after{width:26px;height:26px;top:-13px;left:15px}
.intro-cloud--5{width:46px;height:16px;top:24%;left:18px;animation-delay:1.45s,3.1s}.intro-cloud--5::before{width:23px;height:23px;top:-12px;right:7px}.intro-cloud--5::after{width:16px;height:16px;top:-8px;left:9px}
.intro-cloud--6{width:48px;height:17px;bottom:10%;right:15px;animation-delay:1.65s,3.3s}.intro-cloud--6::before{width:25px;height:25px;top:-13px;right:7px}.intro-cloud--6::after{width:17px;height:17px;top:-9px;left:10px}
.intro-cloud--7{width:40px;height:14px;top:33%;right:13px;animation-delay:1.8s,3.45s}.intro-cloud--7::before{width:20px;height:20px;top:-11px;right:6px}.intro-cloud--7::after{width:14px;height:14px;top:-7px;left:8px}
.intro-cloud--8{width:70px;height:23px;bottom:31%;left:-25px;animation-delay:1.95s,3.6s}.intro-cloud--8::before{width:34px;height:34px;top:-18px;right:12px}.intro-cloud--8::after{width:24px;height:24px;top:-12px;left:14px}
.intro-cloud--9{width:38px;height:13px;top:16%;left:3px;animation-delay:2.1s,3.75s}.intro-cloud--9::before{width:19px;height:19px;top:-10px;right:6px}.intro-cloud--9::after{width:13px;height:13px;top:-7px;left:7px}
.intro-cloud--10{width:56px;height:19px;bottom:6%;left:22%;animation-delay:2.25s,3.9s}.intro-cloud--10::before{width:27px;height:27px;top:-14px;right:9px}.intro-cloud--10::after{width:19px;height:19px;top:-10px;left:11px}
.intro-brand{position:relative;z-index:1;color:var(--primary);font-size:15px;font-weight:800;letter-spacing:.02em;opacity:0;animation:intro-rise .55s .1s ease forwards;}
.intro-title{position:relative;z-index:1;margin:17px 0 8px;color:var(--primary-dark);font-size:clamp(31px,9vw,45px);line-height:1.1;letter-spacing:-.045em;text-align:center;opacity:0;animation:intro-rise .6s .25s ease forwards;}
.intro-copy{position:relative;z-index:1;margin:0;max-width:300px;color:var(--text-muted);font-size:16px;line-height:1.65;text-align:center;opacity:0;animation:intro-rise .6s .45s ease forwards;}
.intro-route{position:relative;z-index:1;width:min(100%,370px);height:min(40svh,310px);min-height:245px;margin:clamp(34px,8svh,62px) 0 12px;}
.intro-route svg{width:100%;height:100%;overflow:visible}.intro-route-base{fill:none;stroke:var(--locked-line);stroke-width:4;stroke-linecap:round}.intro-route-active{fill:none;stroke:url(#introRouteGradient);stroke-width:4.5;stroke-linecap:round;stroke-dasharray:530;stroke-dashoffset:530;animation:intro-draw 2.5s .65s cubic-bezier(.4,0,.2,1) forwards}
.intro-start,.intro-finish{fill:var(--surface);stroke-width:4}.intro-start{stroke:var(--teal)}.intro-finish{stroke:var(--primary)}
.intro-start-aura,.intro-finish-aura{fill:none;transform-box:fill-box;transform-origin:center}.intro-start-aura{stroke:var(--teal);stroke-width:3;opacity:0;animation:intro-start-pulse 1.7s .85s ease-out 2}.intro-finish-aura{stroke:var(--primary);stroke-width:3;opacity:0;animation:intro-finish-pulse 1.9s 2.5s ease-out 1}
.intro-stage-dot{fill:var(--teal);opacity:0;transform-box:fill-box;transform-origin:center;animation:intro-pop .42s ease forwards}.intro-dot-1{animation-delay:1.15s}.intro-dot-2{animation-delay:1.6s}.intro-dot-3{animation-delay:2.05s}.intro-halo{fill:rgba(0,166,173,.16);opacity:0;transform-box:fill-box;transform-origin:center;animation:intro-halo .7s ease forwards}.intro-halo-1{animation-delay:1.05s}.intro-halo-2{animation-delay:1.5s}.intro-halo-3{animation-delay:1.95s}
.intro-traveler{fill:#f5ad35;stroke:var(--primary-dark);stroke-width:2.5;filter:drop-shadow(0 4px 5px rgba(6,63,120,.22))}.intro-label{fill:var(--text-muted);font-family:"Segoe UI","Heebo",sans-serif;font-size:13px;font-weight:700}.intro-label-start{fill:var(--teal)}.intro-label-finish{fill:var(--primary-dark)}
.intro-message{position:relative;z-index:1;margin:0;color:var(--primary-dark);font-size:clamp(20px,5.7vw,27px);font-weight:800;letter-spacing:-.025em;text-align:center;opacity:0;animation:intro-rise .65s 2.2s ease forwards;}
.intro-skip{position:relative;z-index:1;margin-top:22px;padding:8px 2px;border:0;color:var(--primary);background:transparent;font:inherit;font-size:13px;text-decoration:underline;text-underline-offset:4px;cursor:pointer;opacity:0;animation:intro-rise .5s 2.55s ease forwards;}
@keyframes intro-draw{to{stroke-dashoffset:0}}@keyframes intro-rise{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes intro-pop{0%{transform:scale(.1);opacity:0}65%{transform:scale(1.25);opacity:1}100%{transform:scale(1);opacity:1}}@keyframes intro-halo{0%{transform:scale(.25);opacity:0}40%{opacity:1}100%{transform:scale(1.5);opacity:0}}@keyframes intro-cloud-in{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@keyframes intro-cloud-clear{to{opacity:0;transform:translate(-42px,-22px) scale(1.18)}}@keyframes intro-start-pulse{0%{transform:scale(.55);opacity:0}22%{opacity:.9}100%{transform:scale(2.5);opacity:0}}@keyframes intro-finish-pulse{0%{transform:scale(.55);opacity:0}24%{opacity:.9}100%{transform:scale(2.65);opacity:0}}
@media (prefers-reduced-motion:reduce){.journey-intro *,.journey-intro *::before,.journey-intro *::after{animation-duration:.01ms!important;animation-iteration-count:1!important}.intro-route-active{stroke-dashoffset:0}}