/* ─────────────────────────────────────────────────────────────
   BLOG SCENES
   Subject-specific animated illustrations for blog posts. Loaded only by
   post pages, not the homepage. Every scene is a small UI mockup (a phone
   screen, a search result, a review card, a form) that plays a short
   sequence once it scrolls into view. Colors come from sitesbynjabulo.css
   tokens. Sequencing is CSS keyframes started by .is-visible; typing is
   driven by blog-scenes.js.
   ───────────────────────────────────────────────────────────── */

.scene { position: relative; margin: 8px 0 44px; background: var(--surface); border-radius: 14px; padding: 26px 22px 20px; overflow: hidden; }
.scene__caption, .blog-post__body .scene__caption { text-align: center; font-size: 0.85rem; color: var(--muted); margin: 16px 0 0; line-height: 1.5; }
/* the post body styles every p/ul/li; scenes carry their own */
.blog-post__body .scene p:not(.scene__caption) { font-size: inherit; line-height: inherit; margin: 0; color: inherit; }
.blog-post__body .scene ul { margin: 0; padding: 0; }
.blog-post__body .scene li { padding-left: 8px; margin: 0; line-height: 1.4; }
.blog-post__body .scene li::before { display: none; }
.blog-post__body .scene .sc-services__list li { padding: 5px 8px; }
.scene svg { display: block; max-width: 100%; height: auto; }
.scene .mono { font-family: var(--font-body); font-variant-numeric: tabular-nums; }

