/* spekko.ai feature scenes: Spekko doing each job (What he does). Static, finished frame until pages.js adds .play;
   nothing moves under Reduce Motion. One 9 s loop per scene, each beat a keyframe window; one-shot sequences restart via
   .replay. Pearl Core renders only; colour comes from his work. Loads after pages.css. */
.scene { position: relative; width: min(440px, 100%); min-height: 280px; display: grid; align-content: center; --t: 9s; }
.sc-spk { position: absolute; left: -6px; bottom: -10px; width: 92px; height: auto; z-index: 3; filter: drop-shadow(0 12px 14px rgb(40 30 80 / 20%)); }
.scene .sc-col, .scene .sc-inbox, .scene .sc-run, .scene .art-brief, .scene > .card-ask, .sc-folders, .sc-draft { margin-left: 72px; }

/* chat */
.sc-col { display: grid; gap: 8px; padding-bottom: 20px; }
.sc-msg { max-width: 92%; font-size: 14px; line-height: 1.45; padding: 10px 12px; border: 1px solid var(--hair); background: #fff; border-radius: 14px; }
.sc-msg.you { justify-self: end; border-radius: 14px 14px 4px 14px; background: var(--ink); color: #fff; border-color: var(--ink); }
.sc-msg.him { justify-self: start; border-radius: 14px 14px 14px 4px; }
.sc-typing { position: absolute; left: 72px; top: 50%; display: flex; gap: 4px; padding: 12px 14px; border: 1px solid var(--hair); background: #fff; border-radius: 14px 14px 14px 4px; opacity: 0; }
.sc-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--mute); }
.sc-mem { font-size: 13px; color: var(--mute); padding: 8px 12px; border: 1px dashed #cfd2db; border-radius: 10px; width: max-content; max-width: 100%; box-sizing: border-box; }
.sc-mem span { color: var(--ink); font-weight: 600; margin-right: 6px; }

/* mail */
.sc-mail { gap: 12px; }
.sc-inbox { display: grid; gap: 6px; min-height: 124px; align-content: start; }
.sc-env { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; font-size: 13.5px; background: #fff; border: 1px solid var(--hair); border-radius: 10px; }
.sc-env span { color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-folders { display: flex; gap: 6px; }
.sc-folders span { font: 500 12.5px/1 var(--body); padding: 8px 10px; border-radius: 8px; background: var(--soft); border: 1px solid var(--hair); }
.sc-draft { border: 1px solid var(--hair); border-radius: 14px; padding: 14px 16px; background: #fff; box-shadow: 0 16px 30px -24px rgb(23 19 26 / 45%); }
.sc-draft b { font: 700 16px/1.25 var(--display); }
.sc-draft p { margin: 6px 0 0; font-size: 14px; color: #464c5a; }
.sc-draft .acts { margin-top: 10px; }

/* call: a plain call screen with his voice as a waveform, no captions */
.sc-call { justify-items: center; }
.sc-phone { width: 220px; display: grid; justify-items: center; gap: 6px; padding: 22px 18px 18px; border-radius: 28px; background: #fff; border: 1px solid var(--hair); box-shadow: 0 30px 60px -40px rgb(23 19 26 / 50%); }
.sc-who { font: 700 20px/1.1 var(--display); }
.sc-time { font-size: 13px; color: var(--mute); }
.sc-spk.big { position: static; width: 110px; margin: 6px 0 2px; }
.sc-keys { display: flex; gap: 6px; margin-top: 8px; }
.sc-keys span { font: 500 12px/1 var(--body); padding: 9px 11px; border-radius: 999px; border: 1px solid var(--hair); background: var(--soft); }
.sc-keys .end { background: #c41a2c; border-color: #c41a2c; color: #fff; }
.sc-call:not(.play) .wave i { animation: none; height: 60%; }

/* routine */
.sc-run { border: 1px solid var(--hair); border-radius: 14px; background: #fff; padding: 16px; display: grid; gap: 12px; }
.sc-run-h { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.sc-run-h span { color: var(--mute); white-space: nowrap; }
.sc-run ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sc-run li { position: relative; padding-left: 26px; font-size: 14px; }
.sc-run li::before { content: ""; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box; border: 1.5px solid var(--ink);
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.sc-bar { height: 4px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.sc-bar i { display: block; height: 100%; width: 100%; background: #12a15a; border-radius: inherit; }
.sc-out { margin: 0; font-size: 14px; font-weight: 500; }

/* brief */
.sc-brief .art-brief { width: auto; }

/* hologram: Spekko builds a page on a pearl light panel */
.sc-holo { min-height: 320px; justify-items: center; }
.holo-pad { position: absolute; left: 50%; bottom: 18px; width: 62%; height: 22px; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 138 31 / 30%), rgb(201 195 214 / 18%) 60%, transparent); }
.holo { position: relative; width: min(300px, 80%); margin-bottom: 40px; padding: 12px; display: grid; gap: 8px; border-radius: 14px; overflow: hidden; box-sizing: border-box;
  background: linear-gradient(160deg, rgb(255 255 255 / 80%), rgb(236 232 248 / 60%)); border: 1px solid #fff;
  box-shadow: 0 0 0 1px rgb(201 195 214 / 55%), 0 30px 60px -36px rgb(255 138 31 / 45%); transform: perspective(700px) rotateX(8deg); }
.holo-bar { display: flex; align-items: center; gap: 4px; font: 500 10.5px/1 var(--mono); color: var(--mute); margin-bottom: 2px; }
.holo-bar i { width: 6px; height: 6px; border-radius: 50%; background: #d9d6e4; }
.holo-bar span { margin-left: 6px; }
.h-blk { height: 12px; border-radius: 4px; background: rgb(23 19 26 / 10%); transform-origin: left center; }
.h1 { height: 34px; background: linear-gradient(90deg, rgb(255 138 31 / 28%), rgb(201 195 214 / 30%)); }
.h2 { width: 70%; }
.h-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.h3, .h4 { height: 46px; background: rgb(23 19 26 / 6%); border: 1px solid rgb(23 19 26 / 6%); }
.h5 { width: 42%; height: 22px; border-radius: 999px; background: var(--ink); opacity: .85; }
.holo-scan { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent 0 3px, rgb(255 255 255 / 35%) 3px 4px); }
.sc-spk.builder { left: auto; right: 0; bottom: 10px; width: 84px; }
.sc-changed { position: absolute; left: 0; right: 0; bottom: -4px; margin: auto; width: max-content; max-width: 100%; box-sizing: border-box; font-size: 13px; padding: 8px 12px; border-radius: 10px;
  background: #fff; border: 1px solid var(--hair); box-shadow: 0 10px 24px -18px rgb(23 19 26 / 45%); z-index: 4; }
.sc-changed span { margin-left: 6px; text-decoration: underline; text-underline-offset: 3px; }

/* needs you */
.sc-needs > .card-ask { max-width: 320px; margin-bottom: 30px; }
.sc-paid { position: absolute; left: 72px; bottom: 0; margin: 0; font-size: 14px; font-weight: 500; }

/* ---- the loops ---- */
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes sc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes dot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.scene.play .sc-spk { animation: bob 2.4s ease-in-out infinite; }

/* chat: you ask, he types, answers, remembers; hold, fade, again */
@keyframes c-you { 0%, 5% { opacity: 0; transform: translateY(8px); } 9%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes c-type { 0%, 15% { opacity: 0; } 18%, 32% { opacity: 1; } 35%, 100% { opacity: 0; } }
@keyframes c-him { 0%, 34% { opacity: 0; transform: translateY(8px); } 38%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes c-mem { 0%, 48% { opacity: 0; transform: scale(.96); } 52%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.sc-chat.play .you { animation: c-you var(--t) infinite both; }
.sc-chat.play .sc-typing { animation: c-type var(--t) infinite both; }
.sc-chat.play .sc-typing i { animation: dot 1s infinite; }
.sc-chat.play .sc-typing i:nth-child(2) { animation-delay: .15s; }
.sc-chat.play .sc-typing i:nth-child(3) { animation-delay: .3s; }
.sc-chat.play .him { animation: c-him var(--t) infinite both; }
.sc-chat.play .sc-mem { animation: c-mem var(--t) infinite both; }

/* mail: three letters arrive and drop into their folders, then his draft waits for your Send */
@keyframes m-env { 0% { opacity: 0; transform: translateX(-12px); } 6%, 30% { opacity: 1; transform: none; } 40%, 100% { opacity: 0; transform: translateY(54px) scale(.6); } }
@keyframes m-fold { 0%, 36% { background-color: var(--soft); border-color: var(--hair); } 40%, 46% { background-color: #e6efff; border-color: #2f7bff; } 52%, 100% { background-color: var(--soft); border-color: var(--hair); } }
@keyframes m-draft { 0%, 50% { opacity: 0; transform: translateY(10px); } 56%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.sc-mail.play .sc-env, .sc-mail.play .sc-folders span { animation: var(--k) var(--t) infinite both; }
.sc-mail.play .sc-env { --k: m-env; }
.sc-mail.play .sc-folders span { --k: m-fold; }
.sc-mail.play .e2, .sc-mail.play .f2 { animation-delay: .3s; }
.sc-mail.play .e3, .sc-mail.play .f3 { animation-delay: .6s; }
.sc-mail.play .sc-draft { animation: m-draft var(--t) infinite both; }

/* routine: steps tick one by one, the bar fills, the result lands */
@keyframes r-step { from { opacity: .35; } to { opacity: 1; } }
@keyframes r-tick { from { background-color: #fff; background-size: 0; } to { background-color: var(--ink); background-size: 14px; } }
@keyframes r-bar { 0%, 6% { width: 0; } 60%, 100% { width: 100%; } }
@keyframes r-out { 0%, 62% { opacity: 0; transform: translateY(6px); } 68%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.sc-routine.play li { animation: r-step .3s both; }
.sc-routine.play li::before { animation: r-tick .3s both; }
.sc-routine.play .s1, .sc-routine.play .s1::before { animation-delay: 1s; }
.sc-routine.play .s2, .sc-routine.play .s2::before { animation-delay: 2.2s; }
.sc-routine.play .s3, .sc-routine.play .s3::before { animation-delay: 3.4s; }
.sc-routine.play .s4, .sc-routine.play .s4::before { animation-delay: 4.6s; }
.sc-routine.play .sc-bar i { animation: r-bar var(--t) infinite both; }
.sc-routine.play .sc-out { animation: r-out var(--t) infinite both; }

/* brief: four lines arrive one after another */
.sc-brief.play .art-brief p { animation: sc-in .45s both; }
.sc-brief.play .b1 { animation-delay: .6s; }
.sc-brief.play .b2 { animation-delay: 1.4s; }
.sc-brief.play .b3 { animation-delay: 2.2s; }
.sc-brief.play .b4 { animation-delay: 3s; }

/* hologram: blocks print in under a sweeping light, then "Done" with Undo */
@keyframes h-blk { from { opacity: 0; transform: scaleX(.15); } to { opacity: 1; transform: none; } }
@keyframes h-sweep { from { transform: translateY(-100%); } to { transform: translateY(100%); } }
@keyframes h-done { 0%, 66% { opacity: 0; transform: translateY(8px); } 72%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes h-pad { 0%, 100% { opacity: .7; } 50% { opacity: 1; } }
.sc-holo.play .h-blk { animation: h-blk .5s cubic-bezier(.2, .8, .2, 1) both; }
.sc-holo.play .h1 { animation-delay: .6s; }
.sc-holo.play .h2 { animation-delay: 1.4s; }
.sc-holo.play .h3 { animation-delay: 2.2s; }
.sc-holo.play .h4 { animation-delay: 2.8s; }
.sc-holo.play .h5 { animation-delay: 3.6s; }
.sc-holo.play .holo-scan { animation: h-sweep 2.2s linear infinite; background: linear-gradient(180deg, transparent 40%, rgb(255 138 31 / 18%) 50%, transparent 60%); }
.sc-holo.play .holo-pad { animation: h-pad 2.4s ease-in-out infinite; }
.sc-holo.play .sc-changed { animation: h-done var(--t) infinite both; }

/* needs you: the card arrives, you tap Pay it, then it's paid */
@keyframes n-card { 0%, 4% { opacity: 0; transform: translateY(10px); } 10%, 56% { opacity: 1; transform: none; } 64%, 92% { opacity: .35; transform: translateY(-8px) scale(.97); } 100% { opacity: 0; } }
@keyframes n-tap { 0%, 44% { box-shadow: 0 0 0 0 rgb(23 19 26 / 0); transform: none; } 48% { box-shadow: 0 0 0 6px rgb(23 19 26 / 18%); transform: scale(.94); } 54%, 100% { box-shadow: 0 0 0 0 rgb(23 19 26 / 0); transform: none; } }
@keyframes n-paid { 0%, 60% { opacity: 0; } 66%, 92% { opacity: 1; } 100% { opacity: 0; } }
.sc-needs.play .card-ask { animation: n-card var(--t) infinite both; }
.sc-needs.play .tap { animation: n-tap var(--t) infinite both; }
.sc-needs.play .sc-paid { animation: n-paid var(--t) infinite both; }

/* pages.js toggles .replay for one frame to restart the one-shot sequences */
.scene.replay *, .scene.replay *::before { animation: none !important; }

@media (max-width: 560px) {
  .scene { min-height: 240px; }
  .sc-spk { width: 68px; }
  .scene .sc-col, .scene .sc-inbox, .scene .sc-run, .scene .art-brief, .scene > .card-ask, .sc-folders, .sc-draft { margin-left: 50px; }
  .sc-typing, .sc-paid { left: 50px; }
}
@media (prefers-reduced-motion: reduce) { .scene *, .scene *::before { animation: none !important; } }

/* mail: the draft takes the letters' place, so the card never sits half empty */
.sc-mail { align-content: start; padding-top: 24px; }
.sc-mail .sc-draft { position: absolute; top: 24px; left: 0; right: 0; }
.sc-mail:not(.play) .sc-env { opacity: 0; }
@media (max-width: 560px) { .sc-mail .sc-draft { left: 0; } }
/* keep him beside the cards, never over their text */
.sc-spk:not(.big):not(.builder) { width: 76px; left: -8px; bottom: -6px; }
@media (max-width: 560px) { .sc-spk:not(.big):not(.builder) { width: 56px; left: -6px; } }

/* hologram, staged: the page floats above him, he stands on the light pad and builds it through a beam */
.sc-holo { min-height: 380px; align-content: start; padding-top: 12px; }
.sc-holo .holo { margin-bottom: 0; }
.sc-spk.builder { left: calc(50% - 48px); right: auto; bottom: 22px; width: 96px; }
.holo-pad { bottom: 16px; width: 46%; height: 26px; }
.holo-beam { position: absolute; left: 50%; bottom: 96px; width: 58%; height: 108px; transform: translateX(-50%); clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0);
  background: linear-gradient(to top, rgb(255 138 31 / 32%), rgb(201 195 214 / 10%)); pointer-events: none; }
@keyframes h-beam { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.sc-holo.play .holo-beam { animation: h-beam 1.2s ease-in-out infinite; }
.sc-changed { top: 4px; bottom: auto; left: auto; right: -8px; margin: 0; }
@media (max-width: 560px) { .sc-holo { min-height: 340px; } .sc-changed { right: 0; } }
/* "Done" gets its own row above the panel */
.sc-holo { padding-top: 58px; min-height: 420px; }
.sc-changed { top: 4px; left: 0; right: 0; margin: 0 auto; }
@media (max-width: 560px) { .sc-holo { min-height: 390px; } .sc-changed { right: 0; } }