:root {
  --background: #ffffff;
  --foreground: #2b2b2b;
  --primary: #3664e8;
  --green: #6bbc0e;
  --muted: #f4f4f4;
  --muted-foreground: #777777;
  --border: #e6e6e6;
  --lime: #d4ff55;

  --film-ink: #ffffff;

  --film-gradient:
    linear-gradient(
      180deg,
      rgba(16,16,16,.20),
      transparent 35%,
      rgba(16,16,16,.40)
    );

  --display-font:
    "coolvetica",
    "Coolvetica",
    Arial,
    sans-serif;
}


/* =========================================
   RESET
========================================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 35px;
}

html,
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--display-font);
  -webkit-font-smoothing: antialiased;
}

body,
button,
input,
textarea,
select,
a,
p,
span,
div,
h1,
h2,
h3,
h4,
h5,
h6,
label {
  font-family: var(--display-font);
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  cursor: pointer;
}

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

img {
  max-width: 100%;
}

.page-width {
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: 36px;
}

h1,
h2,
h3 {
  font-weight: 400;
  letter-spacing: 0;
}


/* =========================================
   CABEÇALHO
========================================= */

.site-header {
  height: 100px;

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

.site-header nav {
  display: flex;

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

  gap: 44px;

  font-family: var(--display-font);

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

  letter-spacing: .1px;
}

.site-header nav a {
  display: flex;

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

  font-family: var(--display-font);
  font-weight: 300;

  line-height: 1;
}


/* =========================================
   BOTÃO MURAL NO MENU
========================================= */

.site-header nav a[href="mural.html"] {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  line-height: 0 !important;
}

.site-header nav a[href="mural.html"] img {
  display: block !important;

  width: 105px !important;
  height: auto !important;

  object-fit: contain !important;

  transform:
    translateY(-1px);
}


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

.intro {
  padding-top: 8px;
  text-align: center;
}

.intro-title-image {
  display: block;

  width:
    min(
      700px,
      72vw
    );

  height: auto;

  margin:
    8px auto 5px;

  object-fit: contain;
}

.intro > p {
  margin: 0 auto;

  color: var(--muted-foreground);

  font-family: var(--display-font);

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

  line-height: 1.35;
}


/* =========================================
   REEL
========================================= */

.reel-wrap {
  position: relative;

  max-width: 912px;

  margin:
    38px auto 0;
}

.reel-frame {
  position: relative;

  overflow: visible;

  aspect-ratio:
    16 / 8.3;

  border-radius: 7px;

  background:
    var(--foreground);
}

.reel-frame::after {
  content: "";

  position: absolute;

  z-index: 2;

  inset: 0;

  border-radius: 7px;

  background:
    var(--film-gradient);

  pointer-events: none;
}

.reel-youtube {
  position: absolute;

  z-index: 1;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  border-radius: 7px;

  background:
    var(--foreground);
}

.reel-youtube iframe {
  display: block;

  width: 100%;
  height: 100%;

  border: 0;

  border-radius: 7px;

  pointer-events: none;
}

.reel-topline {
  position: absolute;

  z-index: 4;

  top: 23px;
  right: 26px;

  color:
    var(--film-ink);

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

  letter-spacing: 1.5px;

  pointer-events: none;
}

.reel-topline span {
  display: flex;

  align-items: center;

  gap: 8px;
}

.reel-topline i {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background:
    var(--lime);
}


/* =========================================
   STICKER DÁ O PLAY
========================================= */

.reel-sticker {
  position: absolute;

  z-index: 6;

  right: -24px;
  top: -20px;

  display: flex;

  align-items: center;

  gap: 9px;

  padding:
    11px 15px;

  border-radius: 3px;

  background:
    var(--lime);

  font-size: 19px;
  font-weight: 400;

  transform:
    rotate(8deg);
}


/* =========================================
   ALIEN
========================================= */

.reel-alien {
  position: absolute;

  z-index: 7;

  left: -45px;
  bottom: -42px;

  width: 105px;
  height: auto;

  object-fit: contain;

  transform:
    rotate(-13deg);

  pointer-events: none;

  filter:
    drop-shadow(
      0 8px 16px
      rgba(0,0,0,.10)
    );
}


/* =========================================
   LEGENDA REEL
========================================= */

.reel-caption {
  display: flex;

  justify-content: space-between;

  margin-top: 13px;

  color:
    var(--muted-foreground);

  font-size: 10px;
  font-weight: 300;
}

.reel-caption > span:last-child {
  margin-left: auto;

  font-size: 8px;

  letter-spacing: 1px;
}


/* =========================================
   PROJETOS
========================================= */

.projects-section {
  padding-top: 28px;
}

.section-eyebrow {
  display: flex;

  justify-content: space-between;

  color:
    var(--muted-foreground);

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

  letter-spacing: 1.5px;
}

.projects-section > .section-eyebrow {
  padding-top: 24px;

  border-top:
    1px solid
    var(--border);
}

.projects-heading {
  display: flex;

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

  gap: 20px;

  margin:
    22px 0 26px;
}

h2 {
  font-size: 43px;
  font-weight: 400;

  line-height: 1.13;
}

.title-dot {
  color:
    var(--primary);
}


/* =========================================
   FILTROS
========================================= */

.filter-list {
  display: flex;

  gap: 5px;
}

.filter-button {
  height: 36px;

  padding:
    0 15px;

  border: 0;

  border-radius: 999px;

  background:
    transparent;

  color:
    var(--muted-foreground);

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

  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease;
}

.filter-button:hover {
  transform:
    translateY(-1px);
}

.filter-button[
  aria-pressed="true"
] {
  background:
    #6bbc0e;

  color:
    #ffffff;
}


/* =========================================
   GRID
========================================= */

.project-grid {
  display: grid;

  gap: 24px;

  align-items: start;
}


/* curtos */

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


/* longos */

.project-grid.long-grid {
  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );
}


