/* Non-visual product customisations layered over the mirrored production CSS. */
button[aria-label*="ambient sound"],
.FixedOverlay_nav__Nq3k_ > button,
.MobileMenu_primary__r1F_l > button {
  display: none !important;
}

.FixedOverlay_social__ccdFu > a:not([href="https://t.me/upvisiondesign"]),
.MobileMenu_social__MV41R > a:not([href="https://t.me/upvisiondesign"]),
nav[aria-label="Contact links"] > a:not([href="https://t.me/upvisiondesign"]),
nav[aria-label="Contact links"] > span {
  display: none !important;
}

.PortfolioCard_card__ppQpG img,
.ProjectView_shell__sf2Xz img {
  background: #141414;
}

/* Keep the original responsive tile heights and extend every tile to 16:9. */
.InfiniteGrid_stage__0WXX_ {
  --tile-width: calc(var(--tile-size) * 16 / 9);
}

.InfiniteGrid_tile__83nCr {
  width: var(--tile-width);
  height: var(--tile-size);
}

.InfiniteGrid_touchReticle__dwIs_ {
  width: var(--tile-width);
  height: var(--tile-size);
}

/* Project covers contract by an equal inset on every side. The image keeps its
   natural proportions through background-size: cover while the visible cell
   becomes deliberately more compact than a proportional scale would allow. */
.PortfolioCard_project__1oELh {
  --project-hover-inset: clamp(38px, 3.2vw, 52px);
  width: 100%;
  height: 100%;
  transform: translateZ(0);
  transition:
    filter 360ms cubic-bezier(.16, 1, .3, 1),
    opacity 180ms ease-out;
}

.PortfolioCard_project__1oELh::before {
  inset: -1px;
  transform: translateZ(0);
  transition:
    inset 520ms cubic-bezier(.16, 1.18, .3, 1),
    opacity 220ms var(--ease-out),
    filter 360ms var(--ease-out);
}

.PortfolioCard_project__1oELh::after {
  inset: 18px 20px auto auto;
  z-index: 4;
  width: auto;
  height: auto;
  color: #fff;
  background: none;
  border-radius: 0;
  content: "↗";
  font-family: Geist, sans-serif;
  font-size: 38px;
  font-weight: 300;
  line-height: 1;
  opacity: 0;
  transform: translate3d(-14px, 14px, 0) scale(.72) rotate(-7deg);
  transition:
    opacity 180ms ease-out,
    transform 480ms cubic-bezier(.16, 1.35, .3, 1),
    top 520ms cubic-bezier(.16, 1.18, .3, 1),
    right 520ms cubic-bezier(.16, 1.18, .3, 1);
}

@media (hover: hover) and (pointer: fine) {
  .PortfolioCard_project__1oELh:hover,
  .PortfolioCard_project__1oELh[data-hovered="true"],
  .PortfolioCard_project__1oELh[data-reticle-hovered="true"][data-hovered="true"] {
    filter: brightness(1.04) saturate(1.04);
  }

  .PortfolioCard_project__1oELh:hover::before,
  .PortfolioCard_project__1oELh[data-hovered="true"]::before,
  .PortfolioCard_project__1oELh[data-reticle-hovered="true"][data-hovered="true"]::before {
    inset: var(--project-hover-inset);
  }

  .PortfolioCard_project__1oELh:hover::after,
  .PortfolioCard_project__1oELh[data-hovered="true"]::after,
  .PortfolioCard_project__1oELh[data-reticle-hovered="true"][data-hovered="true"]::after {
    top: calc(var(--project-hover-inset) + 18px);
    right: calc(var(--project-hover-inset) + 20px);
    opacity: 1;
    transform: translateZ(0) scale(1) rotate(0deg);
  }
}

/* Coarse pointers use the desktop animation only for the centered card. */
@media  (any-pointer: coarse) {
  .PortfolioCard_project__1oELh:hover:not([data-reticle-hovered="true"]),
  .PortfolioCard_project__1oELh[data-hovered="true"]:not([data-reticle-hovered="true"]) { filter: none; }
  .PortfolioCard_project__1oELh:hover:not([data-reticle-hovered="true"])::before,
  .PortfolioCard_project__1oELh[data-hovered="true"]:not([data-reticle-hovered="true"])::before { inset: -1px; }
  .PortfolioCard_project__1oELh:hover:not([data-reticle-hovered="true"])::after,
  .PortfolioCard_project__1oELh[data-hovered="true"]:not([data-reticle-hovered="true"])::after { opacity: 0; transform: translate3d(-14px, 14px, 0) scale(.72) rotate(-7deg); }
  .PortfolioCard_project__1oELh[data-reticle-hovered="true"][data-hovered="true"] { filter: brightness(1.04) saturate(1.04); }
  .PortfolioCard_project__1oELh[data-reticle-hovered="true"][data-hovered="true"]::before { inset: var(--project-hover-inset); }
  .PortfolioCard_project__1oELh[data-reticle-hovered="true"][data-hovered="true"]::after { top: calc(var(--project-hover-inset) + 18px); right: calc(var(--project-hover-inset) + 20px); opacity: 1; transform: translateZ(0) scale(1) rotate(0deg); }
}

.PortfolioCard_project__1oELh .PortfolioCard_projectContent__Z_TaZ,
.PortfolioCard_project__1oELh .PortfolioCard_coordinate__6EXrx,
.PortfolioCard_project__1oELh .PortfolioCard_exhibition__990Mn {
  display: none;
}

/* The case hero follows the same 16:9 cover system as the canvas. */
.ProjectView_heroVisual__8bZDY {
  width: min(62vw, 960px);
  max-width: min(62vw, 960px);
  aspect-ratio: 16 / 9;
}

.ProjectView_projectGrid__ScKY4 {
  --case-project-card-width: calc(var(--case-project-card-size) * 16 / 9);
  grid-template-columns: repeat(auto-fit, var(--case-project-card-width));
}

.ProjectView_projectGridItem__atRiq {
  width: var(--case-project-card-width);
  height: var(--case-project-card-size);
  aspect-ratio: 16 / 9;
}

@media (max-width: 639px) and (any-pointer: fine) {
  .ProjectView_projectGrid__ScKY4 {
    grid-template-columns: repeat(2, var(--case-project-card-width));
  }
}

@media (any-pointer: coarse) {
  .ProjectView_projectGrid__ScKY4 {
    grid-template-columns: var(--case-project-card-width);
    padding-bottom: max(40px, calc((100svh - var(--case-project-card-size)) / 2));
  }

  .ProjectView_nextProjectReticle__xBokr {
    width: calc(var(--next-project-card-size) * 16 / 9);
    height: var(--next-project-card-size);
  }
}

@media (max-width: 980px) {
  .ProjectView_heroVisual__8bZDY {
    width: min(72vw, 640px);
    max-width: min(72vw, 640px);
    aspect-ratio: 16 / 9;
  }
}

@media (any-pointer: coarse) and (max-width: 639px) {
  .InfiniteGrid_stage__0WXX_ {
    --tile-size: 196px;
    --tile-width: calc(var(--tile-size) * 16 / 9);
  }


  .PortfolioCard_project__1oELh::after {
    inset: 14px 16px auto auto;
    font-size: 30px;
  }

  .ProjectView_heroVisual__8bZDY {
    width: 100%;
    max-width: none;
    aspect-ratio: 16 / 9;
  }

  .ProjectView_projectGridScroll__tUUbT,
  .ProjectView_projectGrid__ScKY4 {
    --case-project-card-size: 196px;
  }

  .ProjectView_nextProjectReticle__xBokr {
    --next-project-card-size: 196px;
  }
}