/* Snapberry — animated logo + Berry orb. Include after app.css or on any page. */

/* ---------- animated logo ---------- */
.sb-logo { display: inline-block; overflow: visible; }
.sb-logo .d { transform-box: fill-box; transform-origin: center; animation: sb-pop 600ms cubic-bezier(.2,1.4,.4,1) both; }
.sb-logo .d:nth-child(1) { animation-delay: 0ms }   .sb-logo .d:nth-child(2) { animation-delay: 70ms }
.sb-logo .d:nth-child(3) { animation-delay: 140ms } .sb-logo .d:nth-child(4) { animation-delay: 210ms }
.sb-logo .d:nth-child(5) { animation-delay: 280ms } .sb-logo .d:nth-child(6) { animation-delay: 350ms }
.sb-logo .d:nth-child(7) { animation-delay: 420ms }
.sb-logo .snap line { stroke-dasharray: 24; stroke-dashoffset: 24; animation: sb-flick 380ms ease-out 560ms both; }
.sb-logo .snap line:nth-child(2) { animation-delay: 640ms } .sb-logo .snap line:nth-child(3) { animation-delay: 720ms }
.sb-logo:hover .d { animation: sb-bounce 700ms cubic-bezier(.2,1.4,.4,1) both; }
.sb-logo:hover .snap line { animation: sb-flick 380ms ease-out both; }
@keyframes sb-pop { from { transform: scale(0); opacity: 0 } 60% { opacity: 1 } to { transform: scale(1); opacity: 1 } }
@keyframes sb-bounce { 0% { transform: scale(1) } 35% { transform: scale(.82) } 100% { transform: scale(1) } }
@keyframes sb-flick { from { stroke-dashoffset: 24; opacity: 0 } 30% { opacity: 1 } to { stroke-dashoffset: 0; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .sb-logo .d, .sb-logo .snap line { animation: none !important; stroke-dashoffset: 0 } }

/* ---------- Berry's ring (aurora) ---------- */
.ring { --size: 40px; --w: 7%; width: var(--size); height: var(--size); border-radius: 50%; position: relative; flex: 0 0 auto; }
.ring::before, .ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, #D6306C, #C4B5FD, #FFFFFF, #FFB8D0, #D6306C);
  -webkit-mask: radial-gradient(circle, transparent calc(50% - var(--w) - 1px), #000 calc(50% - var(--w)), #000 calc(50% - 1px), transparent 50%);
  mask: radial-gradient(circle, transparent calc(50% - var(--w) - 1px), #000 calc(50% - var(--w)), #000 calc(50% - 1px), transparent 50%);
  animation: ring-spin 9s linear infinite; }
.ring::after { filter: blur(6px); opacity: .65; }
.ring.thinking { --w: 12%; }
.ring.thinking::before, .ring.thinking::after { animation-duration: 1.6s; }
.ring.lg { --size: 96px; }
@keyframes ring-spin { to { transform: rotate(360deg); } }

/* ring around the chat input while Berry is thinking */
.ring-box { position: relative; border-radius: 16px; }
.ring-box::before { content: ""; position: absolute; inset: -3px; border-radius: 19px; padding: 3px; pointer-events: none; opacity: 0; transition: opacity 300ms;
  background: conic-gradient(from var(--a, 0deg), #D6306C, #C4B5FD, #FFFFFF, #FFB8D0, #D6306C);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.ring-box.thinking::before { opacity: 1; animation: ring-sweep 1.6s linear infinite; }
@property --a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes ring-sweep { to { --a: 360deg; } }
@media (prefers-reduced-motion: reduce) { .ring::before, .ring::after, .ring-box::before { animation: none !important } }