/* A little life, at the patient's pace. Motion is brief, never continuous. */
:root{--care-ease:cubic-bezier(.2,.7,.25,1)}
@keyframes care-arrive{from{opacity:.35;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes care-card-arrive{from{opacity:.45;transform:translateY(18px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes care-choice-pop{0%{transform:scale(.82)}65%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes care-sparkle{0%,100%{opacity:1;transform:translateY(0) scale(1)}45%{opacity:.65;transform:translateY(-2px) scale(.83)}75%{opacity:1;transform:translateY(-1px) scale(1.16)}}
@keyframes care-message-arrive{from{opacity:.5;transform:translateY(8px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
/* Navigation reveals each page in a short sequence. Ordinary form edits don't replay it. */
#main.page-enter>.page-heading,#main.page-enter>.care-topline,#main.page-enter>.back{animation:care-arrive .46s var(--care-ease) backwards}
#main.page-enter>.home-entry{animation:care-arrive .46s .04s var(--care-ease) backwards}
#main.page-enter .care-welcome{animation:none}
#main.page-enter .care-welcome>.eyebrow{animation:care-arrive .5s .05s var(--care-ease) backwards}
#main.page-enter .care-welcome>h1{animation:care-arrive .65s .09s var(--care-ease) backwards}
#main.page-enter .care-intro{animation:care-arrive .6s .17s var(--care-ease) backwards}
#main.page-enter .care-needs{animation:care-arrive .6s .23s var(--care-ease) backwards}
#main.page-enter .care-contact{animation:care-card-arrive .72s .18s var(--care-ease) backwards}
#main.page-enter .network-strip{animation:care-arrive .5s .07s var(--care-ease) backwards}
#main.page-enter .directory-controls{animation:care-arrive .5s .13s var(--care-ease) backwards}
#main.page-enter :is(.oncologist-card,.request-card,.guide-card,.guide-grid>.panel){animation:care-card-arrive .6s .1s var(--care-ease) backwards}
#main.page-enter :is(.oncologist-card,.request-card,.guide-card,.guide-grid>.panel):nth-child(2){animation-delay:.18s}
#main.page-enter :is(.oncologist-card,.request-card,.guide-card,.guide-grid>.panel):nth-child(3){animation-delay:.25s}
#main.page-enter :is(.oncologist-card,.request-card,.guide-card,.guide-grid>.panel):nth-child(n+4){animation-delay:.32s}
#main.page-enter>.care-section-heading,#main.page-enter>.care-bottom{animation:care-arrive .6s .22s var(--care-ease) backwards}
#main.page-enter :is(.care-form,.doctor-console,.profile-menu>.panel,.specialist-detail>.panel,.verification-panel,.conversation,.notices){animation:care-arrive .55s .1s var(--care-ease) backwards}
#main.page-enter .care-review>.panel,#main.page-enter .care-review>.stack{animation:care-arrive .58s .12s var(--care-ease) backwards}
#main.page-enter .request-timeline li{animation:care-arrive .45s .14s var(--care-ease) backwards}
#main.page-enter .request-timeline li:nth-child(2){animation-delay:.22s}#main.page-enter .request-timeline li:nth-child(n+3){animation-delay:.3s}
#main.page-enter .success-icon{animation:care-choice-pop .5s .08s var(--care-ease) backwards}
/* Below-the-fold cards animate when reached. They are always readable without JavaScript. */
#main .scroll-arrive{animation:care-card-arrive .64s var(--care-ease) backwards}
/* Keep the newly visible paillettes visible after their soft, brief shimmer. */
#main.page-enter :is(.light-dust i,.welcome-glitter i){animation:care-sparkle 1.8s .05s ease-in-out 2 backwards}
#main.page-enter :is(.light-dust i,.welcome-glitter i):nth-child(2){animation-delay:.35s}
#main.page-enter :is(.light-dust i,.welcome-glitter i):nth-child(3){animation-delay:.65s}
#main.page-enter .light-dust i:nth-child(n+4){animation-delay:.85s}
.care-need.selected .care-choice{animation:care-choice-pop .32s var(--care-ease)}
.bubble-wrap:last-of-type{animation:care-message-arrive .28s var(--care-ease) backwards}
.btn,.icon-button,.guide-card,.request-card,.oncologist-card,.nav-button,.entry-choices button,.mobile-nav button{transition:transform .22s var(--care-ease),box-shadow .25s ease,border-color .25s ease,background-color .25s ease,color .2s ease}
.btn>svg,.text-link>svg,.guide-link>svg,.care-all-doctors>svg{transition:transform .24s var(--care-ease)}
.btn:active,.icon-button:active,.entry-choices button:active,.mobile-nav button:active{transform:scale(.975)}
@media(hover:hover) and (pointer:fine){
 .guide-card:hover,.request-card:hover,.oncologist-card:hover{transform:translateY(-4px)}
 .btn-primary:hover{transform:translateY(-2px)}
 .care-all-doctors:hover>svg,.guide-card:hover .guide-link>svg,.text-link:hover>svg{transform:translateX(4px)}
 .entry-choices button:hover{transform:translateY(-1px)}
 .nav-button:hover>svg{transform:translateX(2px);transition:transform .2s ease}
}
@media(max-width:740px){
 @keyframes care-card-arrive{from{opacity:.5;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
 #main.page-enter .care-contact{animation-duration:.6s}
 #main .scroll-arrive{animation-duration:.55s}
}
@media(prefers-reduced-motion:reduce){
 #main *,#main *::before,#main *::after,.mobile-nav button,.nav-button,.btn,.icon-button{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 #main .scroll-arrive{opacity:1;transform:none}
 .guide-card:hover,.request-card:hover,.oncologist-card:hover,.btn-primary:hover,.entry-choices button:hover,.nav-button:hover>svg,.text-link:hover>svg,.guide-card:hover .guide-link>svg{transform:none}
}
@media print{#main *,#main *::before,#main *::after{animation:none!important;transition:none!important;opacity:1!important;transform:none!important}}
