/* Home page: one large glossy "magazine cover" billboard of finished works. No tabs, no scrolling, one click to the gallery. */
.billboard-section{padding-top:90px;padding-bottom:90px}
.billboard{--ease:cubic-bezier(.2,.7,.1,1);position:relative;isolation:isolate;overflow:hidden;min-height:clamp(620px,48vw,800px);border-radius:40px;border:1px solid rgba(255,255,255,.14);background:
  radial-gradient(60% 90% at 82% 18%,rgba(112,84,255,.55),transparent 62%),
  radial-gradient(48% 70% at 96% 92%,rgba(40,170,230,.38),transparent 66%),
  radial-gradient(40% 60% at 6% 100%,rgba(112,40,200,.34),transparent 70%),
  linear-gradient(135deg,#0b0f46 0%,#060829 55%,#04051c 100%);
  box-shadow:0 70px 140px -50px rgba(60,70,230,.55),0 0 0 1px rgba(255,255,255,.05) inset,0 1px 0 rgba(255,255,255,.28) inset;
  transition:transform .8s var(--ease),box-shadow .8s var(--ease)}
.billboard:hover{transform:translateY(-6px);box-shadow:0 90px 160px -50px rgba(80,90,255,.7),0 0 0 1px rgba(255,255,255,.08) inset,0 1px 0 rgba(255,255,255,.34) inset}
.billboard:before{content:'';position:absolute;inset:0;z-index:0;background:url(works/noise.png);opacity:.45;mix-blend-mode:soft-light;pointer-events:none}
.bb-stretch{position:absolute;inset:0;z-index:6;border-radius:inherit}
.bb-stretch:focus-visible{outline:3px solid #4bdcf5;outline-offset:-6px}
.bb-sheen{position:absolute;inset:-20%;z-index:5;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.11) 47%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.11) 53%,transparent 60%);transform:translateX(-120%);animation:bb-sheen 9s ease-in-out 1.2s infinite;mix-blend-mode:screen}
@keyframes bb-sheen{0%,12%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
.bb-mast{position:absolute;left:clamp(28px,4vw,64px);right:clamp(28px,4vw,64px);top:clamp(22px,2.4vw,34px);z-index:2;display:flex;align-items:center;gap:18px;font-size:11px;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:rgba(248,249,255,.62)}
.bb-mast i{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,.28),rgba(255,255,255,.06))}
.bb-copy{position:relative;z-index:3;max-width:min(500px,40%);padding:clamp(92px,9vw,130px) 0 clamp(56px,5vw,84px) clamp(28px,4.4vw,72px);display:flex;flex-direction:column;align-items:flex-start;min-height:inherit;justify-content:center}
.bb-kicker{margin:0 0 22px;display:flex;align-items:center;gap:14px;color:#4bdcf5;font-size:12px;font-weight:800;letter-spacing:.24em;text-transform:uppercase}.bb-kicker:before{content:'';width:42px;height:1px;background:linear-gradient(90deg,#4bdcf5,transparent)}
.bb-copy h2{margin:0;font-size:clamp(44px,5.6vw,92px);font-weight:300;line-height:.94;letter-spacing:-.055em;color:#fff}
.bb-copy h2 em{font-family:'Cormorant','Playfair Display',Georgia,serif;font-style:italic;font-weight:500;letter-spacing:-.04em;background:linear-gradient(100deg,#fff 10%,#a9b8ff 52%,#4bdcf5 95%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.bb-lead{margin:26px 0 0;color:rgba(248,249,255,.76);font-size:clamp(15px,1.25vw,18px);line-height:1.65;max-width:440px}
.bb-index{max-width:380px!important;margin:22px 0 34px;font-family:'Cormorant','Playfair Display',Georgia,serif;font-style:italic;font-size:clamp(17px,1.4vw,21px);color:rgba(248,249,255,.5);line-height:1.5;max-width:440px}
.bb-btn{display:inline-flex;align-items:center;gap:14px;min-height:60px;padding:0 30px;border-radius:999px;background:#fff;color:#07092b;font-weight:800;font-size:16px;box-shadow:0 24px 60px -16px rgba(255,255,255,.4);transition:transform .45s var(--ease),box-shadow .45s}
.bb-btn i{font-style:normal;transition:transform .45s var(--ease)}
.billboard:hover .bb-btn{transform:translateY(-2px);box-shadow:0 30px 70px -14px rgba(255,255,255,.55)}.billboard:hover .bb-btn i{transform:translateX(6px)}
.bb-foot{position:absolute;right:clamp(28px,4vw,64px);bottom:clamp(20px,2.2vw,30px);z-index:3;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(248,249,255,.5)}.bb-foot b{font-family:'Cormorant','Playfair Display',Georgia,serif;font-size:30px;font-weight:500;letter-spacing:0;color:#fff;margin-right:6px;vertical-align:-3px}

/* the collage */
.bb-stage{position:absolute;right:0;top:0;bottom:0;width:62%;z-index:2;perspective:1800px}
.bb-f{position:absolute;margin:0;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.2);background:#0b0e32;box-shadow:0 50px 90px -26px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.05) inset;transform:translate3d(calc(var(--bx,0)*var(--d,1)*1px),calc(var(--by,0)*var(--d,1)*1px),0) rotateZ(var(--rz,0deg)) rotateY(var(--ry,0deg));transition:transform 1.1s var(--ease)}
.bb-f img{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.bb-f:after{content:'';position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.26) 0%,rgba(255,255,255,.04) 30%,transparent 46%,rgba(4,5,28,.28));pointer-events:none}
.bb-f:before{content:'';position:absolute;left:0;right:0;top:0;height:22px;z-index:2;background:rgba(16,20,63,.9);border-bottom:1px solid rgba(255,255,255,.1);pointer-events:none}
.bb-f.bb-phone:before{display:none}
.bb-back-left{left:6%;top:13%;width:40%;aspect-ratio:16/10;--rz:-7deg;--ry:12deg;--d:.5;opacity:.82}
.bb-back-right{left:57%;top:7%;width:39%;aspect-ratio:16/10;--rz:6deg;--ry:-12deg;--d:.6;opacity:.82}
.bb-main{left:15%;top:23%;width:64%;aspect-ratio:16/10;--rz:-2deg;--ry:-6deg;--d:1.4;border-radius:20px;box-shadow:0 70px 120px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08) inset,0 0 80px -10px rgba(95,110,255,.45)}
.bb-front-left{left:9%;top:60%;width:36%;aspect-ratio:16/10;--rz:4deg;--ry:10deg;--d:1.9}
.bb-front-right{left:61%;top:62%;width:36%;aspect-ratio:16/10;--rz:-5deg;--ry:-10deg;--d:1.7}
.bb-phone{left:41%;top:46%;width:14%;aspect-ratio:600/1298;--rz:7deg;--d:2.4;border-radius:22px;border:5px solid #0a0c24;box-shadow:0 50px 90px -20px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.22);z-index:4}
.bb-main{z-index:3}.bb-front-left,.bb-front-right{z-index:4}
@media(max-width:1100px){
  .billboard{min-height:0;border-radius:30px;display:flex;flex-direction:column}
  .bb-mast{position:relative;left:auto;right:auto;top:auto;margin:22px 26px 0}
  .bb-copy{max-width:none;min-height:0;padding:34px 26px 8px}.bb-btn{min-height:56px}
  .bb-stage{position:relative;right:auto;top:auto;bottom:auto;width:100%;aspect-ratio:1.28;margin-top:10px}
  .bb-foot{position:static;margin:0 26px 26px;text-align:left}
}
@media(max-width:560px){.billboard-section{padding-top:60px;padding-bottom:60px}.bb-copy h2{font-size:46px}.bb-mast span:nth-of-type(3),.bb-mast i:last-of-type{display:none}.bb-f:before{height:12px}.bb-back-left,.bb-back-right{opacity:.6}}
@media(prefers-reduced-motion:reduce){.bb-sheen{animation:none;display:none}.billboard,.bb-f,.bb-btn,.bb-btn i{transition:none}.billboard:hover{transform:none}}