/* Prisma View · demonstrações de estilo e ilustrações animadas
   Os quatro sites são negócios fictícios desenhados só com CSS. As medidas usam a
   largura da moldura (cqw), então a mesma página vira layout de celular sozinha. */

/* Pausa as animações fora da tela; o JavaScript liga .is-playing quando aparecem. */
.frame-screen:not(.is-playing) *, .frame-screen:not(.is-playing) *::before, .frame-screen:not(.is-playing) *::after,
.ill:not(.is-playing) *, .ill:not(.is-playing) *::before, .ill:not(.is-playing) *::after { animation-play-state: paused; }

/* Base das páginas de demonstração */
.mock { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 3cqw 4.4cqw 3.4cqw; overflow: hidden; font-family: var(--sans); }
.m-nav { display: flex; align-items: center; gap: 2.6cqw; font-size: 1.3cqw; font-weight: 600; }
.m-logo { margin-right: auto; font-size: 1.9cqw; white-space: nowrap; }
.m-links { display: flex; gap: 2.4cqw; }
.m-links i { font-style: normal; opacity: 0.72; }
.m-btn { padding: 0.8cqw 1.7cqw; border-radius: 999px; font-weight: 700; white-space: nowrap; }
.m-hero { flex: 1; display: grid; grid-template-columns: 1.08fr 0.92fr; align-items: center; gap: 3cqw; min-height: 0; }
.m-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 1.7cqw; }
.m-eyebrow { font-size: 1.1cqw; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }
.m-title { display: block; font-size: 5cqw; line-height: 0.98; }
.m-title em { font-style: italic; }
.m-cta { display: inline-flex; align-items: center; gap: 0.8cqw; margin-top: 0.6cqw; padding: 1.3cqw 2.3cqw; border-radius: 999px; font-size: 1.35cqw; font-weight: 700; }
.m-cta svg { width: 1.7cqw; height: 1.7cqw; fill: currentColor; }
.m-open { display: inline-flex; align-items: center; gap: 0.8cqw; font-size: 1.12cqw; font-weight: 600; opacity: 0.85; }
.m-open b { width: 0.8cqw; height: 0.8cqw; border-radius: 50%; background: #3DBB7E; animation: m-pulse 2s infinite; }
@keyframes m-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.m-visual { position: relative; display: grid; place-items: center; height: 100%; }
.m-strip { display: flex; gap: 1.2cqw; padding-top: 2cqw; border-top: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 15%, transparent); font-size: 1.2cqw; font-weight: 600; }
.m-strip span { padding: 0.7cqw 1.5cqw; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 22%, transparent); white-space: nowrap; }

