/* Teste reversível solicitado nos vídeos de 16/09/2026. */
.nav a[aria-current=page]::after{display:none}
.nav a:hover,.nav a:focus-visible{background:#eaeaea;color:#000}
.nav a:hover .icon-arrow,.nav a:focus-visible .icon-arrow{filter:brightness(0)}
.nav a .icon-arrow{transition:filter .2s}
.case-navigation a:hover,.case-navigation a:focus-visible{background:#eaeaea;color:#000}
.case-navigation a:hover img,.case-navigation a:focus-visible img{filter:brightness(0)}
.about-surface{border-radius:8px}
.metal-clip{border-radius:0 0 8px 8px}
.cover img.cover-alternate{inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .35s ease}
@media(hover:hover) and (pointer:fine){.cover:hover img.cover-alternate{opacity:1}}
.cover:focus-visible img.cover-alternate{opacity:1}
.reveal{animation:none}
[data-text-entry=pending]{opacity:0;transform:translateY(14px)}
[data-text-entry=visible]{opacity:1;transform:none;transition:opacity .65s ease,transform .75s cubic-bezier(.22,1,.36,1);transition-delay:var(--entry-delay,0ms)}
.back-to-top{position:fixed;right:calc(var(--margin) + 16px);bottom:112px;width:44px;height:44px;border-radius:50%;background:rgba(243,243,243,.8);color:#000;display:grid;place-items:center;z-index:25;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px);transition:opacity .2s,transform .2s,background .2s,visibility .2s}
.back-to-top.is-visible{opacity:.6;visibility:visible;pointer-events:auto;transform:none}
.back-to-top:hover,.back-to-top:focus-visible{opacity:1;background:#f3f3f3}
.back-to-top svg{width:20px;height:20px}
@media(min-width:901px) and (min-height:501px), (min-width:1201px), (min-width:901px) and (pointer:fine){
 :root{--sidebar:clamp(300px,23.421053vw,445px)}
 #sidebar{--u:clamp(.75px,.052631579vw,1px);--gap:8px;--radius:8px}
 #sidebar .profile-meta,#sidebar .positioning{font-size:max(14px,calc(16 * var(--u)))}
 #sidebar .nav a,#sidebar .footer{font-size:14px}
 .case-navigation{padding-bottom:var(--margin)}
 .metal-clip iframe{width:180%;left:-40%}
}
@media(max-width:900px), (min-width:901px) and (max-width:1200px) and (max-height:500px) and (pointer:coarse){
 .metal-link{height:clamp(128px,23vw,196px);aspect-ratio:auto}
 .metal-link .metal-clip{height:100%;min-height:0;aspect-ratio:auto}
 .metal-link .metal-clip iframe{height:160%;top:50%;transform:translateY(-50%)}
 .metal-clip{height:auto;min-height:91px;aspect-ratio:1323 / 305.1}
 .metal-clip iframe{height:max(300px,166.6667%);top:50%;transform:translateY(-50%)}
 #mobile-menu{position:relative;inset:auto;margin:16px 16px 0;background:transparent}
 #main{padding-top:0}
 body.menu-open{position:fixed;top:var(--menu-scroll-offset,0px);width:100%;overflow:hidden}
 body.menu-open #main{visibility:hidden}
 #mobile-menu.is-open,.about-page #mobile-menu.is-open{position:fixed;inset:0;margin:0;padding:16px;background:#fff;overflow-y:auto;height:100dvh;overscroll-behavior:contain}
 #mobile-menu.is-open .expanded-menu{background:#fff}
 .menu-open .back-to-top{display:none}
 .back-to-top{right:24px;bottom:120px}
}
@media(prefers-reduced-motion:reduce){[data-text-entry]{opacity:1;transform:none;transition:none}}

/* Revisão 17/09: identidade tablet e 72 px abaixo dos botões dos cases. */
.case-navigation{padding-top:56px;padding-bottom:72px}
.back-to-top{bottom:190px}
.case-cursor{position:fixed;left:0;top:0;z-index:60;pointer-events:none;background:var(--green);color:#000;padding:10px 14px;border-radius:4px;font:500 12px/1.2 Mono,monospace;text-transform:uppercase;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s;will-change:transform}
.case-cursor.is-visible{opacity:1;visibility:visible}
@media(max-width:900px), (min-width:901px) and (max-width:1200px) and (max-height:500px) and (pointer:coarse){
 .mobile-profile .profile-details{min-width:0;gap:10px}
 .mobile-profile .profile-meta{display:none}
 .is-open .mobile-profile .profile-meta{display:grid}
 .is-open .mobile-profile .portrait{display:none}
 .is-open .mobile-profile .profile-details{width:auto}
 .case-page+.mobile-footer{padding-top:0}
}
@media(min-width:600px) and (max-width:900px){
 .mobile-profile .profile-meta{display:grid;font-size:14px;gap:4px}
 .mobile-profile .availability{gap:6px}
 .is-open .mobile-profile .portrait{display:block}
 .mobile-profile{gap:24px}
 /* The status is already visible in the mobile header at these widths. */
 .contact-main .mobile-availability{display:none}
}
@media(hover:none),(pointer:coarse){.case-cursor{display:none}}

/* Sobre: mantém a escala estável e deixa os painéis passarem à frente do logo. */
@media(min-width:901px) and (min-height:501px), (min-width:1201px), (min-width:901px) and (pointer:fine){
 :root{--u:1px}
 .accordion-scroll{z-index:4}
 .metal-link .metal-clip iframe{height:550px;top:50%;transform:translateY(-50%)}
}

/* No tablet o logo continua no fundo, inteiro na altura e recortado apenas nas laterais. */
@media(min-width:600px) and (min-height:600px) and (max-width:900px){
 #main.about-main{position:fixed;inset:0 16px 0;margin:0;padding-top:0;overflow:hidden!important}
 .about-surface{position:absolute;inset:120.878px 0 0;padding:0;overflow:hidden}
 .accordion-scroll{position:absolute;inset:0;overflow-y:auto;padding:24px 0 146px;z-index:4}
 .metal-link{position:absolute;z-index:3;left:calc(-1 * var(--margin));right:calc(-1 * var(--margin));bottom:0;width:auto;height:196px;margin:0}
 .metal-link .metal-clip{height:100%;min-height:0;aspect-ratio:auto}
 .metal-link .metal-clip iframe{display:block;width:180%;height:160%;left:-40%;top:50%;transform:translateY(-50%)}
}

/* On phones, the footer and logo rest at the bottom when the accordions are
   closed; opened panels can still extend the page and scroll normally. */
@media(max-width:599px), (max-width:900px) and (max-height:500px), (min-width:901px) and (max-width:1200px) and (max-height:500px) and (pointer:coarse){
 .about-surface{min-height:calc(100dvh - 120.878px)}
 .about-surface>.mobile-footer{margin-top:auto}
}

/* Contact columns must fit the space left by the fixed sidebar. */
@media(min-width:901px) and (min-height:501px), (min-width:1201px), (min-width:901px) and (pointer:fine){
 .contact-surface{
  grid-template-columns:minmax(0,408px) minmax(0,600px);
  gap:clamp(24px,3vw,72px);
  padding-left:clamp(24px,3vw,64px);
  padding-right:clamp(24px,3vw,64px);
 }
 .contact-info,.form-scroll{min-width:0}
 #contact-form{padding-left:clamp(24px,3vw,80px);padding-right:clamp(24px,3vw,80px)}
}
@media(min-width:901px) and (max-width:1199px) and (min-height:501px), (min-width:901px) and (max-width:1199px) and (pointer:fine){
 .contact-surface{
  display:block;
  overflow-y:auto;
  padding-top:32px;
  padding-bottom:32px;
  scrollbar-width:auto;
 }
 .contact-info{padding-top:0}
 .contact-description{max-width:620px}
 .contact-direct{margin-top:24px}
 .form-scroll{height:auto;overflow:visible;padding:32px 0 0}
 #contact-form{min-height:0}
}

/* Keep newly opened accordion headings in view below the mobile menu. */
.accordion-scroll{scroll-padding-top:24px}
.metal-fallback{position:absolute;left:50%;top:50%;width:auto;max-width:none;height:250%;transform:translate(-50%,-50%);z-index:1;pointer-events:none}
.metal-clip.is-ready .metal-fallback{opacity:0;transition:opacity .25s ease}
@media(min-width:600px) and (min-height:600px) and (max-width:900px){
 .metal-link .metal-clip iframe{height:150%}
 .metal-fallback{height:300%}
}
@media(max-width:900px) and (max-height:500px), (min-width:901px) and (max-width:1200px) and (max-height:500px) and (pointer:coarse){
 .metal-link .metal-clip iframe{height:175%}
 .metal-fallback{height:285%}
}
@media(max-width:900px), (min-width:901px) and (max-width:1200px) and (max-height:500px) and (pointer:coarse){
 .accordion-scroll{scroll-padding-top:calc(var(--mobile-menu-height,104.878px) + 16px)}
 .accordions summary{scroll-margin-top:calc(var(--mobile-menu-height,104.878px) + 16px)}
}

/* Sobre: uma única regra para o logo em todas as telas.
   Ele ocupa as laterais reais da viewport, começa inteiro no topo e é
   recortado somente nas laterais e na base. */
.metal-link,.metal-link .metal-clip{overflow:hidden}
.metal-link .metal-clip iframe,.metal-link .metal-fallback{
 width:auto;
 min-width:180%;
 max-width:none;
 height:175%;
 aspect-ratio:1323 / 305.1;
 left:50%;
 top:0;
 transform:translateX(-50%);
}

@media(max-width:900px), (min-width:901px) and (max-width:1200px) and (max-height:500px) and (pointer:coarse){
 .about-surface{--about-logo-height:clamp(128px,23vw,196px)}
 .about-surface .accordion-scroll{order:1}
 .about-surface>.mobile-footer{
  order:2;
  flex:none;
  padding:0;
  margin:40px 0 24px;
  position:relative;
  z-index:4;
  transform:none;
 }
 .about-surface>.metal-link{
  order:3;
  position:relative;
  left:auto;
  right:auto;
  bottom:auto;
  width:calc(100% + (2 * var(--margin)));
  height:var(--about-logo-height);
  margin:0 0 0 calc(-1 * var(--margin));
 }
 .about-surface .metal-link .metal-clip{height:100%;margin:0}
 .about-surface .metal-link .metal-clip iframe,
 .about-surface .metal-fallback{height:175%;top:0;transform:translateX(-50%)}
}

@media(max-width:599px), (max-width:900px) and (max-height:500px), (min-width:901px) and (max-width:1200px) and (max-height:500px) and (pointer:coarse){
 .about-surface>.mobile-footer{margin-top:auto}
 .about-surface .accordion-scroll{z-index:5}
}

/* The shader viewport follows one fixed aspect ratio at every breakpoint.
   Moving that viewport by a fraction of its own height puts the visible rings
   at the top of the crop without stretching them during orientation changes. */
.about-surface .metal-link,
.about-surface .metal-link .metal-clip{background:var(--green)}
.about-surface .metal-link .metal-clip{container-type:inline-size}
.about-surface .metal-link .metal-clip iframe{
 width:180cqw;
 min-width:0;
 max-width:none;
 height:41.51cqw;
 aspect-ratio:1323 / 305.1;
 left:50%;
 top:0;
 transform:translate(-50%,-20%);
 opacity:0;
}
.about-surface .metal-clip.is-ready iframe{opacity:1}
@media(min-width:901px) and (min-height:501px), (min-width:1201px), (min-width:901px) and (pointer:fine){
 .about-surface>.metal-link{height:200px}
}
@media(max-width:900px), (min-width:901px) and (max-width:1200px) and (max-height:500px) and (pointer:coarse){
 .about-surface{--about-logo-height:clamp(75px,19.5vw,150px)}
 .about-surface>.metal-link{height:var(--about-logo-height)}
 .about-surface>.mobile-footer{
  transform:none;
  margin:40px 0 24px;
 }
}
@media(max-width:599px), (max-width:900px) and (max-height:500px), (min-width:901px) and (max-width:1200px) and (max-height:500px) and (pointer:coarse){
 .about-surface>.mobile-footer{margin-top:auto}
 .about-surface .accordion-scroll{margin-bottom:40px}
}
@media(min-width:600px) and (min-height:600px) and (max-width:900px){
 .about-surface>.metal-link{
  position:absolute;
  left:calc(-1 * var(--margin));
  right:calc(-1 * var(--margin));
  bottom:0;
  width:auto;
  height:var(--about-logo-height);
  margin:0;
 }
 .about-surface>.mobile-footer{
  position:absolute;
  left:0;
  right:0;
  bottom:calc(var(--about-logo-height) + 24px);
  margin:0;
 }
 .about-surface .accordion-scroll{z-index:5;padding-bottom:calc(var(--about-logo-height) + 96px)}
}