/* ==========================================================================
   LP03 · UNIT 2 · E-INVOICING IS MORE THAN A PDF — scroll morph
   --------------------------------------------------------------------------
   One pinned stage tells the difference in four beats as you scroll:
     1. an email with a PDF attached (how invoices travel today)
     2. the PDF lifts out of the email
     3. its lines break apart and re-form as STRUCTURED data rows
     4. the structured data flows into UAE e-invoicing (verified)
   Pin = CSS sticky (copy + stage on desktop; stage only on mobile).
   Progress = LIVE getBoundingClientRect() → paused GSAP timeline
   (pdfm.js). Without motion everything shows in its final, readable
   state: email, PDF and structured data side by side.
   ========================================================================== */

.pdfm {
  background: linear-gradient(180deg, var(--c-cloud) 0%, #EAF3F6 100%);
}

.pdfm__decor {
  background:
    radial-gradient(ellipse 40% 45% at 85% 40%, rgba(0, 169, 182, 0.12), transparent 70%),
    radial-gradient(ellipse 35% 35% at 5% 90%, rgba(1, 62, 106, 0.06), transparent 70%);
}

[dir="rtl"] .pdfm__decor {
  scale: -1 1;
}

.pdfm__layout {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}

@media (min-width: 48rem) {
  .pdfm__layout {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 4vw, 4rem);
  }
}

/* ---------------------------------------------------------------------------
   Copy
   --------------------------------------------------------------------------- */
.pdfm__copy {
  display: grid;
  gap: var(--space-lg);
  align-content: start;
  justify-items: center;
  text-align: center;
}

@media (min-width: 48rem) {
  .pdfm__copy {
    justify-items: start;
    text-align: start;
    align-self: start;
  }

  .pdfm.is-live .pdfm__copy {
    position: sticky;
    inset-block-start: calc(var(--header-h) + min(8vh, 3rem));   /* leaves room for the CTA on short laptop screens */
  }
}

.pdfm__copy h2 {
  max-inline-size: 20ch;
}

.pdfm__copy .t-body {
  max-inline-size: 32rem;
}

/* Everyday moment: the invoice that arrives as a PDF on a phone */
.pdfm__photo {
  position: relative;
  inline-size: min(100%, 26rem);
  margin: 0;
}

.pdfm__photo img {
  display: block;
  inline-size: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  object-position: center 58%;
  border-radius: var(--r-panel);   /* matches the mask reveal's 24px radius */
  box-shadow: var(--shadow-md);
}

/* Small notification bubble resting on the photo's bottom edge */
.pdfm__ping {
  position: absolute;
  inset-block-end: -0.875rem;
  inset-inline-end: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding-block: 0.4rem;
  padding-inline: 0.45rem 0.7rem;
  border-radius: var(--r-pill);
  background-color: var(--c-white);
  box-shadow: var(--shadow-md);
}

.pdfm__ping b {
  display: grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: 50%;
  background-color: #E5484D;
  color: var(--c-white);
}

.pdfm__ping svg {
  inline-size: 0.875rem;
  block-size: 0.875rem;
}

.pdfm__ping i {
  display: block;
  inline-size: 3.5rem;
  block-size: 0.35rem;
  border-radius: var(--r-pill);
  background-color: var(--c-ink-a20);
}

/* "Email + PDF" ✕  vs  "Structured e-invoice data" ✓ — lights follow the morph */
.pdfm__vs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs);
}

@media (min-width: 48rem) {
  .pdfm__vs {
    justify-content: flex-start;
  }
}

.pdfm__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-block: 0.45rem;
  padding-inline: 0.625rem 0.875rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-ink-a10);
  background-color: var(--c-white);
  color: var(--c-slate);
  font-size: var(--fs-small);
  font-weight: 600;
  transition: background-color 0.45s var(--ease-out), color 0.45s var(--ease-out),
              border-color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}

.pdfm__chip svg {
  inline-size: 1rem;
  block-size: 1rem;
}

