/* One continuous journey: flight, lettering, then the complete brand identity. */
.welcome-page{
  position:relative;
  isolation:isolate;
  overflow-x:clip;
}

/* The landscape belongs to the page, with a soft horizon behind the existing layout. */
.welcome-page::before{
  content:"";
  position:absolute;
  z-index:0;
  right:0;
  bottom:0;
  left:0;
  height:72svh;
  min-height:430px;
  max-height:820px;
  background:url("./assets/journey-ground-v6.png") center bottom / cover no-repeat;
  opacity:.9;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 42%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 42%,#000 100%);
  pointer-events:none;
}
.welcome-page>.welcome-layout,
.welcome-page>.welcome-footer{
  position:relative;
  z-index:1;
}
.welcome-page .welcome-layout{
  width:min(1280px,100%);
  grid-template-columns:minmax(0,1.35fr) minmax(380px,466px);
  gap:64px;
  padding:8px 54px 22px;
}
.welcome-page .brand-visual{min-height:540px;}
.welcome-page .brand-visual-copy{padding:0 22px;}
.welcome-page .brand-visual-copy>span{font-size:13px;letter-spacing:.08em;color:#526b89;}
.welcome-page .brand-visual h1{font-size:clamp(42px,4.05vw,54px);margin:21px 0 18px;}
.welcome-page .brand-visual-copy>p{font-size:16px;line-height:1.65;letter-spacing:.02em;color:#526b89;}
.welcome-page .brand-visual-caption{padding-inline:22px;font-size:14px;line-height:1.7;color:#526b89;}
.welcome-page .brand-visual-copy>span,
.welcome-page .brand-visual-copy>p,
.welcome-page .brand-visual-caption,
.journey-signature,.journey-replay{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  font-weight:500;
  text-shadow:0 1px 3px #ffffffd9;
}
.welcome-page .access-card{
  max-width:466px;
  padding:32px 38px 29px;
  border-color:#ffffff;
  border-radius:22px;
  background:linear-gradient(140deg,#fffffffa,#ffffffed);
  box-shadow:0 18px 64px #627aa315,inset 0 0 0 1px #eaf0f7;
}
.welcome-page .access-context{padding-bottom:21px;}
.welcome-page .access-clock time{font-size:30px;}
.welcome-page .access-clock>span{font-size:11px;color:#8390a4;}
.welcome-page .access-heading{padding:24px 0 23px;}
.welcome-page .access-heading>span{font-size:10px;letter-spacing:1.65px;color:#8e9baf;}
.welcome-page .access-heading h2{font-size:30px;margin:12px 0 7px;}
.welcome-page .access-heading p{font-size:12px;color:#7d8da4;}
.welcome-page .access-field{padding:12px 15px;margin-bottom:15px;}
.welcome-page .access-field>span{font-size:12px;color:#7d8da3;margin-bottom:6px;}
.welcome-page .access-field input{font-size:15px;min-height:25px;}
.welcome-page .access-field input::placeholder{font-size:13px;}
.welcome-page .access-demo{font-size:11px;margin:2px 0 20px;color:#8999b0;}
.welcome-page .btn.access-submit{min-height:52px;font-size:14px;}
.welcome-page .access-secondary{padding-top:22px;}
.welcome-page .access-secondary a{font-size:11px;color:#7c8da7;}
.welcome-page .access-boundary{font-size:9px;color:#97a6ba;margin-top:16px;}
.welcome-page .welcome-footer{padding:12px 48px 20px;font-size:10px;letter-spacing:1px;color:#879bb7;}

.brand-stage{
  --identity-settle:1;
  --identity-icon:1;
  position:relative;
  container-type:inline-size;
  flex:0 0 330px;
  width:100%;
  height:330px;
  min-width:0;
  margin-top:-14px;
  isolation:isolate;
  overflow:hidden;
}
.brand-stage>canvas{
  position:absolute;
  z-index:1;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
}
.brand-stage>.journey-plane{
  position:absolute;
  z-index:2;
  left:0;
  top:0;
  display:block;
  width:29%;
  max-width:205px;
  height:auto;
  margin:0;
  opacity:0;
  object-fit:contain;
  transform-origin:50% 50%;
  filter:drop-shadow(0 15px 12px #3b5a8a15);
  pointer-events:none;
  user-select:none;
  will-change:transform,opacity;
}

/* Sample the full-size text first; the whole identity then scales uniformly. */
.journey-identity{
  position:absolute;
  z-index:3;
  top:46%;
  left:50%;
  color:#274b73;
  font-family:"Songti SC","STSong","Noto Serif CJK SC","SimSun",serif;
  font-size:clamp(74px,10vw,126px);
  font-size:clamp(68px,19cqw,126px);
  font-weight:600;
  line-height:1.12;
  letter-spacing:0;
  white-space:nowrap;
  transform:translate(-50%,-50%) translateX(calc(var(--identity-settle)*.288em)) scale(calc(1 - var(--identity-settle)*.28));
  pointer-events:none;
}
.journey-wordmark{
  display:flex;
  align-items:center;
  gap:.12em;
  opacity:1;
  text-shadow:0 2px 1px #ffffffb3,0 14px 27px #486d9720;
  transition:opacity 760ms ease;
}
.journey-wordmark>span{display:block;}
.journey-symbol{
  position:absolute;
  top:50%;
  right:calc(100% + .22em);
  display:block;
  width:.58em;
  height:.58em;
  overflow:visible;
  opacity:var(--identity-icon);
  transform:translateY(calc(-50% + (1 - var(--identity-icon))*.12em)) rotate(calc((1 - var(--identity-icon))*-7deg)) scale(calc(.88 + var(--identity-icon)*.12));
  filter:drop-shadow(0 8px 12px #376cc02b);
}
.journey-ring{stroke-dasharray:1;stroke-dashoffset:clamp(0,calc(1 - var(--identity-icon)*1.6),1)}
.journey-ring-second{stroke-dashoffset:clamp(0,calc(1.35 - var(--identity-icon)*1.35),1)}
.journey-signature{
  position:absolute;
  z-index:3;
  top:70%;
  left:50%;
  width:max-content;
  max-width:94%;
  color:#526b89;
  font-size:12px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.1em;
  text-align:center;
  opacity:1;
  transform:translateX(-50%);
  transition:opacity 900ms ease 380ms,transform 900ms ease 380ms;
  pointer-events:none;
}

/* JavaScript opts into animation. Without it, the finished identity remains visible. */
.brand-stage[data-phase="loading"] .journey-wordmark,
.brand-stage[data-phase="flight"] .journey-wordmark,
.brand-stage[data-phase="gather"] .journey-wordmark,
.brand-stage.is-animating:not([data-phase="compose"]):not([data-phase="settled"]) .journey-signature{
  opacity:0;
  transition:none;
}
.brand-stage.is-animating:not([data-phase="compose"]):not([data-phase="settled"]) .journey-signature{transform:translate(-50%,8px)}
.brand-stage[data-phase="loading"] .journey-symbol{opacity:0}
.journey-replay{
  position:absolute;
  z-index:4;
  right:22px;
  bottom:11px;
  min-height:32px;
  padding:5px 9px;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  color:#526b89;
  font-size:13px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.08em;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:color 160ms ease,background 160ms ease,opacity 350ms ease;
}
.brand-stage[data-phase="settled"] .journey-replay{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.journey-replay:hover{
  color:#42618b;
  background:#ffffff75;
  opacity:1!important;
}
.journey-replay:focus-visible{
  outline:2px solid #748bc8;
  outline-offset:3px;
  opacity:1!important;
}

@media(min-width:1550px){
  .welcome-page .welcome-layout{width:min(1440px,100%);gap:78px;padding:22px 60px 36px;grid-template-columns:minmax(0,1.5fr) minmax(410px,486px);}
  .welcome-page .brand-visual{min-height:600px;}
  .welcome-page .brand-visual h1{font-size:60px;}
  .welcome-page .access-card{max-width:486px;padding:37px 40px 33px;}
  .brand-stage{height:375px;flex-basis:375px;}
  .journey-identity{font-size:clamp(126px,19cqw,144px);}
}
@media(max-width:1100px){
  .welcome-page .welcome-layout{gap:32px;padding-inline:35px;grid-template-columns:minmax(0,1.15fr) minmax(350px,420px);}
  .welcome-page .brand-visual-copy,.welcome-page .brand-visual-caption{padding-inline:8px;}
  .welcome-page .brand-visual h1{font-size:43px;}
  .welcome-page .access-card{padding:29px 29px 26px;}
  .welcome-page .welcome-footer{padding-inline:35px;}
  .brand-stage{height:295px;flex-basis:295px;}
  .journey-replay{right:8px;}
}
@media(max-width:800px){
  .welcome-page .welcome-layout{gap:19px;padding-inline:25px;grid-template-columns:minmax(0,1fr) minmax(315px,1fr);}
  .welcome-page .brand-visual h1{font-size:36px;}
  .welcome-page .brand-visual-copy>span{font-size:12px;letter-spacing:.06em;}
  .welcome-page .brand-visual-copy>p{font-size:14px;letter-spacing:.02em;}
  .welcome-page .brand-visual-caption{font-size:13px;}
  .welcome-page .access-card{padding:26px 24px;}
  .welcome-page .access-clock{gap:10px;}
  .welcome-page .access-clock time{font-size:27px;}
  .welcome-page .access-clock>span{font-size:9px;}
  .welcome-page .access-heading h2{font-size:27px;}
  .welcome-page .welcome-footer{padding-inline:25px;font-size:8px;}
  .brand-stage{height:255px;flex-basis:255px;}
  .journey-signature{font-size:12px;letter-spacing:.08em;}
  .journey-replay{right:0;bottom:7px;}
}

/* A dedicated mobile stage keeps both the headline and the full flight in view. */
@media(max-width:650px){
  .welcome-page .welcome-layout{display:flex;gap:14px;width:100%;max-width:500px;padding:0 25px 30px;}
  .welcome-page::before{
    height:74svh;
    min-height:460px;
    max-height:720px;
    background-position:44% bottom;
    opacity:.78;
  }
  .welcome-page .brand-visual{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    min-height:330px;
    height:auto;
    margin-bottom:0;
  }
  .welcome-page .brand-visual-copy{
    flex:0 0 auto;
    width:100%;
    max-width:none;
    padding:10px 0 0;
  }
  .welcome-page .brand-visual h1{
    font-size:29px;
    line-height:1.2;
    letter-spacing:-1.1px;
    margin:10px 0 9px;
  }
  .welcome-page .brand-visual-copy>span{font-size:12px;letter-spacing:.06em;}
  .welcome-page .brand-visual-copy>p{font-size:14px;letter-spacing:.02em;}
  .welcome-page .access-card{max-width:450px;padding:28px 27px 25px;}
  .welcome-page .access-clock time{font-size:29px;}
  .welcome-page .access-clock>span{font-size:10px;}
  .welcome-page .access-heading{padding:23px 0;}
  .welcome-page .access-field input{font-size:16px;}
  .welcome-page .welcome-footer{max-width:500px;padding:0 25px 20px;font-size:8px;}
  .brand-stage{
    height:188px;
    flex-basis:188px;
    margin-top:-1px;
  }
  .brand-stage>.journey-plane{width:29%;max-width:145px;}
  .journey-identity{font-size:clamp(66px,21cqw,86px);}
  .journey-signature{top:68%;font-size:12px;letter-spacing:.08em;}
  .journey-replay{right:0;bottom:0;min-height:32px;}
}
@media(max-width:380px){
  .welcome-page .welcome-layout{padding-inline:19px;}
  .welcome-page .brand-visual{height:auto;min-height:330px;}
  .welcome-page .brand-visual h1{font-size:27px;}
  .welcome-page .access-card{padding-inline:23px;}
  .brand-stage{height:182px;flex-basis:182px;}
  .journey-identity{font-size:clamp(62px,21cqw,76px);}
}

@media(prefers-reduced-motion:reduce){
  .brand-stage{--identity-settle:1!important;--identity-icon:1!important;}
  .brand-stage>.journey-plane,
  .brand-stage>canvas{display:none!important;}
  .brand-stage .journey-wordmark,
  .brand-stage .journey-signature{opacity:1!important;transition:none!important;}
  .brand-stage .journey-signature{transform:translateX(-50%)!important;}
  .brand-stage .journey-replay{display:none;}
}

/* The image tool supplied an RGB source: clip its paper outline in the UI. */
.brand-stage>.journey-plane{clip-path:polygon(3.52% 40.33%,16.34% 31.94%,97% 7.81%,54.62% 87.21%,42.77% 72.07%,28.26% 84.67%,24.74% 54.49%,21.42% 45.7%)}
.journey-replay{display:flex;align-items:center;gap:6px;cursor:pointer}
.journey-replay>.icon{width:14px;height:14px;transform:rotate(-32deg)}

.welcome-page .brand-visual-copy>span{display:block;line-height:1.55}
@media(max-width:650px){.welcome-page .brand-visual-copy{margin-top:0}}
/* Keep the full entry screen visible on typical laptop displays. */
@media(min-width:801px) and (max-height:820px){
 .welcome-page .access-card{padding-top:26px;padding-bottom:23px}
 .welcome-page .access-heading{padding-top:21px;padding-bottom:20px}
 .welcome-page .access-secondary{padding-top:17px}
 .welcome-page .welcome-layout{padding-bottom:14px}
 .welcome-page .welcome-footer{padding-bottom:14px}
}
@media(min-width:801px) and (max-height:760px){
 .welcome-page .welcome-layout{padding-top:0;padding-bottom:6px}
 .welcome-page .access-card{padding-top:22px;padding-bottom:20px}
 .welcome-page .access-context{padding-bottom:16px}
 .welcome-page .access-heading{padding-top:18px;padding-bottom:18px}
 .welcome-page .access-field{padding-top:10px;padding-bottom:10px;margin-bottom:12px}
 .welcome-page .access-demo{margin-bottom:14px}
 .welcome-page .btn.access-submit{min-height:48px}
 .welcome-page .access-secondary{padding-top:16px}
 .welcome-page .access-boundary{margin-top:12px}
 .welcome-page .welcome-footer{padding-top:8px;padding-bottom:12px;font-size:9px}
}