/* Live components. Every tile is a thing the Swoop player actually runs — the
   CSS mirrors the SwiftUI, it does not illustrate it. Keyframes that involve
   real arithmetic (the orbit) are generated; see _seo/../build.py. */

.t-wrap { width: 62px; height: 62px; display: grid; place-items: center; position: relative; }

/* -- .mint/.cyan/... mirror SwiftUI's system colours ---------------------- */
.c-mint   { --c: #00c7be; --c2: #6fe3dc; }
.c-cyan   { --c: #32ade6; --c2: #8bd6f5; }
.c-orange { --c: #ff9500; --c2: #ffc06b; }
.c-pink   { --c: #ff2d55; --c2: #ff8098; }
.c-indigo { --c: #5856d6; --c2: #9a99e8; }
.c-purple { --c: #af52de; --c2: #d199ee; }
.c-teal   { --c: #30b0c7; --c2: #85d3e0; }
.c-green  { --c: #34c759; --c2: #86e09e; }
.c-blue   { --c: #007aff; --c2: #6bb2ff; }
.c-yellow { --c: #ffcc00; --c2: #ffe373; }

/* -- TwinOrbitLoader ------------------------------------------------------ */
.o-ball { position: absolute; width: 22px; height: 22px; border-radius: 50%;
          animation: swoop-orbit .85s linear infinite; }
.o-ball.a { background: linear-gradient(160deg, #6fe3dc, #00c7be); }
.o-ball.b { background: linear-gradient(160deg, #8bd6f5, #32ade6); animation-delay: -.425s; }

/* -- RingSpinner: Circle().trim(from:0.08,to:0.92).stroke(lineWidth:5) ----- */
.ring { width: 46px; height: 46px; border-radius: 50%; border: 5px solid #eceef0;
        border-top-color: var(--c); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* -- Dashes: ForEach(0..<12) + rotationEffect + opacity ------------------- */
.dashes { width: 48px; height: 48px; position: relative; }
.dashes i { position: absolute; left: 50%; top: 0; width: 4px; height: 13px; margin-left: -2px;
            border-radius: 2px; background: var(--c); transform-origin: 50% 24px;
            animation: dash-fade 1.05s linear infinite; }
/* generated: 12 dashes, 30 degrees and one fade-step apart */
.dashes i:nth-child(1) { transform: rotate(0deg); animation-delay: -1.050s; }
.dashes i:nth-child(2) { transform: rotate(30deg); animation-delay: -0.963s; }
.dashes i:nth-child(3) { transform: rotate(60deg); animation-delay: -0.875s; }
.dashes i:nth-child(4) { transform: rotate(90deg); animation-delay: -0.788s; }
.dashes i:nth-child(5) { transform: rotate(120deg); animation-delay: -0.700s; }
.dashes i:nth-child(6) { transform: rotate(150deg); animation-delay: -0.613s; }
.dashes i:nth-child(7) { transform: rotate(180deg); animation-delay: -0.525s; }
.dashes i:nth-child(8) { transform: rotate(210deg); animation-delay: -0.438s; }
.dashes i:nth-child(9) { transform: rotate(240deg); animation-delay: -0.350s; }
.dashes i:nth-child(10) { transform: rotate(270deg); animation-delay: -0.262s; }
.dashes i:nth-child(11) { transform: rotate(300deg); animation-delay: -0.175s; }
.dashes i:nth-child(12) { transform: rotate(330deg); animation-delay: -0.088s; }
@keyframes dash-fade { 0% { opacity: 1; } 100% { opacity: .12; } }

/* -- PulseBadge: Circle + scaleEffect + opacity --------------------------- */
.pulse { width: 20px; height: 20px; border-radius: 50%; background: var(--c); position: relative; }
.pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
                background: var(--c); animation: pulse-out 1.6s ease-out infinite; }
@keyframes pulse-out { 0% { transform: scale(1); opacity: .55; }
                       100% { transform: scale(2.7); opacity: 0; } }

/* -- Equalizer: ForEach + Capsule + frame(height:) ------------------------ */
.bars { display: flex; align-items: flex-end; gap: 5px; height: 44px; }
.bars i { width: 7px; border-radius: 4px; background: var(--c); height: 14px;
          animation: bar 900ms ease-in-out infinite alternate; }
.bars i:nth-child(2) { animation-delay: 140ms; }
.bars i:nth-child(3) { animation-delay: 280ms; }
.bars i:nth-child(4) { animation-delay: 420ms; }
@keyframes bar { to { height: 42px; } }

/* -- Wave: ForEach + offset(y: sin(...)) --------------------------------- */
.wave { display: flex; align-items: center; gap: 7px; height: 44px; }
.wave i { width: 9px; height: 9px; border-radius: 50%; background: var(--c);
          animation: wave-y 1.05s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: .105s; }
.wave i:nth-child(3) { animation-delay: .21s; }
.wave i:nth-child(4) { animation-delay: .315s; }
.wave i:nth-child(5) { animation-delay: .42s; }
@keyframes wave-y { 0%, 100% { transform: translateY(-9px); } 50% { transform: translateY(9px); } }

/* -- LikeButton: Image(systemName:"heart.fill") + scaleEffect ------------- */
.heart { width: 34px; height: 34px; color: var(--c); animation: pop 1.5s ease-in-out infinite; }
@keyframes pop { 0%, 62%, 100% { transform: scale(1); } 70% { transform: scale(1.32); }
                 80% { transform: scale(.94); } 88% { transform: scale(1.06); } }

/* -- ProgressArc: Circle().trim(to: value).stroke ------------------------- */
.arc { width: 46px; height: 46px; border-radius: 50%;
       background: conic-gradient(var(--c) var(--p, 25%), #eceef0 0);
       -webkit-mask: radial-gradient(circle, transparent 15px, #000 15.5px);
       mask: radial-gradient(circle, transparent 15px, #000 15.5px);
       animation: fill 2.4s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes fill { 0% { --p: 4%; } 55% { --p: 92%; } 100% { --p: 4%; } }
@property --p { syntax: "<percentage>"; inherits: false; initial-value: 4%; }

/* -- Breathe: Capsule + scaleEffect + .animation(.easeInOut.repeatForever) - */
.breathe { width: 46px; height: 22px; border-radius: 999px;
           background: linear-gradient(120deg, var(--c2), var(--c));
           animation: breathe 1.9s ease-in-out infinite alternate; }
@keyframes breathe { to { transform: scale(1.28); } }

/* -- Spinner squares: RoundedRectangle + rotationEffect ------------------- */
.squares { width: 44px; height: 44px; position: relative; }
.squares i { position: absolute; inset: 0; border-radius: 9px; border: 3px solid var(--c);
             animation: sq 2.2s cubic-bezier(.7,0,.3,1) infinite; }
.squares i:nth-child(2) { border-color: var(--c2); animation-delay: -.73s; }
.squares i:nth-child(3) { border-color: var(--c); opacity: .4; animation-delay: -1.46s; }
@keyframes sq { to { transform: rotate(180deg) scale(.55); } }

/* -- Bounce: Circle + offset(y:) + .animation(.easeInOut) ----------------- */
.bounce { width: 44px; height: 48px; position: relative; }
.bounce i { position: absolute; left: 50%; top: 0; margin-left: -9px; width: 18px; height: 18px;
            border-radius: 50%; background: var(--c);
            animation: bounce-y .72s cubic-bezier(.5,0,.5,1) infinite alternate; }
.bounce u { position: absolute; left: 50%; bottom: 2px; margin-left: -11px; width: 22px; height: 4px;
            border-radius: 999px; background: var(--c); opacity: .18;
            animation: shade .72s cubic-bezier(.5,0,.5,1) infinite alternate; }
@keyframes bounce-y { to { transform: translateY(28px); } }
@keyframes shade { from { transform: scaleX(.6); opacity: .1; } to { transform: scaleX(1); opacity: .22; } }

/* -- Grid: ForEach × ForEach + opacity stagger --------------------------- */
.dotgrid { display: grid; grid-template-columns: repeat(3, 10px); gap: 7px; }
.dotgrid i { width: 10px; height: 10px; border-radius: 3px; background: var(--c);
             animation: gfade 1.5s ease-in-out infinite; }
.dotgrid i:nth-child(1) { animation-delay: 0s; }    .dotgrid i:nth-child(2) { animation-delay: .1s; }
.dotgrid i:nth-child(3) { animation-delay: .2s; }   .dotgrid i:nth-child(4) { animation-delay: .1s; }
.dotgrid i:nth-child(5) { animation-delay: .2s; }   .dotgrid i:nth-child(6) { animation-delay: .3s; }
.dotgrid i:nth-child(7) { animation-delay: .2s; }   .dotgrid i:nth-child(8) { animation-delay: .3s; }
.dotgrid i:nth-child(9) { animation-delay: .4s; }
@keyframes gfade { 0%, 100% { opacity: .18; transform: scale(.8); }
                   50% { opacity: 1; transform: scale(1); } }

/* -- Toggle: a switch that overshoots ------------------------------------ */
.toggle { width: 50px; height: 30px; border-radius: 999px; background: #e3e6e9; position: relative;
          animation: tbg 2.4s ease-in-out infinite; }
.toggle i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
            background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.22);
            animation: knob 2.4s cubic-bezier(.34,1.56,.64,1) infinite; }
@keyframes tbg { 0%, 45% { background: #e3e6e9; } 55%, 95% { background: var(--c); }
                 100% { background: #e3e6e9; } }
@keyframes knob { 0%, 45% { transform: translateX(0); } 55%, 95% { transform: translateX(20px); }
                  100% { transform: translateX(0); } }

/* -- Single dot in orbit: offset(x: cos, y: sin) -------------------------- */
.dotorbit { width: 46px; height: 46px; position: relative; }
.dotorbit u { position: absolute; inset: 0; border-radius: 50%; border: 2px dashed #e3e6e9; }
.dotorbit i { position: absolute; top: 50%; left: 50%; width: 13px; height: 13px; margin: -6.5px;
              border-radius: 50%; background: var(--c);
              animation: circle-path 1.6s linear infinite; }
@keyframes circle-path { to { transform: rotate(360deg) translateX(17px) rotate(-360deg); } }
.dotorbit i { transform-origin: 50% 50%; }

/* -- Gradient sweep: Capsule + fill(gradient) + rotationEffect ------------ */
.sweep { width: 46px; height: 46px; border-radius: 50%;
         background: conic-gradient(from 0deg, var(--c), var(--c2), var(--c));
         -webkit-mask: radial-gradient(circle, transparent 14px, #000 14.5px);
         mask: radial-gradient(circle, transparent 14px, #000 14.5px);
         animation: spin 1.6s linear infinite; }

@keyframes swoop-orbit {
  0.0% { transform: translate(17.36px, 0.00px) scale(0.8900); z-index: 10; }
  2.5% { transform: translate(17.15px, 0.97px) scale(0.9072); z-index: 12; }
  5.0% { transform: translate(16.51px, 1.92px) scale(0.9240); z-index: 13; }
  7.5% { transform: translate(15.47px, 2.81px) scale(0.9399); z-index: 15; }
  10.0% { transform: translate(14.04px, 3.64px) scale(0.9547); z-index: 16; }
  12.5% { transform: translate(12.28px, 4.38px) scale(0.9678); z-index: 17; }
  15.0% { transform: translate(10.20px, 5.02px) scale(0.9790); z-index: 18; }
  17.5% { transform: translate(7.88px, 5.52px) scale(0.9880); z-index: 19; }
  20.0% { transform: translate(5.36px, 5.90px) scale(0.9946); z-index: 20; }
  22.5% { transform: translate(2.72px, 6.12px) scale(0.9986); z-index: 20; }
  25.0% { transform: translate(0.00px, 6.20px) scale(1.0000); z-index: 20; }
  27.5% { transform: translate(-2.72px, 6.12px) scale(0.9986); z-index: 20; }
  30.0% { transform: translate(-5.36px, 5.90px) scale(0.9946); z-index: 20; }
  32.5% { transform: translate(-7.88px, 5.52px) scale(0.9880); z-index: 19; }
  35.0% { transform: translate(-10.20px, 5.02px) scale(0.9790); z-index: 18; }
  37.5% { transform: translate(-12.28px, 4.38px) scale(0.9678); z-index: 17; }
  40.0% { transform: translate(-14.04px, 3.64px) scale(0.9547); z-index: 16; }
  42.5% { transform: translate(-15.47px, 2.81px) scale(0.9399); z-index: 15; }
  45.0% { transform: translate(-16.51px, 1.92px) scale(0.9240); z-index: 13; }
  47.5% { transform: translate(-17.15px, 0.97px) scale(0.9072); z-index: 12; }
  50.0% { transform: translate(-17.36px, 0.00px) scale(0.8900); z-index: 10; }
  52.5% { transform: translate(-17.15px, -0.97px) scale(0.8728); z-index: 8; }
  55.0% { transform: translate(-16.51px, -1.92px) scale(0.8560); z-index: 7; }
  57.5% { transform: translate(-15.47px, -2.81px) scale(0.8401); z-index: 5; }
  60.0% { transform: translate(-14.04px, -3.64px) scale(0.8253); z-index: 4; }
  62.5% { transform: translate(-12.28px, -4.38px) scale(0.8122); z-index: 3; }
  65.0% { transform: translate(-10.20px, -5.02px) scale(0.8010); z-index: 2; }
  67.5% { transform: translate(-7.88px, -5.52px) scale(0.7920); z-index: 1; }
  70.0% { transform: translate(-5.36px, -5.90px) scale(0.7854); z-index: 0; }
  72.5% { transform: translate(-2.72px, -6.12px) scale(0.7814); z-index: 0; }
  75.0% { transform: translate(-0.00px, -6.20px) scale(0.7800); z-index: 0; }
  77.5% { transform: translate(2.72px, -6.12px) scale(0.7814); z-index: 0; }
  80.0% { transform: translate(5.36px, -5.90px) scale(0.7854); z-index: 0; }
  82.5% { transform: translate(7.88px, -5.52px) scale(0.7920); z-index: 1; }
  85.0% { transform: translate(10.20px, -5.02px) scale(0.8010); z-index: 2; }
  87.5% { transform: translate(12.28px, -4.38px) scale(0.8122); z-index: 3; }
  90.0% { transform: translate(14.04px, -3.64px) scale(0.8253); z-index: 4; }
  92.5% { transform: translate(15.47px, -2.81px) scale(0.8401); z-index: 5; }
  95.0% { transform: translate(16.51px, -1.92px) scale(0.8560); z-index: 7; }
  97.5% { transform: translate(17.15px, -0.97px) scale(0.8728); z-index: 8; }
  100.0% { transform: translate(17.36px, -0.00px) scale(0.8900); z-index: 10; }
}