/* ==========================================================================
   Vellox · /email-marketing/ — page-only styles (system „Violet in motion”).
   Scoped to .page-email-marketing; tokens only.
    1. Hero lift: the report's own „Deschideri pe oră” card, lifted straight off its place
    2. Cart-recovery flow (the page's moment, on the night band). Lit by default (no JS,
       reduced motion); email-marketing.js arms the scroll states.
    3. Feature screens on a tinted plate
   ========================================================================== */


/* 1. Hero lift. The card sits exactly over its place in the 1440×1000 capture (x 853, y 408,
      558 wide); margin-top % reads the stage's width, so it tracks the screen at every size.
      The wrapper takes the reveal and the pointer depth, the image only its own lift. That
      capture shows from 1100px up; below, the frame shows another crop, so the card hides. */
.page-email-marketing .em-lift {
  --lx: 59.236%; --ly: var(--bar-h); --lw: 38.75%;
  --sh-float: drop-shadow(0 2px 3px rgb(42 27 110 / .16)) drop-shadow(0 30px 36px rgb(42 27 110 / .34));
  margin-top: 28.333%;
}
/* Scaled 1.1 and nudged right: it still covers the original on every side and overhangs
   the frame's right and bottom edges */
.page-email-marketing .em-lift img { width: 100%; transform: translate(4%, 1%) scale(1.1); }
@media (max-width: 1099.98px) { .page-email-marketing .em-lift { display: none; } }


/* 2. Cart-recovery flow ----------------------------------------------------------- */
.page-email-marketing .flow {
  --node: 48px;
  --row: clamp(56px, 4.4vw, 80px);
  display: grid;
  row-gap: var(--row);
}
.page-email-marketing .flow__step {
  --c: var(--violet);
  --c-next: var(--violet);
  --seg: 1;
  position: relative;
  display: grid;
  grid-template-columns: var(--node) minmax(0, 1fr) minmax(0, 488px);
  column-gap: clamp(24px, 3.4vw, 64px);
  align-items: start;
}
.page-email-marketing .flow__step--trigger { --c: #fff; }
.page-email-marketing .flow__step--email { --c-next: var(--coral); }
.page-email-marketing .flow__step--sms { --c: var(--coral); }
.page-email-marketing .flow__step--last { --c-next: var(--mint); }
.page-email-marketing .flow__step--done { --c: var(--mint); }

/* The rail: one segment from each node to the next; its fill (::after) follows the scroll */
.page-email-marketing .flow__step:not(:last-child)::before,
.page-email-marketing .flow__step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--node) / 2 - 1px);
  top: calc(var(--node) + 10px);
  bottom: calc(10px - var(--row));
  width: 2px;
  border-radius: 2px;
  background: rgb(255 255 255 / .14);
}
.page-email-marketing .flow__step:not(:last-child)::after {
  background: linear-gradient(var(--c), var(--c-next));
  transform-origin: 50% 0;
  transform: scaleY(var(--seg));
}

.page-email-marketing .flow__node {
  position: relative;
  z-index: 1;
  grid-column: 1;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 22%, transparent), 0 12px 26px -10px color-mix(in srgb, var(--c) 80%, transparent);
  transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .6s var(--ease);
}
.page-email-marketing :is(.flow__step--trigger, .flow__step--done) .flow__node { color: var(--night); }
.page-email-marketing .flow__node svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.page-email-marketing .flow__step--done .flow__node svg { stroke-width: 2.4; }

.page-email-marketing .flow__info { grid-column: 2; grid-row: 1; min-width: 0; padding-top: 7px; }
.page-email-marketing .flow__title {
  font-size: clamp(1.375rem, 1.05rem + .9vw, 1.875rem);
  font-weight: 740;
  font-stretch: var(--wd-h2);
  letter-spacing: -.02em;
  line-height: 1.15;
  transition: color .5s var(--ease);
}
.page-email-marketing .flow__text {
  max-width: 25em;
  margin-top: 10px;
  color: var(--on-dark-2);
  font-size: 1.125rem;
  line-height: 1.5;
}

/* The result: the three demo totals, static, on a mint tick */
.page-email-marketing .flow-nums {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s5) clamp(28px, 3.4vw, 56px);
  transition: opacity .7s var(--ease);
}
.page-email-marketing .flow-nums > li { position: relative; padding-top: 18px; }
.page-email-marketing .flow-nums > li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 3px;
  border-radius: 3px;
  background: var(--mint);
}
.page-email-marketing .flow-nums__n {
  display: block;
  color: #fff;
  font-size: clamp(2.25rem, 1.5rem + 2vw, 3.375rem);
  font-weight: 800;
  font-stretch: var(--wd-num);
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
}
.page-email-marketing .flow-nums__l { display: block; margin-top: 10px; font-size: var(--fs-small); line-height: 1.35; color: var(--on-dark-2); }
.page-email-marketing .flow__note { margin-top: var(--s6); }

