@import url("https://fonts.googleapis.com/css2?family=Geist:ital,wght@0,100..900;1,100..900&display=swap");

@property --primary {
  syntax: "<color>";
  inherits: true;
  initial-value: #f85f02;
}

@property --secondary {
  syntax: "<color>";
  inherits: true;
  initial-value: #a0e1f3;
}

@property --primary-darker {
  syntax: "<color>";
  inherits: true;
  initial-value: #f15b02;
}

@property --secondary-darker {
  syntax: "<color>";
  inherits: true;
  initial-value: #9cd9f3;
}

@property --light {
  syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 88%);
}

@property --dark {
  syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 4%);
}

@property --contrast {
  syntax: "<color>";
  inherits: true;
  initial-value: hsl(0, 0%, 6%);
}

:root {
  --cursor-pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='m21.11,8.11l-.72-2.53c-.07-.23-.3-.37-.53-.31-1.73.4-4.28.62-7.24-.26-1.88-.56-3.43-1.42-4.66-2.31-.79-.57-1.38-1.08-1.96-1.66-.14-.14-.36-.18-.54-.08l-1.12.63c-.18.1-.27.31-.21.51.25.87.44,1.82.54,2.75.14,1.41.11,3.04-.31,4.79-.69,2.92-2.15,4.95-3.36,6.21-.17.18-.17.45,0,.63l1.89,1.88c.18.17.46.18.63,0,1.54-1.58,3.44-4.15,4.32-7.89.02-.07.04-.14.04-.2l6.31,10.61c.12.21.39.28.6.16l2.3-1.29c.22-.12.29-.4.17-.62l-6.57-11.07c.3.11.59.2.9.3.17.05.34.1.5.14,3.54.95,6.6.66,8.68.17.25-.06.39-.31.32-.56Z'/%3E%3C/svg%3E");
  --cursor-hover: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cdefs%3E%3Cstyle%3Esvg%7Bfill:%2300000080;%7D.b%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cpath d='m20.69,16.37l-3.84-10.54c-.21-.57-.84-.86-1.41-.66l-2.27.83-.15-.41c-.21-.57-.84-.87-1.41-.66l-2.27.83-1.54-4.24c-.21-.57-.84-.87-1.41-.66l-2.27.83c-.57.21-.87.84-.66,1.41l3.73,10.26c-1.16-.66-2.37-1.23-3.61-1.71-.28-.11-.58-.1-.85.02-.27.12-.48.34-.58.62l-.83,2.27c-.2.56.08,1.18.63,1.4,1.47.58,2.88,1.3,4.2,2.16,1.25.81,2.44,1.75,3.51,2.79.21.2.48.31.76.31.13,0,.25-.02.38-.07l8.75-3.19c.46-.17.78-.37.98-.61.23-.29.29-.63.17-.98Zm-1.52.55l-8.75,3.18c-1.13-1.09-2.36-2.07-3.68-2.92-1.38-.9-2.86-1.66-4.4-2.26l.84-2.27c1.66.65,3.26,1.46,4.76,2.43l1.37.88L4.49,2.72l2.27-.83,2.45,6.72,1.03-.38-.53-1.45,2.27-.83.53,1.45.34.93,1.03-.38-.34-.93,2.27-.83,3.82,10.48c-.05.05-.18.13-.47.24Z'/%3E%3Cpath class='b' d='m19.64,16.68c-.05.05-.18.13-.47.24l-8.75,3.18c-1.13-1.09-2.36-2.07-3.68-2.92-1.38-.9-2.86-1.66-4.4-2.26l.84-2.27c1.66.65,3.26,1.46,4.76,2.43l1.37.88L4.49,2.72l2.27-.83,2.45,6.72,1.03-.38-.53-1.45,2.27-.83.53,1.45.34.93,1.03-.38-.34-.93,2.27-.83,3.82,10.48Z'/%3E%3C/svg%3E");
  --cursor-text: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='m13.89,17.23c-.53-.07-1.04-.21-1.54-.38V5.28c.5-.17,1.01-.31,1.53-.38.63-.09,1.27-.1,1.9-.05.24.02.45-.14.49-.38l.25-1.79c.03-.25-.15-.49-.4-.52-.87-.08-1.74-.07-2.61.05-.87.12-1.71.35-2.51.66-.8-.32-1.64-.54-2.52-.66-.86-.12-1.74-.14-2.61-.05-.25.02-.43.26-.4.52l.25,1.78c.03.24.25.4.49.38.63-.05,1.27-.04,1.9.05.53.07,1.04.21,1.54.38v11.57c-.5.17-1.01.31-1.53.38-.63.09-1.27.1-1.9.05-.24-.02-.45.14-.49.38l-.25,1.79c-.03.25.15.49.4.52.36.03.71.05,1.07.05.51,0,1.03-.04,1.54-.11.87-.12,1.71-.35,2.51-.66.8.32,1.64.54,2.52.66.51.07,1.02.11,1.53.11.36,0,.72-.02,1.07-.05.25-.02.43-.26.4-.52l-.25-1.78c-.03-.24-.25-.4-.49-.38-.63.05-1.27.04-1.9-.05Z'/%3E%3C/svg%3E");
  --cursor-autoscroll: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='m19.72,12.21c-.04-.18-.17-.32-.33-.37.18-.05.32-.19.36-.39l.48-2.55c.05-.26-.11-.52-.37-.58-1.29-.29-2.98-.88-4.5-2.07-1.41-1.15-2-2.11-2.45-3.24-.08-.19-.26-.32-.46-.32h-2.68c-.22,0-.4.15-.47.36-.85,2.49-4.73,4.96-7.16,5.45-.27.05-.43.32-.37.58l.51,2.5c.04.18.17.32.33.37-.18.05-.32.19-.36.39l-.48,2.55c-.05.26.11.52.37.58,1.29.29,2.98.88,4.5,2.07,1.4,1.15,2,2.11,2.45,3.24.08.19.26.32.46.32h2.68c.22,0,.4-.15.47-.36.85-2.49,4.73-4.96,7.16-5.45.27-.05.43-.32.37-.58l-.51-2.5Zm-10.85,2.51c-2.04-1.61-4.28-2.4-5.96-2.77,1.69-.39,3.95-1.21,6.04-2.85.1-.08.19-.15.28-.23v6.16c-.12-.1-.24-.2-.37-.3Zm4.17-.04c-.1.08-.19.15-.28.23v-6.16c.12.1.24.2.37.3,2.04,1.61,4.28,2.4,5.96,2.77-1.69.39-3.95,1.21-6.04,2.85Z'/%3E%3C/svg%3E");
  --cursor-autoscroll-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='m19.73,5.61c-1.28-.29-2.96-.88-4.46-2.06-1.39-1.15-1.99-2.1-2.43-3.22-.07-.19-.25-.32-.46-.32h-2.65c-.22,0-.39.15-.46.35-.84,2.48-4.69,4.94-7.1,5.42-.26.05-.43.32-.37.58l.51,2.49c.06.27.32.45.59.39,1.67-.39,3.94-1.2,6.03-2.85.86-.68,1.55-1.4,2.1-2.1.52.69,1.2,1.4,2.04,2.06,2.05,1.63,4.3,2.41,5.98,2.77.27.06.53-.12.58-.39l.48-2.53c.05-.26-.11-.52-.37-.58Z'/%3E%3C/svg%3E");
  --cursor-autoscroll-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='m20.2,15.62l-.51-2.5c-.06-.27-.32-.45-.59-.39-1.68.39-3.96,1.21-6.06,2.86-.87.69-1.55,1.4-2.11,2.11-.53-.7-1.2-1.4-2.05-2.07-2.06-1.64-4.33-2.42-6.01-2.79-.27-.06-.54.12-.59.4l-.48,2.55c-.05.26.11.52.37.58,1.29.29,2.97.88,4.48,2.07,1.4,1.15,2,2.11,2.44,3.24.08.19.25.32.46.32h2.67c.22,0,.4-.15.47-.36.85-2.49,4.72-4.96,7.14-5.45.26-.05.43-.32.37-.58Z'/%3E%3C/svg%3E");

  --cursor-grab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cdefs%3E%3Cstyle%3Esvg%7Bfill:%2300000080;%7D.b%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cpath class='b' d='m16.61,8.65h0s-.07-.19-.07-.19l-.72-1.98-.19-.52-.19-.52-1.39-3.82-2.27.83.54,1.48.7,1.93.34.93.19.52.34.93-.52.19-.52.19-.34-.93h0s-.16-.44-.16-.44h0s-.56-1.53-.56-1.53l-.19-.52-.87-2.38s0,0,0,0l-.38-1.03-2.27.83h0s2.12,5.81,2.12,5.81l.03.08-.52.19h0s0,0,0,0l-.52.19h0s0,0,0,0l-.71-1.96h0l-1.43-3.93s0,0,0,0l-.3-.83-2.27.83,4.82,13.25-1.37-.88c-1.5-.96-3.1-1.78-4.76-2.43l-.84,2.27c1.53.6,3.01,1.36,4.4,2.26,1.31.85,2.55,1.83,3.68,2.92l8.75-3.18c.29-.1.42-.19.47-.24l-3.03-8.31Z'/%3E%3Cpath d='m20.69,16.64c-1.21-3.31-4.45-12.22-5.61-15.4-.21-.57-.84-.86-1.41-.66l-2.27.83c-.21-.57-.84-.86-1.41-.66-.04.02-2.25.82-2.29.84-.27-.44-.81-.64-1.31-.46l-2.27.83c-.57.21-.86.84-.66,1.41l3.73,10.26c-1.16-.66-2.37-1.23-3.61-1.71-.28-.11-.58-.1-.85.02-.27.12-.48.34-.58.62l-.83,2.27c-.2.56.08,1.19.63,1.4,2.86,1.12,5.5,2.81,7.71,4.94.31.3.75.39,1.14.24,0,0,8.75-3.19,8.75-3.19,1.33-.48,1.29-1.2,1.15-1.59Zm-11.38-.4L4.49,2.99l2.27-.83c.18.5,2.45,6.72,2.45,6.72h0s0,0,0,0l.52-.19h0s0,0,0,0l.52-.19-2.14-5.89h0s2.27-.83,2.27-.83l.38,1.03s0,0,0,0c.43,1.19,2.11,5.79,2.11,5.79.26-.09.78-.28,1.03-.38-.66-1.81-1.45-3.98-2.11-5.79l2.27-.83c.7,1.93,1.87,5.13,2.56,7.03h0s3.03,8.31,3.03,8.31c-.05.05-.18.13-.47.24l-8.75,3.18c-2.32-2.23-5.08-4-8.07-5.17l.84-2.27c2.15.81,4.21,2.03,6.13,3.31Z'/%3E%3C/svg%3E");
  --cursor-grabbing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cdefs%3E%3Cstyle%3Esvg%7Bfill:%2300000080;%7D.b%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cpath d='m15,4.15l-2.27.83-.08-.21c-.21-.57-.84-.86-1.41-.66l-2.28.83c-.24-.5-.83-.75-1.37-.56l-2.27.83c-.57.21-.86.84-.66,1.41l.58,1.6c-.07.16-.15.32-.23.48-.23.46-.46.9-.7,1.32-.51.91-1.09,1.79-1.72,2.63l-1.05,1.42c-.23.3-.15.73.17.94l1.48.98c1.02.67,2.03,1.39,3.02,2.14,1.02.77,2.05,1.6,3.04,2.46.37.32.89.42,1.36.25l8.75-3.19c1.38-.5,1.26-1.28,1.15-1.59l-4.1-11.27c-.21-.57-.84-.86-1.41-.66Zm4.48,12.3c-.05.05-9.39,3.42-9.39,3.42-.29-.25-.58-.5-.88-.75-.77-.65-1.56-1.27-2.34-1.86-1.01-.76-2.04-1.49-3.08-2.18l-1.09-.72.77-1.04c.65-.88,1.25-1.8,1.79-2.75.17-.29.33-.6.5-.92l2.32,6.37,1.03-.38-3.42-9.41,2.27-.83,1.05,2.89,1.03-.38-.71-1.96,2.27-.83.71,1.96,1.03-.38-.26-.72,2.27-.83,4.1,11.27Z'/%3E%3Cpath class='b' d='m15.38,5.19l4.1,11.27c-.05.05-9.39,3.42-9.39,3.42-.29-.25-.58-.5-.88-.75-.77-.65-1.56-1.27-2.34-1.86-1.01-.76-2.04-1.49-3.08-2.18l-1.09-.72.77-1.04c.65-.88,1.25-1.8,1.79-2.75.17-.29.33-.6.5-.92l2.32,6.37,1.03-.38-3.42-9.41,2.27-.83,1.05,2.89,1.03-.38-.71-1.96,2.27-.83.71,1.96,1.03-.38-.26-.72,2.27-.83Z'/%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: Geist, sans-serif;
  touch-action: manipulation;
}

