/* Scene "slicing": Figma email design is sliced and rebuilt as a live Klaviyo template. */
.slicing { --em: 10px; --top: 50px; --lx: 19%; --rx: 57%; --blue: #4C75FF; --nv: #060A18; --sf: #0F1526; --bd: rgba(255,255,255,.09); --tx: #EEF1F8; --tm: #AAB2C7; --tf: #737D94;
  width: 100%; max-width: 530px; margin: 0 auto; display: grid; gap: 14px; justify-items: center; font-family: var(--sans); }
.slicing-reset, .slicing-reset * { transition: none !important; animation: none !important; }
.slicing svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.slicing svg.slicing-fig { stroke: none; }

/* browser window */
.slicing-win { width: 100%; border-radius: 14px; overflow: hidden; background: var(--nv); border: 1px solid rgba(255,255,255,.12); box-shadow: var(--shadow-lg); }
.slicing-bar { height: 30px; display: flex; align-items: center; gap: 12px; padding: 0 12px; background: #1B1D26; border-bottom: 1px solid rgba(255,255,255,.07); }
.slicing-dots { display: flex; gap: 6px; flex: none; } .slicing-dots i { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; } .slicing-dots i:nth-child(2) { background: #FEBC2E; } .slicing-dots i:nth-child(3) { background: #28C840; }
.slicing-url { flex: 1; max-width: 260px; margin: 0 auto; height: 18px; border-radius: 6px; background: rgba(255,255,255,.07); color: var(--tm); font-size: 10px; display: flex; align-items: center; justify-content: center; gap: 5px; white-space: nowrap; overflow: hidden; transform: translateX(-18px); }
.slicing-url svg { width: 10px; height: 10px; flex: none; }
.slicing-nav { height: 36px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--bd); color: var(--tx); font-size: 11px; background: radial-gradient(300px 80px at 10% 0, rgba(76,117,255,.16), transparent 70%); }
.slicing-nav b { font-weight: 600; display: flex; align-items: center; gap: 7px; letter-spacing: -.01em; white-space: nowrap; }
.slicing-nav b i { width: 14px; height: 14px; border-radius: 4px; background: linear-gradient(180deg, #4C75FF, #1A4FFF); }
.slicing-nav span { display: flex; gap: 2px; padding: 2px; border-radius: 999px; border: 1px solid var(--bd); background: rgba(255,255,255,.03); }
.slicing-nav em { font-style: normal; font-size: 9.5px; color: var(--tm); padding: 3px 9px; border-radius: 999px; }
.slicing-nav em.on { color: #fff; background: linear-gradient(180deg, #4C75FF, #1A4FFF); }

/* stage: two panes and a shared layer where the email pieces travel */
.slicing-stage { position: relative; height: calc(var(--top) + 28 * var(--em) + 30px); }
.slicing-left, .slicing-right { position: absolute; top: 0; bottom: 0; }
.slicing-left { left: 0; width: 38%; border-right: 1px solid var(--bd); background: #0A0F1E; }
.slicing-right { left: 38%; right: 0; background:
  radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px) 0 0 / 12px 12px; }
.slicing-ph { height: 36px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10.5px; font-weight: 500; color: var(--tm); white-space: nowrap; }
.slicing-ph > span:first-child { display: flex; align-items: center; gap: 6px; }
.slicing-ph .slicing-fig { width: 8px; height: 12px; }
.slicing-kl::before { content: ''; display: inline-block; width: 11px; height: 8px; background: #EEF1F8; clip-path: polygon(0 0, 100% 0, 78% 50%, 100% 100%, 0 100%); }
.slicing-right .slicing-ph { background: rgba(6,10,24,.9); border-bottom: 1px solid var(--bd); }

.slicing-chip, .slicing-pill { position: relative; display: inline-grid; justify-items: end; align-items: center; }
.slicing-chip b, .slicing-pill b { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 4px; height: 19px; padding: 0 8px; border-radius: 999px; font-size: 9.5px; font-weight: 500; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .35s, transform .45s var(--ease); }
.slicing-c1 { color: #BFCBFF; background: rgba(76,117,255,.2); border: 1px solid rgba(76,117,255,.5); }
.slicing-c1 i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; animation: slicing-bop 1s infinite; } .slicing-c1 i:nth-child(2) { animation-delay: .15s; } .slicing-c1 i:nth-child(3) { animation-delay: .3s; }
@keyframes slicing-bop { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.slicing-c2 { color: var(--tm); background: rgba(255,255,255,.06); border: 1px solid var(--bd); } .slicing-c2 svg { width: 10px; height: 10px; color: var(--ok); stroke-width: 2.2; }
.is-scan .slicing-c1 { opacity: 1; transform: none; } .is-cut .slicing-c1 { opacity: 0; transform: translateY(-4px); } .is-cut .slicing-c2 { opacity: 1; transform: none; }
.slicing-p1 { color: var(--tm); background: rgba(255,255,255,.06); border: 1px solid var(--bd); opacity: 1 !important; transform: none !important; }
.slicing-p2 { color: var(--ok); background: rgba(61,214,140,.14); border: 1px solid rgba(61,214,140,.45); }
.slicing-p2 i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(61,214,140,.2); }
.is-live .slicing-p1 { opacity: 0 !important; } .is-live .slicing-p2 { opacity: 1; transform: none; }

.slicing-drop { position: absolute; left: 12px; right: 12px; top: var(--top); bottom: 16px; border: 1.5px dashed rgba(255,255,255,.16); border-radius: 10px; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; font-size: 10.5px; line-height: 1.35; color: var(--tf); transition: opacity .4s; }
.slicing-drop .slicing-fig { width: 16px; height: 24px; opacity: .8; }
.is-in .slicing-drop { opacity: 0; }

/* block list in the editor */
.slicing-list { position: absolute; right: 10px; top: 46px; width: 112px; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 8px; border-radius: 10px; background: rgba(15,21,38,.92); border: 1px solid var(--bd); }
.slicing-lt { font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--tf); padding: 1px 2px 2px; }
.slicing-row { display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 7px; border-radius: 7px; font-size: 10px; color: var(--tf); background: rgba(255,255,255,.03); border: 1px solid transparent; white-space: nowrap; transition: color .4s, background .4s, border-color .4s; }
.slicing-row i { width: 10px; height: 8px; border-radius: 2px; border: 1.2px solid currentColor; flex: none; opacity: .8; }
.slicing-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.slicing-row svg { width: 12px; height: 12px; flex: none; color: var(--ok); stroke-width: 2.2; opacity: 0; transform: scale(.4); transition: opacity .3s, transform .45s var(--ease); }
.is-r0 .slicing-r0, .is-r1 .slicing-r1, .is-r2 .slicing-r2, .is-r3 .slicing-r3 { color: var(--tx); background: rgba(76,117,255,.1); border-color: rgba(76,117,255,.28); }
.is-r0 .slicing-r0 svg, .is-r1 .slicing-r1 svg, .is-r2 .slicing-r2 svg, .is-r3 .slicing-r3 svg { opacity: 1; transform: none; }
.slicing-note { font-size: 8.5px; line-height: 1.3; color: var(--tf); padding: 3px 2px 0; opacity: 0; transition: opacity .5s; } .is-live .slicing-note { opacity: 1; }

/* travelling layer */
.slicing-em { position: absolute; inset: 0; font-size: var(--em); pointer-events: none; }
.slicing-blk, .slicing-slot, .slicing-ghost { position: absolute; left: calc(var(--lx) - 8.5em); width: 17em; }
.slicing-b0, .slicing-s0 { top: var(--top); height: 3em; --sp: -9px; }
.slicing-b1, .slicing-s1 { top: calc(var(--top) + 3em); height: 12.8em; --sp: -3px; }
.slicing-b2, .slicing-s2 { top: calc(var(--top) + 15.8em); height: 8.4em; --sp: 3px; }
.slicing-b3, .slicing-s3 { top: calc(var(--top) + 24.2em); height: 3.8em; --sp: 9px; }
.slicing-slot { left: calc(var(--rx) - 8.5em); transform: translateY(var(--sp)); border: 1.2px dashed rgba(255,255,255,.17); border-radius: 3px; background: rgba(6,10,24,.75); transition: opacity .4s; }
.is-done .slicing-slot { opacity: 0; }
.slicing-ghost { top: var(--top); height: 28em; opacity: 0; filter: grayscale(1); transition: opacity .8s; }
.slicing-ghost > div { overflow: hidden; } .slicing-ghost > div > div { height: 100%; } .slicing-g0 { height: 3em; } .slicing-g1 { height: 12.8em; } .slicing-g2 { height: 8.4em; } .slicing-g3 { height: 3.8em; }
.is-f0 .slicing-ghost { opacity: .2; }

.slicing-blk { overflow: visible; opacity: 0; transform: translateY(-26px); box-shadow: 0 0 0 0 rgba(0,0,0,0);
  transition: opacity .5s, transform .8s var(--ease), left .85s cubic-bezier(.6,.02,.2,1), box-shadow .5s, outline-color .4s; outline: 1.5px solid transparent; outline-offset: 0; }
.slicing-blk > div { position: absolute; inset: 0; overflow: hidden; }
.slicing-b1 { transition-delay: .04s; } .slicing-b2 { transition-delay: .08s; } .slicing-b3 { transition-delay: .12s; }
.is-in .slicing-blk { opacity: 1; transform: none; }
.is-cut .slicing-blk { transition-delay: 0s; transform: translateY(var(--sp)); box-shadow: 0 8px 18px -8px rgba(0,0,0,.8); outline-color: rgba(76,117,255,.9); }
.is-f0 .slicing-b0, .is-f1 .slicing-b1, .is-f2 .slicing-b2, .is-f3 .slicing-b3 { left: calc(var(--rx) - 8.5em); }
.is-done .slicing-blk { transform: none; box-shadow: none; outline-color: transparent; }
.is-live .slicing-b0 { box-shadow: 0 -1px 0 0 rgba(61,214,140,0); }
.slicing-blk u { position: absolute; z-index: 2; left: -1.5px; top: -1.5px; text-decoration: none; font: 500 7.5px/13px var(--mono); letter-spacing: .04em; text-transform: uppercase; color: #fff; background: var(--blue); padding: 0 5px; border-radius: 0 0 4px 0; opacity: 0; transition: opacity .35s; }
.is-cut .slicing-blk u { opacity: 1; } .is-done .slicing-blk u { opacity: 0; }

/* green frame once live */
.slicing-em::after { content: ''; position: absolute; left: calc(var(--rx) - 8.5em - 4px); top: calc(var(--top) - 4px); width: calc(17em + 8px); height: calc(28em + 8px); border-radius: 5px; border: 1.5px solid var(--ok); box-shadow: 0 0 26px -4px rgba(61,214,140,.55); opacity: 0; transform: scale(1.03); transition: opacity .6s, transform .7s var(--ease); }
.is-live .slicing-em::after { opacity: 1; transform: none; }

/* slice lines and scan band */
.slicing-line { position: absolute; left: calc(var(--lx) - 8.5em - 9px); width: calc(17em + 18px); height: 0; border-top: 1.5px dashed #8FA8FF; filter: drop-shadow(0 0 3px rgba(76,117,255,.9)); clip-path: inset(-6px 100% -6px 0); transition: clip-path .5s var(--ease), transform .8s var(--ease), opacity .4s; }
.slicing-line::before, .slicing-line::after { content: ''; position: absolute; top: -4.5px; width: 7px; height: 7px; border-radius: 50%; background: #fff; border: 1.5px solid var(--blue); box-sizing: border-box; } .slicing-line::before { left: -4px; } .slicing-line::after { right: -4px; }
.slicing-l1 { top: calc(var(--top) + 3em); --ly: -6px; } .slicing-l2 { top: calc(var(--top) + 15.8em); --ly: 0px; } .slicing-l3 { top: calc(var(--top) + 24.2em); --ly: 6px; }
.is-l1 .slicing-l1, .is-l2 .slicing-l2, .is-l3 .slicing-l3 { clip-path: inset(-6px -6px -6px -6px); }
.is-cut .slicing-line { transform: translateY(var(--ly)); } .is-f0 .slicing-line { opacity: 0; }
.slicing-scan { position: absolute; left: calc(var(--lx) - 8.5em); width: 17em; top: calc(var(--top) - 3em); height: 3em; opacity: 0; background: linear-gradient(180deg, rgba(76,117,255,0), rgba(76,117,255,.42)); border-bottom: 1.5px solid #9DB3FF; transition: transform 1.9s linear, opacity .3s; }
.is-scan .slicing-scan { opacity: 1; transform: translateY(28em); } .is-cut .slicing-scan { opacity: 0; }

/* the email design (all sizes in em so it scales) */
.slicing-e-head { background: #fff; color: #1F4D3A; display: flex; align-items: center; gap: .5em; padding: 0 1.1em; border-bottom: 1px solid #E6E9E2; }
.slicing-e-head b { font-size: .68em; letter-spacing: .22em; font-weight: 700; margin-right: auto; white-space: nowrap; }
.slicing-e-head i { width: 1.5em; height: .28em; border-radius: 1em; background: #C9D3C4; }
.slicing-e-hero { background: #DCE8D6; color: #173B2C; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: .95em; }
.slicing-e-hero small { font-size: .5em; letter-spacing: .2em; font-weight: 600; opacity: .7; }
.slicing-e-hero strong { font: 400 1.62em/1.1 var(--serif); margin: .12em 0 .34em; white-space: nowrap; }
.slicing-e-btn { font-size: .58em; font-weight: 600; color: #fff; background: #1F4D3A; padding: .5em 1.5em; border-radius: 9em; margin-bottom: 1.2em; }
.slicing-e-img { width: 100%; flex: 1; min-height: 0; display: block; background: #B9CDB3 50% 46% / cover no-repeat; }
.slicing-e-prod { background: #fff; color: #1B2A22; padding: .8em .9em 0; text-align: center; }
.slicing-e-prod small { font-size: .5em; letter-spacing: .2em; font-weight: 700; color: #1F4D3A; display: block; margin-bottom: .9em; }
.slicing-e-prod > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.slicing-e-prod figure { display: grid; justify-items: center; gap: .16em; }
.slicing-e-prod img { width: 100%; height: 4.3em; object-fit: cover; border-radius: .4em; display: block; }
.slicing-e-prod b { font-size: .52em; font-weight: 600; white-space: nowrap; margin-top: .3em; } .slicing-e-prod em { font-size: .5em; font-style: normal; color: #6B7A70; }
.slicing-e-foot { background: #1F4D3A; color: #CFE0D2; display: grid; place-content: center; justify-items: center; gap: .55em; }
.slicing-e-foot span { display: flex; gap: .5em; } .slicing-e-foot i { width: .9em; height: .9em; border-radius: 50%; background: rgba(255,255,255,.3); }
.slicing-e-foot small { font-size: .46em; opacity: .8; white-space: nowrap; }

/* outcome */
.slicing-out { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 18px 0 8px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); color: var(--mute); font-size: .9rem; letter-spacing: -.01em; white-space: nowrap; opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .7s var(--ease), border-color .6s; }
.slicing-out b { color: var(--ink); font-weight: 600; }
.slicing-out span { width: 24px; height: 24px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; } .slicing-out span svg { width: 14px; height: 14px; stroke-width: 2.2; }
.is-out .slicing-out { opacity: 1; transform: none; border-color: rgba(61,214,140,.4); }

@media (max-width: 600px) {
  .slicing { --em: 8px; --top: 48px; --lx: 25%; --rx: 75%; }
  .slicing-left { width: 50%; } .slicing-right { left: 50%; }
  .slicing-list, .slicing-right .slicing-ph > .slicing-kl { display: none; }
  .slicing-right .slicing-ph { justify-content: center; }
  .slicing-ph { padding: 0 8px; height: 34px; }
  .slicing-drop { left: 8px; right: 8px; font-size: 9.5px; }
  .slicing-nav span em:not(.on) { display: none; }
  .slicing-url { transform: none; }
  .slicing-out { font-size: .8rem; padding-right: 14px; }
  .slicing-blk u { font-size: 6.5px; line-height: 11px; }
}