/* The real card (an exact crop or a cut-out) on a crisp plate in the step's colour */
.page-email-marketing .flow__card {
  position: relative;
  z-index: 1;
  grid-column: 3;
  grid-row: 1;
  width: min(100%, var(--cw, 488px));
  min-width: 0;
  perspective: 1400px;
}
.page-email-marketing .flow__plate {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: var(--c);
  transform: translate(14px, 14px);
  transition: transform .9s var(--ease-out) .1s, opacity .6s var(--ease) .1s;
}
.page-email-marketing .flow__step--trigger .flow__plate { background: rgb(255 255 255 / .18); }
.page-email-marketing .flow__shot {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 13px;
  box-shadow: 0 2px 4px rgb(0 0 0 / .2), 0 34px 60px -26px rgb(0 0 0 / .75);
  transform-origin: 50% 100%;
  transition: transform 1s var(--ease-out), opacity .7s var(--ease), box-shadow 1s var(--ease-out);
}
/* The SMS card is the selected step in the editor: close its violet outline at the cut */
.page-email-marketing .flow__step--sms .crop::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px #776CAF;
  pointer-events: none;
}

/* Armed by the page script (motion allowed): steps below the reading line wait unlit */
.page-email-marketing .flow.is-armed .flow__step:not(.is-lit) .flow__node {
  background: var(--night-2);
  color: rgb(255 255 255 / .55);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .24);
}
.page-email-marketing .flow.is-armed .flow__step:not(.is-lit) .flow__title { color: var(--on-dark-2); }
.page-email-marketing .flow.is-armed .flow__step:not(.is-lit) .flow-nums { opacity: .3; }
.page-email-marketing .flow.is-armed .flow__step:not(.is-lit) .flow__shot {
  opacity: .3;
  transform: translateY(40px) rotateX(14deg) scale(.94);
  box-shadow: 0 2px 4px rgb(0 0 0 / .2), 0 12px 24px -16px rgb(0 0 0 / .5);
}
.page-email-marketing .flow.is-armed .flow__step:not(.is-lit) .flow__plate { opacity: 0; transform: none; }
/* One ring when a step lights up: an answer to the scroll, never a loop */
.page-email-marketing .flow.is-armed .flow__step.is-lit .flow__node::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: em-ping .9s var(--ease-out) both;
  pointer-events: none;
}
@keyframes em-ping {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 60%, transparent); }
  to { box-shadow: 0 0 0 18px color-mix(in srgb, var(--c) 0%, transparent); }
}
.page-email-marketing .flow.is-arming *,
.page-email-marketing .flow.is-arming *::before,
.page-email-marketing .flow.is-arming *::after { transition: none !important; animation: none !important; }

/* Below 1100px the card goes under its text; on phones it takes the full width over the rail */
@media (max-width: 1099.98px) {
  .page-email-marketing .flow__step { grid-template-columns: var(--node) minmax(0, 1fr); }
  .page-email-marketing .flow__card { grid-column: 2; grid-row: 2; margin-top: var(--s5); }
}
@media (max-width: 759.98px) {
  .page-email-marketing .flow { --node: 40px; --row: 56px; }
  .page-email-marketing .flow__step { column-gap: 16px; }
  .page-email-marketing .flow__info { padding-top: 4px; }
  .page-email-marketing .flow__text { font-size: 1.0625rem; }
  .page-email-marketing .flow__card { grid-column: 1 / -1; width: min(calc(100% - 10px), var(--cw, 488px)); }
  .page-email-marketing .flow__plate { border-radius: 13px; transform: translate(8px, 8px); }
  .page-email-marketing .flow__shot { border-radius: 10px; }
  .page-email-marketing .flow__node svg { width: 19px; height: 19px; }
  .page-email-marketing .flow-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
  .page-email-marketing .flow-nums__n { font-size: clamp(1.5rem, 1.1rem + 2vw, 1.875rem); }
}


/* 3. Feature screens on a tinted plate ---------------------------------------------- */
/* A flat rounded plate behind each screen, peeking out at its top outer corner (never under
   the caption); it drifts a little with the scroll (data-parallax), the screen stays put. */
.page-email-marketing .em-shot { position: relative; isolation: isolate; }
.page-email-marketing .em-shot__plate {
  position: absolute;
  z-index: -1;
  inset: -30px -30px 24% 22%;
  border-radius: var(--r-xl);
  background: var(--plate, var(--violet-100));
}
.page-email-marketing .section--fog .em-shot__plate { --plate: var(--violet-200); }
.page-email-marketing .em-shot--ai .em-shot__plate { --plate: color-mix(in srgb, var(--pink) 26%, #fff); }
@media (min-width: 900px) {
  .page-email-marketing .split--flip .em-shot__plate { inset: -30px 22% 24% -30px; }
}
@media (max-width: 759.98px) {
  .page-email-marketing .em-shot__plate { inset: -14px -12px 26% 24%; border-radius: var(--r-lg); }
}
/* A tall crop (one column of the app) at about its real size, centred in its column */
.page-email-marketing .shot-narrow > .em-shot,
.page-email-marketing .shot-narrow > .caption { max-width: 360px; margin-inline: auto; }