/* device frames */
.frame { background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 28px rgba(9, 19, 41, 0.07); overflow: hidden; }
.frame__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1px solid var(--border); background: #F3F5F8; }
.frame__dot { width: 8px; height: 8px; border-radius: 50%; background: #D3D9E2; }
.frame__url { flex: 1; height: 12px; border-radius: 6px; background: #E4E8EF; margin-left: 6px; }
.frame__body { padding: 18px 18px 20px; }
.phone { width: 230px; margin: 0 auto; background: var(--ink); border-radius: 26px; padding: 10px; box-shadow: 0 14px 36px rgba(9, 19, 41, 0.18); }
.phone__screen { background: #fff; border-radius: 18px; overflow: hidden; min-height: 300px; position: relative; }
.phone__notch { width: 70px; height: 6px; border-radius: 4px; background: #E4E8EF; margin: 10px auto 0; }

/* typing */
.type { display: inline-block; white-space: nowrap; }
.type::after { content: ''; display: inline-block; width: 2px; height: 0.95em; background: currentColor; margin-left: 2px; vertical-align: -0.12em; opacity: 0; }
.type.typing::after { opacity: 1; animation: sc-caret 0.8s steps(1) infinite; }
@keyframes sc-caret { 50% { opacity: 0; } }

/* shared keyframes */
@keyframes sc-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sc-pop { 0% { opacity: 0; transform: scale(0.4); } 70% { transform: scale(1.12); } 100% { opacity: 1; transform: scale(1); } }
@keyframes sc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sc-slide-left { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes sc-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 146, 63, 0.45); } 60% { box-shadow: 0 0 0 10px rgba(200, 146, 63, 0); } }
@keyframes sc-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes sc-draw { to { stroke-dashoffset: 0; } }
@keyframes sc-fill { to { transform: scaleX(1); } }
@keyframes sc-out { to { opacity: 0; transform: translateX(30px); } }
@keyframes sc-dim { to { opacity: 0.35; } }

/* ── 1. HEADLINE REWRITE ─────────────────────────────────── */
.sc-headline .frame { max-width: 520px; margin: 0 auto; }
.sc-headline__hero { padding: 26px 22px 22px; background: linear-gradient(180deg, #fff, #F6F8FB); }
.sc-headline__h1 { font-family: var(--font-display); font-size: clamp(1.05rem, 3vw, 1.4rem); color: var(--ink); min-height: 2.6em; line-height: 1.3; }
.sc-headline__h1 .type { white-space: normal; display: inline; }
.sc-headline__verdicts { position: relative; height: 26px; margin-bottom: 8px; }
.sc-headline__verdicts .sc-headline__verdict { position: absolute; left: 0; top: 0; }
.sc-headline__sub { height: 10px; width: 62%; border-radius: 5px; background: #E4E8EF; margin: 12px 0 8px; }
.sc-headline__sub--2 { width: 44%; margin-top: 0; }
.sc-headline__btn { display: inline-block; margin-top: 14px; padding: 8px 16px; border-radius: 8px; background: var(--brand); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; }
.sc-headline__verdict { position: absolute; top: 14px; right: 14px; padding: 5px 10px; border-radius: 999px; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0; }
.sc-headline__verdict--bad { background: var(--accent-red-tint); color: var(--accent-red); }
.sc-headline__verdict--good { background: #E6F4EA; color: #1E7A46; }
.sc-headline.is-visible .sc-headline__verdict--bad { animation: sc-pop 0.4s cubic-bezier(.34, 1.56, .64, 1) 2.4s both, sc-out 0.4s ease 3.6s forwards; }
.sc-headline.is-visible .sc-headline__verdict--good { animation: sc-pop 0.45s cubic-bezier(.34, 1.56, .64, 1) 7.2s both; }

/* ── 2. STOPWATCH ───────────────────────────────────────── */
.sc-stopwatch__wrap { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }
.sc-stopwatch__dial { width: 150px; height: 150px; flex-shrink: 0; }
.sc-stopwatch__hand { transform-origin: 75px 82px; transform: rotate(0deg); }
.sc-stopwatch.is-visible .sc-stopwatch__hand { animation: sc-sweep 2s linear 0.4s forwards; }
@keyframes sc-sweep { to { transform: rotate(720deg); } }
.sc-stopwatch__arc { stroke-dasharray: 220; stroke-dashoffset: 220; }
.sc-stopwatch.is-visible .sc-stopwatch__arc { animation: sc-draw 2s linear 0.4s forwards; }
.sc-stopwatch__page { width: 220px; }
.sc-stopwatch__page .frame__body { padding: 14px; }
.sc-stopwatch__line { height: 9px; border-radius: 5px; background: #E4E8EF; margin-bottom: 8px; }
.sc-stopwatch__line--title { height: 14px; width: 80%; background: #C9D1DC; }
.sc-stopwatch__q { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; background: rgba(9, 19, 41, 0.88); color: #fff; font-weight: 800; font-size: 0.95rem; line-height: 1.35; opacity: 0; border-radius: 12px; }
.sc-stopwatch.is-visible .sc-stopwatch__q { animation: sc-fade 0.35s ease 2.5s both; }
.sc-stopwatch__page { position: relative; }

/* ── 3. SEARCH, BOX OF THREE ────────────────────────────── */
.sc-search .phone__screen { min-height: 330px; }
.sc-search__bar { margin: 12px 12px 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 0.78rem; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.sc-search__bar svg { width: 13px; height: 13px; flex-shrink: 0; }
.sc-search__map { margin: 0 12px; height: 54px; border-radius: 8px; background: linear-gradient(135deg, #DCE9E2, #E9F1EC 60%, #D9E4EC); position: relative; opacity: 0; }
.sc-search__pin { position: absolute; width: 10px; height: 10px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg) scale(0); background: var(--accent-red); }
.sc-search__card { margin: 8px 12px 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; opacity: 0; display: grid; grid-template-columns: 1fr auto; gap: 4px; align-items: center; }
.sc-search__name { font-size: 0.74rem; font-weight: 800; color: var(--ink); }
.sc-search__meta { font-size: 0.62rem; color: var(--muted); grid-column: 1 / -1; }
.sc-search__stars { font-size: 0.6rem; color: var(--accent-gold); letter-spacing: 1px; }
.sc-search__card--you { border-color: var(--accent-gold); background: var(--accent-gold-tint); }
.sc-search__site { margin: 10px 12px 0; height: 9px; border-radius: 5px; background: #E4E8EF; opacity: 0; }
.sc-search.is-visible .sc-search__map { animation: sc-fade 0.5s ease 1.6s both; }
.sc-search.is-visible .sc-search__pin { animation: sc-pop 0.4s cubic-bezier(.34, 1.56, .64, 1) both; }
.sc-search.is-visible .sc-search__pin:nth-child(1) { animation-delay: 2s; }
.sc-search.is-visible .sc-search__pin:nth-child(2) { animation-delay: 2.15s; }
.sc-search.is-visible .sc-search__pin:nth-child(3) { animation-delay: 2.3s; }
.sc-search.is-visible .sc-search__card { animation: sc-slide-left 0.45s var(--ease) both; }
.sc-search.is-visible .sc-search__card:nth-of-type(1) { animation-delay: 2.3s; }
.sc-search.is-visible .sc-search__card:nth-of-type(2) { animation-delay: 2.5s; }
.sc-search.is-visible .sc-search__card:nth-of-type(3) { animation-delay: 2.7s; }
.sc-search.is-visible .sc-search__card--you { animation: sc-slide-left 0.45s var(--ease) 2.7s both, sc-pulse 1.6s ease 3.4s 2; }
.sc-search.is-visible .sc-search__site { animation: sc-fade 0.4s ease both; }
.sc-search.is-visible .sc-search__site:nth-of-type(1) { animation-delay: 3.2s; }
.sc-search.is-visible .sc-search__site:nth-of-type(2) { animation-delay: 3.35s; }
.sc-search.is-visible .sc-search__site:nth-of-type(3) { animation-delay: 3.5s; }
.sc-search__label { position: absolute; right: 8px; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); opacity: 0; }
.sc-search.is-visible .sc-search__label { animation: sc-fade 0.4s ease 3.8s both; }

/* ── 4. CLOCK + STATUS FLIP ─────────────────────────────── */
.sc-clock__wrap { display: flex; align-items: center; justify-content: center; gap: 30px; flex-wrap: wrap; }
.sc-clock__face { width: 140px; height: 140px; flex-shrink: 0; }
.sc-clock__hour, .sc-clock__min { transform-origin: 70px 70px; }
.sc-clock.is-visible .sc-clock__hour { animation: sc-hour 2.2s cubic-bezier(.4, 0, .2, 1) 0.3s forwards; }
.sc-clock.is-visible .sc-clock__min { animation: sc-min 2.2s cubic-bezier(.4, 0, .2, 1) 0.3s forwards; }
@keyframes sc-hour { from { transform: rotate(60deg); } to { transform: rotate(560deg); } }
@keyframes sc-min { from { transform: rotate(0deg); } to { transform: rotate(3120deg); } }
.sc-clock__listing { width: 250px; }
.sc-clock__listing .frame__body { padding: 14px 16px; }
.sc-clock__name { font-weight: 800; color: var(--ink); font-size: 0.9rem; }
.sc-clock__meta { font-size: 0.7rem; color: var(--muted); margin-top: 2px; }
.sc-clock__status { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 12px; border-radius: 999px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.04em; position: relative; overflow: hidden; white-space: nowrap; min-width: 118px; justify-content: center; }
.sc-clock__status span { display: block; transition: transform 0.35s var(--ease), opacity 0.35s; }
.sc-clock__open { background: #E6F4EA; color: #1E7A46; }
.sc-clock__closed { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--accent-red-tint); color: var(--accent-red); transform: translateY(100%); }
.sc-clock.is-visible .sc-clock__closed { animation: sc-flip-in 0.4s var(--ease) 2.7s forwards; }
@keyframes sc-flip-in { to { transform: translateY(0); } }
.sc-clock__time { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink); text-align: center; margin-top: 6px; }
.sc-clock__walk { display: block; margin: 12px auto 0; opacity: 0; }
.sc-clock.is-visible .sc-clock__walk { animation: sc-fade 0.3s ease 3.3s both, sc-walk 1.6s ease-in 3.5s forwards; }
@keyframes sc-walk { to { transform: translateX(120px); opacity: 0; } }

/* ── 5. SERVICES FIELD FILLS IN ─────────────────────────── */
.sc-services__wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 640px) { .sc-services__wrap { grid-template-columns: 1fr; } }
.sc-services__card .frame__body { padding: 14px 16px; }
.sc-services__field { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 0.74rem; }
.sc-services__field:last-child { border-bottom: 0; }
.sc-services__key { font-weight: 700; color: var(--muted); }
.sc-services__val { color: var(--ink); font-weight: 600; }
.sc-services__val--empty { color: var(--accent-red); font-style: italic; }
.sc-services__list { list-style: none; margin: 6px 0 0; padding: 0; }
.sc-services__list li { font-size: 0.72rem; color: var(--ink); padding: 5px 8px; margin-top: 4px; border-radius: 6px; background: var(--accent-gold-tint); opacity: 0; transform: translateX(-8px); }
.sc-services.is-visible .sc-services__list li { animation: sc-rise 0.4s var(--ease) both; }
.sc-services.is-visible .sc-services__list li:nth-child(1) { animation-delay: 1.4s; }
.sc-services.is-visible .sc-services__list li:nth-child(2) { animation-delay: 1.7s; }
.sc-services.is-visible .sc-services__list li:nth-child(3) { animation-delay: 2.0s; }
.sc-services.is-visible .sc-services__list li:nth-child(4) { animation-delay: 2.3s; }
.sc-services.is-visible .sc-services__list li:nth-child(5) { animation-delay: 2.6s; }
.sc-services.is-visible .sc-services__val--empty { animation: sc-dim 0.4s ease 1.3s forwards; }
.sc-services__searches { font-size: 0.72rem; color: var(--muted); margin-bottom: 8px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.sc-services__q { padding: 7px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 0.72rem; color: var(--muted); margin-bottom: 6px; display: flex; justify-content: space-between; gap: 8px; background: #fff; }
.sc-services__q b { font-weight: 800; color: var(--accent-red); }
.sc-services__q b::before { content: 'not shown'; }
.sc-services__q.is-hit { border-color: var(--accent-gold); background: var(--accent-gold-tint); }
.sc-services__q.is-hit b { color: #1E7A46; }
.sc-services__q.is-hit b::before { content: 'shown'; }

/* copy scene: inserted words fade in on their inline delays */
.sc-copy__add { opacity: 0; }
.sc-copy.is-visible .sc-copy__add { animation: sc-fade 0.35s ease both; }
/* headline verdict timing matched to the typing sequence */
.sc-headline.is-visible .sc-headline__verdict--good { animation-delay: 6s; }

/* ── 6. SPEED RACE ──────────────────────────────────────── */
.sc-race__wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .sc-race__wrap { grid-template-columns: 1fr; } }
.sc-race__win { position: relative; }
.sc-race__win .frame__body { padding: 14px; min-height: 130px; }
.sc-race__spinner { width: 26px; height: 26px; border: 3px solid #E4E8EF; border-top-color: var(--brand); border-radius: 50%; margin: 34px auto 0; animation: sc-spin 0.9s linear infinite; }
@keyframes sc-spin { to { transform: rotate(360deg); } }
.sc-race__progress { height: 4px; background: #E4E8EF; border-radius: 2px; margin-top: 30px; overflow: hidden; }
.sc-race__progress i { display: block; height: 100%; width: 100%; background: var(--brand); transform: scaleX(0); transform-origin: left; }
.sc-race.is-visible .sc-race__progress--slow i { animation: sc-fill 5.5s cubic-bezier(.2, .8, .4, 1) 0.3s forwards; }
.sc-race__content { opacity: 0; }
.sc-race.is-visible .sc-race__content--fast { animation: sc-fade 0.3s ease 0.9s both; }
.sc-race__h { font-weight: 800; color: var(--ink); font-size: 0.85rem; }
.sc-race__l { height: 8px; border-radius: 4px; background: #E4E8EF; margin-top: 8px; }
.sc-race__l--s { width: 70%; }
.sc-race__badge { position: absolute; top: -10px; right: -6px; padding: 6px 10px; border-radius: 999px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0; transform: scale(0.4); }
.sc-race__badge--win { background: var(--accent-gold); color: #fff; }
.sc-race__badge--lose { background: var(--accent-red-tint); color: var(--accent-red); }
.sc-race.is-visible .sc-race__badge--win { animation: sc-pop 0.45s cubic-bezier(.34, 1.56, .64, 1) 1.6s both; }
.sc-race.is-visible .sc-race__badge--lose { animation: sc-pop 0.45s cubic-bezier(.34, 1.56, .64, 1) 4.2s both; }
.sc-race__leaver { position: absolute; bottom: 10px; right: 12px; opacity: 0; }
.sc-race.is-visible .sc-race__leaver { animation: sc-fade 0.3s ease 3s both, sc-walk 1.4s ease-in 3.3s forwards; }
.sc-race__label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }

/* ── 7. REVIEW + REPLY ──────────────────────────────────── */
.sc-review__card { max-width: 440px; margin: 0 auto; }
.sc-review__card .frame__body { padding: 16px 18px; }
.sc-review__head { display: flex; align-items: center; gap: 10px; }
.sc-review__avatar { width: 30px; height: 30px; border-radius: 50%; background: #D3D9E2; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.75rem; color: var(--ink); }
.sc-review__who { font-size: 0.78rem; font-weight: 800; color: var(--ink); }
.sc-review__stars { font-size: 0.75rem; color: var(--accent-red); letter-spacing: 1px; }
.sc-review__stars span { opacity: 0; }
.sc-review.is-visible .sc-review__stars span { animation: sc-pop 0.3s ease both; }
.sc-review.is-visible .sc-review__stars span:nth-child(1) { animation-delay: 0.3s; }
.sc-review.is-visible .sc-review__stars span:nth-child(2) { animation-delay: 0.42s; color: #D3D9E2; }
.sc-review.is-visible .sc-review__stars span:nth-child(3) { animation-delay: 0.54s; color: #D3D9E2; }
.sc-review.is-visible .sc-review__stars span:nth-child(4) { animation-delay: 0.66s; color: #D3D9E2; }
.sc-review.is-visible .sc-review__stars span:nth-child(5) { animation-delay: 0.78s; color: #D3D9E2; }
.sc-review__text { font-size: 0.82rem; color: var(--body-text); margin-top: 10px; line-height: 1.5; opacity: 0; }
.sc-review.is-visible .sc-review__text { animation: sc-fade 0.5s ease 0.9s both; }
.sc-review__reply { margin-top: 12px; padding: 10px 12px 10px 14px; border-left: 3px solid var(--brand); background: var(--brand-tint); border-radius: 0 8px 8px 0; font-size: 0.78rem; color: var(--ink); line-height: 1.5; opacity: 0; min-height: 3.4em; }
.sc-review.is-visible .sc-review__reply { animation: sc-rise 0.4s var(--ease) 2s both; }
.sc-review__reply b { display: block; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); margin-bottom: 4px; }
.sc-review__reply .type { white-space: normal; display: inline; }
.sc-review__reader { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 14px; opacity: 0; }
.sc-review.is-visible .sc-review__reader { animation: sc-rise 0.45s var(--ease) 6.4s both; }
.sc-review__bubble { padding: 7px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--border); font-size: 0.74rem; color: var(--ink); font-weight: 700; }

/* ── 8. FORM: LONG VS ONE AT A TIME ─────────────────────── */
.sc-form__wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 640px) { .sc-form__wrap { grid-template-columns: 1fr; } }
.sc-form__label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.sc-form__long .frame__body { padding: 12px; }
.sc-form__field { height: 22px; border: 1px solid var(--border); border-radius: 5px; margin-bottom: 6px; position: relative; overflow: hidden; }
.sc-form__field::after { content: ''; position: absolute; left: 6px; top: 6px; height: 10px; width: 0; border-radius: 3px; background: #C9D1DC; }
.sc-form.is-visible .sc-form__field:nth-child(1)::after { animation: sc-w 0.6s ease 0.4s forwards; --w: 60%; }
.sc-form.is-visible .sc-form__field:nth-child(2)::after { animation: sc-w 0.6s ease 1.1s forwards; --w: 75%; }
.sc-form.is-visible .sc-form__field:nth-child(3)::after { animation: sc-w 0.6s ease 1.8s forwards; --w: 40%; }
@keyframes sc-w { to { width: var(--w); } }
.sc-form__quit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.55); font-weight: 800; color: var(--accent-red); font-size: 0.82rem; opacity: 0; }
.sc-form__quit span { padding: 6px 12px; border-radius: 999px; background: var(--accent-red-tint); }
.sc-form.is-visible .sc-form__quit { animation: sc-fade 0.35s ease 2.8s both; }
.sc-form__long { position: relative; }
.sc-form__step .frame__body { padding: 14px; min-height: 150px; position: relative; }
.sc-form__q { position: absolute; inset: 14px; opacity: 0; }
.sc-form__q b { display: block; font-size: 0.82rem; color: var(--ink); margin-bottom: 8px; }
.sc-form__opt { display: inline-block; padding: 5px 9px; border: 1px solid var(--border); border-radius: 999px; font-size: 0.68rem; color: var(--ink); margin: 0 4px 6px 0; }
.sc-form__opt--pick { background: var(--brand); color: #fff; border-color: var(--brand); }
.sc-form.is-visible .sc-form__q { animation: sc-q 1.5s ease both; }
.sc-form.is-visible .sc-form__q:nth-child(1) { animation-delay: 0.3s; }
.sc-form.is-visible .sc-form__q:nth-child(2) { animation-delay: 1.8s; }
.sc-form.is-visible .sc-form__q:nth-child(3) { animation-delay: 3.3s; }
.sc-form.is-visible .sc-form__q:nth-child(4) { animation-delay: 4.8s; animation-fill-mode: forwards; animation-name: sc-fade; animation-duration: 0.4s; }
@keyframes sc-q { 0% { opacity: 0; transform: translateX(16px); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(-16px); } }
.sc-form__dots { display: flex; gap: 5px; justify-content: center; margin-top: 8px; }
.sc-form__dots i { width: 6px; height: 6px; border-radius: 50%; background: #D3D9E2; }
.sc-form__done { text-align: center; }
.sc-form__done b { display: block; color: #1E7A46; font-size: 0.85rem; }
.sc-form__done small { color: var(--muted); font-size: 0.7rem; }

/* ── 9. VAN FLEET ───────────────────────────────────────── */
.sc-vans__row { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; align-items: flex-end; }
.sc-vans__van { position: relative; width: 140px; opacity: 0; }
.sc-vans.is-visible .sc-vans__van:nth-child(1) { animation: sc-fade 0.4s ease 0.2s both; }
.sc-vans.is-visible .sc-vans__van:nth-child(2) { animation: sc-rise 0.5s var(--ease) 2.2s both; }
.sc-vans__label { text-align: center; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
.sc-vans__dot { opacity: 0; }
.sc-vans.is-visible .sc-vans__van:nth-child(1) .sc-vans__dot { animation: sc-pop 0.3s ease both; }
.sc-vans.is-visible .sc-vans__van:nth-child(1) .sc-vans__dot:nth-of-type(1) { animation-delay: 0.6s; }
.sc-vans.is-visible .sc-vans__van:nth-child(1) .sc-vans__dot:nth-of-type(2) { animation-delay: 0.75s; }
.sc-vans.is-visible .sc-vans__van:nth-child(1) .sc-vans__dot:nth-of-type(3) { animation-delay: 0.9s; }
.sc-vans.is-visible .sc-vans__van:nth-child(1) .sc-vans__dot:nth-of-type(4) { animation-delay: 1.05s; }
.sc-vans.is-visible .sc-vans__van:nth-child(1) .sc-vans__dot:nth-of-type(5) { animation-delay: 1.2s; }
.sc-vans.is-visible .sc-vans__van:nth-child(1) .sc-vans__dot:nth-of-type(6) { animation-delay: 1.35s; }
.sc-vans.is-visible .sc-vans__van:nth-child(2) .sc-vans__dot { animation: sc-pop 0.3s ease both; }
.sc-vans.is-visible .sc-vans__van:nth-child(2) .sc-vans__dot:nth-of-type(1) { animation-delay: 3.6s; }
.sc-vans.is-visible .sc-vans__van:nth-child(2) .sc-vans__dot:nth-of-type(2) { animation-delay: 3.85s; }
.sc-vans.is-visible .sc-vans__van:nth-child(2) .sc-vans__dot:nth-of-type(3) { animation-delay: 4.1s; }
.sc-vans.is-visible .sc-vans__van:nth-child(2) .sc-vans__dot:nth-of-type(4) { animation-delay: 4.35s; }
.sc-vans.is-visible .sc-vans__van:nth-child(2) .sc-vans__dot:nth-of-type(5) { animation-delay: 4.6s; }
.sc-vans.is-visible .sc-vans__van:nth-child(2) .sc-vans__dot:nth-of-type(6) { animation-delay: 4.85s; }
.sc-vans__full { position: absolute; top: -8px; right: -4px; padding: 4px 8px; border-radius: 999px; background: var(--accent-gold); color: #fff; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0; }
.sc-vans.is-visible .sc-vans__van:nth-child(1) .sc-vans__full { animation: sc-pop 0.4s ease 1.6s both; }
.sc-vans.is-visible .sc-vans__van:nth-child(2) .sc-vans__full { animation: sc-pop 0.4s ease 5.2s both; }
.sc-vans__source { text-align: center; margin-top: 14px; font-size: 0.72rem; color: var(--muted); opacity: 0; }
.sc-vans.is-visible .sc-vans__source { animation: sc-fade 0.4s ease 3s both; }
.sc-vans__source b { color: var(--brand); }

/* ── 10. REDDIT THREAD ──────────────────────────────────── */
.sc-thread__wrap { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 640px) { .sc-thread__wrap { grid-template-columns: 1fr; } }
.sc-thread__post .frame__body { padding: 12px 14px; }
.sc-thread__title { font-weight: 800; color: var(--ink); font-size: 0.8rem; }
.sc-thread__sub { font-size: 0.64rem; color: var(--muted); margin-bottom: 8px; }
.sc-thread__c { display: flex; gap: 8px; padding: 7px 8px; border-radius: 6px; font-size: 0.72rem; color: var(--body-text); line-height: 1.4; margin-top: 4px; opacity: 0; }
.sc-thread.is-visible .sc-thread__c { animation: sc-fade 0.4s ease both; }
.sc-thread.is-visible .sc-thread__c:nth-of-type(1) { animation-delay: 0.3s; }
.sc-thread.is-visible .sc-thread__c:nth-of-type(2) { animation-delay: 0.7s; }
.sc-thread.is-visible .sc-thread__c:nth-of-type(3) { animation-delay: 1.1s; }
.sc-thread__c--hit { background: var(--accent-gold-tint); }
.sc-thread.is-visible .sc-thread__c--hit { animation: sc-fade 0.4s ease 0.7s both, sc-pulse 1.4s ease 1.8s 2; }
.sc-thread__vote { font-size: 0.62rem; color: var(--muted); font-weight: 800; min-width: 22px; }
.sc-thread__page .frame__body { padding: 14px; }
.sc-thread__h { font-family: var(--font-display); font-size: 0.85rem; color: var(--ink); line-height: 1.35; min-height: 2.7em; }
.sc-thread__l { height: 8px; border-radius: 4px; background: #E4E8EF; margin-top: 8px; opacity: 0; }
.sc-thread.is-visible .sc-thread__l { animation: sc-fade 0.3s ease both; }
.sc-thread.is-visible .sc-thread__l:nth-of-type(1) { animation-delay: 5.6s; }
.sc-thread.is-visible .sc-thread__l:nth-of-type(2) { animation-delay: 5.8s; }
.sc-thread.is-visible .sc-thread__l:nth-of-type(3) { animation-delay: 6s; }
.scene .sc-thread__arrow { display: none; }
@media (min-width: 641px) { .scene .sc-thread__arrow { display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; color: var(--accent-gold); opacity: 0; } .sc-thread.is-visible .sc-thread__arrow { animation: sc-fade 0.4s ease 3.4s both; } .sc-thread__wrap { position: relative; } }

/* ── 11. ANSWER THE PUBLIC WHEEL ────────────────────────── */
.sc-wheel__svg { max-width: 420px; margin: 0 auto; }
.sc-wheel__spoke { stroke: var(--brand-mid); stroke-width: 1.5; stroke-dasharray: 140; stroke-dashoffset: 140; }
.sc-wheel.is-visible .sc-wheel__spoke { animation: sc-draw 0.6s ease both; }
.sc-wheel__q { opacity: 0; transform-box: fill-box; transform-origin: center; }
.sc-wheel.is-visible .sc-wheel__q { animation: sc-pop 0.4s cubic-bezier(.34, 1.56, .64, 1) both; }
.sc-wheel__q rect { fill: #fff; stroke: var(--border); }
.sc-wheel__q text { font-family: var(--font-body); font-size: 9.5px; font-weight: 700; fill: var(--ink); }
.sc-wheel__q--pick rect { fill: var(--accent-gold-tint); stroke: var(--accent-gold); }
.sc-wheel.is-visible .sc-wheel__q--pick { animation: sc-pop 0.4s cubic-bezier(.34, 1.56, .64, 1) both, sc-pulse 1.4s ease 3.6s 2; }
.sc-wheel__hub { transform-box: fill-box; transform-origin: center; opacity: 0; }
.sc-wheel.is-visible .sc-wheel__hub { animation: sc-pop 0.5s cubic-bezier(.34, 1.56, .64, 1) 0.2s both; }

/* ── 12. WORD OF MOUTH NETWORK ──────────────────────────── */
.sc-network__svg { max-width: 420px; margin: 0 auto; }
.sc-network__link { stroke: var(--brand); stroke-width: 1.5; stroke-dasharray: 120; stroke-dashoffset: 120; }
.sc-network.is-visible .sc-network__link { animation: sc-draw 0.7s ease both; }
.sc-network__p { transform-box: fill-box; transform-origin: center; opacity: 0; }
.sc-network.is-visible .sc-network__p { animation: sc-pop 0.4s cubic-bezier(.34, 1.56, .64, 1) both; }
.sc-network__stranger { opacity: 0; transform-box: fill-box; transform-origin: center; }
.sc-network.is-visible .sc-network__stranger { animation: sc-pop 0.4s ease both; }
.sc-network__search { opacity: 0; transform-box: fill-box; transform-origin: center; }
.sc-network.is-visible .sc-network__search { animation: sc-pop 0.35s ease both; }
.sc-network__wall { stroke: var(--accent-gold); stroke-width: 1.5; stroke-dasharray: 6 5; fill: none; opacity: 0; }
.sc-network.is-visible .sc-network__wall { animation: sc-fade 0.5s ease 2.4s both; }

/* ── 13. PROFILE COMPLETENESS ───────────────────────────── */
.sc-profile__wrap { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; }
@media (max-width: 640px) { .sc-profile__wrap { grid-template-columns: 1fr; } }
.sc-profile__card .frame__body { padding: 14px 16px; }
.sc-profile__row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 0.74rem; }
.sc-profile__row:last-child { border-bottom: 0; }
.sc-profile__k { width: 74px; color: var(--muted); font-weight: 700; flex-shrink: 0; }
.sc-profile__v { flex: 1; color: var(--ink); font-weight: 600; opacity: 0; }
.sc-profile__ph { flex: 1; height: 10px; border-radius: 5px; background: #E4E8EF; }
.sc-profile__photos { display: flex; gap: 4px; flex: 1; }
.sc-profile__photos i { width: 22px; height: 22px; border-radius: 4px; background: linear-gradient(135deg, var(--brand-mid), var(--brand)); opacity: 0; transform: scale(0.5); }
.sc-profile__tick { width: 16px; height: 16px; border-radius: 50%; background: #1E7A46; flex-shrink: 0; opacity: 0; transform: scale(0); }
.sc-profile.is-visible .sc-profile__row:nth-child(1) .sc-profile__v, .sc-profile.is-visible .sc-profile__row:nth-child(1) .sc-profile__tick { animation: sc-pop 0.35s ease 0.4s both; }
.sc-profile.is-visible .sc-profile__row:nth-child(2) .sc-profile__v, .sc-profile.is-visible .sc-profile__row:nth-child(2) .sc-profile__tick { animation: sc-pop 0.35s ease 1s both; }
.sc-profile.is-visible .sc-profile__row:nth-child(3) .sc-profile__v, .sc-profile.is-visible .sc-profile__row:nth-child(3) .sc-profile__tick { animation: sc-pop 0.35s ease 1.6s both; }
.sc-profile.is-visible .sc-profile__row:nth-child(4) .sc-profile__v, .sc-profile.is-visible .sc-profile__row:nth-child(4) .sc-profile__tick { animation: sc-pop 0.35s ease 2.2s both; }
.sc-profile.is-visible .sc-profile__row:nth-child(5) .sc-profile__photos i { animation: sc-pop 0.3s ease both; }
.sc-profile.is-visible .sc-profile__row:nth-child(5) .sc-profile__photos i:nth-child(1) { animation-delay: 2.8s; }
.sc-profile.is-visible .sc-profile__row:nth-child(5) .sc-profile__photos i:nth-child(2) { animation-delay: 2.95s; }
.sc-profile.is-visible .sc-profile__row:nth-child(5) .sc-profile__photos i:nth-child(3) { animation-delay: 3.1s; }
.sc-profile.is-visible .sc-profile__row:nth-child(5) .sc-profile__photos i:nth-child(4) { animation-delay: 3.25s; }
.sc-profile.is-visible .sc-profile__row:nth-child(5) .sc-profile__tick { animation: sc-pop 0.35s ease 3.4s both; }
.sc-profile.is-visible .sc-profile__row:nth-child(6) .sc-profile__v, .sc-profile.is-visible .sc-profile__row:nth-child(6) .sc-profile__tick { animation: sc-pop 0.35s ease 4s both; }
.sc-profile__meter { width: 120px; text-align: center; }
.sc-profile__meter svg { width: 120px; height: 120px; transform: rotate(-90deg); }
.sc-profile__track { fill: none; stroke: var(--border); stroke-width: 10; }
.sc-profile__fill { fill: none; stroke: var(--accent-gold); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 220; }
.sc-profile.is-visible .sc-profile__fill { animation: sc-meter 4.2s cubic-bezier(.4, 0, .2, 1) 0.4s forwards; }
@keyframes sc-meter { to { stroke-dashoffset: 0; } }
.sc-profile__pct { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); margin-top: -78px; margin-bottom: 52px; }
.sc-profile__lbl { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }

/* ── 14. CALENDAR + LEADS LINE ──────────────────────────── */
.sc-calendar__months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin-bottom: 14px; }
.sc-calendar__m { aspect-ratio: 1; border-radius: 5px; background: #E4E8EF; display: flex; align-items: center; justify-content: center; font-size: 0.58rem; font-weight: 800; color: var(--muted); opacity: 0.35; }
.sc-calendar.is-visible .sc-calendar__m { animation: sc-month 0.3s ease both; }
@keyframes sc-month { to { opacity: 1; } }
.sc-calendar__m--gold { background: var(--accent-gold-tint); color: var(--accent-gold); }
.sc-calendar__m--brand { background: var(--brand-tint); color: var(--brand); }
.sc-calendar__chart { max-width: 100%; }
.sc-calendar__line { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-dasharray: 600; stroke-dashoffset: 600; }
.sc-calendar.is-visible .sc-calendar__line { animation: sc-draw 3.6s ease-in-out 0.4s forwards; }
.sc-calendar__lead { transform-box: fill-box; transform-origin: center; opacity: 0; }
.sc-calendar.is-visible .sc-calendar__lead { animation: sc-pop 0.35s cubic-bezier(.34, 1.56, .64, 1) both; }
.sc-calendar__note { font-size: 9px; font-family: var(--font-body); font-weight: 700; fill: var(--muted); }
.sc-calendar__note--gold { fill: var(--accent-gold); }
.sc-calendar__zone { fill: var(--accent-gold-tint); opacity: 0; }
.sc-calendar.is-visible .sc-calendar__zone { animation: sc-fade 0.5s ease 2.2s both; }

/* ── 15. WEEKLY REPORTS, MISSING ────────────────────────── */
.sc-reports__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; max-width: 480px; margin: 0 auto; }
.sc-reports__m { position: relative; border-radius: 10px; background: #fff; border: 1px solid var(--border); padding: 10px 6px 8px; text-align: center; opacity: 0; }
.sc-reports.is-visible .sc-reports__m { animation: sc-rise 0.4s var(--ease) both; }
.sc-reports.is-visible .sc-reports__m:nth-child(1) { animation-delay: 0.2s; }
.sc-reports.is-visible .sc-reports__m:nth-child(2) { animation-delay: 0.4s; }
.sc-reports.is-visible .sc-reports__m:nth-child(3) { animation-delay: 0.6s; }
.sc-reports.is-visible .sc-reports__m:nth-child(4) { animation-delay: 0.8s; }
.sc-reports.is-visible .sc-reports__m:nth-child(5) { animation-delay: 1s; }
.sc-reports.is-visible .sc-reports__m:nth-child(6) { animation-delay: 1.2s; }
.sc-reports__lbl { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.sc-reports__doc { width: 26px; height: 32px; margin: 6px auto 0; border-radius: 4px; border: 1.5px solid var(--brand-mid); position: relative; }
.sc-reports__doc::before, .sc-reports__doc::after { content: ''; position: absolute; left: 5px; right: 5px; height: 2px; background: var(--brand-mid); border-radius: 1px; }
.sc-reports__doc::before { top: 8px; } .sc-reports__doc::after { top: 14px; width: 60%; }
.sc-reports__m--missing .sc-reports__doc { border-style: dashed; border-color: #D3D9E2; }
.sc-reports__m--missing .sc-reports__doc::before, .sc-reports__m--missing .sc-reports__doc::after { display: none; }
.sc-reports__x { position: absolute; bottom: 6px; right: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent-red); color: #fff; font-size: 0.6rem; font-weight: 900; line-height: 16px; text-align: center; opacity: 0; transform: scale(0); }
.sc-reports.is-visible .sc-reports__m--missing .sc-reports__x { animation: sc-pop 0.35s cubic-bezier(.34, 1.56, .64, 1) both; }
.sc-reports.is-visible .sc-reports__m:nth-child(2) .sc-reports__x { animation-delay: 2s; }
.sc-reports.is-visible .sc-reports__m:nth-child(3) .sc-reports__x { animation-delay: 2.2s; }
.sc-reports.is-visible .sc-reports__m:nth-child(4) .sc-reports__x { animation-delay: 2.4s; }
.sc-reports.is-visible .sc-reports__m:nth-child(5) .sc-reports__x { animation-delay: 2.6s; }
.sc-reports.is-visible .sc-reports__m:nth-child(6) .sc-reports__x { animation-delay: 2.8s; }
.sc-reports__stamp { margin: 16px auto 0; width: max-content; padding: 7px 14px; border: 2px solid var(--accent-red); border-radius: 8px; color: var(--accent-red); font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.72rem; transform: rotate(-4deg) scale(0); opacity: 0; }
.sc-reports.is-visible .sc-reports__stamp { animation: sc-stamp 0.4s cubic-bezier(.34, 1.56, .64, 1) 3.4s both; }
@keyframes sc-stamp { to { transform: rotate(-4deg) scale(1); opacity: 1; } }

/* ── 16. INTRO VIDEO TRUST ──────────────────────────────── */
.sc-video__wrap { display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; }
.sc-video .phone__screen { min-height: 250px; background: linear-gradient(180deg, #F6F8FB, #E9EEF4); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.sc-video__person { width: 140px; height: 165px; }
.sc-video__wave { display: flex; gap: 3px; align-items: flex-end; height: 22px; margin: 0 0 14px; }
.sc-video__wave i { width: 3px; height: 4px; border-radius: 2px; background: var(--brand); }
.sc-video.is-visible .sc-video__wave i { animation: sc-wave 0.9s ease-in-out 0.6s infinite alternate; }
.sc-video.is-visible .sc-video__wave i:nth-child(2n) { animation-duration: 0.7s; }
.sc-video.is-visible .sc-video__wave i:nth-child(3n) { animation-duration: 1.1s; }
@keyframes sc-wave { to { height: 22px; } }
.sc-video__mouth { transform-box: fill-box; transform-origin: center; }
.sc-video.is-visible .sc-video__mouth { animation: sc-talk 0.35s ease-in-out 0.6s infinite alternate; }
@keyframes sc-talk { to { transform: scaleY(2.2); } }
.sc-video__qs { display: grid; gap: 8px; min-width: 200px; }
.sc-video__q { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: #fff; border: 1px solid var(--border); font-size: 0.76rem; font-weight: 700; color: var(--ink); opacity: 0; }
.sc-video.is-visible .sc-video__q { animation: sc-rise 0.4s var(--ease) both; }
.sc-video.is-visible .sc-video__q:nth-child(1) { animation-delay: 0.4s; }
.sc-video.is-visible .sc-video__q:nth-child(2) { animation-delay: 0.9s; }
.sc-video.is-visible .sc-video__q:nth-child(3) { animation-delay: 1.4s; }
.sc-video__q i { width: 16px; height: 16px; border-radius: 50%; background: #E4E8EF; flex-shrink: 0; position: relative; }
.sc-video__q i::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #1E7A46; transform: scale(0); }
.sc-video.is-visible .sc-video__q:nth-child(1) i::after { animation: sc-pop 0.35s ease 2.6s both; }
.sc-video.is-visible .sc-video__q:nth-child(2) i::after { animation: sc-pop 0.35s ease 3.4s both; }
.sc-video.is-visible .sc-video__q:nth-child(3) i::after { animation: sc-pop 0.35s ease 4.2s both; }
.sc-video__trust { margin-top: 6px; }
.sc-video__trust small { display: block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
.sc-video__bar { height: 8px; border-radius: 4px; background: #E4E8EF; overflow: hidden; }
.sc-video__bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--brand), var(--accent-gold)); transform: scaleX(0.12); transform-origin: left; }
.sc-video.is-visible .sc-video__bar i { animation: sc-fill 3.2s cubic-bezier(.4, 0, .2, 1) 2.2s forwards; }

/* ── 17. RESEARCH DESK ──────────────────────────────────── */
.sc-research__wrap { display: grid; grid-template-columns: 1fr 26px 1fr 26px 1fr; gap: 10px; align-items: center; }
@media (max-width: 640px) { .sc-research__wrap { grid-template-columns: 1fr; } .sc-research__arrow { transform: rotate(90deg); margin: 0 auto; } }
.sc-research__panel .frame__body { padding: 12px; }
.sc-research__t { font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.sc-research__item { font-size: 0.7rem; color: var(--ink); padding: 6px 8px; border-radius: 6px; background: var(--surface); margin-top: 4px; opacity: 0; }
.sc-research.is-visible .sc-research__item { animation: sc-rise 0.35s var(--ease) both; }
.sc-research.is-visible .sc-research__panel:nth-child(1) .sc-research__item:nth-child(2) { animation-delay: 0.3s; }
.sc-research.is-visible .sc-research__panel:nth-child(1) .sc-research__item:nth-child(3) { animation-delay: 0.5s; }
.sc-research.is-visible .sc-research__panel:nth-child(1) .sc-research__item:nth-child(4) { animation-delay: 0.7s; }
.sc-research.is-visible .sc-research__panel:nth-child(1) .sc-research__item:nth-child(5) { animation-delay: 0.9s; }
.sc-research.is-visible .sc-research__panel:nth-child(3) .sc-research__item:nth-child(2) { animation-delay: 2s; }
.sc-research.is-visible .sc-research__panel:nth-child(3) .sc-research__item:nth-child(3) { animation-delay: 2.3s; }
.sc-research.is-visible .sc-research__panel:nth-child(3) .sc-research__item:nth-child(4) { animation-delay: 2.6s; }
.sc-research.is-visible .sc-research__panel:nth-child(5) .sc-research__item:nth-child(2) { animation-delay: 3.9s; }
.sc-research.is-visible .sc-research__panel:nth-child(5) .sc-research__item:nth-child(3) { animation-delay: 4.2s; }
.sc-research__item--gold { background: var(--accent-gold-tint); font-weight: 700; }
.sc-research__item--ink { background: var(--ink); color: #fff; font-weight: 700; }
.sc-research__arrow { width: 26px; height: 26px; color: var(--brand-mid); }
.sc-research__arrow svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.sc-research.is-visible .sc-research__arrow:nth-child(2) svg { animation: sc-draw 0.5s ease 1.4s forwards; }
.sc-research.is-visible .sc-research__arrow:nth-child(4) svg { animation: sc-draw 0.5s ease 3.3s forwards; }

/* ── 18. BLUEPRINT VS PILE ──────────────────────────────── */
.sc-blueprint__wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .sc-blueprint__wrap { grid-template-columns: 1fr; } }
.sc-blueprint__label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.sc-blueprint__page { position: relative; height: 190px; background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.sc-blueprint__page--grid { background-image: linear-gradient(var(--brand-tint) 1px, transparent 1px), linear-gradient(90deg, var(--brand-tint) 1px, transparent 1px); background-size: 14px 14px; }
.sc-blueprint__b { position: absolute; border-radius: 4px; background: #D3D9E2; opacity: 0; }
.sc-blueprint__page--grid .sc-blueprint__b { background: var(--brand-mid); }
.sc-blueprint__b span { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); font-size: 0.56rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.sc-blueprint.is-visible .sc-blueprint__b { animation: sc-pop 0.4s ease both; }
.sc-blueprint.is-visible .sc-blueprint__page--pile .sc-blueprint__b:nth-child(1) { animation-delay: 0.3s; }
.sc-blueprint.is-visible .sc-blueprint__page--pile .sc-blueprint__b:nth-child(2) { animation-delay: 0.45s; }
.sc-blueprint.is-visible .sc-blueprint__page--pile .sc-blueprint__b:nth-child(3) { animation-delay: 0.6s; }
.sc-blueprint.is-visible .sc-blueprint__page--pile .sc-blueprint__b:nth-child(4) { animation-delay: 0.75s; }
.sc-blueprint.is-visible .sc-blueprint__page--pile .sc-blueprint__b:nth-child(5) { animation-delay: 0.9s; }
.sc-blueprint.is-visible .sc-blueprint__page--grid .sc-blueprint__b { animation-name: sc-rise; animation-duration: 0.45s; }
.sc-blueprint.is-visible .sc-blueprint__page--grid .sc-blueprint__b:nth-child(1) { animation-delay: 1.6s; }
.sc-blueprint.is-visible .sc-blueprint__page--grid .sc-blueprint__b:nth-child(2) { animation-delay: 2.1s; }
.sc-blueprint.is-visible .sc-blueprint__page--grid .sc-blueprint__b:nth-child(3) { animation-delay: 2.6s; }
.sc-blueprint.is-visible .sc-blueprint__page--grid .sc-blueprint__b:nth-child(4) { animation-delay: 3.1s; }
.sc-blueprint.is-visible .sc-blueprint__page--grid .sc-blueprint__b:nth-child(5) { animation-delay: 3.6s; }
.sc-blueprint__q { position: absolute; bottom: 8px; right: 8px; padding: 4px 8px; border-radius: 999px; font-size: 0.6rem; font-weight: 800; background: var(--accent-red-tint); color: var(--accent-red); opacity: 0; }
.sc-blueprint.is-visible .sc-blueprint__q { animation: sc-pop 0.35s ease 1.2s both; }

/* ── 19. COPY EDIT ──────────────────────────────────────── */
.sc-copy__card { max-width: 520px; margin: 0 auto; }
.sc-copy__card .frame__body { padding: 18px 20px; font-size: 0.95rem; line-height: 1.9; color: var(--body-text); }
.sc-copy__cut { position: relative; white-space: nowrap; }
.sc-copy__cut::after { content: ''; position: absolute; left: 0; top: 55%; height: 2px; width: 100%; background: var(--accent-red); transform: scaleX(0); transform-origin: left; }
.sc-copy.is-visible .sc-copy__cut::after { animation: sc-fill 0.35s ease both; }
.sc-copy.is-visible .sc-copy__cut { animation: sc-dim 0.35s ease both; }
.sc-copy__add { color: #1E7A46; font-weight: 800; }
.sc-copy__tally { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.sc-copy__tag { padding: 5px 10px; border-radius: 999px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0; }
.sc-copy__tag--bad { background: var(--accent-red-tint); color: var(--accent-red); }
.sc-copy__tag--good { background: #E6F4EA; color: #1E7A46; }
.sc-copy.is-visible .sc-copy__tag--bad { animation: sc-pop 0.35s ease 2.4s both; }
.sc-copy.is-visible .sc-copy__tag--good { animation: sc-pop 0.35s ease 5.6s both; }

/* ── 20. TIER BOARD ─────────────────────────────────────── */
.sc-tier__row { display: grid; grid-template-columns: 44px 1fr; gap: 8px; margin-bottom: 6px; }
.sc-tier__rank { display: flex; align-items: center; justify-content: center; border-radius: 8px; font-family: var(--font-display); font-size: 1rem; color: #fff; }
.sc-tier__rank--s { background: var(--accent-gold); } .sc-tier__rank--a { background: var(--brand); } .sc-tier__rank--c { background: var(--brand-light); } .sc-tier__rank--d { background: #9AA3B2; }
.sc-tier__lane { min-height: 40px; border-radius: 8px; background: #fff; border: 1px solid var(--border); padding: 6px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sc-tier__chip { padding: 5px 9px; border-radius: 6px; background: var(--surface); border: 1px solid var(--border); font-size: 0.68rem; font-weight: 700; color: var(--ink); opacity: 0; transform: translateY(-30px) rotate(-6deg); }
.sc-tier.is-visible .sc-tier__chip { animation: sc-drop 0.5s cubic-bezier(.34, 1.4, .64, 1) both; }
@keyframes sc-drop { to { opacity: 1; transform: none; } }

/* ── 21. LEAKY FUNNEL ───────────────────────────────────── */
.sc-funnel__svg { max-width: 380px; margin: 0 auto; }
.sc-funnel__drop { transform-box: fill-box; transform-origin: center; opacity: 0; }
.sc-funnel.is-visible .sc-funnel__drop { animation: sc-fall 1.6s ease-in both; }
@keyframes sc-fall { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; } 100% { opacity: 1; transform: translate(var(--dx, 0px), var(--dy, 140px)); } }
.sc-funnel__leak { transform-box: fill-box; transform-origin: center; opacity: 0; }
.sc-funnel.is-visible .sc-funnel__leak { animation: sc-leak 1.2s ease-in both; }
@keyframes sc-leak { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--lx, 40px), 40px); } }
.sc-funnel__tag { font-family: var(--font-body); font-size: 9px; font-weight: 800; fill: var(--accent-red); opacity: 0; }
.sc-funnel.is-visible .sc-funnel__tag { animation: sc-fade 0.3s ease both; }
.sc-funnel__phone { transform-box: fill-box; transform-origin: center; }
.sc-funnel.is-visible .sc-funnel__phone { animation: sc-ring 0.5s ease 4.6s 3; }
@keyframes sc-ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(12deg); } }

/* ── 22. POST STACK + TRUST ─────────────────────────────── */
.sc-stack__wrap { display: flex; align-items: flex-end; justify-content: center; gap: 30px; flex-wrap: wrap; }
.sc-stack__pile { position: relative; width: 210px; height: 170px; }
.sc-stack__post { position: absolute; left: 0; right: 0; height: 46px; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; opacity: 0; box-shadow: 0 4px 12px rgba(9, 19, 41, 0.06); }
.sc-stack__post b { display: block; font-size: 0.66rem; color: var(--ink); }
.sc-stack__post i { display: block; height: 6px; width: 60%; border-radius: 3px; background: #E4E8EF; margin-top: 5px; }
.sc-stack.is-visible .sc-stack__post { animation: sc-rise 0.45s var(--ease) both; }
.sc-stack.is-visible .sc-stack__post:nth-child(1) { animation-delay: 0.3s; }
.sc-stack.is-visible .sc-stack__post:nth-child(2) { animation-delay: 1s; }
.sc-stack.is-visible .sc-stack__post:nth-child(3) { animation-delay: 1.7s; }
.sc-stack.is-visible .sc-stack__post:nth-child(4) { animation-delay: 2.4s; }
.sc-stack__meter { width: 130px; }
.sc-stack__meter small { display: block; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; text-align: center; }
.sc-stack__bar { height: 120px; width: 26px; margin: 0 auto; border-radius: 13px; background: #E4E8EF; overflow: hidden; display: flex; align-items: flex-end; }
.sc-stack__bar i { display: block; width: 100%; height: 100%; background: linear-gradient(180deg, var(--accent-gold), var(--brand)); transform: scaleY(0.08); transform-origin: bottom; }
.sc-stack.is-visible .sc-stack__bar i { animation: sc-grow 2.8s cubic-bezier(.4, 0, .2, 1) 0.5s forwards; }
@keyframes sc-grow { to { transform: scaleY(1); } }
.sc-stack__quote { max-width: 240px; padding: 10px 12px; border-radius: 12px; background: var(--ink); color: #fff; font-size: 0.72rem; line-height: 1.5; opacity: 0; position: relative; }
.sc-stack__quote::before { content: ''; position: absolute; left: -8px; top: 16px; border: 6px solid transparent; border-right-color: var(--ink); }
.sc-stack__quote small { display: block; font-size: 0.6rem; opacity: 0.7; margin-top: 4px; }
.sc-stack.is-visible .sc-stack__quote { animation: sc-rise 0.45s var(--ease) 3.4s both; }

/* ── 23. FREE VS PAID BUILDER ───────────────────────────── */
.sc-builder__wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .sc-builder__wrap { grid-template-columns: 1fr; } }
.sc-builder__label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.sc-builder__site { position: relative; }
.sc-builder__site .frame__body { padding: 12px 12px 12px 30px; position: relative; }
.sc-builder__check { left: 6px; }
.sc-builder__sec { height: 24px; border-radius: 5px; background: #E4E8EF; margin-bottom: 6px; position: relative; font-size: 0.6rem; font-weight: 800; color: var(--muted); display: flex; align-items: center; padding-left: 8px; letter-spacing: 0.04em; text-transform: uppercase; }
.sc-builder__sec--lock { border: 1px dashed #C9D1DC; background: transparent; }
.sc-builder__sec--lock::after { content: ''; position: absolute; right: 8px; top: 6px; width: 10px; height: 8px; border: 2px solid #C9D1DC; border-top-width: 3px; border-radius: 2px; }
.sc-builder__wm { position: absolute; bottom: 8px; right: 8px; padding: 3px 7px; border-radius: 4px; background: var(--ink); color: #fff; font-size: 0.55rem; font-weight: 800; letter-spacing: 0.06em; opacity: 0; }
.sc-builder.is-visible .sc-builder__wm { animation: sc-fade 0.3s ease 1.4s both; }
.sc-builder__check { position: absolute; left: 7px; width: 20px; height: 20px; border-radius: 50%; background: #1E7A46; color: #fff; font-size: 0.6rem; font-weight: 900; line-height: 20px; text-align: center; opacity: 0; transform: scale(0); }
.sc-builder.is-visible .sc-builder__check { animation: sc-pop 0.35s cubic-bezier(.34, 1.56, .64, 1) both; }
.sc-builder.is-visible .sc-builder__check:nth-of-type(1) { animation-delay: 2s; }
.sc-builder.is-visible .sc-builder__check:nth-of-type(2) { animation-delay: 2.4s; }
.sc-builder.is-visible .sc-builder__check:nth-of-type(3) { animation-delay: 2.8s; }
.sc-builder__sec--on { background: var(--brand-tint); color: var(--brand); }

/* ── 24. PAGE ANATOMY PINS ──────────────────────────────── */
.sc-anatomy__wrap { position: relative; max-width: 520px; margin: 0 auto; }
.sc-anatomy__page .frame__body { padding: 0; }
.sc-anatomy__sec { padding: 14px 16px; border-bottom: 1px solid var(--border); position: relative; min-height: 46px; }
.sc-anatomy__sec:last-child { border-bottom: 0; }
.sc-anatomy__sec i { display: block; height: 8px; border-radius: 4px; background: #E4E8EF; }
.sc-anatomy__sec i + i { margin-top: 6px; width: 70%; }
.sc-anatomy__sec--hero { background: linear-gradient(180deg, #F6F8FB, #fff); min-height: 76px; }
.sc-anatomy__sec--hero b { display: block; font-family: var(--font-display); font-size: 0.85rem; color: var(--ink); margin-bottom: 8px; }
.sc-anatomy__pin { position: absolute; right: 12px; top: 50%; transform: translateY(-50%) scale(0); width: 24px; height: 24px; border-radius: 50%; background: var(--accent-gold); color: #fff; font-size: 0.66rem; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(200, 146, 63, 0.4); opacity: 0; }
.sc-anatomy__pin--brand { background: var(--brand); box-shadow: 0 3px 10px rgba(45, 91, 117, 0.35); }
.sc-anatomy.is-visible .sc-anatomy__pin { animation: sc-pin 0.4s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes sc-pin { to { opacity: 1; transform: translateY(-50%) scale(1); } }
.sc-anatomy__tag { position: absolute; right: 44px; top: 50%; transform: translateY(-50%); font-size: 0.62rem; font-weight: 800; color: var(--ink); background: #fff; padding: 3px 7px; border-radius: 4px; border: 1px solid var(--border); white-space: nowrap; opacity: 0; }
.sc-anatomy.is-visible .sc-anatomy__tag { animation: sc-fade 0.3s ease both; }
.sc-anatomy__call { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0); }
.sc-anatomy.is-visible .sc-anatomy__call { animation: sc-pop 0.4s cubic-bezier(.34, 1.56, .64, 1) 3.6s both; }

/* ── 25. JOHN, THREE THOUGHTS ───────────────────────────── */
.sc-john__wrap { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
@media (max-width: 640px) { .sc-john__wrap { grid-template-columns: 1fr; justify-items: center; } }
.sc-john__figure { width: 90px; }
.sc-john__thoughts { display: grid; gap: 8px; }
.sc-john__t { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--border); font-size: 0.78rem; font-weight: 700; color: var(--ink); opacity: 0; position: relative; }
.sc-john__t::before { content: ''; position: absolute; left: -7px; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-right-color: #fff; }
.sc-john.is-visible .sc-john__t { animation: sc-rise 0.4s var(--ease) both; }
.sc-john.is-visible .sc-john__t:nth-child(1) { animation-delay: 0.4s; }
.sc-john.is-visible .sc-john__t:nth-child(2) { animation-delay: 1.4s; }
.sc-john.is-visible .sc-john__t:nth-child(3) { animation-delay: 2.4s; }
.sc-john__ans { margin-left: auto; padding: 4px 8px; border-radius: 999px; background: #E6F4EA; color: #1E7A46; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0; transform: scale(0.5); }
.sc-john.is-visible .sc-john__t:nth-child(1) .sc-john__ans { animation: sc-pop 0.35s ease 3.6s both; }
.sc-john.is-visible .sc-john__t:nth-child(2) .sc-john__ans { animation: sc-pop 0.35s ease 4.2s both; }
.sc-john.is-visible .sc-john__t:nth-child(3) .sc-john__ans { animation: sc-pop 0.35s ease 4.8s both; }
.sc-john__eye { transform-box: fill-box; transform-origin: center; }
.sc-john.is-visible .sc-john__eye { animation: sc-blink 3.4s ease-in-out 1s infinite; }
@keyframes sc-blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.1); } }

/* ── 26. THREE DIALS ────────────────────────────────────── */
.sc-dials__row { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; }
.sc-dials__dial { width: 130px; text-align: center; }
.sc-dials__needle { transform-origin: 65px 62px; transform: rotate(-90deg); }
.sc-dials.is-visible .sc-dials__dial:nth-child(1) .sc-dials__needle { animation: sc-needle 1.4s cubic-bezier(.34, 1.3, .64, 1) 0.3s forwards; --to: 40deg; }
.sc-dials.is-visible .sc-dials__dial:nth-child(2) .sc-dials__needle { animation: sc-needle 1.4s cubic-bezier(.34, 1.3, .64, 1) 0.8s forwards; --to: 78deg; }
.sc-dials.is-visible .sc-dials__dial:nth-child(3) .sc-dials__needle { animation: sc-needle 1.4s cubic-bezier(.34, 1.3, .64, 1) 1.3s forwards; --to: 58deg; }
@keyframes sc-needle { to { transform: rotate(var(--to)); } }
.sc-dials__arc { fill: none; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 190; stroke-dashoffset: 190; }
.sc-dials.is-visible .sc-dials__dial:nth-child(1) .sc-dials__arc { animation: sc-arc 1.4s ease 0.3s forwards; --dash: 95; }
.sc-dials.is-visible .sc-dials__dial:nth-child(2) .sc-dials__arc { animation: sc-arc 1.4s ease 0.8s forwards; --dash: 20; }
.sc-dials.is-visible .sc-dials__dial:nth-child(3) .sc-dials__arc { animation: sc-arc 1.4s ease 1.3s forwards; --dash: 60; }
@keyframes sc-arc { to { stroke-dashoffset: var(--dash); } }
.sc-dials__name { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); margin-top: 4px; }
.sc-dials__sub { font-size: 0.64rem; color: var(--muted); }

/* ── 27. EMPTY STREET ───────────────────────────────────── */
.sc-street__svg { max-width: 460px; margin: 0 auto; }
.sc-street__sign { transform-box: fill-box; transform-origin: bottom center; transform: scaleY(0); }
.sc-street.is-visible .sc-street__sign { animation: sc-signup 0.6s cubic-bezier(.34, 1.4, .64, 1) 2s forwards; }
@keyframes sc-signup { to { transform: scaleY(1); } }
.sc-street__car { opacity: 0; }
.sc-street.is-visible .sc-street__car { animation: sc-drive 2.2s ease-in-out both; }
.sc-street.is-visible .sc-street__car:nth-of-type(1) { animation-delay: 3s; }
.sc-street.is-visible .sc-street__car:nth-of-type(2) { animation-delay: 3.8s; }
.sc-street.is-visible .sc-street__car:nth-of-type(3) { animation-delay: 4.6s; }
@keyframes sc-drive { 0% { opacity: 0; transform: translateX(-160px); } 15% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } }
.sc-street__empty { font-family: var(--font-body); font-size: 10px; font-weight: 800; fill: var(--muted); letter-spacing: 0.06em; }
.sc-street.is-visible .sc-street__empty { animation: sc-dim 0.4s ease 2.6s forwards; }

@media (prefers-reduced-motion: reduce) {
  .scene *, .scene *::before, .scene *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ── MONTHLY CHECK (maintenance service page) ───────────────
   A status board that runs through the monthly checks one by one and
   catches a broken contact form before a visitor does. */
.sc-monthly__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sc-monthly__title { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sc-monthly__pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; background: #EEF1F5; color: var(--muted); border: 1px solid var(--border); transition: background .4s ease, color .4s ease, border-color .4s ease; }
.sc-monthly__pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sc-monthly__pill .is-b { display: inline; }
.sc-monthly__pill .is-a { display: none; }
.sc-monthly__pill.is-all { background: #E8F6EE; color: #1E7A46; border-color: #BFE3CE; }
.sc-monthly__pill.is-all .is-b { display: none; }
.sc-monthly__pill.is-all .is-a { display: inline; }
.sc-monthly__row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; margin-bottom: 8px; background: #fff; border: 1px solid var(--border); border-radius: 12px; font-weight: 700; font-size: 0.88rem; color: var(--ink); transition: border-color .35s ease, background .35s ease; }
.sc-monthly__row:last-child { margin-bottom: 0; }
.sc-monthly__st { position: relative; flex: 0 0 auto; min-width: 104px; height: 22px; font-size: 0.75rem; font-weight: 800; }
.sc-monthly__st > span { position: absolute; right: 0; top: 0; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; line-height: 22px; transition: opacity .25s ease, transform .35s cubic-bezier(.22, 1, .36, 1); }
.sc-monthly__wait { color: var(--muted); }
.sc-monthly__wait::before { content: ''; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #C9D1DC; border-top-color: var(--brand); animation: sc-spin 0.8s linear infinite; }
.sc-monthly__ok { color: #1E7A46; opacity: 0; transform: scale(0.6); }
.sc-monthly__ok svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sc-monthly__bad { color: var(--accent-red); opacity: 0; }
.sc-monthly__row.is-ok .sc-monthly__wait { opacity: 0; }
.sc-monthly__row.is-ok .sc-monthly__ok { opacity: 1; transform: scale(1); }
@keyframes sc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sc-monthly__wait::before { animation: none; } }

/* the contact form row: spinner, then a red catch, then green once fixed */
.sc-monthly.is-visible .sc-monthly__row--form { animation: sc-m-row 1.5s 4.1s both; }
.sc-monthly.is-visible .sc-monthly__row--form .sc-monthly__wait { animation: sc-m-off 0.2s 4.1s both; }
.sc-monthly.is-visible .sc-monthly__row--form .sc-monthly__bad { animation: sc-m-bad 1.5s 4.1s both; }
.sc-monthly.is-visible .sc-monthly__row--form .sc-monthly__ok { animation: sc-m-fix 0.45s 5.6s both; }
@keyframes sc-m-row { 0% { background: #fff; border-color: var(--border); } 15%, 85% { background: var(--accent-red-tint); border-color: #F1D3CF; } 100% { background: #F3FBF6; border-color: #BFE3CE; } }
@keyframes sc-m-off { to { opacity: 0; } }
@keyframes sc-m-bad { 0% { opacity: 0; } 15%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sc-m-fix { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }