/* ============================================================
   LMG — Case Study "moments" module
   The four mechanics Eric picked, extracted and skinnable.
     .m-reveal   pinned browser reveal (pins, THEN the screen scrolls)
     .m-mark     pinned monogram build
     .m-palette  palette + type specimen
     .m-wall     deliverables wall
   Skin with the --m-* tokens on any ancestor.
   ============================================================ */

.m{
  --m-bg:#02181b;
  --m-ink:#ffffff;
  --m-body:#a9c0bd;
  --m-accent:#c19c4b;
  --m-accent-2:#d8bc7e;
  --m-hair:rgba(255,255,255,.14);
  --m-panel:rgba(255,255,255,.045);
  position:relative;
  background:var(--m-bg);
  color:var(--m-ink);
}
.m--light{
  --m-bg:#faf8f4;
  --m-ink:#151f35;
  --m-body:#4a5a72;
  --m-accent:#b07c33;
  --m-accent-2:#c19c4b;
  --m-hair:rgba(21,31,53,.14);
  --m-panel:rgba(21,31,53,.035);
}
.m-eyebrow{font:700 9.5px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;
  color:var(--m-accent);margin:0 0 20px;display:flex;align-items:center;gap:13px}
.m-eyebrow::before{content:"";width:30px;height:1px;background:currentColor;flex:none;opacity:.85}
.m-eyebrow--c{justify-content:center}
.m-h{font-family:var(--serif);font-weight:300;line-height:1.04;letter-spacing:-.012em;
  margin:0;color:var(--m-ink);font-size:clamp(28px,4.2vw,68px)}
.m-h em{font-style:italic;color:var(--m-accent-2)}
.m-p{font:300 clamp(15px,1.1vw,17.5px)/1.78 var(--sans);color:var(--m-body);max-width:54ch;margin:18px 0 0}

/* ============================================================
   1 · M-REVEAL  — the browser pins first, then the site scrolls
   Set the section height with --m-reveal-h (default 300vh).
   ============================================================ */
.m-reveal{height:var(--m-reveal-h,300vh)}
.m-reveal__stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;
  padding:clamp(134px,15vh,162px) var(--gut) clamp(54px,8vh,88px);overflow:clip}
.m-reveal__inner{width:100%;max-width:var(--maxw);display:grid;gap:clamp(20px,3vw,60px);align-items:center}
@media(min-width:1040px){
  .m-reveal__inner{grid-template-columns:minmax(0,.66fr) minmax(0,1.34fr)}
  .m-reveal--flip .m-reveal__inner{grid-template-columns:minmax(0,1.34fr) minmax(0,.66fr)}
  .m-reveal--flip .m-reveal__copy{order:2}
}
.m-reveal--center .m-reveal__inner{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;gap:clamp(14px,2vh,28px)}
.m-reveal--center .m-reveal__copy{max-width:720px}
.m-reveal--center .m-eyebrow{justify-content:center}
.m-reveal--center .m-p{margin-inline:auto}

.m-reveal__copy{opacity:clamp(0,calc(var(--p,0)*6),1);
  transform:translateY(calc(18px - clamp(0,calc(var(--p,0)*6),1)*18px))}

/* the rig: settles in over the first ~22% of the section, then holds */
.m-reveal__rig{position:relative;width:100%;
  --settle:clamp(0,calc(var(--p,0)*4.6),1);
  transform:perspective(2200px)
            rotateX(calc((1 - var(--settle))*7deg))
            scale(calc(.955 + var(--settle)*.045));
  transform-origin:50% 100%;
  opacity:calc(.35 + var(--settle)*.65)}
.m-reveal__rig .mk-phone{position:absolute;right:-4%;bottom:-2%;z-index:4;
  aspect-ratio:430/885;
  opacity:clamp(0,calc((var(--p,0) - .18)*5),1);
  transform:translateY(calc(34px - clamp(0,calc((var(--p,0) - .18)*5),1)*34px))}
.m-reveal--flip .m-reveal__rig .mk-phone{right:auto;left:-4%}
@media(max-width:820px){.m-reveal__rig .mk-phone{display:none}}

/* scroll cue that fades once the screen starts moving */
.m-reveal__cue{position:absolute;left:0;right:0;bottom:clamp(64px,8vh,90px);z-index:5;
  text-align:center;font:600 9px/1 var(--sans);letter-spacing:.3em;
  text-transform:uppercase;color:var(--m-body);pointer-events:none;
  opacity:clamp(0,calc(1 - (var(--p,0) - .18)*7),1)}
