/* K STELLA WAY RC117 — dignified blue guide + deterministic first-step reveal */

/* Keep forced light mode scoped exactly as RC116: the cinematic intro stays navy. */
body.introFlowActive{background:#020814!important;color:#fff!important}
#introFlowApp,#introFlowApp .sw-stage{background:#020814!important}

/* First guide: calm, dignified, blue-toned. No broad smile and no angry expression. */
#introFlowApp .sw-impact{background:#020814!important;transition:opacity .28s ease!important}
#introFlowApp .sw-impact-art{
  inset:0!important;
  background-image:
    linear-gradient(180deg,rgba(10,42,86,.18),rgba(3,20,48,.22)),
    url('/assets/mood/personal-05.jpg')!important;
  background-position:center 31%!important;
  background-size:cover!important;
  background-blend-mode:color,normal!important;
  transform:scale(1.018)!important;
  filter:brightness(.78) saturate(.94) contrast(1.04) hue-rotate(4deg)!important;
  animation:swImpactGuide117 8.6s cubic-bezier(.2,.6,.2,1) forwards!important;
}
#introFlowApp .sw-impact-art::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 34%,rgba(84,150,230,.11),transparent 38%),linear-gradient(180deg,rgba(2,17,44,.02),rgba(2,11,30,.18));
  mix-blend-mode:screen;
}
#introFlowApp .sw-impact-copy{bottom:max(12vh,calc(env(safe-area-inset-bottom) + 82px))!important}
#introFlowApp .sw-impact-copy strong{
  font-size:clamp(34px,9vw,54px)!important;
  background:linear-gradient(100deg,#eaf4ff 0%,#bcd7ff 34%,#f3d88b 72%,#fff1bd 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
  -webkit-text-stroke:.45px rgba(12,29,53,.72)!important;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.72))!important;
}
#introFlowApp .sw-impact-copy span{
  color:#f4f8ff!important;font-size:clamp(19px,5vw,28px)!important;font-weight:620!important;
  text-shadow:0 2px 4px rgba(0,0,0,.88),0 0 15px rgba(96,151,218,.18)!important;
}
#introFlowApp .sw-impact.phase-two-on .phase-two strong{
  background:linear-gradient(100deg,#e7f2ff 0%,#b9d6ff 46%,#ecd285 88%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}
#introFlowApp .sw-impact.phase-two-on .phase-two span{color:#eef6ff!important}

/* At the first name prompt, remove only the intro copy. Keep the dignified image as a mask
   so the old back-facing movie frame can never flash through. */
#introFlowApp .sw-impact.input-open .sw-impact-copy{opacity:0!important;transition:opacity .18s ease!important}
#introFlowApp .sw-input-wrap{z-index:31!important}
#introFlowApp .sw-impact{z-index:25!important}
#introFlowApp .sw-impact.is-fading{opacity:0!important}

@keyframes swImpactGuide117{0%{transform:scale(1.018) translate3d(0,0,0)}100%{transform:scale(1.045) translate3d(0,-.2%,0)}}
@media(max-width:420px){
  #introFlowApp .sw-impact-art{background-position:center 29%!important}
  #introFlowApp .sw-impact-copy{left:6.5vw!important;right:5vw!important;bottom:max(11vh,calc(env(safe-area-inset-bottom) + 76px))!important}
}
@media(prefers-reduced-motion:reduce){#introFlowApp .sw-impact-art{animation:none!important}}