/* Calm after the storm: the landing section (ported from marketing/sales24-film/prototypes/calm-scroll/calm.css).
   Everything is scoped to #calm and prefixed calm-, so nothing reaches the rest of the page. The sky colours are
   sampled from the keyframes at runtime; these tokens are the fallbacks and the UI colours. */
.calm {
  --calm-sky-top: #3c7d93;
  --calm-sky-low: #a6c4c9;
  --calm-ink: #0f2329;
  --calm-paper: #ffffff;
  --calm-rust: #b5523b;
  --calm-cobalt: #6d9cff;
  --calm-cobalt-deep: #2f5fd0;
  --calm-waiting: #c98a1e;
  --calm-font: var(--font, 'Plus Jakarta Sans', system-ui, sans-serif);
  /* The site header is fixed over the top of the stage. */
  --calm-top: 76px;
  position: relative; height: 600vh; background: var(--calm-sky-top); color: var(--calm-paper); font-family: var(--calm-font);
}
.calm[hidden] { display: none; }
.calm[lang="ar"], .calm[lang="ckb"] { --calm-font: var(--font-ar, 'IBM Plex Sans Arabic', system-ui, sans-serif); }

.calm-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: linear-gradient(var(--calm-sky-top), var(--calm-sky-low));
}

/* The keyframes are portrait. On wide screens the frame sits inline-end and its edges dissolve into the
   sampled sky; on phones it fills the stage. */
.calm-frame {
  position: absolute; inset-block: 0; inset-inline-end: 8vw;
  aspect-ratio: 9 / 16; height: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent);
}
.calm-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover;
  opacity: 0; will-change: transform, opacity;
}

.calm-glow {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--gx, 60%) var(--gy, 38%), rgb(109 156 255 / 0.45), transparent 42%);
  mix-blend-mode: screen;
}