/* tutoriais */

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


/* =========================================
   CARDS
========================================= */

.project {
  min-width: 0;
}

.project-cover {
  position: relative;

  display: block;

  width: 100%;

  overflow: hidden;

  padding: 0;

  border: 0;

  border-radius: 5px;

  background:
    #dddddd;

  isolation: isolate;
}

.project-short
.project-cover {
  aspect-ratio:
    9 / 16;
}

.project-long
.project-cover {
  aspect-ratio:
    16 / 9;
}


/* =========================================
   THUMBNAILS
========================================= */

.project-cover img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transform:
    scale(1.012);

  transform-origin:
    center center;

  transition:
    transform .4s ease;

  backface-visibility:
    hidden;

  -webkit-backface-visibility:
    hidden;
}

.project-cover:hover img {
  transform:
    scale(1.045);
}


/* correção dos tutoriais */

#tutorialGrid .project-cover {
  position: relative;

  overflow: hidden;

  background:
    transparent;
}

#tutorialGrid .project-cover img {
  position: absolute;

  top: -2px;
  left: -2px;

  width:
    calc(
      100% + 4px
    );

  height:
    calc(
      100% + 4px
    );

  max-width: none;

  object-fit: cover;

  transform:
    scale(1.01);

  transition:
    transform .4s ease;
}

#tutorialGrid
.project-cover:hover img {
  transform:
    scale(1.045);
}


/* =========================================
   PLAY
========================================= */

.project-play {
  position: absolute;

  z-index: 3;

  top: 50%;
  left: 50%;

  width: 42px;
  height: 42px;

  display: flex;

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

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

  border-radius: 50%;

  background:
    rgba(18,18,18,.30);

  color:
    #ffffff;

  transform:
    translate(
      -50%,
      -50%
    );
}


/* =========================================
   TEXTOS DOS VÍDEOS
========================================= */

.project-details {
  margin-top: 15px;
}

.project-details h3 {
  margin: 0;

  color:
    var(--foreground);

  font-size: 22px;
  font-weight: 400;

  line-height: 1.05;
}

.project-details p {
  margin:
    4px 0 0;

  color:
    var(--muted-foreground);

  font-size: 11px;
  font-weight: 300;
}


/* =========================================
   RODAPÉ DA GRADE
========================================= */

.project-footnote {
  display: flex;

  justify-content: space-between;

  margin-top: 28px;

  padding:
    28px 0 40px;

  border-top:
    1px solid
    var(--border);

  color:
    var(--muted-foreground);

  font-size: 11px;
  font-weight: 300;
}


/* =========================================
   TUTORIAIS
========================================= */

.tutorials-projects {
  padding-bottom: 70px;
}


/* =========================================
   CONTATO
========================================= */

.contact-anchor {
  height: 0;

  overflow: hidden;
}


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

.dialog-backdrop {
  position: fixed;

  z-index: 999;

  inset: 0;

  display: none;

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

  padding: 24px;

  background:
    rgba(0,0,0,.42);
}

.dialog-backdrop.open {
  display: flex;
}