html {
  -moz-text-size-adjust: none !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--secondary-darker) var(--contrast);
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  width: 100% !important;
  max-width: 100% !important;
  position: relative;
  background-color: var(--dark);
  overscroll-behavior-y: none;
}

body {
  -moz-text-size-adjust: none !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  color: var(--dark);
  background-color: inherit;
  -webkit-overflow-scrolling: touch;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overscroll-behavior-y: none;
}

::selection {
  background-color: color-mix(in srgb, var(--primary) 80%, transparent);
  color: var(--light);
}

::-moz-selection {
  background-color: color-mix(in srgb, var(--primary) 80%, transparent);
  color: var(--light);
}

a,
button,
input,
select,
textarea {
  -webkit-tap-highlight-color: color-mix(
    in srgb,
    var(--primary) 80%,
    transparent
  );
}

a,
a:visited {
  text-decoration: none;
}

h1,
h2,
h3,
h4 {
  text-wrap: pretty;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(1.8em, 3.4vw, 3em);
  font-weight: 900;
  line-height: 1;
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.1em, 2.5vw, 1.2em);
  font-weight: 800;
}

h2.tag {
  color: var(--primary);
  padding: 0.5em 0;
}

h3 {
  font-size: clamp(1.05em, 2.5vw, 1.1em);
  font-weight: bold;
}

h3.name-projeto {
  font-size: clamp(1.25em, 3vw, 1.5em);
  font-weight: 800;
  padding-bottom: 0.25em;
}

h4 {
  font-size: clamp(1em, 2vw, 1.15em);
  font-weight: bold;
}

p {
  font-size: clamp(0.9em, 1.2vw, 1em);
  font-weight: 400;
  line-height: 1.35;
  text-wrap: pretty;
}

.container {
  max-width: 85%;
  width: 100%;
  margin: 0 auto;
}

.content h1 {
  display: flex;
  flex-shrink: 1;
  min-width: 0;
  white-space: nowrap;
  width: fit-content;
}

.flex {
  display: flex;
}

.fixed {
  position: fixed;
  will-change: transform;
}

.gap1 {
  gap: 1em;
}
.gap2 {
  gap: 2em;
}
.gap3 {
  gap: 3em;
}

.color-cycle-btn {
  cursor: pointer;
}

.color-cycle-btn:active {
  transform: scale(1.1);
}

.color-cycle-btn:hover {
  animation: pulsingHeartColorCycle 2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  transition: 0.1s ease-in;
  fill: var(--primary);
}

.header-trigger {
  width: 100%;
  height: 2em;
  z-index: 999;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  transition: transform 0.6s ease;
  transform: translateY(0);
}

.trigger-line {
  width: 100%;
  height: 0.5em;
  background-color: var(--primary-darker);
  transition: transform 0.3s ease-out;
  z-index: 999;
  transform: translateY(-1em);
}

.trigger-arrow {
  width: 3em;
  height: 2em;
  display: flex;
  background-color: var(--primary-darker);
  border-radius: 0 0 1em 1em;
  margin: 0 auto;
  z-index: 900;
  transform: translateY(-6em);
  transition: transform 1s ease;
}

.trigger-arrow svg {
  fill: var(--contrast);
  height: 0.6em;
  width: 100%;
  transform: translateY(0.35em);
  transition: transform 1s ease;
}

.header-trigger.is-visible,
.header-trigger.is-visible .trigger-arrow,
.header-trigger.is-visible .trigger-line {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-trigger.is-visible .trigger-arrow {
  transition-delay: 400ms;
}

.header-trigger:not(.is-visible):hover .trigger-arrow {
  transform: translateY(-6em);
}

.header-trigger:hover .trigger-arrow {
  transition: transform 0.3s ease;
}

.header-trigger.is-dimmed {
  opacity: 1;
  transition: opacity 4s ease;
}

.header-trigger.is-dimmed .trigger-arrow {
  transform: translateY(-25%);
  transition: transform 1s ease;
}

.header-trigger.is-dimmed .trigger-arrow svg {
  transform: translateY(0.65em);
}

.header-content {
  align-items: center;
  width: 100%;
  transition: transform 0.5s ease;
  flex-direction: column;
  z-index: 1000;
  top: 0;
  left: 0;
}

.header {
  width: 100%;
  background-color: var(--contrast);
  height: 4em;
  align-items: center;
  user-select: none;
  color: var(--primary);
  z-index: 1000;
}

.header nav {
  display: flex;
  gap: 4em;
  color: var(--primary);
  margin: 0 auto;
  align-items: center;
}

.header nav a {
  height: fit-content;
}

.header h3,
.header .nav-link {
  color: var(--primary);
}

.header .nav-link {
  font-size: 1.15em;
  font-weight: 450;
  padding: 0.7em;
}

.header .nav-link:hover {
  color: var(--light);
  transition: 0.1s ease-in;
}

.header .color-picker {
  display: flex;
  align-items: center;
  position: absolute;
  right: -48px;
}

.header-logo {
  height: fit-content;
  fill: var(--primary);
  user-select: none;
}

.header .header-logo {
  padding: 0.25em;
}

.header-logo a {
  color: var(--primary);
  height: fit-content;
  padding: 0.2em;
}

.header-logo svg {
  vertical-align: middle;
  display: flex;
}

.logo-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1.5em;
  position: relative;
}

.logo-mobile .color-cycle-btn {
  fill: var(--dark);
}

.mobile-header {
  align-items: center;
  background-color: var(--contrast);
  height: 3.5em;
  width: 100%;
  bottom: env(safe-area-inset-bottom, 0px);
  left: 0;
  z-index: 9999 !important;
  will-change: transform;
  contain: layout paint !important;
  transform: translateZ(0) !important;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.mobile-header .header-logo {
  fill: var(--primary);
  display: flex;
  align-items: center;
  align-content: center;
  height: auto;
  padding: 0.2em;
}

.mobile-header .header-logo svg {
  height: 34px;
}

.mobile-header nav {
  margin: auto;
  flex-direction: row;
  display: flex;
  justify-content: space-between;
  transition: transform 0.5s ease;
  width: 78%;
}

.mobile-header nav .mobile-nav-link {
  padding: 0.7em;
}

.mobile-header nav a svg {
  fill: var(--light);
  height: 1.375em;
  width: 1.375em;
  vertical-align: middle;
}

.mobile-header nav a:active svg,
.mobile-header nav .clickable-svg.active {
  fill: var(--primary);
}

.mobile-header nav a:active,
.accordion-body .btn-primary:active,
.accordion-body .btn-primary,
.accordion-header,
.bt-secondary:active,
.btn-secondary,
.lang-selector-floating,
.mobile-header .lang-selector *,
.scroll-top:active,
.icons a:active,
footer nav .nav-link:active,
.error-404 *,
.footer-trigger:active,
.close-footer:active,
.prev-btn:active,
.next-btn:active,
.close-btn:active,
.btn-turbulence:active,
.btn-turbulence,
.prancheta,
.logo-mobile .color-cycle-btn {
  -webkit-tap-highlight-color: transparent !important;
}

.mobile-header .color-cycle-btn {
  margin: 0;
  -webkit-tap-highlight-color: transparent !important;
  z-index: 5;
}

.mobile-header .color-picker {
  position: relative;
}

.footer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100vw;
  transform: translateY(100%);
  transition:
    transform 0.8s ease,
    visibility 0.8s ease;
  z-index: 1000;
  will-change: transform;
  overflow: hidden;
  visibility: hidden;
}

.footer.is-open {
  transform: translateY(0);
  transition: transform 1s ease;
  visibility: visible;
}

.footer-trigger {
  width: 100%;
  position: absolute;
  transform: translateY(calc(-100% + 2.5em));
  margin: 0;
  z-index: 9;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: transform 0.6s ease;
  padding-top: 0.5em;
}

.footer-trigger-line {
  width: 100%;
  height: 1em;
  background-color: var(--secondary-darker);
}

.footer-trigger-line::after {
  content: "";
  top: 100%;
  left: 0;
  position: absolute;
  width: 100%;
  height: var(--tail-height, 0em);
  transition: height 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  background: var(--secondary-darker);
}

.footer-trigger-arrow {
  margin: 0 auto;
  width: 3em;
  height: 1.5em;
  display: flex;
  background-color: var(--secondary-darker);
  border-radius: 1em 1em 0 0;
  transition: transform 0.3s ease;
  z-index: 10;
}

.footer-trigger-arrow svg {
  fill: var(--contrast);
  height: 0.6em;
  width: 100%;
  transition: transform 0.3s ease;
  transform: translateY(0.8em);
}

.footer-trigger:active .footer-trigger-arrow {
  transform: scale(1.05) !important;
}

.footer-trigger.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.close-footer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1001;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transform: translateY(calc(-100% - 3em));
  transition:
    transform 0.6s ease,
    opacity 0.2s ease,
    visibility 0.6s ease;
  padding-bottom: 0.5em;
  opacity: 0;
  visibility: hidden;
}

.close-footer-line {
  width: 100%;
  height: calc(0.5em + 3em);
  background-color: var(--contrast);
}

.close-footer-arrow {
  margin: 0 auto;
  width: 3em;
  height: 1.5em;
  display: flex;
  background-color: var(--contrast);
  border-radius: 0 0 1em 1em;
  transition: transform 0.3s ease;
}

.close-footer-arrow svg {
  fill: var(--secondary);
  height: 0.9em;
  width: 100%;
  transition: transform 0.3s ease;
  transform: translateY(0.1em);
}

.close-footer.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(-3em);
}

.close-footer:hover .close-footer-arrow {
  transform: translateY(-25%) scale(1);
}

.close-footer:hover .close-footer-arrow svg {
  transform: translateY(0.2em);
}

.close-footer:active .close-footer-arrow {
  transform: scale(1.05);
}

footer {
  min-height: 100dvh;
  background-color: var(--secondary-darker);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  color: var(--dark);
  position: relative;
}

footer .container {
  position: absolute;

  background-color: transparent;
  width: 100%;
  max-width: 100%;
}

footer .content {
  flex-direction: row;
  justify-content: space-between;
  height: 4.25em;
  width: 85%;
  align-items: center;
  margin: 0 auto;
}

footer .rights {
  display: flex;
  flex-direction: row;
}

footer .rights p {
  font-weight: 400;
  text-align: right;
}

footer .rights p:last-of-type {
  padding-left: 0.3em;
}

footer .rights a {
  color: var(--dark);
  text-decoration: underline;
  font-weight: 450;
}

footer nav {
  display: flex;
  gap: 2.5em;

  user-select: none;
}

.footer nav *,
.footer .rights p {
  background-color: var(--secondary-darker);
  border-radius: 0.6em;
  z-index: 3;
}

.footer .rights p {
  width: fit-content;
}

footer .nav-link {
  font-size: 1.15em;
  font-weight: 450;
  color: var(--dark);
  width: fit-content;
  padding: 0.25em;
}

footer .nav-link:hover {
  color: var(--primary);
  transition: 0.1s ease-in;
}

.footer-min {
  min-height: 5em;
}

.footer-min .container {
  background-color: var(--secondary);
  position: relative;
}

.footer-min .content {
  height: 8em;
}

.footer-logo {
  fill: var(--dark);
  user-select: none;
  position: absolute;
  right: 50%;
  transform: translateX(50%) scale(1);
}

.footer-logo.color-cycle-btn:active,
.footer-logo.color-cycle-btn:hover {
  animation: pulsingHeartFooter 2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

#banner,
#banner-projetos {
  max-height: calc(100dvh);
  height: 100dvh;
  position: relative;
  overflow: hidden;
}

#banner {
  background: var(--primary);
  background: linear-gradient(70deg, var(--primary), var(--primary-darker));
}

#banner-projetos {
  background: var(--secondary);
  background: linear-gradient(70deg, var(--secondary), var(--secondary-darker));
}

#banner span,
#banner-projetos span {
  font-size: clamp(3em, 14.5vw, 8em);
  font-weight: 900;
  line-height: 0.78;
  user-select: none;
}

.banner-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  position: absolute;
  bottom: -6px;
  left: -9px;
}

#banner-projetos .banner-text {
  text-align: right;
  bottom: -5px;
  right: -9px;
  left: auto;
}

#sobre {
  min-height: calc(100dvh + 0.5em);
  height: 100%;
  background-color: var(--light);
  align-content: center;
}

#contato {
  background-color: var(--dark);
  color: var(--light);
  min-height: calc(100dvh + 1px);
  height: 100%;
  align-content: center;
}

.img-sobre {
  height: 100%;
  width: 100%;
  max-width: 500px;
  max-height: 645px;
  aspect-ratio: 4 / 5;
  background: var(--primary);
  background: linear-gradient(80deg, var(--primary), var(--primary-darker));
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  pointer-events: none;
  user-select: none;
  border-radius: 0.4em;

  margin-top: 4em;
  margin-bottom: 4em;
}

.img-sobre img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

#sobre .link-explore,
#cta-projeto .link-explore {
  color: var(--primary);
  font-size: 1.1em;
  font-weight: 600;
  text-decoration: none;
  width: fit-content;
  padding: 0.5em 0.5em 0.5em 0;
}

#sobre .link-explore:hover,
#cta-projeto .link-explore:hover {
  color: var(--dark);

  text-decoration: underline;
}

.link-explore .arrow::after {
  content: "";
  display: inline-flex;
  width: 0.8em;
  height: 0.8em;
  aspect-ratio: 1 / 1;
  margin: 0 0 0.2em 0.25em;
  vertical-align: middle;
  flex-shrink: 0;
  background-color: var(--primary);
  -webkit-mask: url("/images/icons/icon_arrow.svg") no-repeat center / contain;
  mask: url("/images/icons/icon_arrow.svg") no-repeat center / contain;
  transform: none;
  transition:
    opacity 0.1s ease-out,
    transform 0.5s ease-out;

  opacity: 1;
}

.link-explore:hover .arrow::after,
.link-explore:active .arrow::after {
  background-color: var(--dark);
  opacity: 0;
  transform: translateX(-0.2em) scale(0.85);
}

.link-explore::before {
  transform: translateX(-0.2em) scale(0.85);
  opacity: 0;

  display: inline-flex;

  content: "";

  width: 0;
  height: 0;
  margin: 0;

  aspect-ratio: 1 / 1;

  vertical-align: middle;
  flex-shrink: 0;
  background-color: var(--primary);
  -webkit-mask: url("/images/icons/icon_arrow.svg") no-repeat center / contain;
  mask: url("/images/icons/icon_arrow.svg") no-repeat center / contain;

  transition:
    opacity 0.1s ease,
    transform 0.5s ease-out,
    width 0.2s ease-out,
    height 0.2s ease-out,
    margin 0.2s ease-out;
}

.link-explore:hover::before {
  transform: none;
  opacity: 1;

  width: 0.8em;
  height: 0.8em;

  margin: 0 0.25em 0.2em 0;

  background-color: var(--dark);
}

.img-contato {
  height: 100%;
  width: 100%;
  max-width: min(500px, 68vh);
  max-height: min(645px, 88vh);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
}

.img-contato svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.img-contato svg .b {
  fill: var(--primary);
}
.img-contato svg .c {
  fill: var(--secondary);
}

#sobre .content {
  align-content: center;
  display: flex;
  flex-direction: column;
  flex-shrink: 2;
  align-self: center;
}

#contato .content {
  align-content: center;
}

#sobre .content p {
  padding-bottom: 0.7em;
}

#sobre .content p:last-of-type {
  padding-bottom: 0;
}

#sobre i * {
  color: var(--contrast);
}

#sobre .poem p {
  padding-bottom: 0;
}

#sobre .poem {
  padding-top: 1em;
  padding-bottom: 1em;
}

#sobre .poem p::before {
  font-size: 1.2em;
  content: "“";
  padding: 0.1em;
  color: var(--contrast);
}

#sobre .poem p::after {
  font-size: 1.2em;
  content: "”";
  color: var(--contrast);
}

#sobre .icons {
  margin-top: 1.5em;
  gap: 0.65em;
  height: auto;
  width: 100%;
}

#sobre .icons a {
  height: fit-content;
  width: auto;
  padding: 0.25em 0.25em 0.25em 0;
  max-height: 36px;
}

#sobre .icons svg {
  fill: var(--dark);
  width: 1.75em;
  height: 1.75em;
}

#sobre .icons svg.icon-insta {
  stroke: var(--dark);
  stroke-width: 0.2px;
}

#sobre .icons a:hover svg {
  fill: var(--primary);
}

#sobre .icons a:hover svg.icon-insta {
  stroke: var(--primary);
}

h2.tag ul,
h3.tag ul {
  gap: 1.75em;
}

h2.tag ul li,
h3.tag ul li {
  padding: 0;
  margin: 0;
}

h2.tag ul li:first-child,
h3.tag ul li:first-child {
  list-style-type: none;
}

.accordion-container {
  display: flex;
  flex-direction: column;
  align-content: center;
  margin: auto 0;
  gap: 1.25em;
}

.accordion-kicker {
  color: var(--primary);
  font-size: 1.25em;
  font-weight: 800;
  width: fit-content;
}

.accordion-item {
  display: grid;
  gap: 0;
}

.accordion-header {
  display: inline-flex;
  background: none;
  border: none;
  max-width: 100%;
  width: fit-content;
  text-align: left;
  cursor: pointer;
  color: var(--light);
  flex-wrap: wrap;
}

.accordion-header .arrow {
  display: inline;
  white-space: nowrap;
}

.accordion-header .arrow::after {
  content: "";
  display: inline-flex;
  width: 0.75em;
  height: 0.75em;
  aspect-ratio: 1 / 1;
  margin: 0 0 0.1em 0.5em;
  vertical-align: middle;
  flex-shrink: 0;
  background-color: var(--light);
  -webkit-mask: url("/images/icons/icon_arrow.svg") no-repeat center / contain;
  mask: url("/images/icons/icon_arrow.svg") no-repeat center / contain;
  transition:
    opacity 0.1s ease-out,
    transform 0.3s ease-out,
    width 0.2s ease-out,
    height 0.2s ease-out,
    margin 0.2s ease-out;
}

.accordion-header h3 {
  font-size: clamp(2.4em, 5vw, 2.8em);
}

.accordion-item:not(.active) .accordion-header:hover,
.accordion-item.active .accordion-header {
  color: var(--primary);
}

.accordion-item:not(.active) .accordion-header:focus {
  color: var(--light);
}

.accordion-item .accordion-header h3 span:first-child::before {
  content: "";

  width: 0;
  height: 0;
  aspect-ratio: 1 / 1;

  vertical-align: middle;
  flex-shrink: 0;
  background-color: var(--light);
  -webkit-mask: url("/images/icons/icon_arrow.svg") no-repeat center / contain;
  mask: url("/images/icons/icon_arrow.svg") no-repeat center / contain;
  transition:
    opacity 0.1s ease-out,
    transform 0.3s ease-out,
    width 0.2s ease-out,
    height 0.2s ease-out,
    margin 0.2s ease-out;

  display: inline-flex;

  transform: translateX(-0.3em) scale(0.85) rotate(35deg);
}

.accordion-item.active .accordion-header h3 span:first-child::before,
.accordion-item:not(.active)
  .accordion-header:hover
  h3
  span:first-child::before {
  width: 0.75em;
  height: 0.75em;

  margin: 0 0.3em 0.15em 0;

  background-color: var(--primary);

  transform: translateX(0) scale(1) rotate(90deg);
}

.accordion-item:not(.active) .accordion-header:hover .arrow::after {
  opacity: 0;
  transform: translateX(-0.75em) scale(0.85) rotate(90deg);
  background-color: var(--primary);
}

.accordion-item:not(.active)
  .accordion-header:focus
  h3
  span:first-child::before {
  background-color: var(--light);

  width: 0;
  height: 0;

  margin: 0;
}

.accordion-item.active .accordion-header .arrow::after {
  opacity: 0;
  transform: translateX(-0.75em) scale(0.85) rotate(90deg);
  background-color: var(--primary);
}

.accordion-content {
  display: grid;
  grid-template-rows: 0fr;
  transition:
    grid-template-rows 0.3s ease,
    opacity 0.2s ease;
  opacity: 0;
}

.accordion-body {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.25em;
}

.accordion-item.active .accordion-content {
  grid-template-rows: 1fr;
  opacity: 1;
}

.accordion-body .btn-primary {
  display: flex;
  background-color: var(--primary);
  color: var(--dark);
  padding: 0.8em 2em;
  border-radius: 1.2em;
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(1.1em, 2.5vw, 1.2em);
  max-width: fit-content;
  width: 100%;
  transition: 0.3s ease;
}

.accordion-body .btn-primary:hover {
  background-color: var(--light);
}

.accordion-body .email-link,
.accordion-body .whats-link {
  color: var(--primary);
  font-weight: 700;
  font-size: clamp(1.3em, 4vw, 1.5em);
  text-decoration: none;
  transition: 0.3s ease;
}

.accordion-body .email-link:hover,
.accordion-body .whats-link:hover {
  color: var(--light);
}

.accordion-body a {
  width: fit-content;
}

#projetos {
  background-color: var(--light);
  height: 100%;
}

#projetos .content {
  padding-top: 8em;
  padding-bottom: 8em;
}

#projetos .container .content {
  height: 100%;
  flex-direction: column;
}

.grid-projetos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  gap: 2.5em;
}

.card-projeto {
  max-width: 500px;
  width: 100%;
  overflow: hidden;
}

.card-projeto p {
  margin-bottom: 1em;
}

.card-projeto a {
  user-select: text;
}

.card-projeto h2 {
  font-size: clamp(0.9em, 1.2vw, 1.1em);
}

.thumb-projeto {
  width: 100%;
  max-width: 500px;
  aspect-ratio: 500 / 350;
  overflow: hidden;
  position: relative;
  border-radius: 0.5em;
}

.thumb-projeto img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.thumb-projeto .overlay {
  fill: var(--dark);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 1s ease;
}

.thumb-projeto .overlay img {
  transform: translateY(1em) scale(0.4);
  width: 4.5em;
  height: 100%;
  background-color: var(--dark);
  -webkit-mask: url("/images/icons/icon_eye.gif") no-repeat center / contain;
  mask: url("/images/icons/icon_eye.gif") no-repeat center / contain;
  opacity: 0;
}

.thumb-projeto:hover .overlay {
  opacity: 1;
}

.thumb-projeto:hover .overlay img {
  transform: translateY(0) scale(1.1);
  transition:
    transform 0.5s ease,
    opacity 0.3s ease;
  opacity: 1;
  visibility: visible;
}

.card-projeto p {
  width: fit-content;
}

a.link-projeto {
  color: var(--dark);
}

.thumb-projeto:hover img {
  transform: scale(1.1);
}

h3.tag {
  color: var(--dark) !important;
  padding: 0 0 0.5em 0;
  font-weight: 400;
  font-style: italic;
}

#cta-contato {
  max-width: 100%;
  color: var(--light);

  position: relative;
  overflow: hidden;

  padding-bottom: 0 !important;
}

#cta-contato .container {
  height: 100%;
  justify-content: flex-start;
}

#cta-contato .content {
  height: 100%;
  gap: 1.5em;
  flex-direction: column;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6.5em 0;

  z-index: 100;
}

#cta-contato .content h3 {
  font-size: clamp(1.5em, 2.5vw, 2.5em);
  line-height: 1;
  text-wrap: balance;
}

#cta-contato .btn-secondary {
  display: flex;
  background-color: var(--secondary-darker);
  color: var(--dark);
  padding: 0.8em 5em;
  border-radius: 1.2em;
  text-decoration: none;
  font-size: clamp(1.1em, 2.5vw, 1.2em);
  font-weight: 700;
  width: fit-content;
  transition: 0.3s ease;
  justify-content: center;
}

#cta-contato .btn-secondary:hover {
  background-color: var(--light);
}

#cta-contato .btn-secondary:active {
  background-color: var(--light);
}

#cta-contato .svg-banner-projects {
  left: auto;
  right: -300px;
  bottom: -300px;

  scale: -1;
}

#cta-projeto {
  max-height: 40dvh;
  height: fit-content;
  max-width: 100%;
  color: var(--dark);

  position: relative;
  overflow: hidden;
}

