@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root{
  --bg:#000;
  --fg:#f5f5f5;
  --line:rgba(255,255,255,.13);
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box}

html{
  background:#000;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:#000;
  color:#fff;
  font-family:Inter,Arial,sans-serif;
  overflow-x:hidden;
  cursor:none;
}

a{
  color:inherit;
  text-decoration:none;
}

/* =========================
   ATMOSPHERE
========================= */

.grain{
  position:fixed;
  inset:-45%;
  z-index:1000;
  pointer-events:none;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation:grain .18s steps(2) infinite;
}

@keyframes grain{
  0%{transform:translate(0,0)}
  25%{transform:translate(1.4%,-1%)}
  50%{transform:translate(-1%,1.4%)}
  75%{transform:translate(1%,1%)}
  100%{transform:translate(-1.4%,-1%)}
}

.cursor,
.cursor-dot{
  position:fixed;
  left:0;
  top:0;
  z-index:1100;
  pointer-events:none;
  transform:translate(-50%,-50%);
  border-radius:50%;
  mix-blend-mode:difference;
}

.cursor{
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.52);
  transition:
    width .45s var(--ease),
    height .45s var(--ease),
    background .4s,
    border-color .4s;
}

.cursor-dot{
  width:4px;
  height:4px;
  background:#fff;
}

body.is-hovering .cursor{
  width:78px;
  height:78px;
  background:rgba(255,255,255,.08);
  border-color:transparent;
}

.scroll-progress{
  position:fixed;
  top:0;
  left:0;
  z-index:1050;
  width:100%;
  height:2px;
  background:#fff;
  transform:scaleX(0);
  transform-origin:left;
}

/* =========================
   PAGE / HEADER
========================= */

.page{
  width:min(1440px,100%);
  margin:auto;
  padding:48px 7vw 130px;
}

.topbar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  margin-bottom:78px;
  opacity:0;
  transform:translateY(-14px);
  animation:topbarIn .95s var(--ease) .05s forwards;
}

@keyframes topbarIn{
  to{
    opacity:1;
    transform:none;
  }
}

.back{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:11px;
  font-size:13px;
  font-weight:300;
  color:rgba(255,255,255,.7);
}

.back-arrow{
  font-size:27px;
  line-height:0;
  transition:transform .6s var(--ease);
}

.back:hover .back-arrow{
  transform:translateX(-5px);
}

.title-wrap{
  width:min(250px,30vw);
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.page-title{
  margin:0;
  font-size:clamp(2rem,3.4vw,4rem);
  line-height:.82;
  font-weight:900;
  letter-spacing:-.09em;
  text-transform:uppercase;
  color:#3b3b3b;
  transform:translateY(110%);
  animation:titleIn 1.15s var(--ease) .12s forwards;
}

@keyframes titleIn{
  to{transform:none}
}

.work-pill{
  justify-self:end;
  min-width:108px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.18);
  background: transparent;
  border-radius:999px;
  font-size:8px;
  color:rgba(255,255,255,.75);
  transition:
    background .5s var(--ease),
    color .4s,
    border-color .4s,
    transform .5s var(--ease);
}

.work-pill:hover{
  background:#fff;
  color:#000;
  border-color:#fff;
  transform:translateY(-2px);
}

/* =========================
   INTRO
========================= */

.intro{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:30px;
  margin-bottom:40px;
  opacity:0;
  animation:fadeUp .9s var(--ease) .28s forwards;
}

@keyframes fadeUp{
  from{
    opacity:0;
    transform:translateY(18px);
  }
  to{
    opacity:1;
    transform:none;
  }
}

.eyebrow{
  margin:0 0 10px;
  font-size:8px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.3);
}

.headline{
  margin:0;
  max-width:850px;
  font-size:clamp(1.45rem,2.3vw,2.45rem);
  line-height:1.05;
  font-weight:350;
  letter-spacing:-.045em;
  color:rgba(255,255,255,.72);
}

.headline strong{
  font-weight:750;
  color:#fff;
}

.count{
  font-size:8px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.28);
}

