/* Offline: ideas drift out of reach; the phone holds them until sync. */
.sc-air-pain { overflow: hidden; border-radius: 40px 40px 14px 14px; background: linear-gradient(180deg, #b9d3dc, #ecdfc9); }
.sc-air-window { position: absolute; inset: 8px 25% 6px; border: 7px solid rgba(88,76,62,.45); border-radius: 48% 48% 40% 40%; }
.sc-air-wing { position: absolute; left: 47%; top: 48%; width: 120px; height: 18px; border-radius: 70% 12% 45% 10%; background: rgba(255,255,255,.8); transform: rotate(-7deg); }
.sc-air-lost { position: absolute; width: 22px; height: 15px; border-radius: 4px; background: var(--surface-elev); box-shadow: 0 3px 10px rgba(45,37,28,.12); opacity: 0; }
.sc-air-lost:nth-of-type(3) { left: 18%; top: 24%; }
.sc-air-lost:nth-of-type(4) { left: 38%; top: 46%; }
.sc-air-lost:nth-of-type(5) { right: 14%; top: 22%; }
.sc-air[data-phase="0"] .sc-air-lost { animation: sc-air-drift 2s var(--ease) infinite; }
.sc-air[data-phase="0"] .sc-air-lost:nth-of-type(4) { animation-delay: .5s; }
.sc-air[data-phase="0"] .sc-air-lost:nth-of-type(5) { animation-delay: 1s; }
.sc-air-result { display: grid; place-items: center; }
.sc-air-phone { position: relative; display: grid; width: 96px; gap: 8px; padding: 18px 11px 10px; border: 3px solid var(--ink); border-radius: 18px; background: var(--surface-elev); }
.sc-air-phone::before { content: ''; position: absolute; top: 6px; left: 39px; width: 18px; height: 3px; border-radius: 3px; background: var(--ink-ghost); }
.sc-air-phone i { height: 9px; border-radius: 6px; background: rgba(var(--green-rgb),.18); opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.sc-air-phone i:nth-child(2) { transition-delay: .12s; }
.sc-air-phone i:nth-child(3) { transition-delay: .24s; }
.sc-air-offline,.sc-air-sync { position: absolute; display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; font-weight: 800; }
.sc-air-offline { left: 20%; bottom: 10%; background: var(--bg-warm); color: var(--ink-muted); }
.sc-air-sync { right: 18%; top: 8%; background: rgba(var(--green-rgb),.16); color: var(--green); opacity: 0; transform: scale(.6); transition: opacity .5s var(--ease) .35s, transform .5s var(--ease) .35s; }
.sc-air[data-phase="2"] .sc-air-phone i,.sc-air[data-phase="2"] .sc-air-sync { opacity: 1; transform: none; }
@keyframes sc-air-drift { 0% { opacity: 0; transform: translate(-12px,14px) rotate(-5deg); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate(32px,-22px) rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .sc-air-lost { opacity: .38; } .sc-air-phone i,.sc-air-sync { opacity: 1; transform: none; } .sc-air * { animation: none !important; transition: none !important; } }