/* 
Theme Name: BNB 2025 REEL
Text Domain: BNB_TD
*/

@font-face {
  font-family: "Everett";
  src:
    url(./assets/fonts/everett_regular.woff2) format("woff2"),
    url(./assets/fonts/everett_regular.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Everett";
  src:
    url(./assets/fonts/everett_bold.woff2) format("woff2"),
    url(./assets/fonts/everett_bold.woff) format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Everett Mono";
  src:
    url(./assets/fonts/everett-mono_regular.woff2) format("woff2"),
    url(./assets/fonts/everett-mono_regular.woff) format("woff");
  font-weight: 400;
  font-style: normal;
}

/* ------ INDEX ------- */
/* 01 GENERAL USE */
/* 02 HEADER  */
/* 03 FOOTER  */
/* 04 WORK PAGE TEMPLATE */
/* 05 STUDIO PAGE TEMPLATE */
/* 06 LAB PAGE TEMPLATE */
/* 07 GRID FIX - GAMBIARRAS */
/* 08 WP BLOCKS FIX - GAMBIARRAS */

:root {
  /* colors */
  --yellow: #fff148;

  /* fonts sizes */
  --fs-75: 0.75rem;
  --fs-100: 1rem;
  --fs-200: 1.25rem;
  --fs-300: 1.5rem;
  --fs-400: 2rem;
  --fs-500: 2.5rem;
  --fs-600: 3rem;
  --fs-700: 3.5rem;
  --fs-800: 4rem;
  --fs-900: 4.5rem;
  --fs-block-paragraph: clamp(1.5rem, 0.5rem + 2.5vw, 2.5rem);
  --fs-huge: clamp(4rem, -10rem + 35vw, 18rem);

  /* spacing */
  --spc-25: 0.25rem;
  --spc-50: 0.5rem;
  --spc-75: 0.75rem;
  --spc-100: 1rem;
  --spc-125: 1.25rem;
  --spc-150: 1.5rem;
  --spc-200: 2rem;
  --spc-250: 2.5rem;
  --spc-300: 3rem;
  --spc-400: 4rem;
  --spc-500: 5rem;
  --spc-600: 6rem;

  /* gap */
  --gap-isotope: 1rem;

  /* reel modal timing */
  --reel-circle-grow: 2s;
  --reel-circle-shrink: 0.7s;
}

/* ---- 01 GENERAL USE ---- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 20px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: "Everett", Helvetica, sans-serif;
  line-height: 1.25;
  background-color: white;
  width: 100vw;
  max-width: 100vw;
  overflow-x: hidden;
}

a {
  text-decoration: none;
}

.has-atraction {
  transition: 0.2s linear;
}

.no-scroll {
  overflow-y: scroll;
  height: 100%;
}

/* ---- 02 HEADER ----  */

#top-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9980;
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: var(--spc-100) var(--spc-200);
  mix-blend-mode: difference;
  pointer-events: none;
}

#logo {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transform: translateX(-3px);
}

#logo > a {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: transparent;
  pointer-events: auto;
}

#logo h1 {
  color: white;
  font-size: var(--fs-300);
  font-weight: 400;
  pointer-events: none;
  white-space: nowrap;
}

#menu-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.4rem;
  height: 2.4rem;

  cursor: pointer;
  pointer-events: auto;

  transform-origin: center;
  transform: translateX(0.6rem) rotate(0deg);
  transition: transform 0.5s ease-out;
}

#menu-toggle.is-active {
  transform: translateX(0.6rem) rotate(45deg);
}

#menu-toggle img {
  width: 50%;
  height: 50%;
  object-fit: cover;
  object-position: center;
}

#menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: -200vw;
  z-index: 9900;
  width: 100%;
  height: 100vh;
  background-color: white;
  transition: left 0.3s ease-in-out;
  overflow-x: hidden;
}

#menu.is-visible {
  left: 0;
}

#primary-menu {
  display: flex;
  flex-direction: column;
  gap: var(--spc-100);
  justify-content: center;
  align-items: flex-start;
  width: fit-content;
}

#primary-menu li {
  list-style: none;
  position: relative;
  z-index: 9950;
}

#primary-menu a {
  color: black;
  font-size: var(--fs-900);
  position: relative;
  z-index: 9970;
}

#primary-menu a:hover {
  color: transparent;
  -webkit-text-stroke: 1.5px black;
}

#secondary-menu-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

#secondary-menu {
  display: flex;
  flex-direction: row;
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  gap: var(--spc-100);
  padding: var(--spc-200);
}

#secondary-menu li {
  list-style: none;
}

#secondary-menu a {
  color: black;
  font-size: var(--fs-100);
  font-weight: 400;
  text-decoration: none;
}

#menu-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 4rem;
  height: 4rem;
  background-color: white;
  border-radius: 50%;
  border-color: none;
  z-index: 9999;
  pointer-events: none;
  will-change: transform;
  transform: translate(-50%, -50%);
  display: none;
  mix-blend-mode: difference;
}

#menu-cursor.is-visible {
  display: block;
}

#menu-cursor.yellow {
  background-color: blue;
}

#menu-cursor.is-invisible {
  background-color: transparent;
}

#close-menu-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 5.4rem;
  height: 5.4rem;
  z-index: 9945;
  pointer-events: none;

  /* display: none; */
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.3s ease-in-out;
}

#close-menu-cursor img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: rotate 5s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#close-menu-cursor.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

#header-scroll-down {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  height: 100%;
  width: 100%;
  opacity: 0.3;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#header-scroll-down div {
  cursor: pointer;
  width: 560px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  transform: translateY(-0.75rem);
}

/* Reel Popup */
.home main {
  position: relative;
}

#play-button-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  height: 100dvh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  mix-blend-mode: screen;
}

#btn-play {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.75s ease,
    visibility 0.75s ease;
  height: fit-content;
  width: fit-content;
  display: block;
  border: 2px solid white;
  border-radius: 9999px;
  padding: var(--spc-75) var(--spc-125);
  background-color: white;
  font-size: var(--fs-300);
  color: black;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateY(-1rem);
}

#btn-play.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    visibility 0.25s ease;
}

#reel-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  visibility: hidden;
  pointer-events: none;
}

#reel-popup.is-active,
#reel-popup.is-closing {
  visibility: visible;
  pointer-events: auto;
}

#reel-close-toggle {
  position: fixed;
  top: var(--spc-100);
  right: var(--spc-200);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.4rem;
  height: 2.4rem;
  cursor: pointer;
  pointer-events: none;
  transform-origin: center;
  transform: translateX(0.6rem) rotate(0deg);
  transition: transform 0.5s ease-out;
  z-index: 10001;
  mix-blend-mode: difference;
}

#reel-popup.is-active #reel-close-toggle {
  pointer-events: auto;
  transform: translateX(0.6rem) rotate(45deg);
}

body.reel-is-open #menu-toggle {
  transform: translateX(0.6rem) rotate(45deg);
}

#reel-close-toggle img {
  width: 50%;
  height: 50%;
  object-fit: cover;
  object-position: center;
}

#reel-video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  clip-path: circle(0% at 50% 48%);
  transition: clip-path var(--reel-circle-shrink) cubic-bezier(0.4, 0, 0.2, 1);
  padding: var(--spc-600) var(--spc-200) var(--spc-200) var(--spc-200);
  background-color: black;
  z-index: 1;
}

#reel-video-container.is-visible {
  pointer-events: auto;
  clip-path: circle(150% at 50% 48%);
  transition: clip-path var(--reel-circle-grow) cubic-bezier(0.4, 0, 0.2, 1);
}

.reel-video-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
}

#reel-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--spc-200);
  cursor: pointer;
}

#reel-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
  transition:
    opacity 0.3s ease-in-out,
    visibility 0.3s ease-in-out;
  z-index: 2;
  opacity: 1;
  visibility: visible;
  width: 80px;
  height: 80px;
}

#reel-play-button.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:;
}

#reel-play-button img {
  width: 100%;
  height: 100%;
  transition: transform 0.2s ease-in-out;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

#reel-play-button:hover img {
  transform: scale(1.1);
}

#three-canvas {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  max-width: 100vw;
  z-index: -1;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 1.5s;
}

#three-canvas.is-loaded {
  opacity: 1;
}

