/* Спільна rim-картка «бомба» (Direction 2026-10-05, F1). Сайт і застосунок.
   Токени — shared/tokens.css. Бюджет ≤ 3 KB gzip. Лише transform/opacity у русі.
   Модифікатори: --app (спокійна), --paper (крем), --hero, --live (промінь один раз:
   зніми й постав клас знову, щоб повторити). Маскот у куті картки: > .so-mascot. */
.so-card{position:relative;border-radius:var(--so-r-xl);background:var(--so-glass),var(--brand-bg);box-shadow:var(--so-depth-1);isolation:isolate}
.so-card::before,.so-card::after{content:"";position:absolute;pointer-events:none;border-radius:inherit}
.so-card::before{inset:0;padding:1px;background:var(--so-rim);opacity:.9;z-index:1;
  -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 exclude,linear-gradient(#000 0 0)}
.so-card::after{inset:0 0 auto 0;height:40%;background:radial-gradient(120% 80% at 20% 0%,rgba(255,255,255,.07),transparent 60%)}
.so-card--app{border-radius:var(--so-r-l)}
.so-card--app::before{background:var(--so-rim-calm);opacity:.55}
.so-card--app::after{display:none}
.so-card--hero{border-radius:32px;box-shadow:var(--so-depth-2)}
.so-card--paper{background:var(--brand-paper);color:oklch(.2 .02 60);box-shadow:0 24px 48px -24px rgba(60,40,10,.25),0 0 0 1px rgba(60,40,10,.06)}
.so-card--paper::before{opacity:.5}
.so-card--paper::after{background:radial-gradient(120% 80% at 20% 0%,rgba(255,255,255,.5),transparent 60%)}
/* промінь: один прохід по обідку. Кут — зареєстрована властивість (без неї conic не анімується). */
@property --so-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.so-card--live{background:radial-gradient(120% 40% at 20% 0%,rgba(255,255,255,.07),transparent 60%) top/100% 40% no-repeat,var(--so-glass),var(--brand-bg)}
.so-card--live::after{inset:0;height:auto;padding:2px;opacity:0;
  background:conic-gradient(from var(--so-a),transparent 0 78%,var(--so-violet) 86%,#fff 92%,var(--so-amber-hi) 96%,transparent 100%);
  -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 exclude,linear-gradient(#000 0 0);
  animation:so-ray 2.4s var(--so-ease-io) 1 both}
@keyframes so-ray{0%{--so-a:0deg;opacity:0}12%{opacity:1}85%{opacity:1}100%{--so-a:360deg;opacity:0}}
.so-kicker{display:inline-flex;align-items:center;gap:8px;font:500 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--so-violet-ink)}
.so-kicker::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--so-violet)}
.so-numeral{font:300 clamp(56px,7vw,96px)/1 var(--serif);color:var(--fg,#f6f4f1); font-variant-numeric: lining-nums tabular-nums; }
.so-numeral--done{color:var(--so-amber)}
.so-obj{display:block;height:140px;position:relative}
.so-card--app .so-obj{height:96px}
.so-mascot{display:block;aspect-ratio:1;position:relative}
.so-mascot svg{display:block;width:100%;height:100%;overflow:visible}
.so-card>.so-mascot{position:absolute;right:14px;bottom:14px;width:64px;z-index:2;pointer-events:none}
.so-card:has(>.so-mascot) .so-body{padding-right:84px}
.so-mascot-sh{position:absolute;left:15%;right:15%;bottom:-3%;height:12%;background:radial-gradient(closest-side,rgba(0,0,0,.45),transparent);pointer-events:none}
@media (prefers-reduced-motion:reduce){.so-card--live::after{animation:none;opacity:0}}