/* A restrained, theme-aware layer over the existing interface. */
.family-branch.disclosure-animating,.clarity-details.disclosure-animating,.support-rescue.disclosure-animating{overflow:hidden}
.family-branch>summary{position:relative;isolation:isolate;transition:background .24s,border-color .24s,box-shadow .24s}
.family-branch>summary:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;opacity:0;background:radial-gradient(circle 180px at var(--surface-x,50%) var(--surface-y,50%),color-mix(in srgb,var(--branch-color,var(--accent)) 15%,transparent),transparent 100%);transition:opacity .22s}
.os-card{isolation:isolate;transition:border-color .25s,box-shadow .25s,background .25s}
.os-card:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:radial-gradient(circle 220px at var(--surface-x,50%) var(--surface-y,50%),color-mix(in srgb,var(--os-color,var(--accent)) 13%,transparent),transparent 100%);opacity:0;transition:opacity .25s}
.family-branch[open]:not(.disclosure-animating)>.branch-options>.os-card,.family-branch[open]:not(.disclosure-animating)>.branch-options>.version-row{animation:branch-card-arrive .65s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--card-index,0)*65ms)}
.family-branch[open]>.branch-options>.os-card:nth-child(2),.family-branch[open]>.branch-options>.version-row:nth-child(2){--card-index:1}
.family-branch[open]>.branch-options>.os-card:nth-child(3),.family-branch[open]>.branch-options>.version-row:nth-child(3){--card-index:2}
.family-branch[open]>.branch-options>.version-row:nth-child(n+4){--card-index:3}
.branch-symbol{transition:background .25s,box-shadow .25s,border-color .25s}
.family-branch[open] .branch-symbol{box-shadow:0 0 22px color-mix(in srgb,var(--branch-color) 13%,transparent);background:color-mix(in srgb,var(--branch-color) 18%,transparent)}
.clarity-stop-copy{transition:color .25s}.clarity-stop[aria-current=step] .clarity-number{color:var(--theme-accent,var(--accent))}
.clarity-route li{position:relative}.clarity-route li:after{content:'';position:absolute;inset:auto 10px -1px;height:2px;background:var(--theme-accent,var(--accent));transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.clarity-route li:has([aria-current=step]):after{transform:scaleX(1)}
.search-field:focus-within{border-color:var(--theme-accent,var(--accent));box-shadow:0 0 0 3px color-mix(in srgb,var(--theme-accent,var(--accent)) 9%,transparent)}
.branch-options .os-description{font-size:1rem;line-height:1.65}.branch-options .family-label{font-size:.75rem}.branch-options .card-facts{font-size:.875rem}.branch-options .mini-review p{font-size:1rem;line-height:1.65}.branch-options .mini-review a{font-size:.875rem}.branch-options .mini-review small{font-size:.8125rem}
.mini-review[open]>p,.mini-review[open]>a,.mini-review[open]>small{animation:review-arrive .22s ease-out}
@media(hover:hover) and (pointer:fine){
 .surface-glow.os-card:hover:after,.surface-glow.family-branch>summary:hover:before,.family-branch>summary.surface-glow:hover:before{opacity:1}
 .family-branch>summary:hover .branch-symbol{box-shadow:0 0 16px color-mix(in srgb,var(--branch-color) 18%,transparent)}
 .os-card:hover{border-color:color-mix(in srgb,var(--os-color) 55%,var(--theme-edge,var(--line)));box-shadow:0 8px 28px #0002}
}
@keyframes branch-card-arrive{from{opacity:.15;translate:0 28px;filter:blur(4px);scale:.97}to{opacity:1;translate:0 0;filter:blur(0);scale:1}}
@keyframes review-arrive{from{opacity:.5;translate:0 4px}to{opacity:1;translate:0 0}}
html[data-performance=light] :is(.branch-options,.mini-review)>*,.reduce-motion :is(.branch-options,.mini-review)>*{animation:none!important}
html[data-performance=light] .surface-glow:before,html[data-performance=light] .surface-glow:after,.reduce-motion .surface-glow:before,.reduce-motion .surface-glow:after{display:none!important}
html[data-performance=light] :is(.family-branch>summary,.branch-symbol,.clarity-route li:after){transition:none}
@media(prefers-reduced-motion:reduce){.branch-options>*,.mini-review>*{animation:none!important}.surface-glow:before,.surface-glow:after{display:none!important}.clarity-route li:after{transition:none}}

/* Noticeable light choreography without covering controls or flashing content. */
.motion-stage{position:fixed;inset:0;pointer-events:none!important;z-index:110;overflow:hidden;contain:strict;color:var(--theme-accent,var(--accent))}
.motion-stage>*{position:absolute;pointer-events:none!important}
.motion-shockwave{width:24px;height:24px;border:2px solid currentColor;border-radius:50%;box-shadow:0 0 24px currentColor;animation:motion-shockwave .65s cubic-bezier(.16,1,.3,1) both}
.motion-spark{width:5px;height:5px;border-radius:50%;background:currentColor;box-shadow:0 0 12px currentColor;animation:motion-spark .7s cubic-bezier(.16,1,.3,1) both}
.motion-portal{width:120px;height:120px;border:2px solid color-mix(in srgb,currentColor 40%,transparent);border-radius:50%;background:radial-gradient(circle,transparent 50%,color-mix(in srgb,currentColor 12%,transparent) 72%,transparent 74%);box-shadow:0 0 80px color-mix(in srgb,currentColor 15%,transparent);animation:motion-portal .85s cubic-bezier(.16,1,.3,1) both}
@keyframes motion-shockwave{0%{opacity:.7;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(5)}}
@keyframes motion-spark{0%{opacity:.8;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) scale(.25)}}
@keyframes motion-portal{0%{opacity:.5;transform:translate(-50%,-50%) scale(.5)}70%{opacity:.15}100%{opacity:0;transform:translate(-50%,-50%) scale(14)}}
.welcome-start{overflow:hidden}.welcome-start:after{content:'';position:absolute;inset:-80% -20%;background:linear-gradient(110deg,transparent 35%,#ffffff65 50%,transparent 65%);transform:translateX(-120%) rotate(-10deg);pointer-events:none}.welcome-start:hover:after,.welcome-start:focus-visible:after{animation:motion-sheen .8s ease-out}
@keyframes motion-sheen{to{transform:translateX(120%) rotate(-10deg)}}
.visitor-stars label{transition:background .2s,box-shadow .2s,transform .2s}.visitor-stars label:has(:checked){animation:motion-star .4s cubic-bezier(.16,1,.3,1)}
@keyframes motion-star{0%{transform:scale(.88)}60%{transform:scale(1.1)}100%{transform:scale(1)}}
.visitor-review{animation:review-card-enter .6s cubic-bezier(.16,1,.3,1) backwards}.visitor-review:nth-child(2){animation-delay:.08s}.visitor-review:nth-child(n+3){animation-delay:.15s}
@keyframes review-card-enter{from{opacity:.1;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
html[data-performance=light] .motion-stage,.reduce-motion .motion-stage{display:none}html[data-performance=light] :is(.welcome-start:after,.visitor-review,.visitor-stars label),.reduce-motion :is(.welcome-start:after,.visitor-review,.visitor-stars label){animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.motion-stage{display:none}.welcome-start:after,.visitor-review,.visitor-stars label{animation:none!important;transition:none!important}}