.dialog-panel {
  position: relative;

  width:
    min(
      900px,
      95vw
    );

  padding: 28px;

  border-radius: 12px;

  background:
    #ffffff;

  box-shadow:
    0 24px 80px
    rgba(0,0,0,.25);
}

.dialog-panel h3 {
  margin:
    0 0 14px;

  font-size: 26px;
}

.dialog-close {
  position: absolute;

  top: 10px;
  right: 12px;

  border: 0;

  background:
    transparent;

  font-size: 25px;
}

.video-dialog iframe {
  display: block;

  width: 100%;

  aspect-ratio:
    16 / 9;

  border: 0;

  border-radius: 4px;

  background:
    #222222;
}


/* =========================================
   CURSORES
========================================= */

html,
body,
body * {
  cursor:
    url("cursor-arrow.png")
    0 0,
    auto;
}

a,
button,
.project-cover,
.filter-button,
.js-video,
input[type="range"],
[role="button"] {
  cursor:
    url("cursor-hand.png")
    0 0,
    pointer !important;
}

a:active,
button:active,
.project-cover:active,
.filter-button:active,
.js-video:active,
[role="button"]:active {
  cursor:
    url("cursor-wait.png")
    0 0,
    wait !important;
}


/* =========================================
   PLAYER DE MÚSICA
========================================= */

.music-player {
  position: fixed;

  z-index: 1200;

  top: 16px;
  right: 18px;

  width: 430px;

  max-width:
    calc(
      100vw - 36px
    );

  height: 72px;

  display: grid;

  grid-template-columns:
    50px
    minmax(0,1fr)
    94px
    62px;

  align-items: center;

  gap: 10px;

  padding:
    9px
    34px
    9px
    10px;

  overflow: hidden;

  border:
    1px solid
    rgba(43,43,43,.10);

  border-radius: 18px;

  background:
    rgba(255,255,255,.96);

  box-shadow:
    0 10px 28px
    rgba(0,0,0,.08);

  color:
    var(--foreground);

  transition:
    opacity .24s ease,
    transform .24s ease;
}

.music-player.is-hidden {
  display: none;
}

.music-cover {
  display: block;

  width: 50px;
  height: 50px;

  object-fit: cover;

  border-radius: 10px;

  background:
    var(--muted);
}

.music-info {
  min-width: 0;
}

.music-now {
  display: block;

  color:
    var(--muted-foreground);

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

  line-height: 1;
}

.music-title {
  display: block;

  margin-top: 5px;

  overflow: hidden;

  color:
    var(--foreground);

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

  line-height: 1.05;

  white-space: nowrap;

  text-overflow: ellipsis;
}


/* =========================================
   CONTROLES
========================================= */

.music-controls {
  width: 94px;

  display: flex;

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

  gap: 10px;

  flex-shrink: 0;
}

.music-control,
.music-mini-control {
  flex:
    0 0 auto;

  padding: 0;

  border: 0;

  background:
    transparent;

  color:
    var(--foreground);

  font-family:
    Arial,
    sans-serif;

  font-size: 14px;
  font-weight: 700;

  line-height: 1;

  transition:
    transform .16s ease,
    opacity .16s ease;
}

.music-control:hover,
.music-mini-control:hover {
  transform:
    scale(1.08);

  opacity:
    .72;
}

.music-play {
  font-size: 24px;
}


/* =========================================
   FECHAR PLAYER
========================================= */

.music-close {
  position: absolute;

  z-index: 3;

  top: 7px;
  right: 8px;

  width: 20px;
  height: 20px;

  display: flex;

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

  padding: 0;

  border:
    1px solid
    rgba(43,43,43,.08);

  border-radius: 50%;

  background:
    #f5f5f5;

  color:
    var(--muted-foreground);

  font-family:
    Arial,
    sans-serif;

  font-size: 17px;

  line-height: 1;
}


/* =========================================
   VOLUME
========================================= */

.music-volume-wrap {
  width: 62px;
  height: 12px;

  display: flex;

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

  flex-shrink: 0;
}

.music-volume {
  --volume-fill: 50%;

  appearance: none;

  -webkit-appearance:
    none;

  width: 62px;
  height: 6px;

  margin: 0;

  padding: 0;

  border: 0;

  border-radius: 999px;

  outline: 0;

  background:
    linear-gradient(
      to right,
      var(--foreground) 0%,
      var(--foreground) var(--volume-fill),
      #b9b9b9 var(--volume-fill),
      #b9b9b9 100%
    );
}