#cta-projeto .container {
  height: 100%;
  justify-content: flex-start;
  width: fit-content;
}

#cta-projeto .content {
  height: 100%;
  gap: 1.5em;
  flex-direction: column !important;
  display: flex;

  justify-content: center !important;

  z-index: 100;
  padding-top: 4em;
  padding-bottom: 6em;
}

#cta-projeto .content p {
  font-size: clamp(1.6em, 2.5vw, 2.3em) !important;
  line-height: 1;
  text-wrap: balance;

  font-weight: bold;
}

#hero-banner {
  max-height: calc(600px + 4em);
  width: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background-color: var(--light);
}

.hero picture {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
}

.hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}

#projeto-layout {
  background-color: var(--light);
  height: 100%;
  width: 100%;
}

#projeto-layout .projeto-header {
  margin-top: 4em;
  margin-bottom: 2em;
  align-self: flex-start;
}

#projeto-layout .projeto-header p {
  padding-bottom: 0.75em;
}

#projeto-layout .projeto-header p:last-of-type {
  padding-bottom: 0;
}

#projeto-layout .projeto-header h2 {
  font-size: clamp(0.95em, 2vw, 1.2em);
}

#projeto-layout .projeto-header h1 {
  white-space: wrap;
}

#projeto-layout .content {
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.projeto-presentation {
  width: 100%;
}

.projeto-presentation .container {
  max-width: 100%;
  margin: 0 auto;
  padding: 1em 0 2.5em 0;
}

.projeto-presentation img,
.projeto-presentation video {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  box-sizing: border-box;

  user-select: none;

  cursor: pointer;

  padding-bottom: 1.5em;
}

.projeto-presentation img:last-child,
.projeto-presentation video:last-child {
  padding-bottom: 0;
}

.projeto-presentation video::-webkit-media-controls-panel {
  display: none !important;
  opacity: 0 !important;
}

.lang-selector-floating.is-hidden,
.lang-selector-floating .lang-toggle-btn.is-hidden {
  opacity: 0.35;
}

.lang-selector-floating:hover .lang-toggle-btn {
  opacity: 1 !important;
}

.lang-selector-floating {
  position: fixed;
  bottom: 1.25em;
  right: 1.25em;
  z-index: 1001;
  background-color: var(--contrast);
  border-radius: 1.2em;
  padding: 1.5em;
  height: 2.5em;
  width: 2.5em;
  justify-content: center;
  align-items: center;
  display: flex;
  transform: scale(1);
  transition:
    transform 0.5s ease,
    opacity 4s ease;
  cursor: pointer;
  will-change: transform;

  user-select: none;
}

.lang-toggle-btn {
  background: transparent;
  border: none;
  color: var(--secondary-darker);
  font-weight: 700;
  padding: 1.2em;
  cursor: pointer;
  text-transform: uppercase;
  transform: scale(1);
  transition: opacity 4s ease;
}

.lang-selector-floating:active {
  background-color: var(--secondary-darker);
  transform: scale(1.12);
}

.lang-selector-floating:hover .lang-toggle-btn {
  color: var(--contrast);
}

.lang-selector-floating:hover {
  background-color: var(--secondary-darker);
}

.lang-selector-floating:hover .lang-toggle-btn,
.lang-selector-floating:hover {
  transition:
    transform 0.5s ease,
    opacity 0.3s ease !important;
}

.lang-selector-floating:active .lang-toggle-btn {
  color: var(--contrast);
}

.scroll-top {
  display: flex;
  opacity: 0;
  visibility: hidden;
  position: fixed;
  bottom: 5.25em;
  right: 1.25em;
  z-index: 1001;
  background-color: var(--secondary-darker);
  border-radius: 1.2em;
  padding: 1.5em;
  height: 2.5em;
  width: 2.5em;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transform: scale(0) translateX(0);
  will-change: transform;
  transition:
    transform 0.5s ease,
    opacity 0.3s ease,
    visibility 0.3s ease;
}

.scroll-top svg {
  fill: var(--contrast);
  height: 1.3em;
  transition: fill 0.3s ease;
  position: absolute;
}

.scroll-top:active {
  background-color: var(--secondary-darker);
  transform: scale(1.12) !important;
}

.scroll-top:focus,
.scroll-top:focus-visible {
  outline: none;
  background-color: var(--secondary-darker);
}

.scroll-top:focus svg {
  fill: var(--contrast);
}

.svg-banner-home,
.svg-banner-projects {
  position: absolute;
  bottom: -5px;
  height: 100dvh;
  width: fit-content;
  max-width: 100%;
  max-height: calc(100dvh - 1em);
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  pointer-events: none;
  transform: none;
}

.svg-banner-home {
  right: -50px;
}
.svg-banner-projects {
  left: -10px;
}

.svg-banner-home svg,
.svg-banner-projects svg {
  height: 100% !important;
  width: auto !important;
  flex-shrink: 0;
}

.svg-banner-home svg .b {
  fill: var(--secondary);
}
.svg-banner-projects svg .b {
  fill: var(--primary);
}

.svg-footer {
  display: flex;
  justify-content: center;
  align-items: flex-end;

  height: 100svh;
  width: 100vw;

  pointer-events: none;
  overflow: hidden;

  transition: opacity 0.3s ease-in-out;

  opacity: 0;

  position: relative;
}

.footer.is-open .svg-footer {
  opacity: 1;
  transition: opacity 0.5s ease-in-out 300ms;
}

.svg-footer svg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;

  height: 100%;
  width: 100%;

  display: block;
}

.svg-footer svg .c {
  fill: var(--primary);
}

.svg-footer svg .b {
  fill: var(--secondary);
}

.svg-footer svg {
  fill: var(--contrast);
  stroke: var(--contrast);
  stroke-width: 0.8px;
}

#error-404 {
  background-color: var(--contrast);
  min-height: 100svh;
  max-width: 100%;
  justify-content: center;
  display: flex;
}

.error-404 {
  color: var(--secondary);
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 3em;
  padding-bottom: 5em;
}

.error-404 .warn {
  width: 270px;
  height: auto;
  user-select: none;
  flex-shrink: 0;
}

.error-404 .warn svg .b,
.error-404 .warn svg .c {
  fill: var(--secondary);
}

.error-404 .warn-text {
  font-size: 1.3em;
  font-weight: 600;
}

.warn-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.warn-head a * {
  color: var(--secondary);
}

.error-return {
  color: var(--secondary);
  text-decoration: underline;
  font-size: 1.1em;
}

.error-return.arrow::after {
  content: "";
  display: inline-flex;
  width: 0.8em;
  height: 0.8em;
  aspect-ratio: 1 / 1;
  margin: 0 0 0.2em 0.25em;
  vertical-align: middle;
  flex-shrink: 0;
  background-color: var(--secondary);
  -webkit-mask: url("/images/icons/icon_arrow.svg") no-repeat center / contain;
  mask: url("/images/icons/icon_arrow.svg") no-repeat center / contain;
  transform: none;
  transition:
    opacity 0.1s ease,
    transform 0.5s ease-out,
    width 0.2s ease-out,
    height 0.2s ease-out;
}

.error-return.arrow::after,
.error-return:active.arrow::after {
  background-color: var(--secondary);
}

.error-return.arrow:hover::after {
  opacity: 0;
  transform: translateX(-0.2em) scale(0.85);
}

.error-return.arrow::before {
  transform: translateX(-0.2em) scale(0.85);
  opacity: 0;

  content: "";
  display: inline-flex;
  width: 0;
  height: 0;
  aspect-ratio: 1 / 1;
  margin: 0;

  vertical-align: middle;
  flex-shrink: 0;
  background-color: var(--secondary);
  -webkit-mask: url("/images/icons/icon_arrow.svg") no-repeat center / contain;
  mask: url("/images/icons/icon_arrow.svg") no-repeat center / contain;

  transition:
    opacity 0.1s ease,
    transform 0.5s ease-out,
    width 0.2s ease-out,
    height 0.2s ease-out,
    margin 0.2s ease-out;
}

.error-return.arrow:hover::before {
  transform: none;
  opacity: 1;

  width: 0.8em;
  height: 0.8em;

  margin: 0 0.25em 0.2em 0;
}

#error-404 .lang-selector-floating {
  background-color: var(--secondary);
}

#error-404 .lang-toggle-btn {
  color: var(--contrast);
}

#error-404 .lang-selector-floating:active {
  background-color: var(--light);
}

#error-404 .lang-selector-floating:hover {
  color: var(--contrast);
  background-color: var(--light);
}

@media (min-width: 1085px) {
  #contato .flex {
    gap: 0;
    justify-content: space-around;
  }
}

@media (min-width: 769px) {
  footer .rights p {
    font-size: clamp(0.85em, 1.2vw, 1em);
    padding: 0.25em;
  }

  .footer-trigger:hover .footer-trigger-arrow {
    transform: translateY(25%) scale(1);
  }

  .footer-trigger:hover .footer-trigger-arrow svg {
    transform: translateY(0.6em) rotate(-180deg) scale(1);
  }

  .mobile-header,
  .logo-mobile {
    display: none !important;
  }

  /* COMPONENTS */

  #header-container {
    min-height: 4em;
    background-color: var(--contrast);
    z-index: 1005;
  }
}

@media (max-width: 960px), (max-width: 960px) and (pointer: coarse) {
  footer nav {
    display: none !important;
  }

  .footer-logo {
    display: none !important;
  }

  footer .rights p {
    text-align: left;
    font-size: clamp(0.85em, 1vw, 0.9em);
  }

  footer .content {
    justify-content: flex-start;
  }

  .grid-projetos {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
  }
}

@media (max-width: 739px) {
  .container {
    width: 90%;
    max-width: 100%;
    flex-direction: column;
    gap: 1em;
  }

  #contato {
    padding-top: 3em;
    min-height: calc(100svh + 2em) !important;
    height: 100%;
    display: flex;
    padding-bottom: calc(5.5em + env(safe-area-inset-bottom));
    margin-bottom: 3.5em;
  }

  #contato .flex .content {
    order: 1;
  }
  #contato,
  #sobre {
    min-height: 100svh;
    max-height: 100%;
  }

  #contato .img-contato {
    height: auto;
    max-width: 100%;
  }

  #contato .container {
    height: fit-content;
  }

  #sobre .img-sobre {
    margin-bottom: 0;
  }
}

@media (max-width: 768px), (max-width: 960px) and (pointer: coarse) {
  #sobre .content {
    margin-bottom: 4.5em;
  }

  .svg-footer {
    padding-bottom: 3.5em;
  }
  #header-mobile-container {
    min-height: 3.5em;
    background-color: var(--contrast);
  }

  #cta-projeto .content {
    padding-bottom: 0;
  }

  #cta-projeto {
    max-height: 40svh;
  }

  #cta-projeto {
    height: fit-content;
  }
  #cta-contato .btn-secondary,
  #cta-projeto .btn-secondary {
    color: var(--dark);
    padding: 0.8em 3em;
  }

  #cta-contato .svg-banner-projects {
    right: 0px;
    rotate: -20deg;
  }

  .footer-trigger {
    align-items: center;
    transform: translateY(-5.75em);
    padding-top: 0;
  }

  .footer-trigger-arrow {
    margin-right: var(--scrollbar-width-negative);
    margin-left: 0;
    transform: translateY(1em);
    height: 2em;
  }

  .footer-trigger .footer-trigger-line {
    height: 0.5em;
  }

  .footer-trigger.is-swiping .footer-trigger-line::after {
    transition: none !important;
  }

  .footer-trigger-arrow svg {
    transform: translateY(0.3em) rotate(180deg);
  }

  .footer-trigger:hover .footer-trigger-arrow svg {
    transform: translateY(0.2em) rotate(180deg);
  }

  .close-footer .close-footer-line {
    height: calc(0.25em + 48px);
  }

  .close-footer {
    transition:
      transform 0.6s ease,
      opacity 0.2s ease,
      visibility 0.6s ease;
    padding-bottom: 0.25em;
  }

  .close-footer-arrow {
    transform: translateY(-1em);
    height: 2em;
  }

  .close-footer-arrow svg {
    transform: translateY(0.9em);
    height: 0.8em;
  }

  .close-footer.is-swiping .close-footer-arrow {
    transform: translateY(-0.75em);
    transition: transform 1s ease-out;
  }

  .footer-trigger.is-swiping .footer-trigger-arrow {
    transform: translateY(0.75em);
    transition: transform 1s ease-out;
  }

  .close-footer.is-visible {
    transform: translateY(calc(-3em));
  }

  .footer {
    transition:
      transform 0.6s cubic-bezier(0.77, 0, 0.175, 1),
      visibility 0.6s cubic-bezier(0.77, 0, 0.175, 1);
    width: 100%;
    max-height: calc(100svh - 3.5em);
    height: 100%;
    overflow-x: hidden !important;
    padding-bottom: calc(3.5em + env(safe-area-inset-top));
  }

  #banner,
  #banner-projetos {
    height: calc(100svh - 3.5em);
    max-height: calc(100svh - 3.5em);
  }

  .header-content {
    display: none !important;
  }

  #error-404 .lang-selector-floating {
    display: flex !important;
  }

  .lang-selector-floating {
    bottom: 4.5em;
  }

  .scroll-top {
    bottom: 8.5em;
  }

  .tag .flex {
    flex-grow: 1;
  }

  .banner-text {
    bottom: -4px;
    left: -6px;
  }

  #banner-projetos .banner-text {
    bottom: -2px;
    right: -6px;
  }

  .svg-banner-home {
    transform: translateX(480px);
    height: calc(100svh - 3.5em);
    max-height: calc(100svh - 3.5em);
  }

  .svg-banner-projects {
    transform: translateX(-80px);
    height: calc(100svh - 3.5em);
    max-height: calc(100svh - 3.5em);
  }

  .footer-min {
    min-height: 5em;
  }

  footer.footer-min {
    padding-bottom: calc(3.5em + env(safe-area-inset-top));
  }

  section:last-of-type {
    padding-bottom: 4em;
  }

  .container.presentation {
    width: 100%;
    max-width: 100%;
  }

  .projeto-presentation .container {
    max-width: 90%;
    padding: 1.5em 0 2em 0;
  }

  #projetos .content {
    padding-top: 4em;
    padding-bottom: 2em;
  }

  .projeto-presentation img,
  .projeto-presentation video {
    padding-bottom: 0.75em;
  }

  .projeto-presentation:last-child {
    padding-bottom: 0;
  }

  .prancheta {
    margin-bottom: 0.75em !important;
  }

  #hero-banner {
    aspect-ratio: 748 / 600;
    max-height: 500px;
  }

  #header-mobile-container {
    position: fixed !important;
    bottom: 0;
    left: 0 !important;
    right: 0 !important;
    width: 100%;
    z-index: 9999;
    will-change: transform;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    transition: transform 0.15s cubic-bezier(0, 0, 0.2, 1) !important;
  }

  .mobile-header {
    position: relative !important;
    width: 100vw !important;
    top: auto !important;
    bottom: calc(0 + env(safe-area-inset-bottom));
  }

  .mobile-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 5px;
    bottom: -5px;
    background-color: var(--contrast);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s ease;
    z-index: -1;
  }

  .mobile-header.is-scrolling-bar::after {
    opacity: 1;
  }
}

@media (max-width: 550px) {
  #cta-contato .svg-banner-projects {
    right: -90px;
    bottom: -250px;
  }
  footer .rights {
    flex-direction: column;
  }

  footer .rights p:last-of-type {
    padding-left: 0;
  }

  .mobile-header nav {
    width: 85%;
  }

  .grid-projetos {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .svg-banner-projects {
    transform: translateX(80px) translateY(20px);
  }

  .lightbox-dot.dist-3 {
    scale: 0.6;
  }

  .lightbox-dot.edge-left,
  .lightbox-dot.edge-right {
    opacity: 0.8;
    scale: 0.5;
  }

  .lightbox-dot.hidden {
    opacity: 0.4;
    scale: 0.5;
    width: 0;
    border-radius: 0;
    border: 0;

    margin-right: 0 !important;
    pointer-events: none;
  }

  .lightbox-dot.hidden::after {
    content: none;
  }

  #lightbox-dots {
    width: calc(10px * 5 + (10 * 0.6em));
  }
}

@media (max-width: 345px) {
  h1,
  .accordion-header h3 {
    font-size: clamp(1.65em, 3.4vw, 3em);
  }
}

@media (hover: hover) {
  .scroll-top:hover {
    background-color: var(--contrast);
  }
  .scroll-top:hover svg {
    fill: var(--light);
  }
}

@media (max-height: 600px) {
  .svg-banner-home {
    transform: translateX(128px) scale(2);
  }
  .svg-banner-projects {
    transform: translateX(0) scale(2);
  }

  #lightbox-dots {
    bottom: 0.3em !important;
  }

  .close-btn {
    transform: scale(1) !important;

    top: 1em !important;
    right: 1em !important;
  }

  #lightbox-img,
  #lightbox-preview-next img,
  #lightbox-preview-prev img,
  #lightbox-video,
  #lightbox-preview-next video,
  #lightbox-preview-prev video {
    object-fit: cover !important;
  }
}

@media (max-height: 480px) {
  #sobre .container {
    padding-bottom: 3em;
    padding-top: 3em;
  }
  #contato .container {
    padding-bottom: 5em;
    padding-top: 3em;
  }
  #contato .content {
    padding-bottom: 3em;
  }
}

@media (max-height: 360px) {
  #sobre .container {
    padding-bottom: 0;
  }
  #contato .container {
    padding-bottom: 1em;
  }
  #sobre .content {
    margin-bottom: 4.5em;
  }
}

/* CURSOR */

body.custom-cursor-active *,
body.autoscrolling-active * {
  cursor: none !important;
}

body.autoscrolling-active {
  scroll-behavior: auto !important;
}

body.custom-cursor-active .custom-cursor {
  display: block !important;
}

#cursor {
  opacity: 0;
}

.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  z-index: 99999;
  will-change: transform;

  transition: none;

  display: none;

  filter: drop-shadow(1px 0px 0px rgba(255, 255, 255, 0.5))
    drop-shadow(-1px 0px 0px rgba(255, 255, 255, 0.5))
    drop-shadow(0px 1px 0px rgba(255, 255, 255, 0.5))
    drop-shadow(0px -1px 0px rgba(255, 255, 255, 0.5));
}

.custom-cursor:not(.hidden) {
  opacity: 1;
}

.custom-cursor.hidden {
  opacity: 0 !important;
}

