/* K STELLA WAY RC116 — smiling deep-blue intro + no back-view flash + scoped forced-light UI */

/* Customer UI stays light even when OS/browser is dark. */
:root{color-scheme:light only!important}
html{color-scheme:light only!important;background:#fff!important}
body:not(.introFlowActive){background:#fff!important;color:#211f1b!important;color-scheme:light only!important}
input,select,textarea,button{color-scheme:light!important}
@media (prefers-color-scheme:dark){
  html{color-scheme:light only!important;background:#fff!important}
  body:not(.introFlowActive){background:#fff!important;color:#211f1b!important}
  body:not(.introFlowActive) .shell,body:not(.introFlowActive) .topBrand{background-color:#fff!important}
  body:not(.introFlowActive) .textInput,body:not(.introFlowActive) .digitInput,body:not(.introFlowActive) .selectInput,body:not(.introFlowActive) .storyText{background:#fff!important;color:#211f1b!important;border-color:#dfd7c9!important}
  body:not(.introFlowActive) .textInput::placeholder,body:not(.introFlowActive) .digitInput::placeholder,body:not(.introFlowActive) .storyText::placeholder{color:#9b968f!important}
  body:not(.introFlowActive) .ghostBtn,body:not(.introFlowActive) .priorityBtn,body:not(.introFlowActive) .productCard{background:#fff!important;color:#38342e!important}
}

/* The cinematic intro is intentionally deep navy/gold and must never flash white. */
body.introFlowActive{background:#030711!important;color:#fff!important;color-scheme:light only!important}
#introFlowApp,#introFlowApp .sw-stage{background:#030711!important;color:#fff!important}
#introFlowApp input,#introFlowApp select,#introFlowApp textarea{color-scheme:light!important}

/* First impact: welcoming smile, full-body invitation, original deep-blue/gold atmosphere. */
#introFlowApp .sw-impact{background:#030711!important;transition:opacity .24s ease!important}
#introFlowApp .sw-impact-art{
  inset:0!important;
  background-image:url('/assets/mood/personal-04.jpg')!important;
  background-position:50% 38%!important;
  background-size:cover!important;
  transform:scale(1.015)!important;
  filter:brightness(.84) saturate(1.10) contrast(1.04)!important;
  animation:swImpactWelcome 8.6s cubic-bezier(.2,.6,.2,1) forwards!important;
}
#introFlowApp .sw-impact-copy{
  left:7vw!important;right:6vw!important;
  bottom:max(11vh,calc(env(safe-area-inset-bottom) + 76px))!important;
  text-shadow:0 2px 5px rgba(0,0,0,.88),0 0 22px rgba(2,7,17,.78)!important;
}
#introFlowApp .sw-impact-copy strong{
  font-size:clamp(34px,9.2vw,55px)!important;
  background:linear-gradient(100deg,#fff3c4 0%,#f5ca67 42%,#fff0a5 72%,#dca64a 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
  -webkit-text-stroke:.55px rgba(44,28,8,.62)!important;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.72))!important;
}
#introFlowApp .sw-impact-copy span{
  color:#fffaf1!important;font-size:clamp(19px,5.1vw,29px)!important;font-weight:680!important;
  text-shadow:0 2px 4px rgba(0,0,0,.92),0 0 16px rgba(0,0,0,.48)!important;
}
#introFlowApp .sw-impact.phase-two-on .phase-two strong{
  background:linear-gradient(100deg,#fff2bd 0%,#efc75f 45%,#f4cad9 88%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;
}
#introFlowApp .sw-impact.phase-two-on .phase-two span{color:#fff5f9!important}
@keyframes swImpactWelcome{0%{transform:scale(1.015) translate3d(0,0,0)}100%{transform:scale(1.055) translate3d(-.4%,.25%,0)}}

/* Keep first impact fully covering the old back-view frame until the safe forward-facing video has resumed. */
#introFlowApp .sw-impact.is-fading{opacity:0!important}
@media(max-width:420px){
  #introFlowApp .sw-impact-art{background-position:50% 36%!important}
  #introFlowApp .sw-impact-copy{left:6.5vw!important;right:5vw!important;bottom:max(10vh,calc(env(safe-area-inset-bottom) + 70px))!important}
}