#three-canvas canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.canvas-spacer {
  width: 100vw;
  height: 100vh;
  background-color: black;
  position: relative;
  z-index: -5;
  pointer-events: none;
}

#bubble-loader {
  position: fixed;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  opacity: 0;
  transition: opacity 0.75s;
  pointer-events: none;
  mix-blend-mode: screen;
}

#bubble-loader.is-loading {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  opacity: 1;
}

@keyframes scale {
  0% {
    transform: scale(0.25);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

#bubble-loader img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  animation: scale 3s;
}

#video-header-mobile {
  display: none;
}

.title-mobile.is-visible {
  opacity: 1 !important;
}

#contact-button {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 1.75rem;
  left: var(--spc-200);
  z-index: 7900;

  width: fit-content;

  font-size: var(--fs-100);
  font-weight: 400;
  color: black;
  background-color: white;
  padding: 0.25rem 0.75rem;

  border-radius: 9999px;

  transition: background-color 0.3s ease-in-out;

  mix-blend-mode: difference;
}

/* ---- 03 FOOTER ---- */
#footer {
  display: flex;
  flex-direction: column;
  background-color: transparent;
  backdrop-filter: blur(24px);

  position: relative;
  z-index: 5;
}

#footer li {
  list-style: none;
}

#footer-social-menu-wrapper {
  height: 104vh;
}

#footer-social-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.footer-social-menu__links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: var(--spc-200);
}

.footer-social-menu__links a {
  display: flex;
  justify-content: center;
  align-items: center;
  filter: invert(1);
}

.social-footer__menu-item-icon {
  width: 3.5rem;
  height: 3.5rem;
}

.footer-social-menu__link {
  display: none;
}

.footer__bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: black;
  display: flex;
  flex-direction: row;
  padding: var(--spc-600) var(--spc-200) var(--spc-200) var(--spc-200);

  width: 100%;
}

#footer-menu-wrapper {
  display: flex;
  width: 100%;
}

#footer-menu {
  display: flex;
  flex-direction: row;
  justify-content: end;
  gap: var(--spc-75);
  height: fit-content;
  width: 100%;
  margin-left: auto;
}

#footer-menu a {
  color: white;
  font-size: var(--fs-100);
  font-weight: 400;
}

#footer-menu a:hover {
  text-decoration: underline;
}

.footer__copy {
  height: 100%;
  width: fit-content;
  color: white;
  margin-left: auto;

  translate: -0.15rem 0;
}

.footer__copy span {
  font-size: var(--fs-300);
  font-weight: 400;
}

/* ---- 04 WORK PAGE ---- */
.work-page {
  background-color: black;
  padding-top: var(--spc-600);
}

.work-page section {
  padding: 0 var(--spc-200);
}

.work-page__header {
  display: flex;
  flex-direction: column;
  gap: var(--spc-100);
}

.work-page__header > div:nth-child(2) {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.work-page__header p {
  font-size: var(--fs-block-paragraph);
  font-weight: 400;
  text-wrap: balance;
  width: 40%;
  color: white;
}

.work-page__header__tagline-desktop {
  display: flex;
  justify-content: flex-end;
}

.work-page__header__tagline-mobile {
  display: none;
}

.work-page__header h2 {
  color: white;
  font-weight: 400;
  font-size: var(--fs-huge);
  line-height: 1;
}

.work-page__header .all-filters {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  gap: var(--spc-50);
  width: 100%;
}

.work-page__header .category-filters {
  display: flex;
  flex-direction: row;
  column-gap: var(--spc-50);
  row-gap: 0.35rem;
  padding: var(--spc-100) 0;
  flex-wrap: wrap;
  width: 100%;
  justify-content: flex-end;
  margin-left: var(--spc-250);
  margin-bottom: 0.5rem;
}

.checkbox {
  width: fit-content;
  height: fit-content;

  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border-radius: 9999px;
  outline: none;
  padding: 0.35rem 0.6rem;
  background-color: black;
  border: 2px white solid;

  font-size: var(--fs-125);
  color: white;

  transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  transition-duration: 300ms;
  transition-property: color, background-color;

  cursor: pointer;
  user-select: none;
}

.checkbox:hover {
  background-color: #363636;
}

.checkbox .checkbox-inner {
  pointer-events: none;
}

.checkbox-input {
  display: none;
}

.checkbox-input:checked + .checkbox-label .checkbox,
#reset-filters.is-checked + .checkbox-label .checkbox {
  background-color: white;
  color: black;
}