.calm-bubbles { position: absolute; inset: 0; pointer-events: none; }
.calm-bubble {
  /* Physical left/top: JS positions bubbles in screen pixels in both directions. */
  position: absolute; top: 0; left: 0;
  max-width: 240px; padding: 10px 14px 11px; border-radius: 18px 18px 18px 6px;
  background: rgb(255 255 255 / 0.94); color: var(--calm-ink);
  box-shadow: 0 10px 30px rgb(15 35 41 / 0.18);
  font: 500 14px/1.35 var(--calm-font);
  opacity: 0; will-change: transform, opacity;
}
.calm[dir="rtl"] .calm-bubble { border-radius: 18px 18px 6px 18px; }
.calm-bubble .calm-ch { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; opacity: 0.6; margin-block-end: 3px; }
.calm-bubble .calm-ch::before { content: ''; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--dot); }
.calm-bubble .calm-reply { display: none; }
.calm-bubble.calm-caught { background: var(--calm-paper); box-shadow: 0 0 0 2px var(--calm-cobalt), 0 10px 30px rgb(47 95 208 / 0.25); }
.calm-bubble.calm-caught .calm-msg { display: none; }
.calm-bubble.calm-caught .calm-reply { display: block; }
.calm-bubble.calm-caught .calm-ch::after { content: ''; margin-inline-start: auto; inline-size: 14px; block-size: 14px; background: var(--calm-cobalt-deep);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.calm-bubble.calm-waits { box-shadow: 0 0 0 2px var(--calm-waiting), 0 10px 30px rgb(15 35 41 / 0.18); }

.calm-unread {
  position: absolute; inset-block-start: calc(var(--calm-top) + 14px); inset-inline-start: 6vw;
  display: flex; align-items: baseline; gap: 10px; padding: 8px 14px; border-radius: 999px;
  background: var(--calm-rust); color: var(--calm-paper); font: 600 14px/1 var(--calm-font);
  opacity: 0;
}
.calm-unread b { font-size: 20px; font-variant-numeric: tabular-nums; }

.calm-mark {
  position: absolute; inset-block-start: calc(var(--calm-top) + 4%); inset-inline-end: calc(8vw + 50vh * 9 / 16 - 44px);
  inline-size: 88px; block-size: 88px; opacity: 0; z-index: 12;
}

/* The mark is the real Sales24 logo (the site header's file); its pulse is a drop-shadow so it follows the bubble. */

/* Feature beats: a name, one line, and a crop of the real screen on a white sheet. */
.calm-features { position: absolute; inset: 0; pointer-events: none; z-index: 13; }
.calm-feature {
  position: absolute; inset-block-start: calc(var(--calm-top) + 6vh); inset-inline-start: 6vw;
  inline-size: min(680px, 46vw); opacity: 0; will-change: transform, opacity;
}
.calm-f-name { margin: 0; font: 700 clamp(1.8rem, 3vw, 2.8rem)/1.05 var(--calm-font); letter-spacing: -0.02em; color: var(--calm-ink); }
.calm-f-line { margin: 10px 0 18px; max-inline-size: 30rem; font: 500 clamp(1rem, 1.25vw, 1.15rem)/1.5 var(--calm-font); color: var(--calm-ink); }
.calm[dir="rtl"] .calm-f-name { letter-spacing: 0; line-height: 1.3; }
.calm-f-shot {
  margin: 0; padding: 6px; border-radius: 18px; background: var(--calm-paper); inline-size: fit-content; max-inline-size: 100%;
  box-shadow: 0 0 0 1px rgb(15 35 41 / 0.06), 0 24px 60px rgb(15 35 41 / 0.22);
}
/* The whole crop shows, never cut: it scales to the card's width or to 44vh, whichever is smaller. */
.calm-f-shot img { display: block; max-inline-size: 100%; max-block-size: 44vh; inline-size: auto; block-size: auto; border-radius: 13px; }

.calm-copy { z-index: 14; position: absolute; inset-block: 0; inset-inline-start: 6vw; inline-size: min(34rem, 40vw); pointer-events: none; }
.calm-line {
  position: absolute; inset-block-end: 14vh; inset-inline-start: 0; margin: 0; color: var(--calm-paper);
  opacity: 0; will-change: transform, opacity;
}
.calm-line h2, h2.calm-line {
  margin: 0; font-weight: 700; letter-spacing: -0.025em; line-height: 1.02; color: inherit;
  font-size: clamp(2.6rem, 5.4vw, 5.2rem); text-wrap: balance;
  text-shadow: 0 2px 30px rgb(15 35 41 / 0.25);
}
.calm[dir="rtl"] .calm-line h2, .calm[dir="rtl"] h2.calm-line { letter-spacing: 0; line-height: 1.25; }
.calm-line p { margin: 18px 0 0; max-inline-size: 30rem; font: 400 clamp(1rem, 1.3vw, 1.2rem)/1.55 var(--calm-font); text-shadow: 0 1px 16px rgb(15 35 41 / 0.35); }
.calm-actions { pointer-events: auto; }
.calm-cta {
  display: inline-block; padding: 15px 24px; border-radius: 999px;
  background: var(--calm-paper); color: var(--calm-ink); font: 700 16px/1 var(--calm-font); text-decoration: none;
}
.calm-cta:focus-visible { outline: 2px solid var(--calm-paper); outline-offset: 3px; }

/* Landscape screens get the native 16:9 keyframes full-bleed (made from source, not cropped). The subject sits
   in the right third; in RTL the photo is mirrored so she stays opposite the headline. */
.calm-stage.calm-wide .calm-frame { inset: 0; width: 100%; height: 100%; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; }
.calm[dir="rtl"] .calm-stage.calm-wide .calm-frame { transform: scaleX(-1); }
/* The mark lights in the sky over the hill, away from her, so caught messages never cross her face. */
.calm-stage.calm-wide .calm-mark { inset-inline-end: 58%; inset-block-start: calc(var(--calm-top) + 6%); }
.calm-stage.calm-wide .calm-copy::before {
  content: ''; position: absolute; inset-block: 0; inset-inline-start: -6vw; inline-size: 60vw; z-index: -1;
  background: linear-gradient(to var(--fade-dir, right), rgb(15 35 41 / 0.22), transparent);
}
.calm[dir="rtl"] .calm-stage.calm-wide .calm-copy::before { --fade-dir: left; }
.calm-stage.calm-wide .calm-line[data-line="3"] { inset-block-end: auto; inset-block-start: calc(var(--calm-top) + 10vh); color: var(--calm-ink); }
.calm-stage.calm-wide .calm-line[data-line="3"] h2 { text-shadow: none; }
.calm-stage.calm-wide .calm-line[data-line="3"] .calm-cta { background: var(--calm-ink); color: var(--calm-paper); }
.calm-stage.calm-wide .calm-line[data-line="3"] .calm-cta:focus-visible { outline-color: var(--calm-ink); }

@media (max-width: 760px) {
  .calm { --calm-top: 64px; }
  .calm-frame { inset-inline: 0; width: 100%; height: 100%; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none; }
  .calm-copy { inset-inline: 16px; inline-size: auto; }
  /* A soft bottom shade keeps the white headline readable while one shows. */
  .calm-copy::before {
    content: ''; position: absolute; inset-inline: -16px; inset-block-end: 0; block-size: 42vh; z-index: -1;
    background: linear-gradient(transparent, rgb(15 35 41 / 0.6));
    opacity: var(--shade, 0);
  }
  /* Phones: the headline and the feature cards sit at the bottom, clear of her face. */
  .calm-line { inset-block-start: auto; inset-block-end: 28px; }
  .calm-line h2, h2.calm-line { font-size: clamp(2rem, 9vw, 2.8rem); }
  .calm-line p { font-size: 1rem; }
  .calm-unread { inset-inline-start: 16px; }
  /* The mark lights in the open sky to her right (the phone frame is not mirrored in RTL, so physical right). */
  .calm-mark { inset-inline: auto; right: 24px; inset-block-start: 22%; inline-size: 64px; block-size: 64px; }
  .calm-feature {
    inset-inline: 16px; inline-size: auto; inset-block-start: auto; inset-block-end: 16px;
    padding: 14px 14px 8px; border-radius: 20px; background: var(--calm-paper); box-shadow: 0 24px 60px rgb(15 35 41 / 0.22);
  }
  .calm-feature .calm-f-shot { padding: 0; box-shadow: none; }
  .calm-f-name { font-size: 1.7rem; }
  .calm-f-line { font-size: 0.95rem; margin-block-end: 12px; }
  .calm-f-shot img { max-block-size: 30vh; }
  .calm-bubble { max-width: 168px; font-size: 13px; }
}

/* Reduced motion: one screen, the calm ending, no storm. */
.calm.calm-still { height: auto; }
.calm.calm-still .calm-stage { position: relative; }