/* Redline Buddy v87 — live app windows made from the app's own screenshots.
   The window is the real screenshot; only the moving parts are layered on top: the Run Redline button (press),
   the Buddy logo in the Word dialog (turns while working), and the next screenshot, which crossfades in. Timing lives in index.html. */
:root { --rb-ease: cubic-bezier(.45,0,.25,1); --rb-in: .42s; --rb-out: .7s; }
.rb-shot { --u: calc(var(--hl-w, 600px) / 100); position: relative; display: block; width: 100%; aspect-ratio: 1260 / 1276; }
.rb-shot img { padding: 0 !important; border: 0 !important; background: none !important; min-height: 0 !important; position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; height: auto !important; max-width: none !important; display: block; border-radius: calc(2.46 * var(--u)) !important; box-shadow: none !important; filter: none !important; transition: none !important; opacity: 1 !important; inset: auto !important; pointer-events: none; }
.rb-shot img.base, .rb-shot img.res, .rb-shot img.work:not(.ring) { box-shadow: 0 28px 56px -30px rgba(27,29,34,.38), 0 2px 6px rgba(27,29,34,.06) !important; }
.rb-shot img.patch, .rb-shot img.btn, .rb-shot img.ring, .rb-shot img.eyes { border-radius: 0 !important; left: var(--l) !important; top: var(--t) !important; width: var(--w) !important; }
.rb-shot img.patch, .rb-shot img.btn, .rb-shot img.ring, .rb-shot img.eyes, .rb-shot img.work { opacity: 0 !important; }
/* Run Redline: the real button, lifted so it can press */
.rb-shot img.btn { opacity: 1 !important; transform-origin: 50% 50%; transition: transform .12s ease-out, filter .12s ease-out, opacity .2s ease-out !important; }
.rb-shot img.patch:not(.work):not(.spin) { opacity: 1 !important; }
.rb-shot.pressed img.btn { transform: scale(.96); filter: brightness(.88) !important; }
.rb-shot.running img.btn { opacity: .45 !important; }
/* Buddy ring turns while working (card: in the logo; word card: in the Creating-your-redline dialog) */
.rb-shot.running img.spin, .rb-shot.running img.work { opacity: 1 !important; }
.rb-shot img.ring { transform-origin: var(--cx, 50%) var(--cy, 50%); will-change: transform; }
.rb-shot img.eyes { z-index: 4; }
.rb-shot.running img.ring { animation: rbSpin 1.6s linear infinite; }
@keyframes rbSpin { to { transform: rotate(360deg); } }
/* screen changes: a short crossfade in (--rb-in); the loop fades back out slower (--rb-out). The destination state owns the timing. */
.rb-shot img.res, .rb-shot img.res2, .rb-shot img.work { transition: opacity var(--rb-out) var(--rb-ease) !important; }
.rb-shot.result img.res, .rb-shot.result2 img.res2, .rb-shot.running img.work { transition: opacity var(--rb-in) var(--rb-ease) !important; }
.rb-shot img.res { z-index: 2; opacity: 0 !important; }
.rb-shot.result img.res { opacity: 1 !important; }
.rb-shot.word img.work { z-index: 1; }
.rb-shot.word.result img.work { opacity: 0 !important; transition: opacity 0s var(--rb-in) !important; }
.rb-shot img.work.patch, .rb-shot img.work.ring { z-index: 3; } .rb-shot img.work.eyes { z-index: 4; }
.rb-shot.static img.btn, .rb-shot.static img.patch { opacity: 0 !important; }
/* placements */
.hero-live { position: relative; width: 100%; aspect-ratio: 1460 / 1800; overflow: hidden; }
.hero-live > .hl-devices { position: absolute; inset: 0; width: 100%; height: auto; z-index: 2; pointer-events: none; }
.hero-live > .hl-devices-pdf { z-index: 3; opacity: 0; transition: opacity var(--rb-out) var(--rb-ease); }
.hero-live.ipad-result > .hl-devices-pdf { opacity: 1; transition: opacity var(--rb-in) var(--rb-ease); }
.hero-live > .hl-devices-in { z-index: 4; transition: opacity var(--rb-out) var(--rb-ease); }
.hero-live.phone-result > .hl-devices-in { opacity: 0; transition: opacity var(--rb-in) var(--rb-ease); }
.hero-live.static > .hl-devices-in { opacity: 0; transition: none; }
.hero-live.static > .hl-devices-pdf { opacity: 1; transition: none; }
.hero-live > .hl-phone-patch, .hero-live > .hl-phone-btn, .hero-live > .hl-ipad-patch, .hero-live > .hl-ipad-btn { position: absolute !important; left: var(--l) !important; top: var(--t) !important; width: var(--w) !important; height: auto !important; max-width: none !important; border-radius: 0 !important; box-shadow: none !important; filter: none; z-index: 5; pointer-events: none; }
.hero-live > .hl-phone-btn, .hero-live > .hl-ipad-btn { transform-origin: 50% 50%; transition: transform .12s ease-out, filter .12s ease-out, opacity var(--rb-out) var(--rb-ease); }
.hero-live > .hl-phone-patch, .hero-live > .hl-ipad-patch { transition: opacity var(--rb-out) var(--rb-ease); }
.hero-live.phone-pressed > .hl-phone-btn, .hero-live.ipad-pressed > .hl-ipad-btn { transform: scale(.96); filter: brightness(.88); }
.hero-live.phone-result > .hl-phone-btn, .hero-live.phone-result > .hl-phone-patch, .hero-live.ipad-result > .hl-ipad-btn, .hero-live.ipad-result > .hl-ipad-patch { opacity: 0; transition: opacity var(--rb-in) var(--rb-ease); }
.hero-live.static > .hl-phone-btn, .hero-live.static > .hl-phone-patch, .hero-live.static > .hl-ipad-btn, .hero-live.static > .hl-ipad-patch { opacity: 0; transition: none; }
.hero-live .rb-shot { position: absolute; left: 7.4%; top: 0.94%; width: 85.2%; z-index: 1; }
.rb-slot { position: relative; display: block; width: 100%; aspect-ratio: 1260 / 1276; }
.rb-slot.mac .rb-shot, .rb-slot.mobile .rb-shot { position: absolute; left: 0; width: 100%; top: 0; }
.rb-shot.mobile img.base, .rb-shot.mobile img.res, .rb-shot.mobile img.res2 { box-shadow: none !important; border-radius: 0 !important; }
.rb-shot img.res2 { z-index: 3; opacity: 0 !important; }
.rb-shot.result2 img.res2 { opacity: 1 !important; }
.rb-shot.static img.res, .rb-shot.static img.res2 { transition: none !important; }
.rb-slot.word > img { display: block; position: absolute !important; right: 0 !important; left: auto !important; top: 0 !important; height: 100% !important; width: auto !important; border-radius: 12px !important; box-shadow: 0 28px 56px -30px rgba(27,29,34,.38), 0 2px 6px rgba(27,29,34,.06) !important; }
.rb-slot.word .rb-shot { position: absolute; left: 0; top: auto; bottom: 2%; width: 62%; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .rb-shot img.ring { animation: none !important; } }