/* =========================
   TWO FEATURED 4:5 POSTERS
========================= */

.feature-section{
  margin-bottom:80px;
}

.feature-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  max-width:900px;
  margin:0 auto;
}

.feature-poster{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:#090909;
  opacity:0;
  transform:translateY(42px) scale(.985);
}

.feature-poster:nth-child(1){
  animation:featureIn 1.1s var(--ease) .42s forwards;
}

.feature-poster:nth-child(2){
  animation:featureIn 1.1s var(--ease) .52s forwards;
}

@keyframes featureIn{
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.feature-poster img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1.001);
  transition:
    transform 1.25s var(--ease),
    filter 1s var(--ease);
}

.feature-poster:hover img{
  transform:scale(1.045);
  filter:saturate(1.03) contrast(1.02);
}

.feature-poster::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(
      circle at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.13),
      transparent 35%
    );
  opacity:0;
  transition:opacity .6s ease;
}

.feature-poster::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      transparent 46%,
      rgba(0,0,0,.38)
    );
  opacity:.28;
  transition:opacity .6s ease;
}

.feature-poster:hover::before{
  opacity:1;
}

.feature-poster:hover::after{
  opacity:.8;
}

.feature-poster-meta{
  position:absolute;
  left:15px;
  right:15px;
  bottom:15px;
  z-index:3;

  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;

  opacity:0;
  transform:translateY(8px);

  transition:
    opacity .6s var(--ease),
    transform .7s var(--ease);
}

.feature-poster:hover .feature-poster-meta{
  opacity:1;
  transform:none;
}

.feature-poster-meta span{
  font-size:7px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(255,255,255,.76);
}

/* =========================
   7 REMAINING 4:5 POSTERS
========================= */

.poster-section{
  margin-top:30px;
  padding-top:30px;
  border-top:1px solid rgba(255,255,255,.07);
}

.section-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:22px;

  font-size:8px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(255,255,255,.3);
}

.poster-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
}

.poster-card{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:#090909;

  opacity:0;
  transform:translateY(42px) scale(.985);
}

.poster-section.is-visible .poster-card{
  opacity:1;
  transform:none;
  transition:
    opacity 1s var(--ease),
    transform 1s var(--ease);
}

.poster-section.is-visible .poster-card:nth-child(1){transition-delay:.03s}
.poster-section.is-visible .poster-card:nth-child(2){transition-delay:.09s}
.poster-section.is-visible .poster-card:nth-child(3){transition-delay:.15s}
.poster-section.is-visible .poster-card:nth-child(4){transition-delay:.21s}
.poster-section.is-visible .poster-card:nth-child(5){transition-delay:.27s}
.poster-section.is-visible .poster-card:nth-child(6){transition-delay:.33s}
.poster-section.is-visible .poster-card:nth-child(7){transition-delay:.39s}

.poster-card img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;

  transform:scale(1.001);

  transition:
    transform 1.2s var(--ease),
    filter 1s var(--ease);
}

.poster-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    radial-gradient(
      circle at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.13),
      transparent 34%
    );

  opacity:0;
  transition:opacity .6s ease;
}

.poster-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      transparent 45%,
      rgba(0,0,0,.34)
    );

  opacity:.3;
  transition:opacity .6s ease;
}

.poster-card:hover::before{
  opacity:1;
}

.poster-card:hover::after{
  opacity:.8;
}

.poster-card:hover img{
  transform:scale(1.055);
  filter:saturate(1.02) contrast(1.02);
}

.poster-meta{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  z-index:3;

  display:flex;
  justify-content:space-between;
  align-items:center;

  opacity:0;
  transform:translateY(8px);

  transition:
    opacity .6s var(--ease),
    transform .7s var(--ease);
}

.poster-card:hover .poster-meta{
  opacity:1;
  transform:none;
}

.poster-meta span{
  font-size:7px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(255,255,255,.76);
}

.poster-arrow{
  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;

  background:rgba(0,0,0,.16);
  backdrop-filter:blur(9px);

  font-size:11px;
}

