/* Login arrival: fade in, readable hold, fade out; fetch summary concurrently. */

body.login-arrival-v77{overflow:hidden}

body.login-arrival-v77 .original-login-intro.show{
  animation:itdaLoginArrivalV77 var(--itda-arrival-duration,1500ms) ease forwards!important;
}
body.login-arrival-v77 .original-login-intro h1{
  animation:itdaLoginArrivalTextV77 var(--itda-arrival-duration,1500ms) ease both!important;
}

#postLoginModal.post-login-during-intro{
  z-index:10030!important;
  background:rgba(7,10,18,.22)!important;
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}
#postLoginModal.post-login-during-intro .modal{
  animation:itdaSummaryRiseV77 .28s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes itdaLoginArrivalV77{
  0%{opacity:0;visibility:visible}
  18%{opacity:1}
  76%{opacity:1}
  100%{opacity:0;visibility:hidden}
}
@keyframes itdaLoginArrivalTextV77{
  0%{opacity:0;transform:translateY(8px) scale(.975);filter:blur(6px)}
  20%{opacity:1;transform:none;filter:blur(0)}
  76%{opacity:1;transform:none;filter:blur(0)}
  100%{opacity:0;transform:translateY(-2px) scale(1.01);filter:blur(1px)}
}
@keyframes itdaSummaryRiseV77{
  from{opacity:0;transform:translateY(12px) scale(.985)}
  to{opacity:1;transform:none}
}

@media(max-width:760px){
  #postLoginModal.post-login-during-intro{
    background:rgba(7,10,18,.18)!important;
  }
  #postLoginModal.post-login-during-intro .modal{
    animation:itdaSummarySheetV77 .26s cubic-bezier(.2,.8,.2,1) both;
  }
}
@keyframes itdaSummarySheetV77{
  from{opacity:.35;transform:translateY(26px)}
  to{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  body.login-arrival-v77 .original-login-intro.show,
  body.login-arrival-v77 .original-login-intro h1,
  #postLoginModal.post-login-during-intro .modal{
    animation:none!important;
  }
}

/* First paint stays black; only the title animates until summary is ready. */
body.login-arrival-v77 #loginSuccessOverlay{
  background:#000!important;z-index:2147483646!important;
  transition:none!important;
}
body.login-arrival-v77 #loginSuccessOverlay.show{
  opacity:1!important;visibility:visible!important;animation:none!important;
}
body.login-arrival-v77 #loginSuccessOverlay h1{
  font-size:clamp(34px,5.8vw,84px)!important;line-height:1.35!important;
  padding:0 24px;text-align:center;
}
body.login-arrival-v77 #loginSuccessOverlay.show.arrival-leaving{
  opacity:0!important;transition:opacity 360ms ease!important;
}
#postLoginModal.post-login-during-intro{z-index:10030!important}

body.login-arrival-v77 #loginSuccessOverlay h1{width:min(62vw,760px);padding:0!important;font-size:clamp(22px,3vw,44px)!important;animation:itdaCalligraphyHold var(--itda-arrival-duration,1500ms) linear both!important}
.arrival-calligraphy{display:block;width:100%;overflow:hidden}
.arrival-calligraphy svg{display:block;width:100%;height:auto}
body.login-arrival-v77 .arrival-calligraphy{animation:itdaCalligraphyWrite var(--itda-arrival-duration,1500ms) linear both}
@keyframes itdaCalligraphyWrite{0%{clip-path:inset(0 100% 0 0)}7%{clip-path:inset(0 97% 0 0)}28%{clip-path:inset(0 72% 0 0)}34%{clip-path:inset(0 69% 0 0)}54%{clip-path:inset(0 38% 0 0)}60%{clip-path:inset(0 35% 0 0)}78%,100%{clip-path:inset(0 0 0 0)}}
@keyframes itdaCalligraphyHold{0%,86%{opacity:1;transform:none;filter:none}100%{opacity:0;transform:none;filter:none}}
@media(max-width:600px){body.login-arrival-v77 #loginSuccessOverlay h1{width:88vw}}
@media(prefers-reduced-motion:reduce){.arrival-calligraphy{animation:none!important;clip-path:none!important}}

/* Korean first, English second; one shared image keeps the brush style consistent. */
body.login-arrival-v77 #loginSuccessOverlay.show .arrival-calligraphy-ko{animation:itdaCalligraphyKorean var(--itda-arrival-duration,1500ms) linear both}
body.login-arrival-v77 #loginSuccessOverlay.show .arrival-calligraphy-en{width:54%;margin:8px auto 0;animation:itdaCalligraphyEnglish var(--itda-arrival-duration,1500ms) linear both}
@keyframes itdaCalligraphyKorean{0%{clip-path:inset(0 100% 0 0)}3%{clip-path:inset(0 97% 0 0)}10%{clip-path:inset(0 72% 0 0)}13%{clip-path:inset(0 69% 0 0)}20%{clip-path:inset(0 38% 0 0)}24%{clip-path:inset(0 35% 0 0)}32%,100%{clip-path:inset(0 0 0 0)}}
@keyframes itdaCalligraphyEnglish{0%,35%{clip-path:inset(0 100% 0 0)}41%{clip-path:inset(0 88% 0 0)}51%{clip-path:inset(0 53% 0 0)}64%,100%{clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){body.login-arrival-v77 #loginSuccessOverlay .arrival-calligraphy{animation:none!important;clip-path:none!important}}

/* Prepare only the intro layers for compositing during arrival. */
body.login-arrival-v77 #loginSuccessOverlay{will-change:opacity;contain:layout paint}
body.login-arrival-v77 #loginSuccessOverlay h1{will-change:opacity}
body.login-arrival-v77 #loginSuccessOverlay .arrival-calligraphy{will-change:clip-path}