.custom-cursor .cursor-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 1.35em;
  height: 1.35em;
  -webkit-mask-image: var(--cursor-pointer);
  mask-image: var(--cursor-pointer);
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transform: translate(-20%, -5%);
  transform-origin: center center;
  background-color: black;
  transition:
    width 0.1s ease-out,
    height 0.1s ease-out,
    opacity 0.5s ease;
}

.custom-cursor.theme-light {
  filter: drop-shadow(1px 0px 0px rgba(0, 0, 0, 0.502))
    drop-shadow(-1px 0px 0px rgba(0, 0, 0, 0.5))
    drop-shadow(0px 1px 0px rgba(0, 0, 0, 0.5))
    drop-shadow(0px -1px 0px rgba(0, 0, 0, 0.5));
}

.custom-cursor.hover,
.custom-cursor.is-grab,
.custom-cursor.is-grabbing {
  filter: none !important;
}

.custom-cursor.theme-light .cursor-icon {
  background-color: white;
}

.custom-cursor.hover .cursor-icon {
  width: 1.7em;
  height: 1.7em;

  background-image: var(--cursor-hover);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent !important;

  -webkit-mask-image: none;
  mask-image: none;
  transform: translate(-25%, -5%);

  opacity: 1;
}

.custom-cursor.hover.click .cursor-icon {
  transform: translate(-25%, -5%);

  width: 1.5em;
  height: 1.5em;
}

.custom-cursor.click .cursor-icon {
  transform: translate(-20%, -5%);
  transition:
    width 0.1s ease-out,
    height 0.1s ease-out;

  width: 1.25em;
  height: 1.25em;
}

.custom-cursor.theme-light.hover .cursor-icon {
  background-color: white;
}

.custom-cursor.is-text .cursor-icon {
  width: 1.35em;
  height: 1.35em;
  border-radius: 0;
  opacity: 1;
  -webkit-mask-image: var(--cursor-text);
  mask-image: var(--cursor-text);
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transform: translate(-40%, -48%);
}

.custom-cursor.click.is-text .cursor-icon {
  background-color: black;
  mix-blend-mode: difference;
  transform: translate(-40%, -48%);

  width: 1.25em;
  height: 1.25em;
}

.custom-cursor.theme-light.click.is-text .cursor-icon {
  background-color: white;
  mix-blend-mode: difference;
}

.custom-cursor.is-autoscroll .cursor-icon,
.custom-cursor.is-autoscroll-up .cursor-icon,
.custom-cursor.is-autoscroll-down .cursor-icon {
  width: 1.6em;
  height: 1.6em;
  border-radius: 0;
  opacity: 1;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  transform: translate(-50%, -50%);
}

.custom-cursor.is-autoscroll .cursor-icon {
  -webkit-mask-image: var(--cursor-autoscroll);
  mask-image: var(--cursor-autoscroll);
}

.custom-cursor.is-autoscroll-up .cursor-icon {
  -webkit-mask-image: var(--cursor-autoscroll-up);
  mask-image: var(--cursor-autoscroll-up);
}

.custom-cursor.is-autoscroll-down .cursor-icon {
  -webkit-mask-image: var(--cursor-autoscroll-down);
  mask-image: var(--cursor-autoscroll-down);
}

.custom-cursor.is-grab .cursor-icon {
  background-image: var(--cursor-grab);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;

  -webkit-mask-image: none;
  mask-image: none;

  transform: translate(-40%, -20%);
  width: 1.6em;
  height: 1.6em;
}

.custom-cursor.is-grabbing .cursor-icon {
  background-image: var(--cursor-grabbing);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;

  -webkit-mask-image: none;
  mask-image: none;

  transform: translate(-40%, -20%) rotate(20deg);
  width: 1.5em;
  height: 1.5em;
}

@media (pointer: coarse) {
  body.custom-cursor-active * {
    cursor: auto !important;
  }
  .custom-cursor {
    display: none !important;
  }
}

.img-sobre,
.projeto-header h1,
[class*="bg-"] {
  pointer-events: auto !important;
}

.projeto-header h1 {
  user-select: text;
}

/* LOCKED FOOTER */

html.footer-is-locked,
body.footer-is-locked {
  touch-action: none !important;
  overflow: hidden;
  scrollbar-gutter: auto;
}

body.footer-is-locked .close-footer {
  align-items: center;
}

body.footer-is-locked .close-footer-arrow {
  margin-right: var(--scrollbar-width);
  margin-left: 0;
}

body.footer-is-locked .scroll-top,
body.footer-is-locked .lang-selector-floating {
  margin-right: var(--scrollbar-width);
}

html.footer-is-locked .scroll-top {
  background-color: var(--contrast);
}

html.footer-is-locked .scroll-top svg {
  fill: var(--secondary-darker);
}

html.footer-is-locked .scroll-top:focus,
html.footer-is-locked .scroll-top:focus-visible,
html.footer-is-locked .scroll-top:active,
html.footer-is-locked .lang-selector-floating:hover {
  background-color: var(--primary-darker);
}

html.footer-is-locked .scroll-top:hover {
  background-color: var(--primary-darker);
}

html.footer-is-locked .scroll-top:focus svg,
html.footer-is-locked .scroll-top:focus-visible svg,
html.footer-is-locked .scroll-top:active svg,
html.footer-is-locked .scroll-top:hover svg {
  fill: var(--contrast);
}

/* COMPONENTS */

#header-container,
#header-mobile-container,
#footer-container,
#footer-min-container {
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.components-ready #header-container,
.components-ready #header-mobile-container,
.components-ready #footer-container,
.components-ready #footer-min-container {
  opacity: 1;
  background-color: transparent;
}

#footer-min-container {
  min-height: 8em;
  background-color: var(--secondary);
}

/* LIGHTBOX */

#projeto-lightbox {
  display: none;
  height: 100dvh;

  width: 100%;
}

#lightbox-content-box {
  width: 94vw;

  min-height: 0;
  min-width: 0;
}

#lightbox-track {
  width: 100vw;
  height: auto;
}

.lightbox-slide {
  width: 94vw;
  height: auto;
  flex: 0 0 94vw;
}

.lightbox-slide:not(:last-of-type) {
  margin-right: calc((100vw - 94vw) / 2);
}

.lightbox-slide img,
.lightbox-slide video {
  max-width: 94vw !important;
  max-height: 100%;
  width: 94vw !important;
  height: auto;

  display: block;

  aspect-ratio: 1600 / 700;

  object-fit: contain;
  object-position: center center;
  user-select: none;
  pointer-events: none;

  border: 0.5px solid rgba(255, 255, 255, 0.15);
}

.lightbox-slide video {
  transform: translateZ(0);
  will-change: transform;

  backface-visibility: hidden;
  object-fit: cover !important;
}

.lightbox-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.95);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.lightbox-btn {
  background: none;
  border: none;
  cursor: pointer;
  position: absolute;
  transition:
    opacity 0.2s,
    transform 0.2s;
  padding: 10px 20px;

  z-index: 9999;
}

.prev-btn {
  left: 1em;
  top: 50%;
}

.next-btn {
  right: 1em;
  top: 50%;
}

.close-btn {
  background: var(--primary-darker);

  height: 3em;
  width: 3em;

  border-radius: 1.2em;

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

  top: -3.75em;
  right: calc(50% - 1.5em);

  transition: transform 0.1s ease;
}

.close-btn:hover {
  background-color: var(--contrast);
}

.close-btn:active {
  transform: scale(1.12);
}

.close-btn:hover svg {
  fill: var(--light);
}

#lightbox-close {
  transition: opacity 0.5s ease;
  opacity: 1;
}

#lightbox-close.idle-fade {
  opacity: 0.5;
  transition: opacity 1s ease;
}

#lightbox-close:hover {
  opacity: 1 !important;
}

.prev-btn,
.next-btn {
  transform: translateY(-50%);
  background: var(--secondary-darker);

  height: 3em;
  width: 3em;

  border-radius: 1.2em;

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

  transition: transform 0.1s ease;
}

.prev-btn:hover,
.next-btn:hover {
  background-color: var(--contrast);
}

.prev-btn:active,
.next-btn:active {
  transform: translateY(-50%) scale(1.12);
}

.prev-btn:hover svg,
.next-btn:hover svg {
  fill: var(--light);
}

.prev-btn svg,
.next-btn svg {
  fill: var(--dark);
  width: 1.5em;
  padding: 0;
}

.close-btn svg {
  fill: var(--contrast);
  width: 1.2em;
  padding: 0;
}

.prev-btn span {
  margin-right: 0.15em;
}

.next-btn span {
  margin-left: 0.15em;
}

.prev-btn span,
.next-btn span,
.close-btn span {
  width: fit-content;
  height: auto;
  display: flex;
}

#lightbox-dots {
  position: absolute;
  width: 100%;
  height: auto;
  overflow: hidden;

  bottom: -1.5em;

  transform: translateX(calc(-50% + 0.3em));
  left: 50%;

  text-align: center;
  align-items: center;

  z-index: 1100;
}

.lightbox-dot {
  display: inline-block;
  vertical-align: middle;

  aspect-ratio: 1 /1;

  width: 10px;
  margin-right: 0.6em;
  border-radius: 50%;
  background-color: white;
  cursor: pointer;
  position: relative;
  opacity: 1;

  scale: 0.7;

  transition:
    scale 0.3s ease-out,
    opacity 0.35s ease-out,
    width 0.35s ease-out,
    margin-right 0.35s ease-out;

  border: 0.25px solid rgba(0, 0, 0, 0.2);
}