.pdfm__chip--pdf.is-on {
  border-color: rgba(229, 72, 77, 0.45);
  color: #B42318;
  box-shadow: var(--shadow-sm);
}

.pdfm__chip--data.is-on,
.pdfm:not(.is-live) .pdfm__chip--data {
  border-color: transparent;
  background-color: var(--c-navy);
  color: var(--c-white);
  box-shadow: var(--shadow-md);
}

.pdfm__chip--data svg {
  color: var(--c-teal);
}

/* ---------------------------------------------------------------------------
   Track + sticky stage
   --------------------------------------------------------------------------- */
.pdfm__track {
  position: relative;
}

.pdfm__stage {
  display: grid;
  place-items: center;
  min-block-size: 28rem;
}

.pdfm.is-live .pdfm__track {
  block-size: 260vh;
}

.pdfm.is-live .pdfm__stage {
  position: sticky;
  inset-block-start: var(--header-h);
  block-size: calc(100svh - var(--header-h));
}

/* The visual box: everything inside is absolutely placed on a 100 × 88 grid */
.pdfm__visual {
  position: relative;
  inline-size: min(100%, 32rem);
  aspect-ratio: 100 / 88;
  direction: ltr;                  /* the flow reads left → right, top → bottom */
}

/* ---- 1 · Email card ------------------------------------------------------ */
.pdfm__mail {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 62%;
  padding: 0.875rem;
  border-radius: var(--r-card);
  border: 1px solid var(--c-ink-a10);
  background-color: var(--c-white);
  box-shadow: var(--shadow-md);
}

.pdfm__mail-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-block-end: 0.625rem;
  border-block-end: 1px solid var(--c-ink-a10);
}

.pdfm__mail-head img {
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 30%;
}

.pdfm__mail-head svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  margin-inline-start: auto;
  color: var(--c-slate);
}

.pdfm__sk {
  display: grid;
  gap: 0.3rem;
  flex: 1;
}

.pdfm__sk i {
  display: block;
  block-size: 0.4rem;
  border-radius: var(--r-pill);
  background-color: var(--c-ink-a10);
}

.pdfm__sk i:first-child { inline-size: 70%; background-color: var(--c-ink-a20); }
.pdfm__sk i:last-child  { inline-size: 45%; }

.pdfm__mail-body {
  display: grid;
  gap: 0.35rem;
  padding-block: 0.75rem;
}

.pdfm__mail-body i {
  display: block;
  block-size: 0.35rem;
  border-radius: var(--r-pill);
  background-color: var(--c-ink-a10);
}

.pdfm__mail-body i:nth-child(2) { inline-size: 85%; }
.pdfm__mail-body i:nth-child(3) { inline-size: 60%; }

.pdfm__attach {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.4rem;
  padding-inline: 0.6rem;
  border-radius: 10px;
  border: 1px dashed rgba(229, 72, 77, 0.45);
  background-color: rgba(229, 72, 77, 0.06);
}