#work-page__teasers-wrapper {
  display: flex;
  flex-wrap: wrap;
  padding: 0 !important;
  min-height: 100vh;
}

.work-page__teaser {
  position: relative;
  width: calc((100% - 40px) / 3);
  margin-bottom: var(--gap-isotope);
  aspect-ratio: 3/2;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  border-radius: var(--spc-200);
  overflow: hidden;
}

.work-page__teaser img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  object-position: center;
}

.work-page__teaser h3 {
  padding: var(--spc-150);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 25;

  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--fs-block-paragraph);
  font-weight: 400;
  color: white;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease-in;
}

.work-page__teaser:hover h3 {
  opacity: 1;
}

/* ---- 05 STUDIO PAGE TEMPLATE ---- */
.studio-page__header {
  padding: var(--spc-600) var(--spc-200);
}

.studio-page__header > h2 {
  font-size: var(--fs-huge);
  font-weight: 400;
}

.studio-teaser-arrow {
  overflow: hidden;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 6rem;
}

.studio-teaser-arrow-img {
  width: 100%;
  height: 100%;
}

.studio-teaser-arrow svg {
  width: 25%;
  height: 100%;
  transition: width 0.5s ease;
}

.studio-teaser-arrow.is-triggered svg {
  width: 100%;
}