/* Forno Lume: brasa, tomate e creme */
.mock-forno { background: radial-gradient(70% 90% at 78% 45%, #3D1D12, #170E0B 72%); color: #F5E9DA; }
.mock-forno .m-logo { font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; }
.mock-forno .m-btn { background: #E2553A; color: #170E0B; }
.mock-forno .m-eyebrow { color: #EAA35E; }
.mock-forno .m-title { font-weight: 800; text-transform: uppercase; letter-spacing: -0.04em; font-size: 4.5cqw; line-height: 0.94; }
.mock-forno .m-cta { background: #E2553A; color: #1A0F0B; }
.pizza { position: relative; width: 33cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #EDB46C 0 58%, #CF8B47 68%, #A9652F 100%); box-shadow: 0 3cqw 6cqw rgba(0, 0, 0, 0.55), inset 0 0 2cqw rgba(90, 40, 10, 0.55); animation: m-spin 70s linear infinite; }
.pizza .sauce { position: absolute; inset: 9%; border-radius: 50%; background: radial-gradient(circle at 42% 36%, #DE4B2E, #B9331C 68%, #9C2714); box-shadow: inset 0 0 1.5cqw rgba(60, 10, 0, 0.5); }
.pizza i { position: absolute; width: 21%; aspect-ratio: 1.15; border-radius: 48% 52% 45% 55%; background: radial-gradient(circle at 40% 38%, #FFF5DC, #F3DAA2 58%, #E6BE78); box-shadow: 0 0.2cqw 0.6cqw rgba(80, 20, 0, 0.35); }
.pizza i:nth-of-type(1) { left: 22%; top: 20%; }
.pizza i:nth-of-type(2) { left: 52%; top: 15%; transform: rotate(40deg); }
.pizza i:nth-of-type(3) { left: 64%; top: 44%; transform: rotate(-20deg); }
.pizza i:nth-of-type(4) { left: 38%; top: 41%; transform: rotate(70deg); }
.pizza i:nth-of-type(5) { left: 16%; top: 52%; transform: rotate(15deg); }
.pizza i:nth-of-type(6) { left: 44%; top: 66%; transform: rotate(-35deg); }
.pizza i:nth-of-type(7) { left: 66%; top: 67%; transform: rotate(10deg); width: 16%; }
.pizza b { position: absolute; width: 8%; aspect-ratio: 0.58; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; background: linear-gradient(160deg, #5CAB4D, #2E6A29); box-shadow: 0 0.2cqw 0.4cqw rgba(0, 0, 0, 0.3); }
.pizza b:nth-of-type(1) { left: 37%; top: 27%; transform: rotate(-30deg); }
.pizza b:nth-of-type(2) { left: 60%; top: 34%; transform: rotate(50deg); }
.pizza b:nth-of-type(3) { left: 30%; top: 66%; transform: rotate(110deg); }
.pizza b:nth-of-type(4) { left: 57%; top: 57%; transform: rotate(-80deg); }
.pizza b:nth-of-type(5) { left: 47%; top: 82%; transform: rotate(20deg); }
@keyframes m-spin { to { transform: rotate(360deg); } }

/* Café Sereno: creme, café e caramelo */
.mock-cafe { background: #F3ECE2; color: #3A2A20; }
.mock-cafe .m-logo { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 2.5cqw; letter-spacing: -0.01em; }
.mock-cafe .m-btn { border: 1px solid #3A2A20; }
.mock-cafe .m-eyebrow { color: #B5734A; }
.mock-cafe .m-title { font-family: var(--serif); font-weight: 500; font-size: 5.6cqw; letter-spacing: -0.015em; line-height: 0.98; }
.mock-cafe .m-title em { color: #B5734A; }
.mock-cafe .m-cta { background: #3A2A20; color: #F3ECE2; }
.mock-cafe .m-open b { background: #6E9C5A; }
.cup { position: relative; width: 31cqw; aspect-ratio: 1; animation: m-sway 9s ease-in-out infinite; }
.cup .saucer { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #FDFBF7 0 56%, #ECE3D6 59%, #F8F3EC 72%, #E5DACA 100%); box-shadow: 0 2.4cqw 5cqw rgba(80, 50, 30, 0.2); }
.cup .handle { position: absolute; width: 15%; height: 9%; right: 5%; top: 45.5%; border-radius: 2cqw; background: #FFFFFF; box-shadow: 0 0.4cqw 0.8cqw rgba(80, 50, 30, 0.16); }
.cup .mug { position: absolute; inset: 18%; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1cqw 2cqw rgba(80, 50, 30, 0.2), inset 0 0 0 0.5cqw #F4EFE8; }
.cup .coffee { position: absolute; inset: 9%; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 45%, #AE7550, #7C4C2F 62%, #5C371F); }
.cup .art { position: absolute; left: 31%; top: 33%; width: 38%; height: 38%; transform: rotate(-45deg); background: #F4E4D0; filter: blur(0.12cqw); }
.cup .art::before, .cup .art::after { content: ""; position: absolute; width: 100%; height: 100%; border-radius: 50%; background: inherit; }
.cup .art::before { top: -50%; left: 0; }
.cup .art::after { left: 50%; top: 0; }
.cup .steam { position: absolute; left: 30%; right: 30%; top: -6%; height: 40%; }
.cup .steam i { position: absolute; bottom: 0; width: 26%; height: 100%; border-radius: 50%; background: radial-gradient(closest-side, rgba(90, 60, 40, 0.16), transparent); filter: blur(0.8cqw); opacity: 0; animation: m-steam 4.5s ease-in-out infinite; }
.cup .steam i:nth-child(1) { left: 6%; }
.cup .steam i:nth-child(2) { left: 38%; animation-delay: 1.5s; }
.cup .steam i:nth-child(3) { left: 70%; animation-delay: 3s; }
@keyframes m-steam { 0% { opacity: 0; transform: translateY(30%) scaleX(0.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40%) scaleX(1.3); } }
@keyframes m-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* Studio Íris: blush, vinho e preto */
.mock-iris { background: #ECDED8; color: #1C1617; }
.mock-iris .m-logo { font-weight: 300; text-transform: uppercase; letter-spacing: 0.4em; font-size: 1.6cqw; }
.mock-iris .m-btn { background: #1C1617; color: #ECDED8; }
.mock-iris .m-eyebrow { color: #9E5B63; }
.mock-iris .m-title { font-weight: 300; font-size: 6.2cqw; letter-spacing: -0.055em; line-height: 0.95; }
.mock-iris .m-title em { font-family: var(--serif); font-weight: 500; color: #9E5B63; letter-spacing: -0.02em; }
.mock-iris .m-cta { border: 1px solid #1C1617; }
.mock-iris .m-open b { background: #9E5B63; }
.arches { position: relative; width: 34cqw; height: 29cqw; display: flex; align-items: flex-end; justify-content: center; gap: 1.6cqw; }
.arches i { position: relative; z-index: 1; width: 9.6cqw; border-radius: 999px 999px 0 0; }
.arches i:nth-of-type(1) { height: 68%; background: #DDBBB6; }
.arches i:nth-of-type(2) { height: 96%; background: #BE878B; }
.arches i:nth-of-type(3) { height: 56%; background: #9E5B63; }
.arches .sun { position: absolute; z-index: 0; top: 6%; left: 8%; width: 9cqw; aspect-ratio: 1; border-radius: 50%; background: #F8EAE3; box-shadow: 0 0 4cqw rgba(255, 240, 232, 0.9); animation: m-sun 10s ease-in-out infinite alternate; }
@keyframes m-sun { from { transform: translate(0, 2cqw); } to { transform: translate(17cqw, -1cqw); } }

/* Bairro Pet: amarelo, verde e coral */
.mock-pet { background: #FFF1C9; color: #1F3B2F; }
.mock-pet .m-logo { font-weight: 800; font-size: 2.3cqw; letter-spacing: -0.045em; }
.mock-pet .m-btn { background: #1F3B2F; color: #FFF1C9; }
.mock-pet .m-eyebrow { color: #2F8F6B; }
.mock-pet .m-title { font-weight: 800; font-size: 4.8cqw; letter-spacing: -0.05em; line-height: 0.98; }
.mock-pet .m-cta { background: #FF8A5B; color: #1F3B2F; }
.mock-pet .m-open b { background: #2F8F6B; }
.blob { position: relative; width: 31cqw; aspect-ratio: 1; border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%; background: #FF8A5B; animation: m-morph 11s ease-in-out infinite; }
@keyframes m-morph { 0%, 100% { border-radius: 42% 58% 55% 45% / 50% 45% 55% 50%; } 50% { border-radius: 56% 44% 42% 58% / 44% 58% 42% 56%; } }
.paws { position: absolute; inset: 0; }
.paws i {
  position: absolute; width: 6cqw; aspect-ratio: 1; opacity: 0;
  background:
    radial-gradient(circle at 50% 70%, #1F3B2F 0 25%, transparent 26%),
    radial-gradient(circle at 18% 38%, #1F3B2F 0 10%, transparent 11%),
    radial-gradient(circle at 38% 17%, #1F3B2F 0 10%, transparent 11%),
    radial-gradient(circle at 62% 17%, #1F3B2F 0 10%, transparent 11%),
    radial-gradient(circle at 82% 38%, #1F3B2F 0 10%, transparent 11%);
  animation: m-paw 4.8s infinite;
}
.paws i:nth-child(1) { left: 14%; top: 70%; transform: rotate(40deg); animation-delay: 0s; }
.paws i:nth-child(2) { left: 26%; top: 54%; transform: rotate(40deg); animation-delay: 0.4s; }
.paws i:nth-child(3) { left: 32%; top: 72%; transform: rotate(40deg); animation-delay: 0.8s; }
.paws i:nth-child(4) { left: 46%; top: 50%; transform: rotate(40deg); animation-delay: 1.2s; }
.paws i:nth-child(5) { left: 52%; top: 66%; transform: rotate(40deg); animation-delay: 1.6s; }
.paws i:nth-child(6) { left: 66%; top: 44%; transform: rotate(40deg); animation-delay: 2s; }
@keyframes m-paw { 0% { opacity: 0; } 8%, 55% { opacity: 1; } 75%, 100% { opacity: 0; } }
.ball { position: absolute; right: 8%; top: 10%; width: 8cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #EEFF7A, #C6DD33 70%); box-shadow: inset 0 0 0 0.35cqw rgba(255, 255, 255, 0.55); animation: m-bounce 1.6s cubic-bezier(.5, 0, .5, 1) infinite alternate; }
@keyframes m-bounce { from { transform: translateY(0); } to { transform: translateY(-3cqw); } }

/* Faixa de luz que troca uma página pela outra */
.wipe {
  position: absolute; z-index: 5; top: -20%; bottom: -20%; left: 0; width: 20%;
  pointer-events: none; opacity: 0; mix-blend-mode: screen; filter: blur(8px);
  background: linear-gradient(90deg, transparent, rgba(227, 188, 204, 0.6), rgba(235, 203, 160, 0.65), rgba(174, 216, 200, 0.65), rgba(184, 205, 231, 0.65), rgba(138, 150, 225, 0.7), rgba(194, 175, 241, 0.6), transparent);
  transform: skewX(-14deg);
}

/* Moldura vertical: as mesmas páginas em layout de celular */
@container (orientation: portrait) {
  .mock { padding: 5cqw 6cqw 6cqw; }
  .m-nav { font-size: 3.2cqw; }
  .m-links { display: none; }
  .m-logo { font-size: 4.6cqw; }
  .mock-iris .m-logo { font-size: 3.6cqw; letter-spacing: 0.3em; }
  .mock-cafe .m-logo { font-size: 6cqw; }
  .m-btn { padding: 1.8cqw 3.6cqw; font-size: 3cqw; }
  .m-hero { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-content: start; gap: 3cqw; padding-top: 7cqw; }
  .m-copy { gap: 3.2cqw; }
  .m-eyebrow { font-size: 2.6cqw; }
  .m-title, .mock-forno .m-title, .mock-pet .m-title { font-size: 9.6cqw; }
  .mock-cafe .m-title { font-size: 11cqw; }
  .mock-iris .m-title { font-size: 12cqw; }
  .m-cta { padding: 3cqw 5cqw; font-size: 3.4cqw; gap: 2cqw; }
  .m-cta svg { width: 4cqw; height: 4cqw; }
  .m-open { font-size: 3cqw; gap: 2cqw; }
  .m-open b { width: 2cqw; height: 2cqw; }
  .m-visual { align-content: center; }
  .pizza, .cup, .blob { width: 42cqw; }
  .arches { width: 56cqw; height: 40cqw; gap: 3cqw; }
  .arches i { width: 15cqw; }
  .arches .sun { width: 13cqw; }
  .ball { width: 12cqw; }
  .paws i { width: 9cqw; }
  .m-strip { font-size: 2.8cqw; gap: 2cqw; padding-top: 4cqw; flex-wrap: wrap; }
  .m-strip span { padding: 1.4cqw 3cqw; }
  .m-strip span:nth-child(n+4) { display: none; }
}

/* Ilustrações dos cartões de entrega */
.ill { position: relative; height: 210px; margin-bottom: 22px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%), var(--bg-2); }

.ill-page::before { content: ""; position: absolute; left: 20%; right: 20%; top: 16%; bottom: -1px; border-radius: 12px 12px 0 0; background: var(--surface-2); border: 1px solid var(--line-2); border-bottom: 0; }
.ill-page .b { position: absolute; left: calc(20% + 12px); right: calc(20% + 12px); border-radius: 6px; background: rgba(242, 239, 247, 0.12); opacity: 0; animation: build 6s var(--ease) infinite; }
.ill-page .b1 { top: calc(16% + 13px); height: 8px; right: 55%; }
.ill-page .b2 { top: calc(16% + 31px); height: 54px; background: color-mix(in srgb, var(--c) 55%, transparent); animation-delay: .25s; }
.ill-page .b3 { top: calc(16% + 95px); height: 34px; display: flex; gap: 6px; background: none; animation-delay: .5s; }
.ill-page .b3 i { flex: 1; border-radius: 6px; background: rgba(242, 239, 247, 0.12); }
.ill-page .b4 { top: calc(16% + 139px); height: 40px; animation-delay: .75s; }
@keyframes build { 0%, 6% { opacity: 0; transform: translateY(12px); } 16%, 84% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }

.ill-resp { display: grid; place-items: center; }
.ill-resp .dev { width: 78%; height: 64%; padding: 10px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 6px; border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--surface-2); overflow: hidden; animation: resp 6s var(--ease) infinite; }
.ill-resp .dev i { flex: 1 1 64px; height: 36px; border-radius: 6px; background: rgba(242, 239, 247, 0.12); }
.ill-resp .dev i:first-child { flex-basis: 100%; height: 22px; background: color-mix(in srgb, var(--c) 60%, transparent); }
@keyframes resp { 0%, 18% { width: 78%; height: 64%; border-radius: 10px; } 42%, 70% { width: 30%; height: 84%; border-radius: 18px; } 92%, 100% { width: 78%; height: 64%; border-radius: 10px; } }

.ill-chat { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 16px; }
.ill-chat .msg { max-width: 80%; padding: 9px 12px; border-radius: 14px; font-size: 0.78rem; line-height: 1.35; opacity: 0; }
.ill-chat .msg-in { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; animation: chat-in 7s var(--ease) infinite; }
.ill-chat .msg-out { align-self: flex-end; background: var(--c); color: var(--bg); font-weight: 600; border-bottom-right-radius: 4px; animation: chat-out 7s var(--ease) infinite; }
.ill-chat .typing { position: absolute; right: 16px; bottom: 16px; display: flex; gap: 4px; padding: 11px 13px; border-radius: 14px; background: color-mix(in srgb, var(--c) 28%, var(--surface-2)); opacity: 0; animation: chat-typing 7s infinite; }
.ill-chat .typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--fg); animation: dot 1s infinite; }
.ill-chat .typing i:nth-child(2) { animation-delay: .15s; }
.ill-chat .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-in { 0%, 5% { opacity: 0; transform: translateY(10px); } 12%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes chat-typing { 0%, 20% { opacity: 0; } 25%, 44% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes chat-out { 0%, 47% { opacity: 0; transform: translateY(10px); } 54%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
@keyframes dot { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-3px); opacity: 1; } }

.ill-map {
  background:
    linear-gradient(118deg, transparent 46%, rgba(242, 239, 247, 0.1) 46% 49.5%, transparent 49.5%),
    repeating-linear-gradient(0deg, transparent 0 36px, rgba(242, 239, 247, 0.06) 36px 38px),
    repeating-linear-gradient(90deg, transparent 0 48px, rgba(242, 239, 247, 0.06) 48px 50px),
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--c) 14%, transparent), transparent 70%),
    var(--bg-2);
}
.ill-map .park { position: absolute; left: 10%; top: 14%; width: 30%; height: 32%; border-radius: 40% 60% 50% 50%; background: rgba(174, 216, 200, 0.13); }
.ill-map .pin { position: absolute; left: 60%; top: 30%; width: 28px; height: 28px; margin-left: -14px; border-radius: 50% 50% 50% 0; background: var(--c); transform: rotate(-45deg); animation: pin 4s var(--ease) infinite; }
.ill-map .pin i { position: absolute; inset: 8px; border-radius: 50%; background: var(--bg); }
.ill-map .ring { position: absolute; left: 60%; top: calc(30% + 31px); width: 44px; height: 14px; margin-left: -22px; border-radius: 50%; border: 1.5px solid var(--c); opacity: 0; animation: ring 4s ease-out infinite; }
.ill-map .chip { position: absolute; left: 14px; bottom: 14px; display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 0.74rem; font-weight: 600; }
.ill-map .chip b { width: 7px; height: 7px; border-radius: 50%; background: var(--s-jade); animation: pulse 2s infinite; }
@keyframes pin { 0% { transform: translateY(-70px) rotate(-45deg); opacity: 0; } 12% { opacity: 1; } 26% { transform: translateY(0) rotate(-45deg); } 32% { transform: translateY(-9px) rotate(-45deg); } 38%, 88% { transform: translateY(0) rotate(-45deg); opacity: 1; } 100% { transform: translateY(0) rotate(-45deg); opacity: 0; } }
@keyframes ring { 0%, 26% { opacity: 0; transform: scale(0.4); } 30% { opacity: 1; } 60%, 100% { opacity: 0; transform: scale(2.2); } }

.ill-brand { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 12px; padding: 0 26px; }
.ill-brand .aa { position: relative; height: 92px; }
.ill-brand .aa i { position: absolute; inset: 0; font-style: normal; font-size: 74px; line-height: 92px; opacity: 0; animation: aa 9s infinite; }
.ill-brand .aa i:nth-child(1) { font-family: var(--sans); font-weight: 800; letter-spacing: -0.06em; }
.ill-brand .aa i:nth-child(2) { font-family: var(--serif); font-style: italic; font-weight: 500; animation-delay: 3s; }
.ill-brand .aa i:nth-child(3) { font-family: var(--sans); font-weight: 200; letter-spacing: 0.02em; animation-delay: 6s; }
@keyframes aa { 0% { opacity: 0; transform: translateY(14px); } 5%, 28% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; transform: translateY(-14px); } }
.ill-brand .sws { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ill-brand .sws i { aspect-ratio: 1; border-radius: 12px; border: 1px solid var(--line); }
.ill-brand .sws i:nth-child(1) { animation: sw1 9s infinite; }
.ill-brand .sws i:nth-child(2) { animation: sw2 9s infinite; }
.ill-brand .sws i:nth-child(3) { animation: sw3 9s infinite; }
.ill-brand .sws i:nth-child(4) { animation: sw4 9s infinite; }
@keyframes sw1 { 0%, 30% { background: #E2553A; } 36%, 63% { background: #3A2A20; } 69%, 96% { background: #ECDED8; } 100% { background: #E2553A; } }
@keyframes sw2 { 0%, 30% { background: #F5E9DA; } 36%, 63% { background: #B5734A; } 69%, 96% { background: #9E5B63; } 100% { background: #F5E9DA; } }
@keyframes sw3 { 0%, 30% { background: #170E0B; } 36%, 63% { background: #F3ECE2; } 69%, 96% { background: #1C1617; } 100% { background: #170E0B; } }
@keyframes sw4 { 0%, 30% { background: #EAA35E; } 36%, 63% { background: #6E9C5A; } 69%, 96% { background: #DDBBB6; } 100% { background: #EAA35E; } }

.ill-share { display: grid; place-items: center; }
.ill-share .lp { width: 76%; border-radius: 12px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--line-2); animation: lp 6s var(--ease) infinite; }
.ill-share .lp-img { display: block; height: 78px; background: linear-gradient(110deg, rgba(242, 239, 247, 0.04) 30%, rgba(242, 239, 247, 0.18) 50%, rgba(242, 239, 247, 0.04) 70%) 0 0 / 220% 100%, color-mix(in srgb, var(--c) 32%, var(--bg-2)); animation: shimmer 2.4s linear infinite; }
.ill-share .lp-t, .ill-share .lp-d { display: block; margin: 12px 14px 0; height: 9px; width: 68%; border-radius: 4px; background: rgba(242, 239, 247, 0.42); }
.ill-share .lp-d { width: 88%; height: 7px; margin-top: 8px; background: rgba(242, 239, 247, 0.14); }
.ill-share .lp-d.s { width: 52%; margin-bottom: 14px; }
@keyframes lp { 0% { transform: translateY(22px) scale(0.96); opacity: 0; } 12%, 86% { transform: none; opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
@keyframes shimmer { from { background-position: 130% 0, 0 0; } to { background-position: -130% 0, 0 0; } }

.ill-launch .bar { position: absolute; left: 28px; right: 28px; top: 42%; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(242, 239, 247, 0.08); }
.ill-launch .bar i { display: block; height: 100%; background: var(--spectrum); transform-origin: 0 50%; animation: fill 5s var(--ease) infinite; }
.ill-launch .st { position: absolute; left: 28px; top: calc(42% + 26px); font-size: 0.86rem; }
.ill-launch .st-a { color: var(--muted); animation: st-a 5s infinite; }
.ill-launch .st-b { display: inline-flex; align-items: center; gap: 6px; color: var(--s-jade); font-weight: 700; opacity: 0; animation: st-b 5s infinite; }
.ill-launch .st-b svg { width: 16px; height: 16px; }
@keyframes fill { 0% { transform: scaleX(0); opacity: 1; } 58%, 92% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes st-a { 0%, 54% { opacity: 1; } 58%, 100% { opacity: 0; } }
@keyframes st-b { 0%, 57% { opacity: 0; transform: translateY(6px); } 63%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }