/* Sara orb — smoothui SiriOrb port (shared by /start and the React site's SaraOrb). Logic: /start/orb.js */
.orb{--orb-size:126px;--orb-bg:oklch(93% 0.03 250);--orb-c1:oklch(60% 0.2 258);--orb-c2:oklch(70% 0.16 232);--orb-c3:oklch(48% 0.19 272);--orb-c4:oklch(80% 0.12 245);width:126px;height:126px;position:relative;margin:0 auto;display:block;transition:--orb-bg .8s ease,--orb-c1 .8s ease,--orb-c2 .8s ease,--orb-c3 .8s ease,--orb-c4 .8s ease}
/* talking / on the call: Siri-like pink · violet · blue (smoothui defaults) */
.orb.active{--orb-bg:oklch(92% 0.03 300);--orb-c1:oklch(68% 0.21 350);--orb-c2:oklch(70% 0.18 210);--orb-c3:oklch(66% 0.2 285);--orb-c4:oklch(72% 0.19 325)}
.orb .orb-glow{position:absolute;inset:-12%;border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--orb-c2) 0%,transparent 64%);filter:blur(calc(var(--orb-size)*.28));opacity:.1;transition:opacity .25s ease;pointer-events:none}
.orb .siri-orb{--sat:1;--angle:0deg;--blur-amount:4px;--contrast-amount:1.5;--dot-size:1px;--shadow-spread:2px;--mask-radius:25%;--rim:7px;position:relative;display:grid;grid-template-areas:"stack";width:100%;height:100%;border-radius:50%;overflow:hidden;isolation:isolate;filter:saturate(var(--sat));transition:filter .4s ease}
.orb .siri-orb::before,.orb .siri-orb::after,.orb .siri-orb>.siri-orb-layer{content:"";display:block;grid-area:stack;width:100%;height:100%;border-radius:50%}
/* glassy highlight that drifts, so the sheen never reads as printed-on */
.orb .siri-orb-sheen{background:radial-gradient(circle at 30% 24%,hsl(0 0% 100%/.32),transparent 34%),radial-gradient(circle at 72% 80%,hsl(0 0% 100%/.07),transparent 48%);mix-blend-mode:screen;animation:siri-drift var(--drift-duration,12s) ease-in-out infinite alternate}
/* lit top edge, shaded bottom, thin inner ring */
.orb .siri-orb-rim{box-shadow:inset 0 0 0 1px hsl(0 0% 100%/.16),inset 0 var(--rim) calc(var(--rim)*2) hsl(0 0% 100%/.22),inset 0 calc(var(--rim)*-1.2) calc(var(--rim)*2.4) hsl(0 0% 0%/.4);pointer-events:none}
.orb .siri-orb::before{background:conic-gradient(from calc(var(--angle)*2) at 25% 70%,var(--orb-c3),transparent 20% 80%,var(--orb-c3)),conic-gradient(from calc(var(--angle)*2) at 45% 75%,var(--orb-c2),transparent 30% 60%,var(--orb-c2)),conic-gradient(from calc(var(--angle)*-3) at 80% 20%,var(--orb-c1),transparent 40% 60%,var(--orb-c1)),conic-gradient(from calc(var(--angle)*1.5) at 60% 35%,var(--orb-c4),transparent 25% 75%,var(--orb-c4)),conic-gradient(from calc(var(--angle)*2) at 15% 5%,var(--orb-c2),transparent 10% 90%,var(--orb-c2)),conic-gradient(from calc(var(--angle)*1) at 20% 80%,var(--orb-c1),transparent 10% 90%,var(--orb-c1)),conic-gradient(from calc(var(--angle)*-2) at 85% 10%,var(--orb-c3),transparent 20% 80%,var(--orb-c3));box-shadow:inset var(--orb-bg) 0 0 var(--shadow-spread) calc(var(--shadow-spread)*.2);filter:blur(var(--blur-amount)) contrast(var(--contrast-amount)) saturate(1.4);animation:siri-rotate var(--animation-duration,20s) linear infinite}
.orb .siri-orb::after{background-image:radial-gradient(circle at center,var(--orb-bg) var(--dot-size),transparent var(--dot-size));background-size:calc(var(--dot-size)*2) calc(var(--dot-size)*2);-webkit-backdrop-filter:blur(calc(var(--blur-amount)*2)) contrast(calc(var(--contrast-amount)*2));backdrop-filter:blur(calc(var(--blur-amount)*2)) contrast(calc(var(--contrast-amount)*2));mix-blend-mode:overlay;-webkit-mask-image:radial-gradient(black var(--mask-radius),transparent 75%);mask-image:radial-gradient(black var(--mask-radius),transparent 75%)}
.orb.nomask .siri-orb::after{-webkit-mask-image:none;mask-image:none}
.orb.noreg .siri-orb::before{animation:none}
.orb .face{position:absolute;right:-2%;bottom:-2%;width:30%;height:30%;border-radius:50%;object-fit:cover;object-position:top;border:2.5px solid #fff;box-shadow:0 6px 16px rgba(16,61,92,.28);z-index:2}
@keyframes siri-rotate{to{--angle:360deg}}
/* on-call: a barely-there breathe (±1.5%, 6s) — smooth CSS keyframes, no per-frame JS */
.orb.active .siri-orb{animation:siri-breathe 6s ease-in-out infinite}
@keyframes siri-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.015)}}
@keyframes siri-drift{0%{transform:translate(-6%,-4%) scale(1.05)}100%{transform:translate(7%,6%) scale(1.12)}}
@media (prefers-reduced-motion:reduce){.orb .siri-orb::before,.orb .siri-orb-sheen,.orb.active .siri-orb{animation:none}.orb,.orb .siri-orb,.orb .orb-glow{transition:none}}