.lightbox-dot:last-of-type {
  margin-right: 0;
}

.lightbox-dot::after {
  content: "";
  position: absolute;
  top: -7px;
  bottom: -7px;
  left: -7px;
  right: -7px;
}

.lightbox-dot.active {
  scale: 1 !important;
  background-color: var(--secondary-darker);
  opacity: 1 !important;
  border: none;

  transition:
    scale 0.1s ease-out,
    opacity 0.35s ease-out,
    width 0.35s ease-out,
    margin-right 0.35s ease-out;
}

@media (max-width: 960px) {
  .nav-btn {
    display: none;
  }
}

@media (max-width: 960px) and (pointer: coarse) {
  .mobile-header,
  .logo-mobile {
    display: flex !important;
  }

  #header-container,
  .header-content {
    display: none !important;
  }
}

/* COLORLESS */

html.colorless {
  --lightless: hsl(0, 0%, 4%);
  --darkless: hsl(0, 0%, 88%);

  transition:
    --light 0.5s ease,
    --dark 0.5s ease;

  animation: colorless 1s ease-in-out forwards;

  scrollbar-color: var(--primary-darker) var(--contrast);
}

html.colorless .header *,
html.colorless .mobile-header * {
  fill: var(--primary);
}

html.colorless .lang-selector-floating * {
  color: var(--light);
}

html.colorless .lang-selector-floating {
  background-color: var(--primary-darker);
}

html.colorless .lang-selector-floating:hover,
html.colorless .lang-selector-floating:active {
  background-color: var(--secondary);
}

html.colorless .lang-selector-floating:hover * {
  color: var(--light);
}

html.colorless .scroll-top:focus svg,
html.colorless .scroll-top:focus-visible svg,
html.colorless .scroll-top:active svg,
html.colorless .scroll-top:hover svg {
  fill: var(--light);
}

html.colorless .scroll-top:focus,
html.colorless .scroll-top:active,
html.colorless .scroll-top:hover {
  background-color: var(--primary);
}

html.colorless .footer-min * {
  color: var(--light);
}

html.colorless .footer-min .container {
  background-color: var(--primary);
}

html.colorless .header nav,
html.colorless .mobile-header nav,
html.colorless .projeto-header h2.tag {
  animation:
    pulsing 3s ease-in-out forwards,
    colorless 6s ease-in-out forwards;
}

html.colorless .projeto-header h2.tag {
  color: var(--secondary);
}

html.colorless .prev-btn:hover,
html.colorless .next-btn:hover {
  background-color: var(--primary-darker);
}

html.colorless .close-btn:hover {
  background-color: var(--secondary);
}

html.colorless .close-btn:hover svg,
html.colorless .prev-btn:hover svg,
html.colorless .next-btn:hover svg,
html.colorless .prev-btn svg,
html.colorless .next-btn svg {
  fill: var(--light);
}

html.colorless .link-explore:hover .arrow::after,
html.colorless .link-explore:active .arrow::after {
  background-color: var(--primaryless-darker);
}

html.colorless .link-explore:hover {
  color: var(--primaryless-darker) !important;
}
html.colorless ::selection {
  background-color: color-mix(in srgb, var(--secondary) 90%, transparent);
}

html.colorless ::-moz-selection {
  background-color: color-mix(in srgb, var(--secondary) 90%, transparent);
}

@keyframes pulsing {
  0% {
    opacity: 1;
  }

  15% {
    opacity: 0.6;
  }
  35% {
    opacity: 1;
  }

  65% {
    opacity: 0.4;
  }

  100% {
    opacity: 1;
  }
}

@keyframes colorless {
  0% {
  }
  100% {
    --light: var(--lightless);
    --dark: var(--darkless);
  }
}

/* TURBULENCE */

@media (max-width: 768px) {
  .btn-turbulence {
    padding: 0.5em !important;
  }
}

@media (max-width: 320px) {
  .btn-turbulence {
    padding: 0.25em !important;
  }
}

.cursor-falso-tutorial {
  position: absolute;
  top: 63%;
  left: 55%;
  z-index: 20;
  pointer-events: none;
  animation: apontaCursor 3s ease-in-out infinite;

  transition: opacity 0.1s ease-in;

  opacity: 1;
}

.cursor-falso-tutorial svg {
  width: clamp(40px, 8vw, 80px);
  aspect-ratio: 1 /1;
}

.tutorial-clicado .cursor-falso-tutorial {
  opacity: 0;
}

.cursor-falso-tutorial.is-hovering {
  opacity: 0;
  transition: opacity 0.2s ease-out;
}

@keyframes apontaCursor {
  0%,
  100% {
    transform: translateY(8px) scale(1);
  }
  50% {
    transform: translateY(5px) scale(0.9);
  }
}

.prancheta-tutorial:not(.tutorial-clicado) .btn-turbulence svg,
#lightbox-content-box .btn-turbulence.modo-tutorial:not(.tutorial-clicado) svg {
  animation: pulsingScale 3.5s ease-in-out infinite;
}

.prancheta-tutorial .btn-turbulence,
#lightbox-content-box .btn-turbulence.modo-tutorial {
  position: absolute;

  left: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%);
  padding: 0 !important;
  display: flex;
}

.prancheta-tutorial .btn-turbulence {
  top: 50%;
}

#lightbox-content-box .btn-turbulence.modo-tutorial {
  top: 50%;
}

.prancheta-tutorial .btn-turbulence svg,
#lightbox-content-box .btn-turbulence.modo-tutorial svg {
  transform-origin: center center;
  transform: scale(0.6);
  opacity: 0;
  height: clamp(72px, 30vw, 450px) !important;
  width: auto !important;
  aspect-ratio: 1 / 1;
}

.prancheta-tutorial .btn-turbulence.is-visible svg,
#lightbox-content-box .btn-turbulence.modo-tutorial.is-visible svg {
  opacity: 1;
  transform: scale(1);
  will-change: transform;
}

.prancheta-tutorial .btn-turbulence:hover svg,
#lightbox-content-box .btn-turbulence.modo-tutorial:hover svg {
  animation: pulsingHeart 2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.prancheta-tutorial .btn-turbulence:active svg,
#lightbox-content-box .btn-turbulence.modo-tutorial:active svg {
  transform: scale(1.08);
}

.prancheta[data-base="prancheta8"] .btn-turbulence svg,
#lightbox-content-box .btn-turbulence.run svg {
  fill: var(--primary) !important;

  height: clamp(48px, 20vw, 300px) !important;
}

.prancheta[data-base="prancheta8"] .btn-turbulence,
#lightbox-content-box .btn-turbulence.run {
  left: 50% !important;
  top: 50% !important ;
  bottom: auto !important;
  transform: translate(-50%, -50%);
}

.prancheta {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
  box-sizing: border-box;

  user-select: none;

  cursor: pointer;

  margin-bottom: 1.5em;
}

.prancheta:last-child {
  margin-bottom: 0;
}

.projeto-presentation .prancheta img,
.projeto-presentation .prancheta video {
  padding-bottom: 0;
}

.btn-turbulence svg {
  height: clamp(2em, 7vw, 6em);

  aspect-ratio: 1 / 1;
  fill: var(--light);

  transform: scale(0);
  transform-origin: center center;

  transition:
    transform 0.3s ease-out,
    opacity 0.2s ease-out;
}

.btn-turbulence {
  display: flex;
  position: absolute;

  cursor: pointer;
  z-index: 10;

  background-color: transparent;
  border: 0;

  opacity: 0;
  pointer-events: none;
  transform-origin: center center;

  top: auto;
  bottom: 0;
  left: 0;
  align-items: center;
  justify-content: center;

  padding: 1em;
}

.btn-turbulence:focus-visible {
  outline: none;
  border: 1px solid var(--dark);
}

.btn-turbulence.is-visible {
  opacity: 1;
  pointer-events: auto !important;

  transition:
    transform 0.3s ease-out,
    opacity 0.2s ease-out;
}

.btn-turbulence.is-visible svg {
  transition:
    transform 0.3s ease-out 60ms,
    opacity 0.2s ease-out 60ms;

  transform: scale(1);

  will-change: transform;
}

.btn-turbulence:hover svg {
  animation: pulsingHeart 2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.btn-turbulence:active svg {
  transform: scale(1.1);
  animation: none;
}

#lightbox-content-box .btn-turbulence {
  padding: 1em;
  bottom: 0 !important;
  left: 0 !important;
  top: auto;
}

#lightbox-content-box .btn-turbulence svg {
  height: clamp(2em, 8vw, 6em);
}

@keyframes pulsingScale {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes pulsingHeart {
  0% {
    transform: scale(1);
  }

  15% {
    transform: scale(1.05);
  }

  30% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.05);
  }

  75% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes pulsingHeartFooter {
  0% {
    transform: translateX(50%) scale(1);
  }

  15% {
    transform: translateX(50%) scale(1.1);
  }

  30% {
    transform: translateX(50%) scale(1);
  }

  45% {
    transform: translateX(50%) scale(1.1);
  }

  75% {
    transform: translateX(50%) scale(1);
  }

  100% {
    transform: translateX(50%) scale(1);
  }
}

@keyframes pulsingHeartColorCycle {
  0% {
    transform: scale(1);
  }

  15% {
    transform: scale(1.1);
  }

  30% {
    transform: scale(1);
  }

  45% {
    transform: scale(1.1);
  }

  75% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}