.music-volume
::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;

  border: 0;

  border-radius: 999px;

  background:
    transparent;
}

.music-volume
::-webkit-slider-thumb {
  -webkit-appearance:
    none;

  appearance: none;

  width: 1px;
  height: 14px;

  margin-top: -4px;

  border: 0;

  background:
    transparent;
}

.music-volume
::-moz-range-track {
  height: 6px;

  border: 0;

  border-radius: 999px;

  background:
    #b9b9b9;
}

.music-volume
::-moz-range-progress {
  height: 6px;

  border-radius: 999px;

  background:
    var(--foreground);
}

.music-volume
::-moz-range-thumb {
  width: 1px;
  height: 14px;

  border: 0;

  background:
    transparent;
}


/* =========================================
   MINI PLAYER
========================================= */

.music-player-mini {
  position: fixed;

  z-index: 1201;

  top: 16px;
  right: 18px;

  width: 144px;
  height: 42px;

  display: flex;

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

  gap: 12px;

  border:
    1px solid
    rgba(43,43,43,.10);

  border-radius: 15px;

  background:
    rgba(255,255,255,.96);

  box-shadow:
    0 9px 24px
    rgba(0,0,0,.07);

  color:
    var(--foreground);
}

.music-player-mini.is-hidden {
  display: none;
}

.music-mini-play {
  font-size: 21px;
}


/* =========================================
   ANIMAÇÕES PLAYER
========================================= */

.music-player.is-fading-out {
  opacity: 0;

  transform:
    translateY(-10px);
}

.music-player.is-fading-in {
  animation:
    musicMainFadeIn
    .28s
    ease
    forwards;
}