.pdfm__attach b {
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 6px;
  background-color: #E5484D;
  color: var(--c-white);
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.pdfm__attach i {
  display: block;
  inline-size: 4rem;
  block-size: 0.35rem;
  border-radius: var(--r-pill);
  background-color: rgba(229, 72, 77, 0.3);
}

/* ---- 2 · PDF sheet --------------------------------------------------------- */
.pdfm__sheet {
  position: absolute;
  inset-block-start: 14%;
  inset-inline-start: 30%;
  inline-size: 36%;
  aspect-ratio: 0.72;
  padding: 0.75rem;
  border-radius: 6px;
  background-color: var(--c-white);
  box-shadow: 0 18px 40px -14px rgba(2, 17, 58, 0.35);
  z-index: 2;                     /* above the data card: its lines fly onto the rows */
}

.pdfm__sheet::before {          /* folded corner */
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  background: linear-gradient(225deg, var(--c-cloud) 50%, rgba(2, 17, 58, 0.12) 50%);
  opacity: var(--fold, 1);        /* pdfm.js fades it with the paper */
}

.pdfm__sheet-tag {
  display: inline-block;
  margin-block-end: 0.6rem;
  padding-block: 0.15rem;
  padding-inline: 0.4rem;
  border-radius: 4px;
  background-color: #E5484D;
  color: var(--c-white);
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.pdfm__line {
  display: block;
  block-size: 0.35rem;
  margin-block-end: 0.45rem;
  border-radius: var(--r-pill);
  background-color: var(--c-ink-a20);
  inline-size: var(--w, 90%);
}

/* ---- 3 · Structured data card --------------------------------------------- */
.pdfm__data {
  position: absolute;
  inset-block-start: 28%;
  inset-inline-end: 0;
  inline-size: 58%;
  padding: 0.875rem;
  border-radius: var(--r-card);
  background:
    radial-gradient(ellipse 90% 70% at 100% 0%, rgba(0, 169, 182, 0.28), transparent 70%),
    var(--c-navy);
  box-shadow: var(--shadow-lg);
  direction: ltr;
}

.pdfm__data-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-block-end: 0.6rem;
  color: var(--c-teal);
}

.pdfm__data-head svg {
  inline-size: 1.125rem;
  block-size: 1.125rem;
}

.pdfm__data-head i {
  flex: 1;
  block-size: 0.35rem;
  border-radius: var(--r-pill);
  background-color: rgba(255, 255, 255, 0.18);
}

.pdfm__row {
  display: grid;
  grid-template-columns: auto 1fr 1.2fr auto;
  align-items: center;
  gap: 0.4rem;
  padding-block: 0.35rem;
  border-block-end: 1px solid rgba(255, 255, 255, 0.08);
}

.pdfm__row:last-child {
  border-block-end: 0;
}

/* tag glyph ‹/› marks each structured field */
.pdfm__tag {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--c-teal);
}

.pdfm__key,
.pdfm__val {
  display: block;
  block-size: 0.35rem;
  border-radius: var(--r-pill);
}

.pdfm__key { background-color: rgba(127, 220, 227, 0.55); }
.pdfm__val { background-color: rgba(255, 255, 255, 0.25); inline-size: var(--w, 80%); }

.pdfm__ok {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  color: var(--c-teal);
}

/* ---- 4 · Destination: UAE e-invoicing -------------------------------------- */
.pdfm__flow {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  pointer-events: none;
}

.pdfm__flow path {
  fill: none;
  stroke: var(--c-teal);
  stroke-width: 0.6;
  stroke-linecap: round;
}

/* Static state: dotted route; pdfm.js swaps it for a scroll-drawn line */
.pdfm:not(.is-live) .pdfm__flow path {
  stroke-dasharray: 1.2 1.8;
}

.pdfm__dest {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 6%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-block: 0.6rem;
  padding-inline: 0.6rem 0.875rem;
  border-radius: var(--r-pill);
  background-color: var(--c-white);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-ink);
}

.pdfm__dest img {
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0.25rem;
  border-radius: 9px;
  background-color: var(--c-white);
  box-shadow: 0 0 0 1px var(--c-ink-a10);
}

.pdfm__dest svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  color: var(--c-teal);
}

/* Mobile: a slightly denser composition */
@media (max-width: 47.99rem) {
  .pdfm__visual {
    inline-size: min(100%, 22rem);
    aspect-ratio: 1;               /* taller box: data card clears the badge */
  }

  .pdfm__mail { padding: 0.625rem; }
  .pdfm__data { padding: 0.625rem; }
  .pdfm__dest { font-size: var(--fs-caption); }
}

/* ---------------------------------------------------------------------------
   Section CTA (→ hero form)
   --------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  .pdfm__cta {
    justify-content: flex-start;    /* follows the start-aligned copy */
  }
}

/* Short laptop screens: a slightly flatter photo keeps the sticky copy
   column (title · text · CTA · chips · photo) inside the viewport */
@media (min-width: 48rem) and (max-height: 50rem) {
  .pdfm__photo img {
    aspect-ratio: 5 / 2;
  }
}