/* Stronger navigation and contextual project artwork */
.lofi-player {
  position: absolute;
  z-index: 4;
  top: 112px;
  right: 5vw;
  width: min(330px, 42vw);
  background: rgba(19, 13, 9, .78);
  border: 1px solid rgba(214, 187, 137, .38);
  border-radius: 4px;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .3);
  backdrop-filter: blur(12px);
  transition: width .25s ease, background .25s ease;
}
.lofi-player[open] { width: min(440px, 50vw); background: rgba(19, 13, 9, .94); }
.lofi-player-label {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 52px;
  padding: 9px 12px;
  color: #d7b77c;
  cursor: pointer;
  list-style: none;
}
.lofi-player-label::-webkit-details-marker { display: none; }
.lofi-icon {
  display: grid;
  place-items: center;
  flex: 0 0 27px;
  width: 27px; height: 27px;
  border: 1px solid rgba(214, 187, 137, .42);
  border-radius: 50%;
  font-family: "Cormorant Garamond", serif;
}
.lofi-copy { flex: 1; line-height: 1.2; }
.lofi-player-label strong,
.lofi-player-label small { display: block; }
.lofi-player-label strong {
  color: #eee4d0;
  font: 600 .63rem Inter, sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.lofi-player-label small {
  margin-top: 3px;
  color: #9f927e;
  font: italic 400 .82rem "Cormorant Garamond", serif;
}
.lofi-action {
  color: #d7b77c;
  font: 600 .58rem Inter, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.lofi-action::after { content: " +"; }
.lofi-player[open] .lofi-action::before { content: "Fechar"; }
.lofi-player[open] .lofi-action { font-size: 0; }
.lofi-player[open] .lofi-action::before { font-size: .58rem; }
.lofi-player[open] .lofi-action::after { content: " −"; font-size: .7rem; }
.lofi-player-panel { padding: 0 10px 10px; }
.lofi-player iframe {
  display: block;
  border: 0;
  border-radius: 3px;
}

.brand-seal {
  position: relative;
  width: min(340px, 100%);
  margin: 38px 0 0;
  overflow: hidden;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.brand-seal.reveal { opacity: 1; transform: none; }
.brand-seal img {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  filter: sepia(.2) contrast(1.08);
}
.brand-seal::after {
  content: "";
  position: absolute;
  top: 7%;
  bottom: 8%;
  left: 1%;
  width: 2px;
  opacity: 0;
  background: linear-gradient(transparent, rgba(65, 39, 18, .7) 22%, rgba(65, 39, 18, .9) 76%, transparent);
  box-shadow: 0 0 12px rgba(79, 48, 20, .28);
}
.brand-seal.visible img { animation: logo-ink-draw 2.8s cubic-bezier(.5, 0, .2, 1) forwards; }
.brand-seal.visible::after { animation: logo-ink-line 2.8s cubic-bezier(.5, 0, .2, 1) forwards; }

@keyframes logo-ink-draw {
  0% { opacity: .18; clip-path: inset(0 100% 0 0); }
  35% { opacity: .7; }
  100% { opacity: .82; clip-path: inset(0 0 0 0); }
}
@keyframes logo-ink-line {
  0% { left: 1%; opacity: 0; }
  10% { opacity: .7; }
  90% { opacity: .45; }
  100% { left: 99%; opacity: 0; }
}

@media (min-width: 851px) {
  .site-header nav {
    gap: 5px;
    padding: 6px;
    background: rgba(11, 8, 6, .72);
    border: 1px solid rgba(214, 187, 137, .32);
    border-radius: 3px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .28);
    backdrop-filter: blur(12px);
  }
  .site-header nav a {
    position: relative;
    color: #eee4d0;
    font-weight: 600;
    padding: 10px 16px;
  }
  .site-header nav a:hover { background: rgba(182, 138, 73, .18); }
  .site-header nav a::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 5px;
    height: 1px;
    background: var(--gold);
    transform: scaleX(0);
    transition: transform .2s;
  }
  .site-header nav a:hover::after { transform: scaleX(1); }
}

.project { padding-top: 110px; }
.project-character {
  position: relative;
  width: min(260px, 100%);
  margin: 18px 0 28px;
  align-self: center;
}
.project-character::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  bottom: 3%;
  height: 10%;
  border-radius: 50%;
  background: rgba(79, 50, 21, .18);
  filter: blur(13px);
}
.project-character img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
  filter: sepia(.12) saturate(.82) contrast(1.03);
}

@media (max-width: 850px) {
  .lofi-player,
  .lofi-player[open] { top: 86px; right: 6vw; width: min(88vw, 390px); }
  .lofi-player-label small { display: none; }
  .brand-seal {
    width: min(280px, 92%);
    margin-top: 28px;
  }
  .menu-button {
    background: rgba(11, 8, 6, .82);
    border-color: rgba(214, 187, 137, .52);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
  }
  .site-header nav { gap: 3px; padding: 16px 6vw; }
  .site-header nav a { padding: 11px 8px; font-weight: 600; }
  .project-character { width: min(230px, 72vw); margin: 0 auto 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-seal img { opacity: .82; clip-path: none; animation: none !important; }
  .brand-seal::after { display: none; }
}