@keyframes musicMainFadeIn {

  from {
    opacity: 0;

    transform:
      translateY(9px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}

.music-player-mini.is-dropping {
  animation:
    musicMiniDrop
    .34s
    cubic-bezier(
      .22,
      .8,
      .32,
      1
    )
    forwards;
}

.music-player-mini.is-rising {
  animation:
    musicMiniRise
    .24s
    ease
    forwards;
}

@keyframes musicMiniDrop {

  from {
    opacity: 0;

    transform:
      translateY(-70px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }

}

@keyframes musicMiniRise {

  from {
    opacity: 1;

    transform:
      translateY(0);
  }

  to {
    opacity: 0;

    transform:
      translateY(-60px);
  }

}


/* =========================================
   LOADING
========================================= */

.site-loader {
  position: fixed;

  z-index: 99999;

  inset: 0;

  display: flex;

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

  background:
    #ffffff;

  overflow: hidden;

  transform:
    translateY(0);

  transition:
    transform .85s
    cubic-bezier(.76,0,.24,1);
}

.site-loader.is-leaving {
  transform:
    translateY(-100%);
}

.site-loader.is-gone {
  display: none;
}

.loader-content {
  width:
    min(
      580px,
      calc(100vw - 50px)
    );

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;
}

.loader-video {
  display: block;

  width: 260px;

  max-width: 70vw;

  height: auto;

  margin-bottom: 40px;

  object-fit: contain;
}

.loader-progress {
  position: relative;

  width: 100%;
  height: 4px;

  overflow: hidden;

  background:
    rgba(107,188,14,.20);
}

.loader-progress-fill {
  width: 0%;
  height: 100%;

  background:
    #6bbc0e;

  transition:
    width .25s ease;
}

.loader-text {
  min-height: 26px;

  margin:
    22px 0 0;

  color:
    #6bbc0e;

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

  transition:
    opacity .18s ease,
    transform .18s ease;
}

.loader-text.is-changing {
  opacity: 0;

  transform:
    translateY(5px);
}

body.is-loading {
  overflow: hidden;
}


/* =========================================
   BOTÃO CURTIR
========================================= */

.like-button {
  position: fixed;

  z-index: 1500;

  left: 24px;
  bottom: 22px;

  width: 150px;
  height: auto;

  margin: 0;
  padding: 0;

  border: 0;

  background:
    transparent;

  transform:
    rotate(-3deg);

  transform-origin:
    center;

  transition:
    transform .14s ease,
    filter .14s ease,
    opacity .18s ease;

  user-select: none;

  -webkit-user-select:
    none;
}

.like-button img {
  display: block;

  width: 100%;
  height: auto;

  pointer-events: none;

  user-select: none;

  -webkit-user-drag:
    none;

  filter:
    drop-shadow(
      0 7px 12px
      rgba(0,0,0,.10)
    );
}

.like-button:hover {
  transform:
    rotate(-3deg)
    scale(1.035);
}

.like-button.is-pressing {
  transform:
    rotate(-1deg)
    scale(.94);
}

.like-button.is-liked {
  animation:
    likePop
    .38s
    cubic-bezier(.2,.8,.3,1.35);
}

@keyframes likePop {

  0% {
    transform:
      rotate(-3deg)
      scale(.94);
  }

  55% {
    transform:
      rotate(2deg)
      scale(1.10);
  }

  100% {
    transform:
      rotate(-3deg)
      scale(1);
  }

}

body.is-loading
.like-button {
  opacity: 0;

  pointer-events: none;
}


/* =========================================
   MOBILE
========================================= */

@media
(max-width: 700px) {

  .page-width {
    padding-inline:
      22px;
  }


  .site-header {
    height: 80px;
  }


  .site-header nav {
    display: none;
  }


  .intro {
    padding-top:
      8px;
  }


  .intro-title-image {
    width:
      min(
        520px,
        86vw
      );

    margin:
      8px auto 4px;
  }


  .intro > p {
    max-width:
      340px;

    margin-inline:
      auto;

    font-size:
      16px;
  }


  .desktop-break {
    display: none;
  }


  .reel-wrap {
    margin-top:
      35px;
  }


  .reel-frame {
    aspect-ratio:
      16 / 9;
  }


  .reel-sticker {
    right:
      -8px;

    top:
      -16px;

    padding:
      7px 10px;

    font-size:
      15px;
  }


  .reel-alien {
    left:
      -18px;

    bottom:
      -30px;

    width:
      75px;
  }


  .reel-topline {
    top:
      15px;

    right:
      15px;

    font-size:
      6px;
  }


  .projects-heading {
    flex-direction:
      column;

    align-items:
      flex-start;
  }


  h2 {
    font-size:
      34px;
  }


  .project-grid,
  .project-grid.short-grid,
  .project-grid.long-grid,
  #tutorialGrid {
    grid-template-columns:
      1fr;
  }


  .project-grid {
    gap:
      32px;
  }


  .music-player {
    top:
      12px;

    left:
      50%;

    right:
      auto;

    width:
      calc(
        100vw - 28px
      );

    height:
      66px;

    grid-template-columns:
      44px
      minmax(70px,1fr)
      82px
      48px;

    gap:
      7px;

    padding:
      7px
      32px
      7px
      9px;

    border-radius:
      16px;

    transform:
      translateX(-50%);
  }


  .music-player.is-fading-out {
    transform:
      translateX(-50%)
      translateY(-10px);
  }


  .music-cover {
    width:
      44px;

    height:
      44px;

    border-radius:
      9px;
  }


  .music-now {
    font-size:
      9px;
  }


  .music-title {
    font-size:
      16px;
  }


  .music-controls {
    width:
      82px;

    gap:
      8px;
  }


  .music-control {
    font-size:
      12px;
  }


  .music-play {
    font-size:
      21px;
  }


  .music-volume-wrap,
  .music-volume {
    width:
      48px;
  }


  .music-player-mini {
    top:
      12px;

    left:
      50%;

    right:
      auto;

    transform:
      translateX(-50%);
  }


  .loader-content {
    width:
      calc(
        100vw - 44px
      );
  }


  .loader-video {
    width:
      190px;

    margin-bottom:
      32px;
  }


  .loader-text {
    font-size:
      17px;

    margin-top:
      18px;
  }


  .like-button {
    left:
      14px;

    bottom:
      14px;

    width:
      110px;
  }


  @keyframes musicMainFadeIn {

    from {
      opacity: 0;

      transform:
        translateX(-50%)
        translateY(9px);
    }

    to {
      opacity: 1;

      transform:
        translateX(-50%)
        translateY(0);
    }

  }


  @keyframes musicMiniDrop {

    from {
      opacity: 0;

      transform:
        translateX(-50%)
        translateY(-70px);
    }

    to {
      opacity: 1;

      transform:
        translateX(-50%)
        translateY(0);
    }

  }


  @keyframes musicMiniRise {

    from {
      opacity: 1;

      transform:
        translateX(-50%)
        translateY(0);
    }

    to {
      opacity: 0;

      transform:
        translateX(-50%)
        translateY(-60px);
    }

  }

}


/* =========================================
   REDUZIR ANIMAÇÕES
========================================= */

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

  html {
    scroll-behavior:
      auto;
  }


  *,
  *::before,
  *::after {
    transition:
      none !important;

    animation-duration:
      .01ms !important;
  }

}