.m-reveal__cue i{display:block;width:1px;height:26px;margin:0 auto 9px;
  background:linear-gradient(currentColor,transparent);opacity:.7}
.m-reveal__url{margin-top:14px;text-align:center;font:600 9.5px/1 var(--sans);letter-spacing:.26em;
  text-transform:uppercase;color:var(--m-body);opacity:.8}

@media(max-width:820px){
  .m-reveal{height:auto}
  .m-reveal__stage{position:static;height:auto;padding:clamp(56px,9vw,96px) var(--gut)}
  .m-reveal__rig{transform:none;opacity:1}
  .m-reveal__copy{opacity:1;transform:none}
  .m-reveal__cue{display:none}
}

/* ============================================================
   2 · M-MARK — the monogram build
   ============================================================ */
.m-mark{height:var(--m-mark-h,280vh)}
.m-mark__stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:clip;
  padding:clamp(134px,15vh,162px) var(--gut) clamp(30px,5vh,60px)}
.m-mark__art{position:relative;width:min(62vw,480px);aspect-ratio:1/1;display:grid;place-items:center}
.m-mark__art img{width:76%;position:relative;z-index:2;
  opacity:clamp(0,calc(var(--p,0)*3.4),1);
  transform:scale(calc(.68 + clamp(0,calc(var(--p,0)*3.4),1)*.32))
            rotate(calc((1 - clamp(0,calc(var(--p,0)*3.4),1))*-7deg))}
.m-mark__ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--m-hair);
  transform:scale(calc(.55 + var(--p,0)*.55));opacity:calc(.95 - var(--p,0)*.55)}
.m-mark__ring:nth-of-type(2){inset:11%;border-color:color-mix(in srgb,var(--m-accent) 42%,transparent)}
.m-mark__ring:nth-of-type(3){inset:23%}
.m-mark__ring:nth-of-type(4){inset:35%;border-color:color-mix(in srgb,var(--m-accent) 26%,transparent)}
/* optional paper disc so the two-colour mark reads on a dark field */
.m-mark__disc{position:absolute;inset:3%;border-radius:50%;background:var(--m-disc,transparent);z-index:1;
  box-shadow:0 30px 80px -44px rgba(0,0,0,.85);
  opacity:clamp(0,calc(var(--p,0)*3.4),1);
  transform:scale(calc(.68 + clamp(0,calc(var(--p,0)*3.4),1)*.32))}
.m-mark__cross{position:absolute;inset:-14%;pointer-events:none;
  background:
    linear-gradient(90deg,transparent calc(50% - .5px),var(--m-hair) 50%,transparent calc(50% + .5px)),
    linear-gradient(0deg,transparent calc(50% - .5px),var(--m-hair) 50%,transparent calc(50% + .5px));
  opacity:calc(.95 - var(--p,0)*.9)}
/* measurement ticks that draw in with the mark */
.m-mark__tick{position:absolute;height:1px;background:var(--m-accent);opacity:.55;
  transform-origin:left center;transform:scaleX(clamp(0,calc((var(--p,0) - .22)*3.2),1))}
.m-mark__tick--t{top:0;left:0;right:0}
.m-mark__tick--b{bottom:0;left:0;right:0}
.m-mark__cap{position:absolute;font:600 8.5px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;
  color:var(--m-accent);opacity:clamp(0,calc((var(--p,0) - .3)*4),1)}

.m-mark__copy{position:absolute;left:var(--gut);bottom:11vh;max-width:32ch}
.m-mark__copy .m-h{font-size:clamp(24px,2.9vw,44px)}
.m-mark__sws{position:absolute;right:var(--gut);bottom:11vh;display:grid;gap:13px}
.m-mark__sw{display:flex;align-items:center;gap:13px;
  opacity:clamp(0,calc((var(--p,0) - .5)*5),1);
  transform:translateX(calc(22px - clamp(0,calc((var(--p,0) - .5)*5),1)*22px))}
