/* The CRM page.
   Everything on this page is a real screenshot of the seeded Direct Stay CRM,
   shot at 1440x900 @2x. Nothing here is a drawn mock-up.

   Two motion set-pieces, one mechanism each:
   1. .crm-open  - the page-load opening: the wordmark splits, a screenshot
                   grows out of the gap and goes full bleed. Adapted from the
                   Awwwards Hero Animations 1 structure.
   2. .slab      - the body sections: one screenshot per section, tilted left
                   then right, unwinding towards square as it enters view. */

/* ---------------- shared ---------------- */

.crm-page{background:var(--mist);color:var(--ink)}

/* Rotating a full-width screenshot pushes its bounding box a dozen or so pixels
   past the container, which shows up as a horizontal scrollbar. `clip` rather
   than `hidden`: hidden would make this a scroll container and kill the sticky
   slab-wall stage inside it. */
.crm-page main{overflow-x:clip}

.crm-lede{
  width:min(100%,var(--max));
  margin-inline:auto;
  /* The site header is sticky and --header-h tall; without clearing it the
     h1 opens half hidden behind the nav bar. */
  /* The site header is position:fixed and measures 129px on desktop, so the
     h1 has to start below that, not below the 92px --header-h token. */
  padding:200px var(--gutter) clamp(24px,3vw,40px);
}

.crm-lede h1{
  max-width:16ch;
  margin:0 0 22px;
  font-size:clamp(3.4rem,6.4vw,5.6rem);
  line-height:.9;
  letter-spacing:-.04em;
}

.crm-lede p{
  max-width:52ch;
  margin:0;
  color:var(--muted);
  font-size:clamp(17px,1.45vw,21px);
  line-height:1.5;
}

.crm-lede .crm-lede-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:30px;
}

/* ---------------- 1. the opening ----------------

   Adapted from the Awwwards Hero Animations 1 structure. The wordmark splits
   mid-word, a box grows in the gap, a screenshot grows inside the box and
   flicks through three others, then the whole thing goes full bleed while the
   heading and nav rise in over it.

   Two details from the original are load-bearing and easy to lose:

   1. .crm-open__word-start / -end are overflow:hidden. That is the only reason
      the letters can start translated 100% down and be invisible - without it
      they hang below the word and the whole open reads as a slide, not a
      reveal.

   2. .crm-open__grow-wrap keeps min-width:1em. While the box is still thin the
      image would otherwise be squashed to a sliver and read as a coloured bar
      rather than a photograph. */

.crm-open{
  position:relative;
  width:100%;
  height:100dvh;
  min-height:100dvh;
  overflow:hidden;
  background:var(--mist);
  color:var(--cloud);
}

.crm-open__loader{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  color:var(--ink);
}

.crm-open__word{
  position:relative;
  display:flex;
  justify-content:center;
  white-space:nowrap;
  font-size:clamp(3.2rem,10.5vw,11rem);
  font-weight:800;
  line-height:.75;
  letter-spacing:-.045em;
}

.crm-open__word-start,
.crm-open__word-end{
  display:flex;
  overflow:hidden;   /* see note 1 */
}

.crm-open__word-start{justify-content:flex-end}
.crm-open__word-end{justify-content:flex-start}
.crm-open__letter{display:block;position:relative}

.crm-open__box{
  position:relative;
  display:flex;
  flex-flow:column;
  align-items:center;
  justify-content:center;
  width:0;
}

.crm-open__box-inner{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:1em;
  height:88%;
}

.crm-open__grow{
  position:absolute;
  display:flex;
  align-items:center;
  justify-content:center;
  width:0%;
  height:100%;
  overflow:hidden;
  border-radius:6px;
  background:#151318;
}

.crm-open__grow-wrap{
  position:absolute;
  width:100%;
  min-width:1em;   /* see note 2 */
  height:100%;
}

