/* ODRAVIO Client Panel Entry Motion System V187 */
html.li187-lock,html.li187-lock body{overflow:hidden!important}
.li187{--blue:#0b5cff;--blue2:#55a0ff;--navy:#081a38;--red:#ef3154;--red2:#ff738c;position:fixed;inset:0;z-index:2147482500;overflow:hidden;background:#fff;opacity:0;visibility:hidden;pointer-events:none;isolation:isolate;transition:opacity .18s ease,visibility .18s step-end}
.li187.is-playing{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .07s ease}
.li187.is-leaving{opacity:0;transition:opacity .22s ease}
.li187-bg,.li187-grid,.li187-rings,.li187-slices,.li187-pixels,.li187-rays,.li187-lines{position:absolute;inset:0;pointer-events:none}
.li187-bg{background:#fff}
.li187-grid{opacity:0;background-image:linear-gradient(rgba(13,72,170,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(13,72,170,.08) 1px,transparent 1px);background-size:34px 34px;mask-image:radial-gradient(circle at center,#000 0 34%,transparent 72%)}
.li187-core{position:absolute;z-index:20;left:50%;top:50%;display:flex;align-items:center;gap:24px;transform:translate(-50%,-50%);white-space:nowrap;opacity:0}
.li187-mark-wrap{position:relative;width:118px;height:118px;display:grid;place-items:center;flex:0 0 118px}
.li187-mark{position:relative;z-index:2;width:104px;height:104px;object-fit:contain;filter:drop-shadow(0 15px 28px rgba(14,55,122,.18))}
.li187-mark-halo{position:absolute;inset:7px;border-radius:32px;background:radial-gradient(circle at 45% 45%,rgba(54,137,255,.22),rgba(239,49,84,.08) 58%,transparent 72%);filter:blur(6px)}
.li187-word{display:grid;gap:7px}
.li187-word strong{font:950 clamp(34px,5vw,64px)/.95 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.12em;color:var(--navy)}
.li187-word span{font:900 10px/1 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.38em;color:#62738d}
.li187-bottom{position:absolute;z-index:25;left:50%;bottom:9.2vh;display:flex;align-items:center;gap:14px;transform:translateX(-50%);opacity:0;color:#17335f}
.li187-bottom span{display:block;width:44px;height:1px;background:linear-gradient(90deg,transparent,var(--blue))}.li187-bottom span:last-child{background:linear-gradient(90deg,var(--red),transparent)}
.li187-bottom b{font:900 11px/1 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.28em;white-space:nowrap}
.li187-rings{left:50%;top:50%;width:1px;height:1px;inset:auto}
.li187-rings i{position:absolute;left:0;top:0;width:220px;height:220px;margin:-110px;border:1px solid rgba(20,101,230,.18);border-radius:50%;opacity:0}
.li187-rings i:nth-child(2){width:320px;height:320px;margin:-160px;border-color:rgba(239,49,84,.16)}
.li187-rings i:nth-child(3){width:430px;height:430px;margin:-215px;border-style:dashed}
.li187-rings i:nth-child(4){width:570px;height:570px;margin:-285px;border-color:rgba(12,44,93,.08)}
.li187-slices{display:grid;grid-template-columns:repeat(12,1fr)}
.li187-slices i{display:block;opacity:0;background:linear-gradient(160deg,rgba(11,92,255,.96),rgba(12,49,111,.97));transform-origin:center}
.li187-slices i:nth-child(even){background:linear-gradient(20deg,rgba(239,49,84,.96),rgba(132,14,41,.97))}
.li187-pixels i{position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:2px;background:var(--blue);opacity:0;transform:rotate(var(--a)) translateX(210px)}
.li187-pixels i:nth-child(3n){background:var(--red);width:6px;height:6px}.li187-pixels i:nth-child(4n){width:11px;height:11px}
.li187-rays{left:50%;top:50%;width:1px;height:1px;inset:auto}
.li187-rays i{position:absolute;left:0;top:0;width:2px;height:46vh;background:linear-gradient(transparent,rgba(11,92,255,.8),transparent);transform-origin:50% 0;transform:rotate(var(--a));opacity:0}
.li187-rays i:nth-child(even){background:linear-gradient(transparent,rgba(239,49,84,.75),transparent)}
.li187-lines i{position:absolute;left:8%;right:8%;top:var(--top);height:1px;background:linear-gradient(90deg,transparent,rgba(20,78,168,.22),transparent);opacity:0}

/* Shared invariant entrance/exit for the brand and bottom label. Variant rules override this strongly. */
.li187.is-playing .li187-bottom{animation:li187Bottom 1.25s cubic-bezier(.16,1,.3,1) .72s both}
@keyframes li187Bottom{0%{opacity:0;transform:translate(-50%,14px)}38%,78%{opacity:1;transform:translate(-50%,0)}100%{opacity:.84;transform:translate(-50%,0)}}

/* 01 — Split Gates: opposing full-height blue/red slabs tear open. */
.li187-v1 .li187-bg::before,.li187-v1 .li187-bg::after{content:"";position:absolute;top:-10%;bottom:-10%;width:62%;z-index:1}
.li187-v1 .li187-bg::before{left:-10%;background:linear-gradient(135deg,#061c4a,#0d65ff 68%,#58a0ff);clip-path:polygon(0 0,100% 0,76% 100%,0 100%)}
.li187-v1 .li187-bg::after{right:-10%;background:linear-gradient(315deg,#6d071d,#ef3154 64%,#ff728c);clip-path:polygon(24% 0,100% 0,100% 100%,0 100%)}
.li187-v1.is-playing .li187-bg::before{animation:li187GateL 2.22s cubic-bezier(.16,1,.3,1) both}.li187-v1.is-playing .li187-bg::after{animation:li187GateR 2.22s cubic-bezier(.16,1,.3,1) both}
.li187-v1.is-playing .li187-core{animation:li187CorePop 1.15s cubic-bezier(.16,1,.3,1) .56s both}
@keyframes li187GateL{0%{transform:translateX(-105%)}18%,43%{transform:none}67%,100%{transform:translateX(-116%) rotate(-2deg)}}
@keyframes li187GateR{0%{transform:translateX(105%)}18%,43%{transform:none}67%,100%{transform:translateX(116%) rotate(2deg)}}
@keyframes li187CorePop{0%{opacity:0;transform:translate(-50%,-50%) scale(.76);filter:blur(12px)}35%,80%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}100%{opacity:.96}}

/* 02 — Pixel Forge: dozens of pixels collapse inward and forge the brand. */
.li187-v2 .li187-bg{background:radial-gradient(circle at center,#f8fbff 0,#fff 58%)}
.li187-v2.is-playing .li187-pixels i{animation:li187PixelForge 1.5s cubic-bezier(.18,.9,.2,1) calc(var(--i)*13ms) both}
.li187-v2.is-playing .li187-core{animation:li187ForgeCore 1.38s cubic-bezier(.16,1,.3,1) .42s both}
@keyframes li187PixelForge{0%{opacity:0;transform:rotate(var(--a)) translateX(48vw) scale(2)}28%{opacity:1}72%{opacity:1;transform:rotate(var(--a)) translateX(92px) scale(.85)}100%{opacity:0;transform:rotate(var(--a)) translateX(18px) scale(.2)}}
@keyframes li187ForgeCore{0%,20%{opacity:0;transform:translate(-50%,-50%) scale(.45);filter:blur(10px)}52%{opacity:1;transform:translate(-50%,-50%) scale(1.06);filter:blur(0)}72%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* 03 — Orbital Lock: rings spin in different axes then lock around the logo. */
.li187-v3 .li187-bg{background:radial-gradient(circle at center,#eef5ff 0,#fff 55%)}
.li187-v3.is-playing .li187-rings i{opacity:1;animation:li187Orbit 1.75s cubic-bezier(.16,1,.3,1) calc(var(--i)*70ms) both}
.li187-v3.is-playing .li187-core{animation:li187OrbitCore 1.4s cubic-bezier(.16,1,.3,1) .32s both}
@keyframes li187Orbit{0%{opacity:0;transform:scale(.3) rotate(-170deg);border-width:3px}45%{opacity:.9;transform:scale(1.12) rotate(35deg)}100%{opacity:.18;transform:scale(1) rotate(140deg);border-width:1px}}
@keyframes li187OrbitCore{0%{opacity:0;transform:translate(-50%,-50%) rotateY(75deg) scale(.7)}45%{opacity:1;transform:translate(-50%,-50%) rotateY(-7deg) scale(1.03)}100%{opacity:1;transform:translate(-50%,-50%) rotateY(0) scale(1)}}

/* 04 — Scanner: a luminous scan bar builds the brand line-by-line. */
.li187-v4 .li187-bg{background:#071a36}.li187-v4 .li187-grid{opacity:.28;filter:invert(1)}
.li187-v4 .li187-bg::after{content:"";position:absolute;left:0;right:0;height:7px;top:-10%;background:linear-gradient(90deg,transparent,#4aa2ff,#fff,#ff5574,transparent);box-shadow:0 0 34px #5da7ff;z-index:8}
.li187-v4 .li187-word strong{color:#fff}.li187-v4 .li187-word span,.li187-v4 .li187-bottom{color:#d9e6ff}.li187-v4 .li187-mark{filter:drop-shadow(0 0 24px rgba(86,160,255,.55))}
.li187-v4.is-playing .li187-bg::after{animation:li187Scan 1.55s cubic-bezier(.4,0,.2,1) .08s both}.li187-v4.is-playing .li187-core{animation:li187ScanCore 1.65s steps(12,end) .18s both}
@keyframes li187Scan{0%{top:-8%}88%,100%{top:108%}}
@keyframes li187ScanCore{0%{opacity:0;clip-path:inset(100% 0 0 0)}16%{opacity:1}100%{opacity:1;clip-path:inset(0 0 0 0)}}

/* 05 — Magnetic Shards: angular blue/red shards fly from corners and snap away. */
.li187-v5 .li187-slices{display:block;left:50%;top:50%;width:1px;height:1px;inset:auto}.li187-v5 .li187-slices i{position:absolute;width:28vw;height:16vh;left:0;top:0;margin:-8vh 0 0 -14vw;clip-path:polygon(0 18%,100% 0,82% 100%,12% 82%);background:linear-gradient(135deg,var(--blue),#71adff);transform:rotate(var(--a)) translateX(68vmax) rotate(16deg)}
.li187-v5 .li187-slices i:nth-child(even){background:linear-gradient(135deg,var(--red),#ff8aa0)}
.li187-v5.is-playing .li187-slices i{animation:li187Shard 1.55s cubic-bezier(.16,1,.3,1) calc(var(--i)*18ms) both}.li187-v5.is-playing .li187-core{animation:li187ShardCore 1.45s cubic-bezier(.16,1,.3,1) .38s both}
@keyframes li187Shard{0%{opacity:0;transform:rotate(var(--a)) translateX(68vmax) rotate(16deg) scale(.6)}38%{opacity:.86;transform:rotate(var(--a)) translateX(80px) rotate(4deg) scale(.42)}70%,100%{opacity:0;transform:rotate(var(--a)) translateX(12px) rotate(-12deg) scale(.04)}}
@keyframes li187ShardCore{0%{opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(-5deg)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(1deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* 06 — Prism Slices: alternating vertical color prisms open like a camera shutter. */
.li187-v6 .li187-slices i{opacity:1;transform:scaleY(0);transform-origin:top}.li187-v6 .li187-slices i:nth-child(3n){background:#fff}
.li187-v6.is-playing .li187-slices i{animation:li187Prism 1.9s cubic-bezier(.77,0,.18,1) calc(var(--i)*28ms) both}.li187-v6.is-playing .li187-core{animation:li187PrismCore 1.25s cubic-bezier(.16,1,.3,1) .62s both}
@keyframes li187Prism{0%{transform:scaleY(0)}28%,53%{transform:scaleY(1)}80%,100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes li187PrismCore{0%{opacity:0;transform:translate(-50%,-50%) scaleX(.2)}55%{opacity:1;transform:translate(-50%,-50%) scaleX(1.06)}100%{opacity:1;transform:translate(-50%,-50%) scaleX(1)}}

/* 07 — Deep Zoom: the interface arrives through a long optical tunnel. */
.li187-v7 .li187-bg{background:radial-gradient(circle at center,#fff 0 10%,#eaf2ff 11%,#0a2859 45%,#030b17 100%)}
.li187-v7 .li187-rings i{opacity:.35;border-color:rgba(255,255,255,.42)}
.li187-v7 .li187-word strong{color:#fff}.li187-v7 .li187-word span,.li187-v7 .li187-bottom{color:#d4e2ff}
.li187-v7.is-playing .li187-bg{animation:li187TunnelBg 2.1s cubic-bezier(.16,1,.3,1) both}.li187-v7.is-playing .li187-rings{animation:li187TunnelRings 1.6s linear both}.li187-v7.is-playing .li187-core{animation:li187TunnelCore 1.6s cubic-bezier(.16,1,.3,1) .18s both}
@keyframes li187TunnelBg{0%{transform:scale(4);filter:blur(12px)}62%{transform:scale(1);filter:blur(0)}100%{background:#fff}}
@keyframes li187TunnelRings{0%{transform:scale(6);opacity:0}35%{opacity:1}100%{transform:scale(.8);opacity:0}}
@keyframes li187TunnelCore{0%{opacity:0;transform:translate(-50%,-50%) scale(.08)}58%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* 08 — Vertical Blinds: white/blue/red blinds flip in 3D. */
.li187-v8{perspective:1100px}.li187-v8 .li187-slices i{opacity:1;transform:rotateY(90deg);transform-origin:left center;background:#f6f9ff}.li187-v8 .li187-slices i:nth-child(3n+1){background:#0b5cff}.li187-v8 .li187-slices i:nth-child(3n+2){background:#ef3154}
.li187-v8.is-playing .li187-slices i{animation:li187Blind 1.8s cubic-bezier(.16,1,.3,1) calc(var(--i)*36ms) both}.li187-v8.is-playing .li187-core{animation:li187BlindCore 1.2s cubic-bezier(.16,1,.3,1) .68s both}
@keyframes li187Blind{0%{transform:rotateY(90deg)}32%,55%{transform:rotateY(0)}82%,100%{transform:rotateY(-90deg);transform-origin:right center}}
@keyframes li187BlindCore{0%{opacity:0;transform:translate(-50%,-50%) rotateX(25deg) translateY(24px)}100%{opacity:1;transform:translate(-50%,-50%) rotateX(0) translateY(0)}}

/* 09 — Signal Ripple: concentric shockwaves burst outward from the logo. */
.li187-v9 .li187-bg{background:radial-gradient(circle at center,#f3f8ff,#fff 62%)}.li187-v9 .li187-rings i{border-width:3px;border-color:rgba(11,92,255,.42)}.li187-v9 .li187-rings i:nth-child(even){border-color:rgba(239,49,84,.34)}
.li187-v9.is-playing .li187-rings i{animation:li187Ripple 1.7s ease-out calc(var(--i)*140ms) both}.li187-v9.is-playing .li187-core{animation:li187HeartbeatCore 1.55s cubic-bezier(.16,1,.3,1) .2s both}
@keyframes li187Ripple{0%{opacity:0;transform:scale(.1)}20%{opacity:.95}100%{opacity:0;transform:scale(2.15);border-width:1px}}
@keyframes li187HeartbeatCore{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}28%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}44%{transform:translate(-50%,-50%) scale(.97)}60%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* 10 — Constellation: points appear around the center, then connect. */
.li187-v10 .li187-bg{background:#061630}.li187-v10 .li187-word strong{color:#fff}.li187-v10 .li187-word span,.li187-v10 .li187-bottom{color:#c7d9f8}.li187-v10 .li187-lines i{background:linear-gradient(90deg,transparent,rgba(91,162,255,.65),rgba(255,83,113,.55),transparent)}
.li187-v10.is-playing .li187-pixels i{animation:li187Star 1.5s ease-out calc(var(--i)*24ms) both}.li187-v10.is-playing .li187-lines i{animation:li187ConstLine 1.25s ease-out calc(var(--i)*45ms + .25s) both}.li187-v10.is-playing .li187-core{animation:li187StarCore 1.25s ease .52s both}
@keyframes li187Star{0%{opacity:0;transform:rotate(var(--a)) translateX(260px) scale(0)}35%,75%{opacity:1;transform:rotate(var(--a)) translateX(var(--star-r)) scale(1)}100%{opacity:.35}}
@keyframes li187ConstLine{0%{opacity:0;transform:scaleX(0)}100%{opacity:.5;transform:scaleX(1)}}
@keyframes li187StarCore{0%{opacity:0;filter:blur(14px);transform:translate(-50%,-50%) scale(1.2)}100%{opacity:1;filter:blur(0);transform:translate(-50%,-50%) scale(1)}}

/* 11 — Digital Rain: vertical code-like bars fall and dissolve. */
.li187-v11 .li187-bg{background:#f7fbff}.li187-v11 .li187-lines{transform:rotate(90deg)}.li187-v11 .li187-lines i{height:2px;background:linear-gradient(90deg,transparent,#0b5cff 42%,#ef3154 58%,transparent)}
.li187-v11.is-playing .li187-lines i{animation:li187Rain 1.8s cubic-bezier(.12,.8,.2,1) calc(var(--i)*45ms) both}.li187-v11.is-playing .li187-core{animation:li187RainCore 1.25s ease .55s both}
@keyframes li187Rain{0%{opacity:0;transform:translateX(-70vh) scaleX(.2)}28%{opacity:1}72%{opacity:.8;transform:translateX(0) scaleX(1)}100%{opacity:0;transform:translateX(70vh) scaleX(.3)}}
@keyframes li187RainCore{0%{opacity:0;transform:translate(-50%,-58%);clip-path:inset(0 0 100% 0)}100%{opacity:1;transform:translate(-50%,-50%);clip-path:inset(0)}}

/* 12 — Folded Panels: four perspective planes fold open from the center. */
.li187-v12{perspective:1200px}.li187-v12 .li187-bg::before,.li187-v12 .li187-bg::after{content:"";position:absolute;inset:0 50% 0 0;background:linear-gradient(135deg,#0b5cff,#163d87);transform-origin:right center}.li187-v12 .li187-bg::after{inset:0 0 0 50%;background:linear-gradient(225deg,#ef3154,#8b1731);transform-origin:left center}
.li187-v12.is-playing .li187-bg::before{animation:li187FoldL 1.9s cubic-bezier(.16,1,.3,1) both}.li187-v12.is-playing .li187-bg::after{animation:li187FoldR 1.9s cubic-bezier(.16,1,.3,1) both}.li187-v12.is-playing .li187-core{animation:li187FoldCore 1.3s cubic-bezier(.16,1,.3,1) .52s both}
@keyframes li187FoldL{0%{transform:rotateY(0)}45%{transform:rotateY(0)}78%,100%{transform:rotateY(-105deg)}}@keyframes li187FoldR{0%{transform:rotateY(0)}45%{transform:rotateY(0)}78%,100%{transform:rotateY(105deg)}}
@keyframes li187FoldCore{0%{opacity:0;transform:translate(-50%,-50%) scale(.82) rotateX(-18deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotateX(0)}}

/* 13 — Iris Reveal: a circular aperture opens then flashes white. */
.li187-v13 .li187-bg{background:#081a38;clip-path:circle(0 at 50% 50%)}.li187-v13 .li187-word strong{color:#fff}.li187-v13 .li187-word span,.li187-v13 .li187-bottom{color:#d7e5ff}
.li187-v13.is-playing .li187-bg{animation:li187Iris 2.05s cubic-bezier(.16,1,.3,1) both}.li187-v13.is-playing .li187-core{animation:li187IrisCore 1.2s cubic-bezier(.16,1,.3,1) .45s both}
@keyframes li187Iris{0%{clip-path:circle(0 at 50% 50%);background:#081a38}46%{clip-path:circle(32vmax at 50% 50%)}72%{clip-path:circle(80vmax at 50% 50%);background:#081a38}100%{clip-path:circle(80vmax at 50% 50%);background:#fff}}
@keyframes li187IrisCore{0%{opacity:0;transform:translate(-50%,-50%) scale(1.45);filter:blur(16px)}100%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}}

/* 14 — Glitch Cut: sharp displaced RGB-like cuts; rare and intentionally aggressive. */
.li187-v14 .li187-bg{background:#fff}.li187-v14 .li187-core::before,.li187-v14 .li187-core::after{content:"ODRAVIO";position:absolute;left:142px;top:9px;font:950 clamp(34px,5vw,64px)/.95 Inter,sans-serif;letter-spacing:.12em;opacity:0;pointer-events:none}.li187-v14 .li187-core::before{color:#0b5cff}.li187-v14 .li187-core::after{color:#ef3154}
.li187-v14.is-playing .li187-core{animation:li187GlitchCore 1.75s steps(1,end) .2s both}.li187-v14.is-playing .li187-core::before{animation:li187GlitchBlue 1.45s steps(1,end) .35s both}.li187-v14.is-playing .li187-core::after{animation:li187GlitchRed 1.45s steps(1,end) .35s both}.li187-v14.is-playing .li187-lines i{animation:li187GlitchLine .7s steps(1,end) calc(var(--i)*38ms) both}
@keyframes li187GlitchCore{0%{opacity:0;transform:translate(-48%,-50%) skewX(8deg)}18%{opacity:1;transform:translate(-52%,-50%) skewX(-7deg)}28%{transform:translate(-49%,-48%) skewX(3deg)}42%,100%{opacity:1;transform:translate(-50%,-50%)}}
@keyframes li187GlitchBlue{0%,15%{opacity:0}16%,23%{opacity:.7;transform:translateX(-10px);clip-path:inset(10% 0 58% 0)}24%,39%{opacity:0}40%,48%{opacity:.5;transform:translateX(8px);clip-path:inset(62% 0 12% 0)}49%,100%{opacity:0}}
@keyframes li187GlitchRed{0%,23%{opacity:0}24%,31%{opacity:.65;transform:translateX(10px);clip-path:inset(35% 0 34% 0)}32%,55%{opacity:0}56%,62%{opacity:.5;transform:translateX(-7px);clip-path:inset(5% 0 72% 0)}63%,100%{opacity:0}}
@keyframes li187GlitchLine{0%{opacity:0}20%,35%{opacity:.8;transform:translateX(4vw)}36%,100%{opacity:0}}

/* 15 — Comet Trails: colored streaks orbit and whip past the brand. */
.li187-v15 .li187-rays i{height:36vw;max-height:520px;width:3px;filter:blur(.2px);transform-origin:50% 0}
.li187-v15.is-playing .li187-rays i{animation:li187Comet 1.8s cubic-bezier(.16,1,.3,1) calc(var(--i)*45ms) both}.li187-v15.is-playing .li187-core{animation:li187CometCore 1.3s cubic-bezier(.16,1,.3,1) .45s both}
@keyframes li187Comet{0%{opacity:0;transform:rotate(var(--a)) translateY(-50px) scaleY(.1)}35%{opacity:1}70%{transform:rotate(var(--a)) translateY(-20px) scaleY(1)}100%{opacity:0;transform:rotate(var(--a)) translateY(30px) scaleY(.2)}}
@keyframes li187CometCore{0%{opacity:0;transform:translate(-50%,-50%) scale(.7) rotate(-12deg)}55%{opacity:1;transform:translate(-50%,-50%) scale(1.06) rotate(2deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* 16 — Blueprint Build: grid appears, strokes draw, brand rises like a CAD model. */
.li187-v16 .li187-grid{opacity:0}.li187-v16 .li187-bg{background:#f8fbff}.li187-v16 .li187-lines i{background:#6ba4ff}
.li187-v16.is-playing .li187-grid{animation:li187GridIn 1.7s ease both}.li187-v16.is-playing .li187-lines i{animation:li187BlueprintLine 1.4s cubic-bezier(.16,1,.3,1) calc(var(--i)*55ms) both}.li187-v16.is-playing .li187-core{animation:li187BlueprintCore 1.25s cubic-bezier(.16,1,.3,1) .55s both}
@keyframes li187GridIn{0%{opacity:0;transform:scale(1.15)}40%,80%{opacity:.9;transform:scale(1)}100%{opacity:.18}}
@keyframes li187BlueprintLine{0%{opacity:0;transform:scaleX(0)}45%{opacity:.8;transform:scaleX(1)}100%{opacity:.12}}
@keyframes li187BlueprintCore{0%{opacity:0;transform:translate(-50%,-42%) scaleY(.35);filter:grayscale(1)}65%{opacity:1;transform:translate(-50%,-51%) scaleY(1.04);filter:grayscale(0)}100%{opacity:1;transform:translate(-50%,-50%) scaleY(1)}}

/* 17 — Tile Cascade: mosaic tiles sweep diagonally across the screen. */
.li187-v17 .li187-pixels i{width:82px;height:82px;border-radius:14px;left:var(--tile-x);top:var(--tile-y);transform:translate(0,0) rotate(12deg);background:linear-gradient(135deg,#eaf2ff,#cfe1ff)}.li187-v17 .li187-pixels i:nth-child(3n){background:linear-gradient(135deg,#fff0f3,#ffd5dd)}
.li187-v17.is-playing .li187-pixels i{animation:li187Tile 1.75s cubic-bezier(.16,1,.3,1) calc(var(--i)*22ms) both}.li187-v17.is-playing .li187-core{animation:li187TileCore 1.2s cubic-bezier(.16,1,.3,1) .5s both}
@keyframes li187Tile{0%{opacity:0;transform:translate(-22vw,24vh) rotate(-20deg) scale(.3)}38%{opacity:1;transform:translate(0,0) rotate(8deg) scale(1)}76%,100%{opacity:0;transform:translate(22vw,-24vh) rotate(28deg) scale(.5)}}
@keyframes li187TileCore{0%{opacity:0;transform:translate(-50%,-50%) scale(.65)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* 18 — Heartbeat: two dramatic pulses of blue/red light around a static lockup. */
.li187-v18 .li187-bg{background:radial-gradient(circle at center,rgba(11,92,255,.12),#fff 44%)}.li187-v18 .li187-mark-halo{inset:-30px;border-radius:50%}
.li187-v18.is-playing .li187-core{animation:li187HeartCore 1.75s cubic-bezier(.16,1,.3,1) .1s both}.li187-v18.is-playing .li187-mark-halo{animation:li187HeartHalo .72s ease-in-out .2s 2 both}
@keyframes li187HeartCore{0%{opacity:0;transform:translate(-50%,-50%) scale(.72)}24%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}37%{transform:translate(-50%,-50%) scale(.97)}52%{transform:translate(-50%,-50%) scale(1.07)}67%,100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes li187HeartHalo{0%{opacity:.15;transform:scale(.75);background:rgba(11,92,255,.2)}50%{opacity:.9;transform:scale(1.45);background:rgba(239,49,84,.22)}100%{opacity:.1;transform:scale(1.9)}}

/* 19 — Diagonal Ribbons: oversized ribbons cross in opposite directions. */
.li187-v19 .li187-lines i{left:-20%;right:-20%;height:9vh;transform:rotate(-12deg);background:linear-gradient(90deg,#0b5cff 0 46%,#fff 46% 53%,#ef3154 53% 100%)}
.li187-v19.is-playing .li187-lines i{animation:li187RibbonOdd 1.85s cubic-bezier(.16,1,.3,1) calc(var(--i)*42ms) both}.li187-v19.is-playing .li187-lines i:nth-child(even){animation-name:li187RibbonEven}.li187-v19.is-playing .li187-core{animation:li187RibbonCore 1.25s cubic-bezier(.16,1,.3,1) .54s both}
@keyframes li187RibbonOdd{0%{opacity:0;transform:translateX(-120%) rotate(-12deg)}35%,55%{opacity:.95;transform:translateX(0) rotate(-12deg)}82%,100%{opacity:0;transform:translateX(120%) rotate(-12deg)}}@keyframes li187RibbonEven{0%{opacity:0;transform:translateX(120%) rotate(-12deg)}35%,55%{opacity:.95;transform:translateX(0) rotate(-12deg)}82%,100%{opacity:0;transform:translateX(-120%) rotate(-12deg)}}
@keyframes li187RibbonCore{0%{opacity:0;transform:translate(-50%,-50%) scale(1.28);filter:blur(9px)}100%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0)}}

/* 20 — Supernova: rarest variant, explosive radial build then clean white finish. */
.li187-v20 .li187-bg{background:#020712}.li187-v20 .li187-word strong{color:#fff}.li187-v20 .li187-word span,.li187-v20 .li187-bottom{color:#d9e7ff}
.li187-v20 .li187-bg::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 60px 25px rgba(78,153,255,.65),0 0 120px 55px rgba(239,49,84,.28);opacity:0}
.li187-v20.is-playing .li187-bg::after{animation:li187Nova 2.25s cubic-bezier(.16,1,.3,1) both}.li187-v20.is-playing .li187-rays i{animation:li187NovaRay 1.75s cubic-bezier(.16,1,.3,1) calc(var(--i)*18ms + .18s) both}.li187-v20.is-playing .li187-pixels i{animation:li187NovaPixel 1.8s ease-out calc(var(--i)*12ms + .25s) both}.li187-v20.is-playing .li187-core{animation:li187NovaCore 1.45s cubic-bezier(.16,1,.3,1) .72s both}
@keyframes li187Nova{0%{opacity:0;transform:translate(-50%,-50%) scale(.1)}18%{opacity:1}48%{transform:translate(-50%,-50%) scale(13);opacity:1}68%{transform:translate(-50%,-50%) scale(40);opacity:.96;background:#fff}100%{transform:translate(-50%,-50%) scale(80);opacity:1;background:#fff;box-shadow:none}}
@keyframes li187NovaRay{0%{opacity:0;transform:rotate(var(--a)) scaleY(.05)}30%{opacity:1;transform:rotate(var(--a)) scaleY(1.5)}100%{opacity:0;transform:rotate(var(--a)) scaleY(.1)}}
@keyframes li187NovaPixel{0%{opacity:0;transform:rotate(var(--a)) translateX(20px) scale(.1)}35%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateX(55vw) scale(.7)}}
@keyframes li187NovaCore{0%{opacity:0;transform:translate(-50%,-50%) scale(.35);filter:blur(20px)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08);filter:blur(0)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

@media(max-width:680px){
  .li187-core{flex-direction:column;gap:12px;text-align:center}.li187-mark-wrap{width:94px;height:94px;flex-basis:94px}.li187-mark{width:84px;height:84px}.li187-word strong{font-size:34px;letter-spacing:.1em}.li187-word span{font-size:8px;letter-spacing:.3em}.li187-bottom{bottom:7vh}.li187-bottom span{width:26px}.li187-v14 .li187-core::before,.li187-v14 .li187-core::after{left:50%;top:108px;transform:translateX(-50%);font-size:34px}
}
@media(prefers-reduced-motion:reduce){
  .li187 *{animation:none!important;transition:none!important}.li187.is-playing .li187-core{opacity:1;transform:translate(-50%,-50%)}.li187.is-playing .li187-bottom{opacity:1}.li187-bg{background:#fff!important}.li187-grid,.li187-rings,.li187-slices,.li187-pixels,.li187-rays,.li187-lines{display:none!important}.li187-word strong{color:var(--navy)!important}.li187-word span,.li187-bottom{color:#62738d!important}
}