.studio-teaser-arrow .contact-button {
  display: flex;
  justify-content: center;
  justify-self: flex-end;
  height: 100%;
  aspect-ratio: 1/1;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 172.42 172.41'%3E%3Cg id='fe646880-dc4c-4c2a-8ed6-83e3643470ae' data-name='Ebene 2'%3E%3Cg id='aeefe9ad-3248-4e9e-97c2-1f19e2baedfe' data-name='Ebene 1'%3E%3Cpath d='M39.29,13.8a9.1,9.1,0,0,1,12.08,1.56l-2.3,1.5c-2.55-2.61-5.67-3.09-8.46-1.27-3.5,2.29-3.83,6.86-1,11.13,2.89,4.43,7.22,5.74,10.81,3.39,2.69-1.76,3.6-4.78,2.24-8.18l2.3-1.5a9.14,9.14,0,0,1-3.53,11.68c-4.81,3.14-10.69,1.59-14.22-3.82C33.83,23.19,34.47,16.94,39.29,13.8Z'/%3E%3Cpath d='M56.44,16.33c-1.63-5.86,1-11.65,6.66-13.23S74,5.14,75.62,11s-1,11.65-6.66,13.23S58.07,22.2,56.44,16.33Zm16.41-4.55c-1.37-4.92-5.08-7.67-9.16-6.54s-5.84,5.41-4.48,10.32,5.08,7.67,9.16,6.54S74.21,16.69,72.85,11.78Z'/%3E%3Cpath d='M80.41,21.31,81.23,0,86.7.21l7.73,21.52L95.25.54l2.66.1L97.09,22l-5.47-.21L83.88.23l-.82,21.18Z'/%3E%3Cpath d='M104.27,24.13,110,5.91l-6.84-2.15.66-2.12L120,6.73l-.66,2.12-6.84-2.14-5.72,18.22Z'/%3E%3Cpath d='M110.16,25.36l17-14.78,4.75,2.78-4.54,22L124.91,34l1.38-6.64-8.59-5-5.11,4.45Zm9.3-4.59L126.77,25l2.68-13Z'/%3E%3Cpath d='M149,27.09a9.13,9.13,0,0,1,.65,12.17l-1.9-2c2.11-3,2-6.14-.28-8.56-2.87-3-7.43-2.53-11.12,1-3.84,3.64-4.35,8.13-1.39,11.24,2.21,2.33,5.35,2.68,8.44.73l1.89,2a9.12,9.12,0,0,1-12.11-1.36c-4-4.17-3.5-10.24,1.19-14.68C138.8,23.42,145.06,22.92,149,27.09Z'/%3E%3Cpath d='M142.13,53.78l16.71-9.23-3.46-6.28,2-1.07,8.21,14.87-1.94,1.08-3.47-6.28L143.42,56.1Z'/%3E%3Cpath d='M148.82,68.17l21.07-3.23.83,5.41L151.06,82l21-3.21.4,2.62-21.08,3.23-.82-5.4,19.65-11.68L149.22,70.8Z'/%3E%3Cpath d='M162.12,88.28c6,1,10.19,5.72,9.27,11.54s-6.39,9.06-12.39,8.1-10.2-5.71-9.27-11.54S156.11,87.32,162.12,88.28Zm-2.67,16.81c5,.8,9.08-1.43,9.74-5.62s-2.49-7.55-7.52-8.35-9.08,1.43-9.75,5.61S154.41,104.29,159.45,105.09Z'/%3E%3Cpath d='M168.07,116.09l-1.29,2.29-20.92-6.1,16.45,14-2.56,4.52-20.44-6.93,16,14.81L154,140.93,137.93,126l2.56-4.51,20.43,6.92-16.44-14L147,110Z'/%3E%3Cpath d='M133.54,158.36a9.13,9.13,0,0,1-12.1-1.49l2.3-1.52c2.57,2.6,5.69,3.06,8.47,1.22,3.48-2.3,3.79-6.88,1-11.13-2.91-4.41-7.25-5.7-10.83-3.33-2.68,1.77-3.57,4.81-2.19,8.19l-2.29,1.51a9.13,9.13,0,0,1,3.46-11.69c4.79-3.17,10.68-1.66,14.25,3.73C138.94,148.93,138.34,155.19,133.54,158.36Z'/%3E%3Cpath d='M116.37,155.93c1.66,5.86-.9,11.66-6.58,13.27s-10.91-2-12.57-7.84.9-11.66,6.58-13.27S114.71,150.08,116.37,155.93ZM100,160.58c1.39,4.9,5.12,7.64,9.19,6.48s5.81-5.44,4.42-10.34-5.12-7.64-9.19-6.49S98.59,155.67,100,160.58Z'/%3E%3Cpath d='M92.35,151.1l-.7,21.31-5.47-.18-7.85-21.47-.7,21.18L75,171.86l.71-21.31,5.46.18L89,172.2,89.69,151Z'/%3E%3Cpath d='M68.5,148.42l-5.6,18.25,6.86,2.1-.66,2.13-16.24-5,.65-2.13,6.85,2.1L66,147.64Z'/%3E%3Cpath d='M62.59,147.23,45.7,162.1l-4.76-2.74,4.41-22.07,2.43,1.4-1.33,6.65,8.62,5,5.08-4.49Zm-9.28,4.64L46,147.64l-2.6,13Z'/%3E%3Cpath d='M23.69,145.69A9.11,9.11,0,0,1,23,133.53l1.9,2c-2.09,3-2,6.15.33,8.55,2.89,3,7.45,2.5,11.13-1s4.29-8.15,1.32-11.25c-2.23-2.31-5.37-2.64-8.44-.67l-1.91-2a9.14,9.14,0,0,1,12.13,1.3c4,4.15,3.55,10.22-1.11,14.69C33.93,149.31,27.67,149.84,23.69,145.69Z'/%3E%3Cpath d='M30.45,119l-16.67,9.33,3.5,6.25-1.94,1.09L7,120.82,9,119.73l3.5,6.26,16.67-9.33Z'/%3E%3Cpath d='M23.68,104.63,2.62,108l-.86-5.4L21.35,90.79.42,94.12,0,91.49l21.06-3.35.86,5.41L2.32,105.33,23.26,102Z'/%3E%3Cpath d='M10.26,84.62C4.24,83.7,0,79,.92,73.13S7.25,64,13.27,65s10.23,5.66,9.34,11.5S16.28,85.54,10.26,84.62Zm2.57-16.83c-5-.77-9.07,1.49-9.71,5.67S5.65,81,10.69,81.78s9.08-1.49,9.72-5.67S17.87,68.56,12.83,67.79Z'/%3E%3Cpath d='M4.15,56.84l1.28-2.29,20.94,6L9.85,46.64l2.53-4.53,20.47,6.81L16.79,34.21l1.28-2.29L34.23,46.71,31.7,51.24l-20.48-6.8L27.75,58.31l-2.53,4.53Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100%;

  opacity: 0;
  transition: opacity 0.5s 0.1s ease;

  animation: rotate 5s linear infinite;
}

