/* Featured Work cards — lusion.co's project list, ported (motion in featured.js). Shared by the homepage (#featured) and the
   Work page (projects.html); moved out of lusion-clone.html verbatim, Oct 4. */
/* ---------- SECTION 3 — featured work. Port of lusion.co #home-featured (their CSS, Oct 3), all MEASURED:
   .section: 12-col grid, gap 2vw, padding clamp(30px,4vw,50px) max(5vw,40px) · title 8vw / lh .9 / ls −.02em / pad-top .5em / ml −.07em
   disclaimer: abs. bottom-right of the title row, 3 cols + 2 gaps wide, .9vw uppercase lh 1.4 · list: margin-top 8vh, two cards per row (span 6),
   rows after the first +5em (80px) · card image 65% tall, radius 20 (WebGL) · line 1 .9vw uppercase, margin 1.5em 0 1em · line 2 3vw, 1em tall
   CTA pill: centred, 12vh below, clamp(14px,1vw,28px) 500 uppercase, 3.375em tall, dot → fills on hover
   CHOSEN: Think Less blue for their blue · our eight films and copy ---------- */
#featured{position:relative;z-index:46;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2vw;padding:clamp(30px,4vw,50px) max(5vw,40px)}
#featured .fw-top{position:relative;grid-column:1/span 12;line-height:0}
#featured .fw-tw{position:relative;width:fit-content;font-size:8vw;letter-spacing:-.02em}
#featured .fw-tw h2{padding:0 .14em;margin-left:-.14em;margin-right:-.14em}   /* room for the last letter inside the title mask (Oct 4) */
#featured h2{padding-top:.5em;position:relative;display:inline-block;margin:0 0 0 -.07em;line-height:.9;overflow:hidden;font-family:var(--aeonik);font-weight:400;font-size:1em;color:var(--ink)}
#featured h2 .c{display:inline-block;will-change:transform}
#featured .fw-disc{position:absolute;right:0;bottom:0;width:calc((100% - 22vw)/12*3 + 4vw);text-transform:uppercase;line-height:1.4;font-size:.9vw;font-family:var(--med);font-weight:500;color:var(--ink)}
#featured .fw-disc .ln{position:relative;overflow:hidden}#featured .fw-disc .ln > span{display:block}
#featured .fw-list{position:relative;grid-column:1/span 12;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:2vw;margin-top:8vh}
#featured .fw-item{position:relative;grid-column:span 6;cursor:pointer;color:var(--ink);text-decoration:none}
#featured .fw-item:nth-child(n+3){margin-top:5rem}
#featured .fw-main{position:relative;padding-top:65%}
#featured .fw-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:20px}
#featured.gl .fw-main img{opacity:0}
#featured .fw-foot{position:relative;width:100%}
#featured .fw-l1{font-size:.9vw;margin:1.5em 0 1em;text-transform:uppercase;font-family:var(--med);font-weight:500;min-height:1.2em;white-space:nowrap}
#featured .fw-l2{position:relative;overflow:hidden;font-size:3vw;height:1em;left:-.06em;font-family:var(--aeonik);font-weight:400}
#featured .fw-icon{display:inline-block;position:absolute;width:.8em;height:.8em;top:.1em;left:-1em}
#featured .fw-icon svg{width:100%;height:100%;display:block}
#featured .fw-l2i{position:relative;bottom:.2em;overflow:hidden;display:flex;line-height:1.2}
#featured .fw-l2i .ls{display:flex;flex-direction:column}
#featured .fw-cta{display:flex;position:relative;place-self:center;padding:1em 1.5em 1em 1.625em;align-items:center;gap:1em;overflow:hidden;border-radius:5.3125em;font-size:clamp(.875rem,1vw,1.75rem);background:#fff;
  font-family:var(--med);text-transform:uppercase;height:3.375em;width:fit-content;font-weight:500;color:var(--ink);text-decoration:none;grid-column:1/span 12;margin-top:12vh;
  box-shadow:rgba(0,0,0,.04) 0 6px 10px,rgba(0,0,0,.04) 0 2px 4px;transition:background .2s cubic-bezier(.35,0,0,1);will-change:transform}
#featured .fw-cta-dot{display:inline-block;position:relative;width:.5em;height:.5em;background:var(--ink);border-radius:100px;z-index:1;transition:background .5s cubic-bezier(.35,0,0,1),transform .4s cubic-bezier(.35,0,0,1)}
#featured .fw-cta-text{position:relative;z-index:1;transition:color .5s cubic-bezier(.35,0,0,1),transform .4s cubic-bezier(.35,0,0,1)}
#featured .fw-cta-arrow{position:absolute;display:flex;justify-content:center;align-items:center;right:1em;height:1.2em;width:1.2em;color:var(--fill);transform:translate3d(3em,0,0);transition:transform .4s cubic-bezier(.4,0,0,1);z-index:1}
#featured .fw-cta-arrow svg{width:100%;height:100%;transition:color .5s}
@media (hover:hover){
  #featured .fw-cta:hover{color:#fff;background:var(--fill);transition:background .5s cubic-bezier(.35,0,0,1) .3s}
  #featured .fw-cta:hover .fw-cta-text{transform:translate3d(-1.5em,0,0)}
  #featured .fw-cta:hover .fw-cta-dot{transform:translate3d(4em,0,0) scale(32);background:var(--fill)}
  #featured .fw-cta:hover .fw-cta-arrow{transform:translateZ(0)}
  #featured .fw-cta:hover .fw-cta-arrow svg{color:#fff}
}
@media (max-width:812px){
  #featured{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:4vw}
  #featured .fw-top{grid-column:1/span 6}
  #featured .fw-tw{font-size:15vw}
  #featured .fw-disc{position:relative;font-size:max(12px,2.5vw);width:100%;margin:3em 0}
  #featured .fw-list{grid-template-columns:repeat(6,minmax(0,1fr));grid-column:1/span 6;margin-top:0}
  #featured .fw-item:not(:first-child){margin-top:2em}
  #featured .fw-l1{font-size:max(11px,2.5vw);white-space:normal}#featured .fw-l2{font-size:6.5vw}
  #featured .fw-icon{transform:translateX(1em)}#featured .fw-l2i{transform:translateX(1.5em)}
  #featured .fw-cta{grid-column:1/span 6;margin-top:4em;margin-bottom:5em}
}