/* ==========================================================================
   Onboarding band: porcelain panel, looping 3-step path, floating chips.
   Idle motion runs only while on screen ([data-live].is-live via flow.js).
   ========================================================================== */
.ob{padding:clamp(2rem,1.5rem + 2vw,3.5rem) 0}
.ob-panel{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(1.5rem,1rem + 3vw,4rem);align-items:center;
  padding:clamp(1.6rem,1.2rem + 2vw,3rem);border-radius:38px;background:var(--base);box-shadow:var(--raise-lg);overflow:hidden;isolation:isolate}
.ob-panel::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:radial-gradient(55% 70% at 85% 50%,rgba(240,178,62,.12),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 35%)}
:root[data-theme="dark"] .ob-panel::before{background:radial-gradient(55% 70% at 85% 50%,rgba(240,178,62,.10),transparent 70%)}
.ob-ring{position:absolute;right:-120px;bottom:-140px;width:360px;height:360px;border-radius:50%;box-shadow:var(--press);z-index:-1}

.ob-chip{display:inline-flex;align-items:center;gap:.55rem;padding:.45rem 1rem .45rem .7rem;border-radius:999px;font-size:.82rem;font-weight:700;color:#9a5a08;
  background:var(--base);box-shadow:var(--press-sm)}
:root[data-theme="dark"] .ob-chip{color:#f6c66d}
.ob-chip-dot{width:10px;height:10px;border-radius:50%;background:#f0b23e;box-shadow:0 0 0 0 rgba(240,178,62,.6)}
.ob.is-live .ob-chip-dot{animation:beaconAmber 2s infinite}
@keyframes beaconAmber{70%{box-shadow:0 0 0 10px rgba(240,178,62,0)}100%{box-shadow:0 0 0 0 rgba(240,178,62,0)}}
.ob-copy h3{margin:1rem 0 .7rem;font-size:clamp(1.6rem,1.1rem + 1.6vw,2.5rem);letter-spacing:-.035em;line-height:1.1;max-width:20ch}
.ob-copy>p{margin:0;max-width:48ch;font-size:1.02rem}

/* Three-step path that lights up in a loop */
.ob-steps-wrap{position:relative;margin:1.6rem 0 0;padding-left:0}
.ob-steps{display:grid;gap:.6rem;margin:0;padding:0;list-style:none}
.ob-track{position:absolute;left:27px;top:28px;bottom:28px;width:6px;border-radius:6px;box-shadow:var(--press-sm)}
.ob-track-fill{position:absolute;left:1px;right:1px;top:1px;height:0;border-radius:6px;background:linear-gradient(180deg,#f0b23e,var(--cyan));box-shadow:0 0 10px rgba(29,185,194,.5)}
.ob.is-live .ob-track-fill{animation:obFill 7.5s var(--soft) infinite}
@keyframes obFill{0%{height:0}30%{height:calc(50% - 1px)}62%,88%{height:calc(100% - 2px)}100%{height:calc(100% - 2px);opacity:0}}
.ob-step{position:relative;display:flex;align-items:center;gap:1rem;padding:.55rem .9rem .55rem .2rem;border-radius:20px}
.ob-step-dome{position:relative;flex-shrink:0;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--base);box-shadow:var(--raise-sm);color:var(--ink-faint);z-index:1}
.ob-step-dome::before{content:"";position:absolute;inset:6px;border-radius:50%;opacity:0;transform:scale(.5);
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.95) 0 8%,rgba(255,255,255,0) 30%),linear-gradient(145deg,#3f5bc4,#31459A 45%,#1DB9C2);
  box-shadow:0 8px 18px rgba(29,100,180,.35),inset 0 -4px 8px rgba(6,20,60,.35)}
.ob-ico{position:relative;width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ob-step-text{display:grid}
.ob-step-text strong{font-size:.98rem}
.ob-step-text span{font-size:.84rem;color:var(--ink-faint)}
.ob.is-live .ob-step{animation:obStep 7.5s var(--soft) infinite;animation-delay:calc(var(--s)*1.15s)}
.ob.is-live .ob-step-dome{animation:obDome 7.5s var(--soft) infinite;animation-delay:calc(var(--s)*1.15s)}
.ob.is-live .ob-step-dome::before{animation:obBubble 7.5s var(--soft) infinite;animation-delay:calc(var(--s)*1.15s)}
@keyframes obStep{0%,4%{background:transparent;box-shadow:none}12%,70%{background:var(--surface);box-shadow:var(--raise-sm)}86%,100%{background:transparent;box-shadow:none}}
@keyframes obDome{0%,4%{color:var(--ink-faint);transform:none}10%{transform:translateY(-8px) scale(1.08)}16%{transform:translateY(0) scale(.96)}20%,76%{color:#fff;transform:none}88%,100%{color:var(--ink-faint)}}
@keyframes obBubble{0%,4%{opacity:0;transform:scale(.5)}12%,76%{opacity:1;transform:none}88%,100%{opacity:0;transform:scale(.5)}}

.ob-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.4rem;margin-top:1.8rem}
.ob-link{font-weight:700;color:#1f9e6a;border-bottom:2px solid rgba(31,158,106,.35);padding-bottom:2px;transition:color .3s,border-color .3s}
.ob-link:hover{color:#16806a;border-color:#16806a}

/* Visual */
.ob-visual{position:relative;padding:2rem 1.5rem}
.ob-frame{position:relative;padding:10px;border-radius:32px;background:var(--base);box-shadow:var(--raise-lg);aspect-ratio:5/4;overflow:hidden}
.ob-frame img{width:100%;height:100%;object-fit:cover;border-radius:24px;box-shadow:var(--press-sm)}
.ob.is-live .ob-frame img{animation:obZoom 16s ease-in-out infinite alternate}
@keyframes obZoom{from{transform:scale(1)}to{transform:scale(1.08)}}
.ob-gloss{position:absolute;inset:10px;border-radius:24px;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 30%),radial-gradient(260px circle at var(--lx,30%) var(--ly,20%),rgba(255,255,255,.25),transparent 60%)}
.ob-float{position:absolute;z-index:3;display:flex;align-items:center;gap:.65rem;padding:.6rem 1rem .6rem .6rem;border-radius:20px;
  background:var(--glass-strong);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.ob-float strong{display:block;font-size:.88rem;line-height:1.2}
.ob-float small{display:block;font-size:.74rem;color:var(--ink-faint)}
.ob-float.f1{left:-6px;bottom:6%}
.ob-float.f2{right:0;top:8%}
.ob-float.f3{right:6%;bottom:-2%}
.ob.is-live .ob-float.f1{animation:obBob 5s ease-in-out infinite}
.ob.is-live .ob-float.f2{animation:obBob 6s ease-in-out infinite -2s}
.ob.is-live .ob-float.f3{animation:obBob 5.5s ease-in-out infinite -3.5s}
@keyframes obBob{50%{translate:0 -12px}}
.ob-avatar{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:#fff;
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.55) 0 8%,transparent 30%),var(--grad);box-shadow:0 8px 18px rgba(29,120,180,.35)}
.ob-avatar .ob-ico{width:20px;height:20px}
.ob-avatar i{position:absolute;right:-1px;bottom:-1px;width:13px;height:13px;border-radius:50%;background:#2fd082;border:2px solid #fff}
.ob.is-live .ob-avatar i{animation:obOnline 2s infinite}
@keyframes obOnline{0%{box-shadow:0 0 0 0 rgba(47,208,130,.6)}70%{box-shadow:0 0 0 9px rgba(47,208,130,0)}}
.ob-mini{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;color:#fff;background:var(--grad)}
.ob-mini.green{background:linear-gradient(135deg,#38c98b,#16806a)}
.ob-mini .ob-ico{width:18px;height:18px}

@media (max-width:900px){
  .ob-panel{grid-template-columns:1fr}
  .ob-visual{padding:1.5rem .5rem 2rem}
}
@media (max-width:520px){
  .ob-float.f3{display:none}
  .ob-float{padding:.5rem .8rem .5rem .5rem}
  .ob-step-dome{width:52px;height:52px}
  .ob-track{left:23px}
}
@media (prefers-reduced-motion:reduce){
  .ob *{animation:none!important}
  .ob-step-dome::before{opacity:1;transform:none}
  .ob-step-dome{color:#fff}
  .ob-track-fill{height:calc(100% - 2px)}
}