.studio-teaser-arrow .contact-button::after {
  content: "";
  border-radius: 50%;
  height: 60%;
  aspect-ratio: 1/1;
  background-color: var(--yellow);
  margin: auto;
}

.studio-teaser-arrow.is-triggered .contact-button {
  opacity: 1;
}

/*  ---- 06 LAB PAGE TEMPLATE ---- */
.lab-page,
.lab-category {
  background-color: var(--yellow);
}

.lab-page__header {
  padding: var(--spc-600) var(--spc-200) 0 var(--spc-200);
  display: flex;
  flex-direction: column;
  gap: var(--spc-100);
}

.lab-page__header h2 {
  font-size: var(--fs-huge);
  font-weight: 400;
  width: 100%;
  line-height: 1;
}

.lab-page__header p {
  font-size: var(--fs-block-paragraph);
  font-weight: 400;
  text-wrap: balance;
  width: 40%;
  align-self: flex-end;
}

#lab-page__teasers-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-isotope);
  padding: 0 var(--spc-200) var(--spc-600) var(--spc-200);
  min-height: 100vh;
}

.lab-page__teaser {
  width: 100%;
  aspect-ratio: 3/2;
  position: relative;
  display: flex;
  flex-direction: column;

  border-radius: var(--spc-200);
  overflow: hidden;
}

.lab-page__teaser img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  object-position: center;
  border-radius: var(--spc-200);
  overflow: hidden;
}

.lab-page__teaser h3 {
  padding: var(--spc-150);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 25;

  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--fs-block-paragraph);
  font-weight: 400;
  color: white;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease-in;
  border-radius: var(--spc-200);
  overflow: hidden;
}

.lab-page__teaser:hover h3 {
  opacity: 1;
}

.lab-page__case-title {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 25;
  width: 100%;
  height: 100%;

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

  padding: var(--spc-100);

  opacity: 0;
  transition: opacity 0.3s ease-in;

  border-radius: var(--spc-200);
  overflow: hidden;
}

.lab-page__teaser:hover .lab-page__case-title {
  opacity: 1;
}

.lab-page__case-title.title-visible {
  opacity: 1;
}

/* ---- 07 GRID FIX - GAMBIARRAS ---- */
.grids-section:not(.alignfull) {
  margin-left: auto;
  margin-right: auto;
  max-width: 1920px;
  padding: 0 var(--spc-200);
}

.grids-section p {
  font-size: var(--fs-200);
  line-height: 1.5;
  font-weight: 400;
}

.grid-section a,
.grid-section a:visited,
.grid-section a:active,
.grid-section a:focus {
  color: black;
  text-decoration: underline;
}

/* ---- 08 WP BLOCKS FIX - GAMBIARRAS  ---- */
.has-x-large-font-size {
  font-size: var(--fs-500) !important;
}

h2.wp-block-heading {
  font-size: var(--fs-400);
  font-weight: 400;
}

/* ----  09 COOKIE CONSENT ---- */
.seopress-user-consent > p:nth-child(2) {
  display: flex !important;
  flex-direction: row !important;
  gap: var(--spc-50) !important;
}

#seopress-user-consent-accept {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  border-radius: 9999px !important;
  outline: none !important;
  padding: 0.35rem 0.6rem !important;
  background-color: black !important;
  border: 2px white solid !important;

  font-size: var(--fs-125) !important;
  color: white !important;
}

#seopress-user-consent-close {
  border: unset !important;
}

/* ----------------------- */
/* ---- MEDIA QUERIES ---- */
/* ----------------------- */

@media screen and (max-width: 1024px) {
  .work-page__header > div:nth-child(2) {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spc-75);
  }

  .work-page__header p {
    width: 60%;
  }

  .work-page__header .category-filters {
    width: 100%;
    justify-content: flex-start;
    padding: 0 0 var(--spc-100) 0;
    margin-left: unset;
  }

  .work-page__teaser {
    width: calc((100% - 20px) / 2);
  }

  #lab-page__teasers-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }

  .lab-page__header p {
    width: 60%;
  }
}

