/* Finite, interruptible motion. No payment state depends on animation completion. */
.daylight-product{--spring:cubic-bezier(.22,1.35,.36,1);--settle:cubic-bezier(.2,.8,.2,1)}
.daylight-product .view{animation:daylight-enter .48s var(--settle) both}
.daylight-product .subcard{animation:daylight-enter .55s var(--settle) both}
.daylight-checkout .checkout-controls,.daylight-checkout #plan{animation:daylight-enter .6s var(--settle) both}
.daylight-checkout #plan{animation-delay:.08s}
.daylight-product .daylight-welcome img{transform-origin:50% 90%;animation:daylight-greeting 1.8s var(--settle) .15s both}
.daylight-product .daylight-welcome:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 25%,#ffffff80 50%,transparent 75%);transform:translateX(-110%);animation:daylight-light 1.4s var(--settle) .15s both}
.daylight-product .btn,.daylight-product .pay-close{transition:transform .22s var(--spring),box-shadow .22s ease,background-color .18s ease,border-color .18s ease}
.daylight-product .btn:not(:disabled):active,.daylight-product .pay-close:active{transform:translateY(2px) scale(.97);box-shadow:none}
.daylight-product input{transition:border-color .18s ease,box-shadow .18s ease}
.daylight-product input:focus{box-shadow:0 0 0 4px #245acb12}
.daylight-product .modal.on .box,.daylight-product .modal.on .gbox{animation:daylight-dialog .32s var(--spring) both}
.daylight-product details[open]>:not(summary){animation:daylight-disclose .26s var(--settle) both}
.daylight-product summary::marker{color:#245acb}
.daylight-checkout .tiers button,.daylight-checkout .periods button{transition:background-color .2s ease,color .2s ease;position:relative}
.daylight-checkout .tiers button.on,.daylight-checkout .periods button.on{animation:daylight-select .34s var(--spring) both;box-shadow:0 3px 9px #245acb26}
.daylight-product .bar i{transition:width .7s var(--settle)}
@media(hover:hover) and (pointer:fine){
  .daylight-product .btn:not(:disabled):hover{transform:translateY(-2px)}
  .daylight-product .daylight-welcome:hover img{animation:daylight-greeting 1.5s var(--settle) both}
  .daylight-product .subcard{transition:box-shadow .25s ease,border-color .25s ease}
  .daylight-product .subcard:hover{border-color:#afccef;box-shadow:0 16px 38px #19335b10}
}
@keyframes daylight-enter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes daylight-dialog{from{opacity:.3;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}}
@keyframes daylight-disclose{from{opacity:.3;transform:translateY(-5px)}to{opacity:1;transform:none}}
@keyframes daylight-select{0%{transform:scale(.94)}60%{transform:scale(1.025)}100%{transform:scale(1)}}
@keyframes daylight-greeting{0%,100%{transform:translateY(0) rotate(0)}22%{transform:translateY(-6px) rotate(-5deg)}48%{transform:translateY(-2px) rotate(4deg)}72%{transform:translateY(-4px) rotate(-2deg)}}
@keyframes daylight-light{to{transform:translateX(110%)}}
.daylight-product .lamp{background-image:url('/lantern-assets/luch-phone-v1.webp')}
.daylight-checkout #result h2:before{background-image:url('/lantern-assets/luch-phone-v1.webp')}
.daylight-checkout #pricing>.presenting-welcome{min-height:180px}
.daylight-checkout #pricing>.presenting-welcome img{height:170px;width:114px;right:18px;bottom:0}
#onboarding[open] .onboard-art img{animation:daylight-greeting 1.2s var(--settle,cubic-bezier(.2,.8,.2,1)) both;transform-origin:50% 90%}
@media(max-width:640px){
  .daylight-checkout #pricing>.presenting-welcome{padding-right:130px}
}
@media(prefers-reduced-motion:reduce){
  .daylight-product *,.daylight-product *:before,.daylight-product *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .daylight-product .daylight-welcome:before{display:none}
  .daylight-product .btn:not(:disabled):hover,.daylight-product .btn:not(:disabled):active,.daylight-product .pay-close:active{transform:none}
  #onboarding[open] .onboard-art img{animation:none}
}