.ll-hero-art { position:absolute;top:0;right:3%;width:46%;height:100%;pointer-events:none; }
.ll-pendant { display:block;width:100%;height:100%;overflow:visible; }
.ll-pendant-sway { transform-origin:200px 0;animation:ll-pendant-sway 4s ease-in-out infinite alternate; }
.ll-bulb-colour { color:#ffbd38;animation:ll-bulb-colour 7.5s steps(1,end) infinite; }
.ll-bulb-aura { opacity:.18;filter:blur(28px); }
.ll-bulb-halo { opacity:.25;filter:blur(14px); }
@keyframes ll-pendant-sway { from { transform:rotate(-4deg); } to { transform:rotate(4deg); } }
@keyframes ll-bulb-colour { 0%,100% { color:#ffbd38; } 20% { color:#ff527b; } 40% { color:#bd65ea; } 60% { color:#4f86ff; } 80% { color:#64d4aa; } }
@media(prefers-reduced-motion:reduce) { .ll-pendant-sway,.ll-bulb-colour { animation:none; } }
.lucalight-case .ll-gallery { background:#e8e1f1; margin-bottom:0; padding-block:var(--section-space); }
.lucalight-case .ll-slide { flex-basis:min(30vw,22rem);margin:0; }
.lucalight-case .ll-gallery .gallery-screen,.lucalight-case .ll-gallery .gallery-slide:first-child .gallery-screen { width:min(100%,17rem); height:auto; aspect-ratio:944/2048; border:3px solid #282828; border-radius:2rem; }
.lucalight-case .ll-gallery .gallery-screen img { width:100%; height:100%; object-fit:contain; }
.lucalight-case .ll-gallery .gallery-controls { margin-right:max(0px,calc((100vw - 78rem)/2)); }
.lucalight-case .gallery-button:disabled { opacity:.3; cursor:default; }
.ll-track:focus-visible { outline:3px solid var(--migration-purple); outline-offset:4px; }
.ll-playground { --play-colour:#0758ff; position:relative; isolation:isolate; overflow:hidden; border-radius:1.5rem; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:2rem; min-height:35rem; background:#0b061b; color:white; padding:clamp(1.5rem,4vw,4rem); }
.ll-playground::before { content:''; position:absolute; z-index:-1; inset:0; background:radial-gradient(ellipse at 75% 50%,var(--play-colour),transparent 75%); opacity:.6; transition:background .5s; }
.ll-demo-copy { max-width:24rem; }
.lucalight-case .ll-demo-copy .eyebrow { color:#e3b8ff; }
.lucalight-case .ll-demo-copy h3 { font-size:clamp(1.8rem,3vw,2.7rem); }
.lucalight-case .ll-demo-note { font-size:.875rem; line-height:1.5; opacity:.7; }
#ll-colour-output { display:inline-block; margin-top:1rem; border:1px solid #ffffff55; border-radius:999px; padding:.6rem 1rem; font-size:.875rem; }
.ll-demo-phone { width:min(100%,17rem); height:31rem; justify-self:center; background:#100b20; border:3px solid #282828; border-radius:2rem; padding:.8rem .65rem 1.2rem; box-shadow:5px 6px 0 #0002; }
.ll-demo-status { display:flex; justify-content:space-between; padding:.2rem .6rem 1.5rem; font-size:.75rem; font-weight:700; }
.ll-colour-grid { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; height:calc(100% - 2.5rem); }
.ll-colour-grid button { background:var(--tile-colour); border:3px solid transparent; border-radius:1.2rem; cursor:pointer; transition:transform .15s,border-color .15s; }
.ll-colour-grid button[aria-pressed=true] { border-color:white; box-shadow:0 0 0 1px #ffffff66; }
.ll-colour-grid button:hover { transform:scale(.97); }
.ll-colour-grid button:focus-visible { outline:3px solid white; outline-offset:3px; }
.ll-building { margin-top:var(--feature-space); }
.ll-brief { padding:1.5rem; background:#f0eaf6; border-radius:1rem; }
.ll-brief > div { border-top:1px solid #d7ccdf; padding-block:1rem; }
.ll-brief strong,.ll-brief span { display:block; }
.ll-brief strong { margin-bottom:.4rem; }
.ll-brief span { font-size:1rem; line-height:1.5; }
@media(max-width:760px) {
 .lucalight-case .migration-hero { min-height:57rem; padding-bottom:34rem; }
 .ll-hero-art { top:auto;right:0;bottom:0;width:100%;height:32rem; }
 .lucalight-case .ll-slide { flex-basis:72vw;min-width:0; }
 .lucalight-case .ll-gallery .gallery-heading::after { content:'Swipe to explore the screens →';display:block;margin-top:1rem;font-size:.85rem;color:#625b66; }
 .ll-playground { grid-template-columns:1fr; gap:2rem; padding:2rem 1.5rem; }
 .ll-demo-copy { max-width:none; }
}
@media(prefers-reduced-motion:reduce) { .ll-colour-grid button,.ll-playground::before { transition:none; } }

/* Balloon play mirrors the app's colourful, overlapping balloons. */
.ll-balloon-stage { position:relative;height:calc(100% - 2.5rem);overflow:hidden;border-radius:1.25rem;background:#3e2458; }
.ll-balloon { position:absolute;left:var(--balloon-x);top:var(--balloon-y);width:42%;padding:0;border:0;background:none;color:var(--balloon-colour);cursor:pointer;animation:ll-balloon-rise var(--rise-duration,9s) linear infinite;animation-delay:calc(var(--float-delay) * 2);transition:opacity .15s;touch-action:manipulation; }
.ll-balloon svg { display:block;width:100%;overflow:visible;transition:transform .2s; }
.ll-balloon:hover svg { transform:scale(1.06); }
.ll-balloon:focus-visible { outline:2px solid white;outline-offset:-2px;border-radius:45%;z-index:2; }
.ll-balloon.is-popped { opacity:0;pointer-events:none;animation:none;top:110%; }
.ll-pop-piece { position:absolute;width:7px;height:10px;border-radius:2px;pointer-events:none;animation:ll-pop .6s ease-out forwards; }
@keyframes ll-balloon-rise { from {top:110%;transform:translateX(-5px) rotate(-3deg)} to {top:-45%;transform:translateX(8px) rotate(3deg)} }
.ll-balloon:nth-child(2n) { --rise-duration:11s; }
.ll-balloon:nth-child(3n) { --rise-duration:8s; }
.ll-balloon:focus-visible { animation-play-state:paused; }
@keyframes ll-pop { to {transform:translate(var(--pop-x),var(--pop-y)) rotate(120deg);opacity:0} }
@media(prefers-reduced-motion:reduce) { .ll-balloon {animation:none;transition:none;top:var(--balloon-y)}.ll-balloon svg {transition:none}.ll-balloon:hover svg {transform:none} }