.crm-open__grow-wrap img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:0% 0%;
  user-select:none;
  pointer-events:none;
}

.crm-open__flick.is--1{z-index:3}
.crm-open__flick.is--2{z-index:2}
.crm-open__flick.is--3{z-index:1}

/* ---- the content that rises in over the full-bleed screen ---- */

.crm-open__content{
  position:relative;
  z-index:2;
  display:flex;
  flex-flow:column;
  justify-content:space-between;
  height:100dvh;
  /* The site header is fixed and 129px tall, and it fades back in the moment
     the opening finishes - so the nav row has to start below it rather than
     under it. The bottom pad is what stops the two buttons being cut off by
     the viewport edge. */
  padding:150px var(--gutter) 72px;
  box-sizing:border-box;
  pointer-events:none;
}

.crm-open__content a{pointer-events:auto}

.crm-open__nav{
  display:flex;
  gap:clamp(16px,3vw,42px);
  font-size:13px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.crm-open__nav em{font-style:normal;color:var(--violet-mid)}

.crm-open__bottom{max-width:min(100%,760px)}

.crm-open__title{
  /* The ch limit belongs on the heading, in the heading's own type size. On the
     wrapper it resolves against 16px and clips the words. */
  max-width:16ch;
  margin:0 0 18px;
  font-size:clamp(2.4rem,5.4vw,4.8rem);
  line-height:.94;
  letter-spacing:-.04em;
}

/* A rising element must be masked by a PARENT, never by itself - an element
   cannot clip its own transform. */
.crm-open__mask{display:block;overflow:hidden;padding-bottom:.06em}
.crm-open__rise,
.crm-open__rise-line{display:block;will-change:transform}

.crm-open__sub{
  max-width:44ch;
  margin:0 0 26px;
  font-size:clamp(15px,1.25vw,18px);
  line-height:1.5;
  color:rgb(243 243 245 / .88);
}

.crm-open__actions{display:flex;flex-wrap:wrap;gap:12px}
.crm-open__actions .crm-open__mask{padding-bottom:4px}
.crm-open__actions .crm-open__rise{display:inline-flex}

/* A wash so white type survives whatever screenshot ends up underneath. */
.crm-open__content::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg, rgb(20 10 44 / .6) 0%, rgb(20 10 44 / .26) 40%, rgb(20 10 44 / .82) 100%);
}

/* The site header and the WhatsApp dock would sit on top of a full-screen
   opening, so they wait for it. */
.is--intro .site-header,
.is--intro .wa-dock{opacity:0;pointer-events:none}
.site-header,
.wa-dock{transition:opacity .7s var(--ease-out)}
.is--intro{overflow:hidden}

/* ---------------- 2. the angled body slabs ---------------- */

.slab{
  /* Wider than the site container on purpose: the screenshots are the
     argument on this page, so they get the room. */
  width:min(100%,1560px);
  margin-inline:auto;
  padding:clamp(64px,6.4vw,104px) var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  align-items:center;
  gap:clamp(40px,5vw,84px);
}

/* Odd slabs put the copy left and tilt the shot one way; even slabs mirror it.
   Alternating the sign is what stops six screenshots reading as a list. */
.slab:nth-of-type(even){grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)}
.slab:nth-of-type(even) .slab__copy{order:2}
.slab:nth-of-type(even) .slab__shot{order:1}

