/* HLISTIX homepage: product-animation styles.
 * Copied verbatim from il_landing/static/css/landing.css (Israeli landing V3.6), which is
 * frozen and must not be edited. Only the rules the real-screenshot demos need are included;
 * keep in step with that file if the Israeli demos change. Variables are defined in home.css. */
@keyframes blink { 50% { opacity: 0; } }
.playctl { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1px solid #D6DDEA; border-radius: 99px; padding: .35rem .8rem; font: 600 .82rem 'Heebo', 'Heebo Fallback', sans-serif; color: var(--color-primary); cursor: pointer; }
.pframe { background: #fff; border: 1px solid #D5DDE9; border-radius: 16px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(32, 62, 108, .45), 0 2px 6px rgba(32, 62, 108, .06); }
.pframe__bar { display: flex; align-items: center; gap: .75rem; padding: .55rem .85rem; background: #EEF2F7; border-block-end: 1px solid #DDE3EC; }
.pframe__dots { display: flex; gap: .35rem; }
.pframe__dots i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: #CBD3DF; }
.pframe__url { flex: 1; max-inline-size: 26rem; margin-inline: auto; text-align: center; font: 500 .78rem 'Segoe UI', 'DM Sans', system-ui, sans-serif; color: #5B6577; background: #fff; border-radius: 8px; padding: .25rem .75rem; }
.pframe__body { position: relative; background: #F5F7FA; }
.pshot { display: block; inline-size: 100%; block-size: auto; }
.canvas { position: relative; container-type: inline-size; --u: calc(100cqi / var(--W)); font-family: 'Segoe UI', 'Segoe UI Web', Tahoma, 'DM Sans', sans-serif; direction: ltr; text-align: left; }
.canvas__base { display: block; inline-size: 100%; block-size: auto; }
.pov { position: absolute; opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s, box-shadow .6s; }
.pov.on { opacity: 1; visibility: visible; }
.pov-text { background: #fff; padding: calc(var(--u) * 9) calc(var(--u) * 12); font-size: calc(var(--u) * 14.5); line-height: calc(var(--u) * 19); color: #212529; white-space: pre-wrap; overflow: hidden; border-radius: calc(var(--u) * 4); }
.pcaret { display: inline-block; inline-size: max(1px, calc(var(--u) * 1.5)); block-size: calc(var(--u) * 16); background: #0077B6; vertical-align: text-bottom; animation: blink .9s steps(1) infinite; }
.pov-q { background: #fff; padding: calc(var(--u) * 6) calc(var(--u) * 2); overflow: hidden; }
.pov-q ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * 7.5); }
.pov-q li { display: flex; align-items: center; gap: calc(var(--u) * 9); block-size: calc(var(--u) * 36); padding: 0 calc(var(--u) * 12); border: 1px solid #E2E8F0; border-radius: calc(var(--u) * 6); background: #fff; font-size: calc(var(--u) * 12.5); color: #1F2937; white-space: nowrap; overflow: hidden; transition: opacity .35s var(--ease), transform .35s var(--ease), background-color .8s, border-color .8s, box-shadow .8s; }
.pov-q li::before { content: ''; flex: none; inline-size: calc(var(--u) * 12); block-size: calc(var(--u) * 12); border: 1px solid #767676; border-radius: 2px; }
.pov-q li.is-new { background: #EFF8FF; border-color: #7CC4F0; box-shadow: 0 0 0 calc(var(--u) * 3) rgba(3, 105, 161, .12); }
.pov-q li.is-enter { opacity: 0; transform: translateY(calc(var(--u) * -6)); }
.pov-q li.is-leaving { opacity: 0; transform: translateX(calc(var(--u) * 14)); }
.pq-empty { margin: 0; padding: calc(var(--u) * 10) calc(var(--u) * 12); font-size: calc(var(--u) * 12.5); color: #94A3B8; }
.pov-q:has(li) .pq-empty { display: none; }
.pov-card { overflow: hidden; border-radius: calc(var(--u) * 10); background: #fff; }
.pov-card img { position: absolute; inset: 0; inline-size: 100%; block-size: auto; opacity: 0; transition: opacity .5s var(--ease), transform .5s var(--ease); transform: translateY(calc(var(--u) * 8)); }
.pov-card img.on { opacity: 1; transform: none; }
.pov-card:has(img.on) .pcard-empty { display: none; }
.pov.pulse { box-shadow: 0 0 0 calc(var(--u) * 3) rgba(3, 105, 161, .28); }
.pwork { position: absolute; display: inline-flex; align-items: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 3) calc(var(--u) * 8); border-radius: 99px; background: #fff; border: 1px solid #BAE6FD; color: #0369A1; font: 600 calc(var(--u) * 11) 'Segoe UI', Tahoma, sans-serif; opacity: 0; transition: opacity .25s; pointer-events: none; }
.pwork.on { opacity: 1; }
.pwork i { inline-size: calc(var(--u) * 4); block-size: calc(var(--u) * 4); border-radius: 50%; background: #0369A1; animation: pdot 1s infinite; }
.pwork i:nth-child(2) { animation-delay: .15s; }
.pwork i:nth-child(3) { animation-delay: .3s; }
@keyframes pdot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.pov-foot { background: #F8FAFC; box-shadow: 0 calc(var(--u) * -10) calc(var(--u) * 24) rgba(15, 23, 42, .08); transform: translateY(calc(var(--u) * 20)); transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s; }
.pov-foot.on { transform: none; }
.pov-foot img { display: block; inline-size: 100%; }
.pring { position: absolute; border-radius: calc(var(--u) * 6); border: 2.5px solid #0077B6; opacity: 0; pointer-events: none; }
.pov-foot.press .pring, .press-bar.press .pring { animation: pring 1.4s var(--ease) 2; }
@keyframes pring { 0% { opacity: 0; transform: scale(1.15); } 35% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.03); } }
.pview--mob { display: none; }
@media (max-width: 759px) { .pview--desk { display: none; } .pview--mob { display: grid; gap: 10px; padding: 10px; } }
.pcrop { position: relative; overflow: hidden; border-radius: 10px; border: 1px solid #DDE3EC; background: #fff; }
.pcrop > .canvas { position: absolute; }
.stage__caption { justify-content: center; text-align: center; }
@media (min-width: 900px) { .stage__caption { padding-inline-start: 0; } }
.press-bar { position: relative; container-type: inline-size; --W: 589; --u: calc(100cqi / var(--W)); background: #fff; }
.press-next { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js-reveal .press-next { opacity: .2; transform: translateY(10px); }
.js-reveal .press-next.on { opacity: 1; transform: none; }
.pring-hot { position: absolute; inset: 0; border: 2px solid rgba(3, 105, 161, .55); border-radius: 12px; opacity: 0; pointer-events: none; }
.pm__vis.hot .pring-hot { animation: pring 1.6s var(--ease) 1; }
@media (prefers-reduced-motion: reduce) {
  .pov, .pov-q li, .pov-card img, .pov-foot, .press-next, .replaces li, .shift .arrow i { transition: none !important; }
  .pcaret, .pwork i, .pring { animation: none !important; }
}

.pov-text:not(.typing) .pcaret { display: none; }
@media (max-width: 559px) { .pframe__url { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }
.stage:focus { outline: none; }
.stage__controls { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-block-start: 1rem; }
.stage__controls .playctl { font-size: .95rem; padding: .5rem 1.1rem; min-block-size: 44px; box-shadow: 0 6px 16px -10px rgba(32, 62, 108, .4); }
.stage__controls .playctl [data-demo-icon] { display: inline-block; inline-size: 1.1em; text-align: center; color: var(--color-cta); }
.stage__caption { margin: 0; font-size: .82rem; color: var(--muted); text-align: center; }
.stage.relate .pov-text.on, .stage.relate .pov-q.on { box-shadow: 0 0 0 calc(var(--u) * 3) rgba(72, 103, 242, .35); }
.callout-canvas { position: relative; }
.cmark { position: absolute; transform: translate(-50%, -50%); inline-size: clamp(22px, 2.2vw, 30px); block-size: clamp(22px, 2.2vw, 30px); border-radius: 50%; display: grid; place-items: center; background: var(--color-cta); color: #fff; font: 700 clamp(.7rem, 1vw, .85rem) 'DM Sans', sans-serif; box-shadow: 0 0 0 4px rgba(72, 103, 242, .25), 0 6px 14px rgba(32, 62, 108, .35); transition: transform .3s var(--ease), box-shadow .3s; }
.cmark.is-on { transform: translate(-50%, -50%) scale(1.25); box-shadow: 0 0 0 8px rgba(72, 103, 242, .22), 0 8px 18px rgba(32, 62, 108, .4); }
.clist { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: .6rem; }
@media (min-width: 760px) { .clist { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .clist { grid-template-columns: repeat(5, 1fr); } }
.clist li { display: flex; gap: .55rem; align-items: flex-start; padding: .75rem .85rem; border-radius: 14px; background: #fff; border: 1px solid #DDE4F0; font-size: .92rem; line-height: 1.45; color: var(--ink); transition: border-color .3s, box-shadow .3s, transform .3s; }
.clist li.is-on { border-color: var(--color-cta); box-shadow: 0 10px 24px -14px rgba(72, 103, 242, .6); transform: translateY(-2px); }
.clist__n { flex: none; inline-size: 22px; block-size: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--color-cta); color: #fff; font: 700 .75rem 'DM Sans', sans-serif; }

/* Moment 5: large summary document reveal */
.reveal5 { display: grid; gap: 1.25rem; justify-items: center; }
.reveal5__bar { inline-size: min(100%, 620px); }
.reveal5__doc { margin: 0; inline-size: 100%; max-inline-size: 1180px; }
.reveal5__doc .stage__caption { margin-block-start: .75rem; }
.anim-ctl-wrap { text-align: center; margin: .75rem 0 0; }
.anim-ctl { background: rgba(255, 255, 255, .95); }
.pcover { background: #fff; display: grid; place-items: center; }
.pcover--soft { background: #F8FAFC; }
.pcover .pwork { opacity: 1; }
.pclick { position: absolute; border-radius: calc(var(--u) * 6); border: 2.5px solid #0077B6; opacity: 0; pointer-events: none; }
.pclick.go { animation: pring 1.2s var(--ease) 1; }
.pflash { position: absolute; border-radius: calc(var(--u) * 6); background: rgba(72, 103, 242, .14); box-shadow: 0 0 0 2px rgba(72, 103, 242, .4); opacity: 0; pointer-events: none; }
.pflash.go { animation: pflash 2.2s var(--ease) 1; }
@keyframes pflash { 15%, 60% { opacity: 1; } 100% { opacity: 0; } }
.pov-card img.out:not(.on) { opacity: 0; transform: translateX(calc(var(--u) * -40)); }
.tagring { position: absolute; border-radius: calc(var(--u) * 6); border: 2px solid #0077B6; background: rgba(0, 119, 182, .06); opacity: 0; pointer-events: none; }
.pov-card.tags .tagring { animation: pflash 2.4s var(--ease) 1; }
.press-next.pending { opacity: .15; transform: translateY(24px); }
.press-next { transition: opacity .7s var(--ease), transform .7s var(--ease); }
@media (prefers-reduced-motion: reduce) { .pclick.go, .pflash.go, .pov-card.tags .tagring { animation-duration: .01s; } }
.pstage { --s1: #3A64A8; --s2: #10244A; position: relative; isolation: isolate; padding: clamp(14px, 3vw, 40px); border-radius: clamp(20px, 2.4vw, 32px);
  background:
    radial-gradient(70% 55% at 85% 0%, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, 0) 65%),
    radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .13) 1px, rgba(255, 255, 255, 0) 1.6px) 0 0 / 18px 18px,
    linear-gradient(150deg, var(--s1) 0%, var(--s2) 100%);
  box-shadow: 0 50px 90px -50px rgba(12, 27, 54, .6), 0 0 0 1px rgba(255, 255, 255, .06) inset; }
.pm__vis.pstage::before { display: none; }
.pstage .pframe { border-color: rgba(255, 255, 255, .6); box-shadow: 0 34px 70px -28px rgba(4, 12, 30, .65), 0 0 0 1px rgba(255, 255, 255, .25); }
.pstage .playctl { background: rgba(255, 255, 255, .95); border-color: transparent; }
.pstage .stage__caption, .pstage .zoomhint { color: rgba(255, 255, 255, .85); }
.pstage--teal   { --s1: #35A596; --s2: #0F4A45; }
.pstage--indigo { --s1: #6480FA; --s2: #202D78; }
.pstage--green  { --s1: #6BA077; --s2: #1D4634; }
.pstage--violet { --s1: #9A86E6; --s2: #3A2C86; }
.pstage--navy   { --s1: #3F69AE; --s2: #0E2248; }