@media screen and (max-width: 768px) {
  /* ---- 02 HEADER - MOBILE ---- */
  #top-bar {
    padding: var(--spc-100);
    width: 100vw;
  }

  #logo h1 {
    font-size: var(--fs-200);
  }

  #menu-toggle {
    width: 1.5rem;
    height: 1.5rem;
    transform: translateX(0.35rem) rotate(0deg);
    z-index: 9990;
  }

  #menu-toggle.is-active {
    transform: translateX(0.35rem) rotate(45deg);
  }

  #menu-cursor {
    display: none !important;
  }

  #close-menu-cursor {
    display: none !important;
  }

  #menu {
    justify-content: center;
    align-items: flex-start;
    width: 100vw;
    max-width: 100dvw;
    height: 100vh;
    padding: var(--spc-100);
  }

  #primary-menu {
    display: flex;
    flex-direction: column;
    gap: var(--spc-50);
    justify-content: center;
    align-items: flex-start;
    width: fit-content;
  }

  #primary-menu li {
    list-style: none;
    position: relative;
    z-index: 9950;
  }

  #secondary-menu {
    flex-direction: column;
    align-items: end;
    padding: var(--spc-200) var(--spc-100) var(--spc-200) var(--spc-100);
  }

  #video-header-mobile {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    max-width: 100vw;
    width: 100%;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
  }

  #video-header-mobile video {
    width: 100%;
    max-width: 100vw;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  #three-canvas {
    max-width: 100vw;
    max-height: 100dvh;
    overflow: hidden;
  }

  #header-scroll-down {
    height: 100dvh;
    width: 100dvw;
  }

  #header-scroll-down div {
    width: 100%;
    aspect-ratio: 1/1;
    transform: translateY(-0.5rem);
  }

  #contact-button {
    left: var(--spc-100);
  }

  /* ---- 03 FOOTER - MOBILE ---- */
  .footer__bottom {
    flex-direction: column;
    padding: var(--spc-200) var(--spc-100);
  }

  #footer-menu {
    flex-direction: column;
    text-align: right;
  }

  .footer-social-menu__links {
    flex-direction: column;
  }

  .footer-social-menu__links a,
  #footer-menu a,
  .footer__copy span {
    font-size: var(--fs-200);
  }

  .footer__copy {
    display: none;
  }

  /* ---- 04 WORK PAGE - MOBILE ---- */
  .work-page {
    padding-top: 8rem;
  }

  .work-page section {
    padding: 0 var(--spc-100);
  }

  .work-page__header {
    gap: var(--spc-100);
  }

  .work-page__header__tagline-desktop {
    display: none;
  }

  .work-page__header__tagline-mobile {
    display: block;
  }

  .work-page__header__tagline-mobile p {
    width: 100%;
    align-self: flex-start;
  }

  .work-page__header .all-filters {
    margin-left: unset;
  }

  .work-page__teaser {
    width: 100%;
  }

  .checkbox {
    font-size: var(--fs-75);
  }

  #work-page__teasers-wrapper {
    padding-bottom: var(--spc-400);
  }

  /* ---- 05 STUDIO PAGE - MOBILE ---- */
  .studio-page__header {
    padding: 8rem var(--spc-100) var(--spc-200) var(--spc-100);
  }

  .studio-page__header > h2 {
    transform: translateX(-0.25rem);
  }

  /* ---- 06 LAB PAGE TEMPLATE - MOBILE ---- */

  .lab-page__header {
    padding: 8rem var(--spc-100) var(--spc-100) var(--spc-100);
    flex-direction: column-reverse;
    gap: var(--spc-100);
  }

  .lab-page__header p {
    width: 100%;
    align-self: flex-start;
  }

  #lab-page__teasers-wrapper {
    grid-template-columns: repeat(1, 1fr);
    padding: 0 var(--spc-100) var(--spc-400) var(--spc-100);
  }

  /* ----- 07 GRID FIX - GAMBIARRAS - MOBILE ---- */
  .grids-section:not(.alignfull) {
    padding: 0 var(--spc-100);
  }
}