/* K STELLA WAY RC124 — PURE WHITE / ONE LINE / CAPTION THEN INPUT
   Scope: intro story typography + simple numeric birth/time entry only.
   - Pure white text only (#FFFFFF).
   - One line visible at a time.
   - Caption fully finishes before input panel appears.
   - Birth = 8 digits, time = 4 digits. No slash/colon entry UI.
*/
:root{--ksw-intro-white:#fff;}

/* Pure white everywhere in the intro copy. No gradients or accent colors. */
#introFlowApp .sw-impact-copy strong,
#introFlowApp .sw-impact-copy span,
#introFlowApp .sw-impact.phase-two-on .phase-two strong,
#introFlowApp .sw-impact.phase-two-on .phase-two span,
#introCinematicCaption strong,
#introCinematicCaption span,
#introCinematicCaption.accent-gold strong,
#introCinematicCaption.accent-blue strong{
  background:none!important;
  background-image:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  -webkit-text-stroke:.42px rgba(5,10,20,.78)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.92),0 4px 12px rgba(0,0,0,.54)!important;
  filter:none!important;
}

/* Opening guide: one line at a time. */
#introFlowApp.has-started .sw-impact .phase-one strong,
#introFlowApp.has-started .sw-impact .phase-one span,
#introFlowApp .sw-impact .phase-two strong,
#introFlowApp .sw-impact .phase-two span{opacity:0;}

#introFlowApp.has-started .sw-impact .phase-one strong{animation:rc124SoloLine 1.35s ease .12s both!important;}
#introFlowApp.has-started .sw-impact .phase-one span{animation:rc124SoloLine 1.35s ease 1.62s both!important;}
#introFlowApp .sw-impact.phase-two-on .phase-two strong{animation:rc124SoloLine 1.35s ease .10s both!important;}
#introFlowApp .sw-impact.phase-two-on .phase-two span{animation:rc124SoloLine 1.35s ease 1.60s both!important;}
#introFlowApp .sw-impact.phase-two-on .phase-one strong,
#introFlowApp .sw-impact.phase-two-on .phase-one span{animation:none!important;opacity:0!important;}

@keyframes rc124SoloLine{
  0%{opacity:0;transform:translateY(5px)}
  12%{opacity:1;transform:none}
  78%{opacity:1;transform:none}
  100%{opacity:0;transform:translateY(-4px)}
}

/* Later prompts: one single white line only. */
#introCinematicCaption{width:min(94vw,520px)!important;min-height:78px!important;}
#introCinematicCaption .sw-cinematic-copy{display:flex!important;align-items:center!important;justify-content:center!important;min-height:78px!important;}
#introCinematicCaption strong{
  display:block!important;
  margin:0 auto!important;
  max-width:96vw!important;
  white-space:nowrap!important;
  font-family:"Nanum Myeongjo","Noto Serif KR",Georgia,serif!important;
  font-size:clamp(24px,7.1vw,40px)!important;
  font-weight:760!important;
  line-height:1.18!important;
  letter-spacing:-.045em!important;
}
#introCinematicCaption.line-long strong{font-size:clamp(20px,5.8vw,34px)!important;}
#introCinematicCaption.line-xlong strong{font-size:clamp(17px,4.9vw,29px)!important;}
#introCinematicCaption span{display:none!important;}
#introCinematicCaption,
#introCinematicCaption .sw-cinematic-copy,
#introCinematicCaption::before{
  background:transparent!important;background-image:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  filter:none!important;box-shadow:none!important;
}
#introCinematicCaption::before{content:none!important;display:none!important;opacity:0!important;}

/* Input is deliberately separate from caption; keep it visually simple. */
#introFlowApp .sw-input-wrap{transition:opacity .16s ease,transform .16s ease!important;}
#introFlowApp .sw-field.sw-digit-field{
  text-align:center!important;
  font-variant-numeric:tabular-nums!important;
  letter-spacing:.12em!important;
  font-size:17px!important;
}
#introFlowApp .sw-field.sw-digit-field::placeholder{letter-spacing:.10em!important;color:rgba(255,255,255,.42)!important;}

@media(max-width:420px){
  #introCinematicCaption{top:57.5%!important;width:96vw!important;min-height:72px!important;}
  #introCinematicCaption strong{font-size:clamp(23px,6.9vw,34px)!important;}
  #introCinematicCaption.line-long strong{font-size:clamp(19px,5.5vw,29px)!important;}
  #introCinematicCaption.line-xlong strong{font-size:clamp(16px,4.6vw,25px)!important;}
}
@media(prefers-reduced-motion:reduce){
  #introFlowApp.has-started .sw-impact .phase-one strong,
  #introFlowApp.has-started .sw-impact .phase-one span,
  #introFlowApp .sw-impact.phase-two-on .phase-two strong,
  #introFlowApp .sw-impact.phase-two-on .phase-two span{animation-duration:1.2s!important;}
}

/* Keep every narrated line on one visual row, including the opening guide. */
#introFlowApp .sw-impact-copy strong,
#introFlowApp .sw-impact-copy span{white-space:nowrap!important;max-width:none!important;}
#introFlowApp .sw-impact .phase-one strong{font-size:clamp(29px,8.0vw,44px)!important;}
#introFlowApp .sw-impact .phase-one span{font-size:clamp(18px,5.0vw,26px)!important;}
#introFlowApp .sw-impact .phase-two strong{font-size:clamp(21px,6.1vw,32px)!important;}
#introFlowApp .sw-impact .phase-two span{font-size:clamp(17px,4.6vw,24px)!important;}
#introFlowApp .sw-intro-copy h1,
#introFlowApp .sw-intro-copy p,
#introFlowApp .sw-start{color:#fff!important;-webkit-text-fill-color:#fff!important;}