/* =========================
   3 SQUARE POSTERS
========================= */

.square-section{
  margin-top:145px;
  padding-top:30px;
  border-top:1px solid rgba(255,255,255,.07);
}

.square-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}

.square-card{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#090909;

  opacity:0;
  transform:translateY(42px) scale(.985);
}

.square-section.is-visible .square-card{
  opacity:1;
  transform:none;
  transition:
    opacity 1s var(--ease),
    transform 1s var(--ease);
}

.square-section.is-visible .square-card:nth-child(1){
  transition-delay:.05s;
}

.square-section.is-visible .square-card:nth-child(2){
  transition-delay:.13s;
}

.square-section.is-visible .square-card:nth-child(3){
  transition-delay:.21s;
}

.square-card img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1.001);

  transition:
    transform 1.2s var(--ease),
    filter 1s var(--ease);
}

.square-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;

  background:
    radial-gradient(
      circle at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.13),
      transparent 34%
    );

  opacity:0;
  transition:opacity .6s ease;
}

.square-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;

  background:
    linear-gradient(
      180deg,
      transparent 48%,
      rgba(0,0,0,.34)
    );

  opacity:.3;
  transition:opacity .6s ease;
}

.square-card:hover::before{
  opacity:1;
}

.square-card:hover::after{
  opacity:.8;
}

.square-card:hover img{
  transform:scale(1.05);
  filter:saturate(1.02) contrast(1.02);
}

.square-meta{
  position:absolute;
  left:15px;
  right:15px;
  bottom:15px;
  z-index:3;

  display:flex;
  justify-content:space-between;
  align-items:center;

  opacity:0;
  transform:translateY(8px);

  transition:
    opacity .6s var(--ease),
    transform .7s var(--ease);
}

.square-card:hover .square-meta{
  opacity:1;
  transform:none;
}

.square-meta span{
  font-size:7px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(255,255,255,.76);
}

.square-number{
  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  border:1px solid rgba(255,255,255,.28);
  border-radius:50%;

  background:rgba(0,0,0,.16);
  backdrop-filter:blur(9px);
}

/* =========================
   CLOSING
========================= */

.closing{
  margin-top:110px;
  padding-top:25px;
  border-top:1px solid rgba(255,255,255,.07);

  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:30px;

  opacity:0;
  transform:translateY(18px);
}

.closing.is-visible{
  opacity:1;
  transform:none;

  transition:
    opacity 1s var(--ease),
    transform 1s var(--ease);
}

.closing-label{
  font-size:8px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(255,255,255,.28);
}

.closing-copy{
  margin:0;
  max-width:540px;

  font-size:clamp(1rem,1.55vw,1.45rem);
  line-height:1.12;
  letter-spacing:-.045em;

  font-weight:300;
  color:rgba(255,255,255,.58);
}

.closing-copy strong{
  color:#fff;
  font-weight:700;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1000px){

  body{
    cursor:auto;
  }

  .cursor,
  .cursor-dot{
    display:none;
  }

  .poster-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

}

@media(max-width:720px){

  .page{
    padding:28px 5vw 80px;
  }

  .topbar{
    grid-template-columns:1fr auto;

    grid-template-areas:
      "back work"
      "title title";

    gap:25px;
    margin-bottom:50px;
  }

  .back{
    grid-area:back;
  }

  .work-pill{
    grid-area:work;
  }

  .title-wrap{
    grid-area:title;
    justify-content:flex-start;
    width:auto;
  }

  .intro{
    grid-template-columns:1fr;
    margin-bottom:30px;
  }

  .count{
    justify-self:start;
  }

  .feature-grid{
    grid-template-columns:1fr;
    gap:14px;
    max-width:none;
  }

  .feature-poster-meta{
    opacity:1;
    transform:none;
  }

  .poster-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  .poster-meta,
  .square-meta{
    opacity:1;
    transform:none;
  }

  .square-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .closing{
    display:block;
  }

  .closing-copy{
    margin-top:14px;
  }

}

