/* ---------- landing page ---------- */
/* The signed-out home page: the film, then the sections, over the ocean
   dither, laid out on the app's asymmetric 12-column grid. As in the app,
   type sits on cream blocks and panels are card tiles. */

/* the film, centred over the dither */
.home-hero{min-height:calc(100svh - 110px)}
.ld-hero{position:relative;z-index:1;min-height:calc(100svh - 64px);display:flex;align-items:center;padding:clamp(24px,5vw,48px) 0 clamp(40px,7vw,72px)}

/* sections, over the dither */
#ldSections{position:relative;z-index:1}
.ld-sec{padding:clamp(72px,11vw,170px) clamp(14px,2vw,24px) 0}
.ld-sec+.ld-sec{margin-top:clamp(40px,6vw,90px)}
.ld-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(12px,1.4vw,22px);align-items:start}
.ld-it{grid-column:var(--cs,1)/span var(--sp,12);grid-row:var(--r,auto);margin-top:var(--mt,0)}
.ld-end{text-align:right}
.ld-end .lab{flex-direction:row-reverse}
.ld-lab{margin:0}
.ld-lab .lab{font-size:12px;background:var(--cream);padding:5px 9px}
.ld-h{justify-self:start;width:fit-content;margin:12px 0 0;padding:.1em .22em .16em .16em;background:var(--cream);font-size:clamp(46px,8.2vw,148px);font-weight:600;letter-spacing:-0.055em;line-height:.9}
.ld-h.ld-end{justify-self:end}
.ld-lab.ld-end{justify-self:end}
.ld-intro{justify-self:start;margin:12px 0 0;padding:18px 22px 20px;background:var(--cream);font-size:clamp(18px,1.65vw,24px);line-height:1.32;letter-spacing:-0.015em;max-width:36ch}
.ld-answer .ld-intro{grid-row:3}

/* panels: card tiles, scattered and offset */
.ld-panels{position:relative;margin-top:clamp(56px,7vw,110px);row-gap:clamp(24px,3vw,44px)}
.ld-pan{position:relative;z-index:1;background:var(--vb);color:var(--red)}
.ld-pan.v-black,.ld-pan.v-red{background:var(--cream)}
.ld-body{padding:18px 20px 24px}
.ld-pan h3{margin:0;font-size:clamp(22px,2vw,30px);font-weight:600;letter-spacing:-0.03em;line-height:1.02}
.ld-pan p{margin:12px 0 0;font-size:16px;line-height:1.45;max-width:52ch}
.ld-big .ld-body{padding:24px 26px 30px}
.ld-big h3{font-size:clamp(28px,2.8vw,42px)}
.ld-big p{font-size:17.5px}
.ld-card .vis{height:var(--vh,280px)}

/* the connecting lines */
.ld-line{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.ld-line path{fill:none;stroke:var(--red);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1}
.ld-line circle{fill:var(--red)}
.ld-line circle+circle{opacity:0;transition:opacity .3s}
.ld-answer .ld-line path{stroke:rgba(237,229,223,.55);stroke-width:1.4}
.ld-answer .ld-line circle{fill:var(--cream)}

/* pull lines */
.ld-pull{margin:clamp(72px,9vw,140px) 0 0;padding:16px 22px 22px;background:var(--cream);border-top:2px solid var(--red);font-size:clamp(28px,3.4vw,54px);font-weight:500;letter-spacing:-0.035em;line-height:1.02}

/* closing band */
.ld-band{margin-top:clamp(110px,14vw,220px);border-top:2px solid var(--red);padding:clamp(36px,5vw,72px) clamp(14px,2vw,24px) clamp(64px,8vw,120px)}
/* cream behind each line of the statement, like a highlighter */
.ld-statement>span{background:var(--cream);padding:.02em .16em .1em .12em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ld-statement{margin:0;font-size:clamp(48px,9.4vw,172px);font-weight:600;letter-spacing:-0.058em;line-height:1.02;max-width:15ch}
.ld-cta{display:inline-block;margin-top:clamp(28px,4vw,48px);font-size:clamp(16px,1.4vw,20px);padding:14px 26px;text-decoration:none}
.ld-cta:hover{background:var(--ink);border-color:var(--ink)}


/* motion: words set through masks, blocks settle into place */
.ld-m{display:inline-block;vertical-align:baseline;clip-path:inset(0);padding:.1em .08em .16em .02em;margin:-.1em -.08em -.16em -.02em}
.ld-m>span{display:inline-block;transform:translateY(112%);transition:transform .7s cubic-bezier(.12,.9,.2,1) calc(var(--i,0)*55ms)}
.in .ld-m>span,.ld-m.in>span{transform:none}
.ld-lab,.ld-intro,.ld-pull,.ld-cta{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .7s cubic-bezier(.12,.9,.2,1)}
.ld-pan{opacity:0;transform:translateY(44px);transition:opacity .55s ease calc(var(--k,0)*110ms),transform .8s cubic-bezier(.12,.9,.2,1) calc(var(--k,0)*110ms)}
.ld-r.in{opacity:1;transform:none}

/* 6 columns, offsets reduced */
@media (max-width:1000px){
  .ld-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .ld-it{grid-column:var(--cs6,1)/span var(--sp6,6);grid-row:var(--r6,auto);margin-top:var(--mt6,0)}
  .ld-answer .ld-intro{grid-row:auto}
  .ld-h{font-size:clamp(46px,10vw,104px)}
}
/* one column, alternating left and right */
@media (max-width:640px){
  .ld-grid{grid-template-columns:minmax(0,1fr)}
  .ld-it{grid-column:1;grid-row:auto;margin-top:0}
  .ld-panels{padding-left:22px;row-gap:22px}
  .ld-pan:nth-of-type(odd){margin-right:8%}
  .ld-pan:nth-of-type(even){margin-left:8%}
  .ld-h{font-size:clamp(42px,13vw,64px)}
  .ld-pull{margin-left:6%}
  .ld-statement{font-size:clamp(44px,13.5vw,72px)}
  .ld-pan p{font-size:15.5px}
  .ld-card .vis{height:calc(var(--vh,280px)*.62)}
}
@media (prefers-reduced-motion:reduce){
  .ld-m>span,.ld-lab,.ld-intro,.ld-pull,.ld-cta,.ld-pan{transition:none;transform:none;opacity:1}
}