/* Site layer tokens (shared with the Style Editor, plans/page-look-fixes.md Phase 2): blank = CRM value. */
:root { --site-frame: var(--pal-black); --site-frame-edge: rgba(255, 255, 255, .14); --site-frame-shadow: 0 18px 40px rgba(0, 0, 0, .35); --site-phone-radius: 28px; --site-phone-w: 300px; }
/* Showcase effects (plans/sales-videos-lightning.md): loaded only when Website Settings > Showcase Effects is on and the page
   is a preview (or the owner turned on "Show on my public site"). Pictures keep their fixed frames, so nothing shifts. */
.fx .sb-frame{position:relative;isolation:isolate}
.fx .sb-frame.fx-rise{opacity:0;transform:perspective(900px) translateY(24px) rotateX(6deg);transition:opacity .6s ease-out,transform .6s ease-out}
.fx .sb-frame.fx-rise.fx-in{opacity:1;transform:none}
.fx .sb-frame.fx-glow::before{content:"";position:absolute;inset:6% 4%;z-index:-1;border-radius:24px;background:var(--brand);filter:blur(36px);opacity:.28}
.fx .sb-frame.fx-hit{overflow:hidden}
.fx .sb-frame.fx-hit::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;opacity:0}
/* Light: one diagonal shine across the card, then gone */
.fx-light .sb-frame.fx-go::after{opacity:1;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.75) 48%,transparent 66%);background-size:250% 100%;animation:fxShine .9s ease-out forwards}
@keyframes fxShine{from{background-position:120% 0}to{background-position:-60% 0}}
/* Dark: lightning in a pitch-black room. Dim, two strikes (60 ms + 120 ms, 2 flashes in ~0.5 s = under 3 per second), lit, rim fades */
.fx-dark .sb-frame.fx-hit>img,.fx-dark .sb-frame.fx-hit>video{filter:brightness(.15)}
.fx-dark .sb-frame.fx-go>img,.fx-dark .sb-frame.fx-go>video{animation:fxLit 1.5s ease-out forwards}
.fx-dark .sb-frame.fx-go::after{animation:fxBolt 1.5s ease-out forwards;background:radial-gradient(120% 80% at 50% 0,rgba(207,232,255,.55),transparent 60%);box-shadow:inset 0 0 0 2px rgba(207,232,255,1),0 0 40px 6px rgba(207,232,255,.6)}
@keyframes fxLit{0%{filter:brightness(.15)}4%{filter:brightness(1.6)}8%{filter:brightness(.2)}33%{filter:brightness(.2)}41%{filter:brightness(1.4)}100%{filter:brightness(1)}}
@keyframes fxBolt{0%{opacity:0}4%{opacity:1}8%{opacity:0}33%{opacity:0}41%{opacity:1}100%{opacity:0}}
.sb-vid video{display:block;width:100%;height:100%;object-fit:cover}
.sb-vid .sb-vplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:0;border-radius:var(--r-pill, 999px);padding:10px 16px;background:rgba(0,0,0,.6);color:var(--white, #fff);font:600 15px/1 system-ui;cursor:pointer}
@media (prefers-reduced-motion:reduce){
  .fx .sb-frame.fx-rise{opacity:1;transform:none;transition:none}
  .fx .sb-frame.fx-go::after,.fx .sb-frame.fx-go>img,.fx .sb-frame.fx-go>video{animation:none}
  .fx-dark .sb-frame.fx-hit>img,.fx-dark .sb-frame.fx-hit>video{filter:none}
}

/* Preview (?fx=preview, Oct 24 2026): laptop + phone pair, phone clips shrink to fit, scroll focus. transform / opacity / filter only. */
.sb-pair { position: relative; display: block; padding-right: 14%; }
.sb-pair > .sb-frame { display: block; }
.sb-pair-phone { position: absolute; right: 0; bottom: -6%; width: 24%; aspect-ratio: 9 / 19.5; border-radius: calc(var(--site-phone-radius) - 6px); overflow: hidden; border: 6px solid var(--site-frame); background: var(--site-frame); box-shadow: 0 0 0 1px var(--site-frame-edge), var(--site-frame-shadow); }
.sb-pair-phone video, .sb-pair-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.sb-frame.fx-phone { aspect-ratio: 9 / 19.5; width: min(100%, var(--site-phone-w)); margin-inline: auto; border-radius: var(--site-phone-radius); border: 6px solid var(--site-frame); box-shadow: 0 0 0 1px var(--site-frame-edge); overflow: hidden; }
.fx-phone video, .fx-phone img { object-fit: cover; }
.fx-fit video, .fx-fit img { object-fit: contain; object-position: top; background: var(--site-frame); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .fx-pv main .sb-frame:not(.sb-filler) { animation: fxpv-focus linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .fx-pv .sb-pair-phone { animation: fxpv-slide linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
  }
}
@keyframes fxpv-focus { from { transform: scale(.92); opacity: .5; filter: blur(6px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes fxpv-slide { from { transform: translateX(40%); opacity: 0; } to { transform: none; opacity: 1; } }