@media(max-width:470px){

  .poster-grid{
    grid-template-columns:1fr;
  }

  .square-section{
    margin-top:100px;
  }

}

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }

}

/* =========================================================
   CONTACT MODAL
========================================================= */

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 24px;

  visibility: hidden;
  opacity: 0;

  transition:
    opacity .55s var(--ease),
    visibility .55s;
}

.contact-modal.is-open {
  visibility: visible;
  opacity: 1;
}


/* backdrop */

.contact-backdrop {
  position: absolute;
  inset: 0;

  background: rgba(0,0,0,.72);

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  cursor: auto;
}


/* panel */

.contact-panel {
  position: relative;
  z-index: 2;

  width: min(560px, 100%);

  padding: 42px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.055),
      rgba(255,255,255,.018)
    );

  border: 1px solid rgba(255,255,255,.14);

  box-shadow:
    0 40px 100px rgba(0,0,0,.55);

  transform:
    translateY(28px)
    scale(.965);

  transition:
    transform .75s var(--ease);
}

.contact-modal.is-open .contact-panel {
  transform:
    translateY(0)
    scale(1);
}


/* close */

.contact-close {
  position: absolute;

  top: 18px;
  right: 18px;

  width: 34px;
  height: 34px;

  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;

  background: transparent;
  color: rgba(255,255,255,.65);

  display: grid;
  place-items: center;

  font-size: 20px;
  font-weight: 300;

  cursor: pointer;

  transition:
    background .4s var(--ease),
    color .35s ease,
    transform .5s var(--ease);
}

.contact-close:hover {
  background: #fff;
  color: #000;
  transform: rotate(90deg);
}


/* header */

.contact-header {
  padding-right: 45px;

  margin-bottom: 34px;
}

.contact-kicker {
  display: block;

  margin-bottom: 13px;

  font-size: 8px;
  font-weight: 500;

  letter-spacing: .16em;
  text-transform: uppercase;

  color: rgba(255,255,255,.3);
}

.contact-header h2 {
  margin: 0 0 10px;

  font-size: clamp(2.5rem, 6vw, 4.8rem);
  line-height: .85;

  font-weight: 800;

  letter-spacing: -.08em;
}

.contact-header p {
  margin: 0;

  font-size: 11px;
  line-height: 1.5;

  color: rgba(255,255,255,.4);
}


/* links */

.contact-links {
  border-top: 1px solid rgba(255,255,255,.1);
}

.contact-link {
  position: relative;

  display: grid;

  grid-template-columns: 40px 1fr 34px;

  align-items: center;

  min-height: 82px;

  border-bottom: 1px solid rgba(255,255,255,.1);

  transition:
    padding .65s var(--ease),
    background .45s ease;
}

.contact-link:hover {
  padding-left: 10px;
  padding-right: 6px;

  background: rgba(255,255,255,.035);
}

.contact-number {
  font-size: 8px;

  letter-spacing: .12em;

  color: rgba(255,255,255,.28);
}

.contact-main {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.contact-main strong {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -.04em;
}

.contact-main small {
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;

  color: rgba(255,255,255,.34);
}

.contact-arrow {
  width: 30px;
  height: 30px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;

  color: rgba(255,255,255,.45);

  transform: rotate(-45deg);

  transition:
    transform .6s var(--ease),
    background .4s ease,
    color .4s ease,
    border-color .4s ease;
}

.contact-link:hover .contact-arrow {
  transform: rotate(0deg);

  background: #fff;
  color: #000;

  border-color: #fff;
}


/* footer */

.contact-footer {
  margin-top: 25px;

  display: flex;
  justify-content: space-between;
  gap: 20px;

  font-size: 7px;
  letter-spacing: .14em;
  text-transform: uppercase;

  color: rgba(255,255,255,.23);
}


/* mobile */

@media (max-width: 600px) {

  .contact-modal {
    padding: 14px;
  }

  .contact-panel {
    padding: 30px 22px 24px;
  }

  .contact-link {
    min-height: 76px;
  }

  .contact-main strong {
    font-size: 15px;
  }

  .contact-footer {
    font-size: 6px;
  }

}