.m-mark__sw i{width:48px;height:48px;border-radius:2px;display:block;box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.m-mark__sw b{font:700 10.5px/1.5 var(--sans);letter-spacing:.12em;color:var(--m-ink);display:block}
.m-mark__sw span{font:400 10px/1.5 var(--sans);letter-spacing:.12em;color:var(--m-body)}

@media(max-width:900px){
  .m-mark{height:auto}
  .m-mark__stage{position:static;height:auto;display:block;padding:clamp(56px,9vw,96px) var(--gut)}
  .m-mark__art{width:min(70vw,340px);margin-inline:auto}
  .m-mark__copy,.m-mark__sws{position:static;margin-top:30px;text-align:center;max-width:none}
  .m-mark__copy .m-eyebrow{justify-content:center}
  .m-mark__copy .m-p{margin-inline:auto}
  .m-mark__sws{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:420px;margin-inline:auto}
  .m-mark__sw{flex-direction:column;align-items:center;gap:9px;opacity:1;transform:none}
  .m-mark__sw i{width:42px;height:42px}
}

/* ============================================================
   3 · M-PALETTE — type specimen + colour
   ============================================================ */
.m-pal__spec{background:var(--m-spec-bg,#151f35);color:#fff;padding:clamp(30px,4vw,68px)}
.m-pal__type span{display:block;font-family:var(--serif);line-height:1;color:#fff}
.m-pal__type .s1{font-size:clamp(28px,5.4vw,98px);font-weight:300}
.m-pal__type .s2{font-size:clamp(19px,3.2vw,50px);font-style:italic;color:var(--m-accent-2);margin-top:8px}
.m-pal__type .s3{font:500 10px/1.7 var(--sans);letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.55);margin-top:22px}

.m-pal__bars{display:flex;border:1px solid var(--m-hair);margin-top:clamp(20px,2.6vw,36px)}
.m-pal__bars div{flex:1;min-width:0;aspect-ratio:1/1.3;display:flex;align-items:flex-end;padding:9px;
  font:600 8px/1.4 var(--sans);letter-spacing:.05em;overflow:hidden;
  transform-origin:bottom center;transition:flex-grow .5s var(--ease)}
.m-pal__bars div:hover{flex-grow:1.6}

/* swatch cards that fan out on scroll */
.m-pal__fan{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));
  gap:clamp(12px,1.6vw,22px)}
.m-pal__card{aspect-ratio:3/4;border-radius:2px;padding:16px;display:flex;flex-direction:column;
  justify-content:flex-end;box-shadow:0 26px 50px -30px rgba(0,0,0,.55);
  transition:transform .6s var(--ease)}
.m-pal__card:hover{transform:translateY(-8px)}
.m-pal__card b{font:700 11px/1.4 var(--sans);letter-spacing:.1em;display:block}
.m-pal__card span{font:400 10px/1.5 var(--sans);letter-spacing:.12em;opacity:.75}

/* full-bleed colour takeover — each panel is one viewport */
.m-pal__take{position:relative}
.m-pal__panel{height:100svh;display:grid;place-items:center;position:sticky;top:0}
.m-pal__panel h3{font-family:var(--serif);font-weight:300;font-size:clamp(40px,9vw,150px);margin:0;line-height:.94}
.m-pal__panel p{font:600 10px/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;margin:18px 0 0}

/* ============================================================
   4 · M-WALL — deliverables wall
   ============================================================ */
.m-wall{columns:var(--m-wall-cols,3) 270px;column-gap:clamp(12px,1.6vw,24px)}
.m-wall figure{break-inside:avoid;margin:0 0 clamp(12px,1.6vw,24px);position:relative;
  transition:transform .55s var(--ease)}
.m-wall figure:hover{transform:translateY(-5px)}
.m-wall img{display:block;width:100%;border-radius:2px;
  box-shadow:0 22px 44px -28px rgba(0,0,0,.6)}
.m-wall figcaption{margin-top:9px;font:600 9px/1.6 var(--sans);letter-spacing:.2em;
  text-transform:uppercase;color:var(--m-body)}
.m-wall figcaption b{display:block;font-family:var(--serif);font-size:17px;font-weight:400;
  letter-spacing:0;text-transform:none;color:var(--m-ink);margin-bottom:3px}

/* grid variant — even contact sheet */
.m-wall--sheet{columns:auto;display:grid;gap:1px;background:var(--m-hair);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.m-wall--sheet figure{margin:0;background:var(--m-bg);padding:clamp(12px,1.4vw,20px)}
.m-wall--sheet figure:hover{transform:none;background:var(--m-panel)}
.m-wall--sheet img{aspect-ratio:4/3;object-fit:cover}