.slab__step{
  display:inline-block;
  margin:0 0 14px;
  padding:6px 12px;
  border-radius:999px;
  background:rgb(76 29 149 / .09);
  color:var(--navy);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.slab__copy h2{
  max-width:14ch;
  margin:0 0 16px;
  font-size:clamp(2.4rem,3.6vw,3.6rem);
  line-height:.96;
  letter-spacing:-.035em;
}

.slab__copy p{
  max-width:46ch;
  margin:0;
  color:var(--muted);
  font-size:clamp(16px,1.25vw,19px);
  line-height:1.55;
}

.slab__copy ul{
  margin:20px 0 0;
  padding:0;
  list-style:none;
  display:grid;
  gap:0;
}

.slab__copy li{
  position:relative;
  padding:10px 0 10px 24px;
  border-bottom:1px solid var(--line);
  font-size:15px;
  font-weight:650;
}

.slab__copy li::before{
  content:"";
  position:absolute;
  left:1px;
  top:17px;
  width:9px;
  height:5px;
  border-left:2px solid var(--teal);
  border-bottom:2px solid var(--teal);
  transform:rotate(-45deg);
}

.slab__shot{
  margin:0;
  border-radius:16px;
  overflow:hidden;
  background:#151318;
  box-shadow:0 34px 70px rgb(15 5 40 / .3);
  /* Resting tilt. The reveal unwinds it by 2.2deg, so it settles nearly square
     but never quite, which is what keeps the page feeling built by hand. */
  transform:rotate(var(--tilt,-3.4deg)) translateY(34px);
  opacity:0;
  transition:
    transform 1.05s var(--ease-out),
    opacity .8s var(--ease-out);
  will-change:transform,opacity;
}

.slab:nth-of-type(even) .slab__shot{--tilt:3.4deg}

.slab__shot.is-in{
  transform:rotate(var(--tilt-rest,-1.2deg)) translateY(0);
  opacity:1;
}

.slab:nth-of-type(even) .slab__shot.is-in{--tilt-rest:1.2deg}

.slab__shot img{width:100%;height:auto;display:block}

/* ---------------- closer ---------------- */

.crm-closer{
  width:min(100%,var(--max));
  margin:0 auto;
  padding:clamp(64px,6vw,104px) var(--gutter) clamp(88px,8vw,132px);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.7fr);
  align-items:end;
  gap:clamp(32px,5vw,80px);
}

.crm-closer h2{
  max-width:13ch;
  margin:0;
  font-size:clamp(2.8rem,5vw,4.4rem);
  line-height:.92;
  letter-spacing:-.04em;
}

.crm-closer p{
  margin:0 0 6px;
  color:var(--muted);
  font-size:clamp(16px,1.3vw,19px);
  line-height:1.5;
}

.crm-closer .crm-closer-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:20px;
}

/* ---------------- degradation ---------------- */

@media (max-width:1000px){
  .crm-lede{padding:150px 20px 24px}
  .crm-open__content{padding:104px 20px 92px}
  .crm-open__bottom{max-width:none}
  .crm-open__nav{font-size:10px;letter-spacing:.08em;gap:14px}
  .crm-open__title{font-size:clamp(2.1rem,8.6vw,3rem);margin-bottom:14px}
  .crm-open__sub{font-size:15px;margin-bottom:20px}
  .crm-open__actions{gap:10px}
  .crm-open__actions .crm-open__rise{font-size:14px;padding-inline:18px}
  /* At 390px the screenshot behind is cropped so hard that it is texture, not
     a readable screen. The readable version is in the slabs below, so lean
     into that and darken it further for the type. */
  .crm-open__content::before{
    background:linear-gradient(180deg, rgb(20 10 44 / .72) 0%, rgb(20 10 44 / .5) 34%, rgb(20 10 44 / .9) 100%);
  }
  .slab,.crm-closer{
    grid-template-columns:1fr;
    padding-inline:20px;
    gap:28px;
  }
  .slab:nth-of-type(even){grid-template-columns:1fr}
  .slab:nth-of-type(even) .slab__copy,
  .slab:nth-of-type(even) .slab__shot{order:initial}
  .slab__shot{--tilt:-2.2deg}
  .slab:nth-of-type(even) .slab__shot{--tilt:2.2deg}
  .crm-closer{align-items:start}
}

@media (prefers-reduced-motion: reduce){
  .slab__shot{
    transform:rotate(var(--tilt,-2deg));
    opacity:1;
    transition:none;
  }
}